Configure inline editing

Context

The Properties widget can be used on any asset page. Inline editing can be setup for all asset properties.

Prerequisites

The requirement for working with the inline editing directive in censhare Web are correctly setup 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 a smaller font size.
assetId	yes	This attribute control contains 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.