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
{{#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}}