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
71 changes: 46 additions & 25 deletions 15/umbraco-ui-builder/actions/action-visibility.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
description: Controlling the visibility of actions in Umbraco UI Builder, the backoffice UI builder for Umbraco.
description: Controlling the visibility of actions in Umbraco UI Builder.
---

# Action Visibility

By default actions are not visible in the UI and you must expressly define when and where an action should display. This can be achieved in two ways, either on the action definition itself or at the point of registration on the collections config.
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 the default action visibility
## Controlling Default Action Visibility

To define the default visibility of an action at the action level you can do this by overriding the `IsVisible` method of the `Action<>` base class.
To define the default visibility of an action, override the `IsVisible` method of the `Action<>` base class.

````csharp
// Example
Expand All @@ -24,86 +24,107 @@ public class MyAction : Action<ActionResult>
}
````

The `IsVisible` method is passed a `ActionVisibilityContext` which you should use to decide whether the action should display, returning `true` if it should, or `false` if it should not. For more information check the [Action visibility context](#action-visibility-context).
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 an actions visibility
## Overriding Action Visibility

Overriding an actions visibility is controlled via the [collections](../collections/overview.md) configuration.
You can override an action's visibility in the [Collections](../collections/overview.md) settings.

### **AddAction&lt;TMenuActionType&gt;(Lambda actionConfig = null) : CollectionConfigBuilder&lt;TEntityType&gt;**
### Using the `AddAction<TMenuActionType>()` Method

Adds an action of the given type to the collection with the given visibility.
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
// Example
collectionConfig.AddAction<ExportMenuAction>(actionConfig => actionConfig
.SetVisibility(x => x.ActionType == ActionType.Bulk
|| x.ActionType == ActionType.Row)
);
````

### **AddAction(Type actionType, Lambda actionConfig = null) : CollectionConfigBuilder&lt;TEntityType&gt;**
### 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

Adds an action of the given type to the collection with the given visibility.
```cs
AddAction(Type actionType, Lambda actionConfig = null) : CollectionConfigBuilder<TEntityType>
```

#### Example

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

### **AddAction(IAction action, Lambda actionConfig = null) : CollectionConfigBuilder&lt;TEntityType&gt;**
### Using the `AddAction(IAction action, Lambda actionConfig = null)` Method

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

Adds the given action to the collection with the given visibility.
#### Method Syntax

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

#### Example

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

## Action visibility context
## Action Visibility Context

When controlling the visibility of an action you will be given a `ActionVisibilityContext` object from which you can decide whether to show the action or not. The visibility context contains two key pieces of information on which you can base this decision.
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 action type property is an enum property that define which area of the UI it is that wishes to access this action. Enabling an action to display for a given action type will determine where an action is displayed.
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 determines that the action will be displayed in both the tree of the collection and its list view actions menu.
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 determines that the action will be displayed in the actions menu of a collection editor UI.
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 determines that the action will be displayed in the collection list view bulk actions menu.
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 determines that the action will be displayed in the collection list view action row menu.
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 determines that the action will be displayed as a sub button in an entity editors save button. All `Save` action types trigger a save before the action is executed and so to convey this, all `Save` action type button labels are prefixed `Save & [Action Name]`
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 user groups collection contains a list of Umbraco `IReadOnlyUserGroup` objects for the current logged-in backoffice user. This allows you to control the visibility of actions for given user group members.
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.
12 changes: 6 additions & 6 deletions 15/umbraco-ui-builder/actions/inbuilt-actions.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
---
description: A list of inbuilt actions that come with Umbraco UI Builder, the backoffice UI builder for Umbraco.
description: A list of inbuilt actions that come with Umbraco UI Builder.
---

# Inbuilt Actions

Umbraco UI Builder comes with some inbuilt actions that are available for you to use straight away.
Umbraco UI Builder provides different inbuilt actions that you can use right away.

## ExportEntityAction

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

Provides a Comma-Separated Values (CSV) export functionality converting all properties to column headings and rendering each entity property values on each row.
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
**Namespace:** `Umbraco.UIBuilder.Infrastructure.Configuration.Actions`

Provides a Comma-Separated Values (CSV) import functionality matching column headings with entity properties and mapping row values to an entity.
Imports data from a Comma-Separated Values (CSV) file. This action matches column headings with entity properties and maps row values to an entity.
6 changes: 3 additions & 3 deletions 15/umbraco-ui-builder/actions/overview.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
description: Configuring actions in Umbraco UI Builder, the backoffice UI builder for Umbraco.
description: Learn how to configure actions in Umbraco UI Builder.
---

# Actions

Actions provide an API to perform custom tasks against a collection and its entities from multiple locations in the UI. Examples: menu actions, bulk actions, or individual table row actions.
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.

![Bulk Actions UI](../images/bulk_actions.png)

Get started with actions by learning about the basics.
To get started with actions, check out the basics:

{% content-ref url="the-basics.md" %}
[the-basics.md](the-basics.md)
Expand Down
84 changes: 52 additions & 32 deletions 15/umbraco-ui-builder/actions/the-basics.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
description: Configuring actions in Umbraco UI Builder, the backoffice UI builder for Umbraco.
description: Configuring actions in Umbraco UI Builder.
---

# The Basics

Actions are a powerful way of adding custom functionality to Umbraco UI Builder without needing to create custom UI elements. By providing an action to run, Umbraco UI Builder can automatically trigger actions from a number of UI locations.
Actions allow you to add custom functionality to Umbraco UI Builder without creating custom UI elements. By providing an action to run, Umbraco UI Builder can trigger actions from different UI locations.

## Defining an action
## Defining an Action

To define an action create a class that inherits from the base class `Action<>` and configure it like below:
To define an action, create a class that inherits from the base class `Action<>` and configure it as shown below:

````csharp
// Example
Expand All @@ -26,33 +26,32 @@ public class MyAction : Action<ActionResult>
}
````

