Adding editable input component

An input form field can be added to the template using following syntax:

CODE

{{input value=editModel.Title type="text" ariaLabel="Title"}}

For value attribute, always use "model.{{Binding}}" when in non-edit mode and "editModel.{{Binding}}" in edit mode.

Adding a placeholder to the input field.

Normally, a placeholder works as a hint for the user updating a value e.g. hint for a valid date format DD:MM:YY or mailid.

To add a placeholder simply add attribute placeholder and assign it some value.

CODE

{{input value=editModel.Title type="text" placeholder="Entry Title" ariaLabel="Title"}}

Special Case: Title field

For title field, we have a default value for placeholder which can be used using "editModel.TitlePlaceholder". If nothing is specified by the user at the time of creating an entry placeholder value is used as entry field.

The default value TitlePlaceholder looks like : "%EntryType% of %User% at computer %UserComputer%".

Example code

Code

XML

{{#form-container legacyController=legacyController}}
    {{#if editable}}
        {{#responsive-grid-area}}
            <div data-col="sm-4 xs-12 valign-sm-center valign-xs-bottom" class="details-area-text-bold">
				{{label-helper value=editModel.Title label="Title:"}}
			</div>
            <div data-col="sm-8 xs-12 valign-center" class="editable-field">
				{{input value=editModel.Title placeholder=editModel.TitlePlaceholder type="text"}}
			</div>
        {{/responsive-grid-area}}
    {{else}}
        {{#responsive-grid-area}}       
            <div data-col="sm-4 xs-12 valign-sm-center valign-xs-bottom" class="details-area-text-bold">
				Title:
			</div>
            <div data-col="sm-8 xs-12 valign-center" class="details-area-text-bold">
				{{model.Title}}
			</div>
        {{/responsive-grid-area}}
    {{/if}}
{{/form-container}}

Appearance in Content Manager