Editors
Configuring the editor of a collection in Umbraco UI Builder, the backoffice UI builder for Umbraco.
An editor is the user interface used to edit an entity and is made up of tabs and property editors.
A collection editor
The editor configuration is a sub-configuration of a
Collection config builder instance and is accessed via its Editor method.Accesses the editor config of the given collection.
// Example
collectionConfig.Editor(editorConfig => {
...
});
Adds a tab to the editor.
// Example
editorConfig.AddTab("General", tabConfig => {
...
});
A slidebar is a smaller area that is displayed to the right of the main editor. The sidebar can also contain fieldsets and fields in the same way tabs can. However, it is a much more limited display area so you'll need to choose your field types carefully. The sidebar is a great location to display entity metadata.
Configures the sidebar for the tab.
// Example
tabConfig.Sidebar(sidebarConfig => {
...
});
Sets the runtime visibility of the tab.
// Example
tabConfig.SetVisibility(ctx => ctx.EditorMode == EditorMode.Create);
Adds the given fieldset to the tab.
// Example
tabConfig.AddFieldset("Contact", fieldsetConfig => {
...
});
Sets the runtime visibility of the fieldset.
// Example
fieldsetConfig.SetVisibility(ctx => ctx.EditorMode == EditorMode.Create);
Adds the given property to the editor.
// Example
fieldsetConfig.AddField(p => p.FirstName, fieldConfig => {
...
});
By default, Umbraco UI Builder will build the label from the property name, including splitting camel case names into sentence cases. However, you can set an explicit label if preferred.
Sets the label for the editor field.
// Example
fieldConfig.SetLabel("First Name");
Sometimes you may have a field editor that would work better in full width. You can achieve this by explicitly hiding the field label.
Hides the label for the editor field.
// Example
fieldConfig.HideLabel();
Sets the description for the editor field.
// Example
fieldConfig.SetDescription("Enter your age in years");
By default, Umbraco UI Builder will automatically choose a relevant Data Type for basic field types. However, if you wish to use an alternative Data Type then you can override this.
Set the Data Type of the current field to the Umbraco Data Type with the given name.
// Example
fieldConfig.SetDataType("Richtext Editor");
Set the Data Type of the current field to the Umbraco Data Type with the given id.
// Example
fieldConfig.SetDataType(-88);
Sets the default value to a known constant.
// Example
fieldConfig.SetDefaultValue(10);
Sets the default value via a function that gets evaluated at time of entity creation.
// Example
fieldConfig.SetDefaultValue(() => DateTime.Now);
Makes the given field required.
// Example
fieldConfig.MakeRequired();
Defines the regular expression to use when validating the field.
// Example
fieldConfig.SetValidationRegex("[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}");
Makes the current field read-only disabling editing in the UI.
// Example
fieldConfig.MakeReadOnly();
Makes the current field read-only disabling editing in the UI. Provides a custom formatting expression to use when rendering the value as a string.
// Example
fieldConfig.MakeReadOnly(distanceProp => $"{distanceProp:## 'km'}");
Makes the current field read-only disabling editing in the UI. Provides the name or id of a datatype to use when in read-only mode.
// Example
fieldConfig.MakeReadOnly("myReadOnlyEditor");
Makes the current field read-only disabling editing in the UI if the given runtime predicate is true.
// Example
fieldConfig.MakeReadOnly(ctx => ctx.EditorMode == EditorMode.Create);
Makes the current field read-only disabling editing in the UI if the given runtime predicate is true. Provides a custom formatting expression to use when rendering the value as a string.
// Example
fieldConfig.MakeReadOnly(ctx => ctx.EditorMode == EditorMode.Create, distanceProp => $"{distanceProp:## 'km'}");
Makes the current field read-only disabling editing in the UI if the given runtime predicate is true. Provides the name or id of a datatype to use when in read-only mode.
// Example
fieldConfig.MakeReadOnly(ctx => ctx.EditorMode == EditorMode.Create, "myReadOnlyEditor");
Sets the runtime visibility of the field.
// Example
fieldConfig.SetVisibility(ctx => ctx.EditorMode == EditorMode.Create);
Last modified 1mo ago