Skip to main content
Skip table of contents

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 ArgumentsDescription
maxMillisecondsUpper limit for the duration field.
minMillisecondsLower 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:

FormatDefault value "HH:mm:ss:f25"
ValueUsed 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}}



JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.