Numeric properties should be specified as string properties in the template.
Properties that are expected to have numeric values can be associated with editors that are designed to work with numbers. These editors guarantee that the property is assigned a numeric value.
A numeric stepper enables content administrators to select a numeric value from a set of possible values by stepping through values or typing into an input field.
The numeric stepper provides a single-line input text field and a pair
of arrow buttons for stepping through values. If a user enters number that is
not a multiple of the
stepSize
property or is not in the range between the
maximum and minimum properties, this property is set to the nearest valid
value.
To add a numeric stepper to a template:
Insert an
editors/NumericStepperEditor
element withineditors/DefaultEditorPanel
.Specify additional attributes for the editor:
Attribute Description propertyName
Required. The name
of the string property that this editor is associated with. This property must be declared in the same template as the string editor.enabled
If set to false, the numeric stepper editor displays in Experience Manager but the value cannot be changed by the user. By default, numeric stepper editor are enabled. width
The width, in pixels, of the editor. The default width is 60. height
The height, in pixels, of the editor. The default height is 24. minValue
The minimum value of the property bound to this editor. The minValue
can be any number, including a fractional value. The default minimum value is 0.maxValue
The maximum value of the property bound to this editor. The maxValue
can be any number, including a fractional value. The default maximum value is 10.stepSize
The increment by which the property value is increased or decreased when a user clicks on the up or down arrows. The value must be a multiple of this number. The default step size is 1.
The following example shows the configuration for a numeric stepper:
{ "ecr:type":"template", "@group":"Navigation", "@description":"${template.description}", "@thumbnailUrl":"thumbnail.jpg", "typeInfo":{ <!-- additional elements omitted from this example --> "numRefinements":{ "@propertyType":"String" }, <!-- additional elements omitted from this example --> }, "defaultContentItem":{ "@name":"Dimension Navigation", "dimensionName":"", "dimensionId":"", "sort":"default", "showMoreLink":false, "moreLinkText":"Show More Refinements...", "lessLinkText":"Show Less Refinements...", "numRefinements":"10", "maxNumRefinements":"200", "boostRefinements":[ ], "buryRefinements":[ ] }, "editorPanel":{ "editor":"editors/DefaultEditorPanel", "children":[ <!-- additional elements omitted from this example --> { "editor":"editors/NumericStepperEditor", "enabled":true, "label":"${property.numRefinements.label}", "maxValue":10000, "propertyName":"numRefinements" }, ] } <!-- additional elements omitted from this example --> }