Adding editable-duration component

For using the editable duration component you have to configure the Details Pane Template accordingly.

Editable-duration component

Editable duration component is an editable text component that allows to edit duration fields in two ways. The component allows following configuration options:

Component Arguments	Description
maxMilliseconds	Upper limit for the duration field.
minMilliseconds	Lower limit for the duration field.
DisableEditToggle	The basic behavior when the user edits the component and then leaves it is that it switches to a reading mode, where the user can't edit it and is viewing only the readable value. This behavior can be modified by setting the disableEditToggle property to "true", keeping the component in an editable state. It can be used in Details Pane for editing duration fields with the following template for example:
Format	Default value "HH:mm:ss:f25"
Value	Used for binding component to a data field.

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">
				Mark-In:
			</div>
            <div data-col="sm-8 xs-12 valign-center" class="editable-field">
				{{editable-duration maxMilliseconds=editModel.Duration disableEditToggle=true value=editModel.MarkIn format="HH:mm:ss.SSS" ariaLabel="Mark In"}}
			</div>
        {{/responsive-grid-area}}
    {{else}}
        {{#responsive-grid-area}}      
            <div data-col="sm-4 xs-12 valign-sm-center valign-xs-bottom">
				Mark-In:
			</div>
            <div data-col="sm-8 xs-12 valign-center">
				{{format-duration model.MarkIn}}
			</div>
        {{/responsive-grid-area}}
    {{/if}}
{{/form-container}}