Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions 15/umbraco-ui-builder/.gitbook.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
root: ./

​structure:
readme: README.md
summary: SUMMARY.md
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 29 additions & 0 deletions 15/umbraco-ui-builder/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
description: A guide to using Umbraco UI Builder for creating custom backoffice UIs.
---

# Umbraco UI Builder Documentation

Umbraco UI Builder is a tool for creating custom Backoffice User Interfaces (UIs) in Umbraco using a fluent API.

![Example Umbraco UI Builder UI](images/listview.png)

If you have a custom data store that you want to manage within Umbraco, you can use Umbraco UI Builder. With few lines of code, you can configure a custom administration UI, and reuse many core components with a consistent look and feel.

With Umbraco UI Builder, custom backoffice integrations can now be set up in minutes rather than days.

## Using The Documentation

This documentation is intended for **developers** with a basic understanding of Umbraco and C#/MVC principles.

If you are new to Umbraco UI Builder, it is recommended to start with the [Getting Started](getting-started/requirements.md) section. This section covers system requirements and installation instructions.

Once you have Umbraco UI Builder installed, explore the [Guides](guides/creating-your-first-integration.md) section. This section provides a quick-start example on configuring Umbraco UI Builder.

Use the main menu to explore features in detail and navigate directly to topics of interest.

For additional resources and best practices, visit the [Miscellaneous](miscellaneous/conventions.md) section.

## Getting Help

If you need assistance, refer to our support channels for help and troubleshooting.
95 changes: 95 additions & 0 deletions 15/umbraco-ui-builder/SUMMARY.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
# Table of contents

* [Umbraco UI Builder Documentation](README.md)
* [Legacy Documentation](legacy-documentation.md)
* [Known Issues](known-issues.md)
* [Release Notes](release-notes.md)

## Getting Started

* [First Steps with UI Builder](getting-started/first-steps-with-ui-builder.md)
* [Requirements](getting-started/requirements.md)
* [Installing Umbraco UI Builder](getting-started/installation.md)
* [Licensing](getting-started/licensing-model.md)
* [Configuration](getting-started/configuration.md)
* [User Interface](getting-started/user-interface.md)

## Upgrading

* [Upgrade your UI Builder setup](upgrading/upgrade-your-ui-builder-setup.md)
* [Upgrading Umbraco UI Builder](upgrading/upgrade.md)
* [Version Specific Upgrade Notes](upgrading/version-specific.md)
* [Migrate from Konstrukt to Umbraco UI Builder](upgrading/migrating-from-konstrukt-to-umbraco-ui-builder.md)

## How-to Guides

* [Creating your First Integration](guides/creating-your-first-integration.md)

## Areas

* [Explore Areas in UI Builder](areas/overview.md)
* [Sections](areas/sections.md)
* [Summary Dashboards](areas/summary-dashboards.md)
* [Trees](areas/trees.md)
* [Folders](areas/folders.md)
* [Dashboards](areas/dashboards.md)
* [Context Apps](areas/context-apps.md)

## Collections

* [Work with Collections in UI Builder](collections/overview.md)
* [The Basics](collections/the-basics.md)
* [List Views](collections/list-views.md)
* [Field Views](collections/field-views.md)
* [Editors](collections/editors.md)
* [Child Collections](collections/child-collections.md)
* [Child Collection Groups](collections/child-collection-groups.md)
* [Retrieve Child Collections](collections/retrieve-child-collections.md)
* [Related Collections](collections/related-collections.md)
* [Entity Identifier Converters](collections/entity-identifier-converters.md)
* [Localization](collections/localization.md)

## Searching

* [Add Search to Your Collections](searching/overview.md)
* [Searchable Properties](searching/searchable-properties.md)

## Filtering

* [Filter Your Data with Ease](filtering/overview.md)
* [Global Filters](filtering/global-filters.md)
* [Data Views](filtering/data-views.md)
* [Data Views Builders](filtering/data-views-builders.md)
* [Filterable Properties](filtering/filterable-properties.md)

## Actions

* [Trigger Actions in UI Builder](actions/overview.md)
* [The Basics](actions/the-basics.md)
* [Action Visibility](actions/action-visibility.md)
* [Inbuilt Actions](actions/inbuilt-actions.md)

## Cards

* [Display Insights with Cards](cards/overview.md)
* [Count Cards](cards/count-cards.md)
* [Custom Cards](cards/custom-cards.md)

## Property Editors

* [Enhance Input with Property Editors](property-editors/overview.md)
* [Entity Picker](property-editors/entity-picker.md)

## Advanced

* [Ready to go deeper?](advanced/ready-to-go-deeper.md)
* [Virtual Sub Trees](advanced/virtual-sub-trees.md)
* [Encrypted Properties](advanced/encrypted-properties.md)
* [Value Mappers](advanced/value-mappers.md)
* [Repositories](advanced/repositories.md)
* [Events](advanced/events.md)

## Miscellaneous

* [Conventions](miscellaneous/conventions.md)
* [Umbraco Aliases](miscellaneous/umbraco-aliases.md)
130 changes: 130 additions & 0 deletions 15/umbraco-ui-builder/actions/action-visibility.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
---
description: Controlling the visibility of actions in Umbraco UI Builder.
---

# Action Visibility

By default, actions are hidden in the UI. You must define when and where an action should appear. This can be done either at the action definition level or when registering it in the collection config.

## Controlling Default Action Visibility

To define the default visibility of an action, override the `IsVisible` method of the `Action<>` base class.

````csharp
// Example
public class MyAction : Action<ActionResult>
{
...
public override bool IsVisible(ActionVisibilityContext ctx)
{
return ctx.ActionType == ActionType.Bulk
|| ctx.ActionType == ActionType.Row;
}
...
}
````

