Configure inline editing
Asset properties in a Properties widget can be edited directly in the widget, without starting the classic "Edit" dialog. Learn how to configure the basics of the inline editing directive.
Context
The Properties widget can be used on any asset page. Inline editing can be set up for all asset properties.
Prerequisites
The requirements for working with the inline editing directive in censhare Web are correctly set up features in the Master data of the censhare Admin Client.
Introduction
As of censhare 2018.2, the Property widget supports inline editing of properties. The <cs-inline-editing/> directive combines the display and edit configuration with the two modes "read" and "write". The "read" mode displays the asset properties like in the <cs-metadata-row/> directive. By clicking the "Edit" button of a property or double-clicking on the value, the mode switches to "write". This mode adds an input field around the selected property. Users can now enter or edit the value(s) of the property. After editing, the directive switches back to "read" mode. The two modes control not only the UI (buttons and fields), but also check out the asset and check it in again after editing. This ensures that an asset cannot be edited by other users at the same time. For the same purpose, the <cs-inline-editing/> directive must be placed inside a container with a cs-inline-editing-form. By default, the Properties widget is configured with a container in the following notation:
<div cs-inline-editing-form="$ctrl.inlineEditingFormConfig">This <div/> element is part of the widget and not visible or editable in the template.
Technically, the <cs-inline-editing/> directive is a wrapper that contains a <cs-metadata-row/> directive. The following table describes the attributes that are supported by the directive:
Attribute | Mandatory | Description |
property | yes | This attribute references the feature to be displayed or edited in the widget. The value is built following the pattern: "asset.traits.TRAIT.PROPERTY". Replace TRAIT by the trait key and PROPERTY by the property key in order to get a unique identifier. Remember that traits must be added to the dialog asset, otherwise nothing is shown in the widget and dialog. |
show-label | no | If this attribute is set, the feature name is displayed as label. The attribute has no value. |
class | no | With this attribute and the value "cs-is-small" censhare renders the label and value of the property in smaller font size. |
assetId | yes | This attribute controls contain the asset identifier that communicates with the inline editing form. The default value is "asset.traits.ids.id.value[0].value". Do not change it. |
Result
The selected asset properties can be edited directly in the widget, without starting the classic "Edit" dialog.