Editors
Configuring the editor of a collection in Konstrukt, the back office 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 accessing via it's 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 but with 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 == KonstruktEditorMode.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 == KonstruktEditorMode.Create);
Adds the given property to the editor.
// Example
fieldsetConfig.AddField(p => p.FirstName, fieldConfig => {
...
});
By default Konstrukt will build the label from the property name, including splitting camel case names into sentence case, however you can set an explicit label if you'd prefer.
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, in which case you can achieve this by explicitly hiding the fields 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 Konstrukt will automatically choose a relevant data type for simple field types, however you can override this should you wish to use an alternative data type.
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 readonly 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 == KonstruktEditorMode.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 == KonstruktEditorMode.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 readonly mode.
// Example
fieldConfig.MakeReadOnly(ctx => ctx.EditorMode == KonstruktEditorMode.Create, "myReadOnlyEditor");
Sets the runtime visibility of the field.
// Example
fieldConfig.SetVisibility(ctx => ctx.EditorMode == KonstruktEditorMode.Create);
Last modified 1yr ago