The required configuration options are:
### Configuration Options

* **Name:** The name of the action.
* **Alias:** A unique alias for the action.
* **Icon:** An icon to display next to the name in the action button.
* **Execute:** The method to run against a given list of entities.
| Option | Description | Required |
|:-------------:|:--------------------------------------------------------------------------:|----------|
| Name | The name of the action. | Yes |
| Alias | A unique alias for the action. | Yes |
| Icon | An icon to display next to the action’s name. | Yes |
| Execute | The method that runs for the given list of entities. | Yes |
| ConfirmAction | Set whether a confirm dialog should display before performing this action. | No |

Additional optional configuration options are:

* **ConfirmAction:** Set whether a confirm dialog should display before performing this action.

The generic argument is a return type for the action. See [Controlling the action result](#controlling-the-action-result) below.
The generic argument specifies the return type for the action. For more details, see the [Controlling the Action Result](#controlling-the-action-result) section below.

{% hint style="info" %}
You can use dependency injection to inject any services you require to perform your specific task. When injecting dependencies, it's always recommended that you inject `Lazy<YourService>` implementations of the required services to ensure they are only resolved when needed.
You can use dependency injection to inject any services required for your specific task. It's recommended to inject `Lazy<YourService>` implementations of the required services to ensure they are resolved only when needed.
{% endhint %}

## Controlling the action result
## Controlling the Action Result

Actions by default will return a `ActionResult` but you can return other types of result by swapping the `Action<>` generic argument.
By default, actions return an `ActionResult`, but you can return other types by changing the `Action<>` generic argument.

* **`ActionResult`** - Standard result with a boolean `Success` value.
* **`FileActionResult`** - Returns a file stream / bytes and triggers a download dialog.
* **`FileActionResult`** - Returns a file stream or bytes and triggers a download dialog.

## Capturing settings for an action
## Capturing Settings for an Action

Sometimes you may need to collect further user input before you can perform an action. To achieve this you can use the `Action<>` base class that accepts an additional `TSetting` generic argument.
Sometimes, you need to collect user input before performing an action. You can achieve this by using the `Action<>` base class with an additional `TSetting` generic argument.

````csharp
// Example
Expand Down Expand Up @@ -83,37 +82,58 @@ public class MyActionSettings
}
````

By implementing this base class you are required to implement an additional `Configure` method which accepts a `SettingsConfigBuilder<>` parameter. You should use this parameter calling the builders fluent API to define the settings dialog UI and how it maps to the settings type. With the settings config builder you are able to create fieldsets and fields with the same fluent API as defined in the [Collection Editors section](../collections/editors.md#adding-a-fieldset-to-a-tab).
By implementing this base class, you must also implement the `Configure` method which accepts a `SettingsConfigBuilder<>` parameter. Use this builder to define the settings dialog UI and how it maps to the settings type. You can create fieldsets and fields with the same fluent API as in the [Collection Editors](../collections/editors.md#adding-a-fieldset-to-a-tab) section.

Additionally, the `Execute` method now accepts an extra `settings` parameter, which Umbraco UI Builder will pre-populate with the user-entered values. You can adjust the action's behavior based on this data.

## Adding an Action to a Collection

In addition to this `Configure` method, the `Execute` method will now accept an additional `settings` parameter of the settings type. This will be pre-populated by Umbraco UI Builder with the value entered by the user, allowing you to alter your actions behavior accordingly.
Actions are added via the [Collections](../collections/overview.md) settings.

## Adding an action to a collection
### Using the `AddAction<TMenuActionType>()` Method

Actions are added via the [Collections](../collections/overview.md) configuration.
Adds an action of the specified type to the collection.

### **AddAction&lt;TMenuActionType&gt;() : CollectionConfigBuilder&lt;TEntityType&gt;**
#### Method Syntax

Adds an action of the given type to the collection.
```cs
AddAction<TMenuActionType>() : CollectionConfigBuilder<TEntityType>
```

#### Example

````csharp
// Example
collectionConfig.AddAction<ExportMenuAction>();
````

#### **AddAction(Type actionType) : CollectionConfigBuilder&lt;TEntityType&gt;**
#### Using the `AddAction(Type actionType)` Method

Adds an action of the specified type to the collection.

Adds an action of the given type to the collection.
#### Method Syntax

```cs
AddAction(Type actionType) : CollectionConfigBuilder<TEntityType>
```

#### Example

````csharp
// Example
collectionConfig.AddAction(actionType);
````

#### **AddAction(IAction action) : CollectionConfigBuilder&lt;TEntityType&gt;**
#### Using the `AddAction(IAction action)` Method

Adds the given action to the collection.

#### Method Syntax

```cs
AddAction(IAction action) : CollectionConfigBuilder<TEntityType>
```

#### Example

````csharp
// Example
collectionConfig.AddAction(action);
````
21 changes: 10 additions & 11 deletions 15/umbraco-ui-builder/cards/custom-cards.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,17 +29,16 @@ public class AvgPersonAgeCard : Card
}
````

The required configuration options are:

* **Name:** The name of the card.
* **Alias:** A unique alias for the card.
* **GetValue(object parentId = null):** A method to retrieve the card's value.

The optional configuration options are:

* **Icon:** An icon displaed in the card.
* **Color:** The color of the card.
* **Suffix:** The suffix displayed after the card value.
### Configuration Options

| Option | Description | Required |
|:--------------------------------:|:------------------------------------------:|----------|
| Name | The name of the card. | Yes |
| Alias | A unique alias for the card. | Yes |
| GetValue(object parentId = null) | A method to retrieve the card's value. | Yes |
| Icon | An icon displaed in the card. | No |
| Color | The color of the card. | No |
| Suffix | The suffix displayed after the card value. | No |

## Adding a Custom Card to a Collection

Expand Down