The `IsVisible` method receives an `ActionVisibilityContext`. You can use this context to decide whether the action should be displayed. Return `true` to show it, or `false` to hide it. For more information, see the [Action visibility context](#action-visibility-context) section below.

## Overriding Action Visibility

You can override an action's visibility in the [Collections](../collections/overview.md) settings.

### Using the `AddAction<TMenuActionType>()` Method

Adds an action of the given type to the collection with the specified visibility.

#### Method Syntax

```cs
AddAction<TMenuActionType>(Lambda actionConfig = null) : CollectionConfigBuilder<TEntityType>
```

#### Example

````csharp
collectionConfig.AddAction<ExportMenuAction>(actionConfig => actionConfig
.SetVisibility(x => x.ActionType == ActionType.Bulk
|| x.ActionType == ActionType.Row)
);
````

### Using the `AddAction(Type actionType, Lambda actionConfig = null)` Method

Adds an action of the given type to the collection by specifying the action type dynamically using `Type` instead of a generic type.

#### Method Syntax

```cs
AddAction(Type actionType, Lambda actionConfig = null) : CollectionConfigBuilder<TEntityType>
```

#### Example

````csharp
collectionConfig.AddAction(typeof(ExportMenuAction), actionConfig => actionConfig
.SetVisibility(x => x.ActionType == ActionType.Bulk
|| x.ActionType == ActionType.Row)
);
````

### Using the `AddAction(IAction action, Lambda actionConfig = null)` Method

Adds the already defined action instance to the collection with the specified visibility.

#### Method Syntax

```cs
AddAction(IAction action, Lambda actionConfig = null) : CollectionConfigBuilder<TEntityType>
```

#### Example

````csharp
collectionConfig.AddAction(action, actionConfig => actionConfig
.SetVisibility(x => x.ActionType == ActionType.Bulk
|| x.ActionType == ActionType.Row)
);
````

## Action Visibility Context

When controlling the visibility of an action, you will receive an `ActionVisibilityContext` object. This context allows you to decide whether to show the action. The context contains two key pieces of information for this decision.

### ActionType

The `ActionType` property is an enum property that defines which area of the UI wants to access the action. This property helps determine where the action is displayed.

#### ContainerMenu

The `ContainerMenu` action type displays the action in both the collection tree and its list view actions menu.

![Container Menu](../images/container_actions_menu.png)

#### EntityMenu

The `EntityMenu` action type shows the action in the collection editor UI's actions menu.

![Entity Menu](../images/entity_actions_menu.png)

#### Bulk

The `Bulk` action type displays the action in the collection list view bulk actions menu.

![Bulk Actions](../images/bulk_actions_menu.png)

#### Row

The `Row` action type shows the action in the collection list view action row menu.

![Row Actions](../images/row_actions_menu.png)

#### Save

The `Save` action type displays the action as a sub-button in the entity editor’s save button. All `Save` actions trigger a save before executing. Their labels are prefixed with `Save & [Action Name]`.

![Save Actions](../images/save_actions_menu.png)

### UserGroups

The `UserGroups` collection contains a list of `IReadOnlyUserGroup` objects for the current logged-in backoffice user. This allows you to control action visibility for members of specific user groups.
19 changes: 19 additions & 0 deletions 15/umbraco-ui-builder/actions/inbuilt-actions.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
description: A list of inbuilt actions that come with Umbraco UI Builder.
---

# Inbuilt Actions

Umbraco UI Builder provides different inbuilt actions that you can use right away.

## ExportEntityAction

**Namespace:** `Umbraco.UIBuilder.Infrastructure.Configuration.Actions`

Exports entity data to a Comma-Separated Values (CSV) file. It converts all properties into column headings and renders each entity's property values in rows.

## ImportEntityAction

**Namespace:** `Umbraco.UIBuilder.Infrastructure.Configuration.Actions`

Imports data from a Comma-Separated Values (CSV) file. This action matches column headings with entity properties and maps row values to an entity.
13 changes: 13 additions & 0 deletions 15/umbraco-ui-builder/actions/overview.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
description: >-
Actions allow users to interact with data—like saving, deleting, or running
custom processes.
---

# Trigger Actions in UI Builder

Actions allow you to perform custom tasks on collections and their entities from different areas in the UI. For Example, menu actions, bulk actions, or individual table row actions.

This section covers the basics of configuring actions, controlling their visibility, and using inbuilt options for quick setup.

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>The Basics</strong></td><td><p>Understand what actions are, how they work, and how to set them up in UI Builder.</p><p></p></td><td><a href="the-basics.md">the-basics.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Tutorials_Basic_Website.png">Documentations Icons_Umbraco_CMS_Tutorials_Basic_Website.png</a></td></tr><tr><td><strong>Action Visibility</strong></td><td><p>Control when and where actions are visible based on context or conditions.</p><p></p></td><td><a href="action-visibility.md">action-visibility.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_Deploy_Setup.png">Documentations Icons_Umbraco_Deploy_Setup.png</a></td></tr><tr><td><strong>Inbuilt Actions</strong></td><td>Use UI Builder’s pre-defined actions to handle common tasks with minimal setup.</td><td><a href="inbuilt-actions.md">inbuilt-actions.md</a></td><td><a href="../.gitbook/assets/Documentations Icons_Umbraco_CMS_Tutorials_Umbraco_Forms_and_Zapier.png">Documentations Icons_Umbraco_CMS_Tutorials_Umbraco_Forms_and_Zapier.png</a></td></tr></tbody></table>
Loading
Loading