Overview of Numeric Input Field

The Numeric Input Field is a Collection field utilized when the expected input is a numerical value. Numeric and decimal values can be exhibited in your Collection lists or on Collection pages. The numeric field can also be utilized for filtering or organizing a collection list or applying conditional visibility on elements within Collection lists and pages.

Popular applications

• Assessments
• Ranks
• Custom ordering
• Pricing
• Population
• Quantities

Throughout this tutorial

1. Establishing a numeric input field
2. Incorporating content into a numeric field
3. Linking numeric fields to texts
4. Sorting a Collection list using the numeric field
5. Filtering a Collection list using the numeric field
6. Implementing conditional visibility using the numeric field

Establishing a Numeric Input Field

A numeric field can be appended to a new or existing Collection. Within Collection settings, tap on New Field and then select the Numeric field.

Prior to saving the numeric field, you can define a label for this field. You can also include Help text which will be displayed beneath the label to offer guidance to Collaborators. Other options available for a numeric field include:

• Setting a minimum and/or a maximum allowable number for this field
• Specifying the number format, whether it’s an Integer (e.g., 1), a Decimal (e.g., 1.0), or can have Any format
• Permitting or disallowing negative numbers

Similar to any field, you can indicate whether the field is mandatory or not.

Including Content in a Numeric Input Field

The numeric field solely accepts numerical values. If any constraints were specified when creating the field, you and Collaborators will be prevented from entering numbers that do not adhere to those criteria. Simply choose a Collection item in the CMS and insert a number into the field.

Associating Numeric Fields with Text

The numeric field can be linked to any text element to dynamically insert numeric data from Collection items into Collection lists and pages.

1. Introduce a text element in a collection list or on a collection page
2. Tick the Get text from checkbox in the Inner Text Settings that appears
3. Connect it to the relevant numeric field from the field dropdown
4. Optionally: define the format for decimal numbers

You can access the Inner Text Settings by selecting the text element and either clicking on the settings icon adjacent to the element label on the canvas or by navigating to the Settings panel (D).

You can sever the connection by unchecking the “Get text from” checkbox under Inner Text Settings.

Sorting a Collection list using the numeric field

Various techniques enable utilizing numbers to arrange collection items. One illustration would involve sorting rated items by displaying the highest-rated items first.

1. Select the collection list you wish to filter
2. Navigate to the Settings panel (D)
3. Incorporate a Sort order within Collection List Settings
4. Pick your numeric field in the initial dropdown
5. Select the sort order in the second dropdown: from smallest to largest, or from largest to smallest
6. Press Save

Filtering a Collection list using the numeric field

If you solely want to exhibit items in a Collection list that possess, for instance, a rating of 4 or higher, you can implement filters. To filter your collection list utilizing a numeric field:

1. Select the collection list you wish to filter
2. Proceed to the Settings panel (D)
3. Integrate a Filter within Collection List Settings
4. Select the pertinent numeric field in the initial dropdown
5. Select any of the subsequent rules in the second field: Equals, Does Not Equal, Is Greater Than, Is Less Than, Is Between
6. Specify the value(s) if necessary
7. Click Save

The filtering rules that can be employed with the numeric field and values are:

• Equals – examines Collection items possessing a number value equivalent to the value specified for this rule
• Does Not Equal – checks for Collection items with a number value that differs from the value specified for this rule
• Is Greater Than – searches for Collection items with a number value greater than the value specified for this rule
• Is Less Than – looks for Collection items with a number value less than the value specified for this rule
• Is Between – looks for Collection items with a number value between two values specified for this rule
• Is set – searches for Collection items where the number value is established
• Is not set – searches for Collection items where the number value is not established

Discover more about filters

Implementing conditional visibility utilizing the numeric field

You can utilize conditional visibility with text linked to a numeric field or with alternative elements. An instance is provided below:

Presenting distinct graphics for each rating value

Imagine you aim to demonstrate ratings through stars. Conditional visibility permits you to display a unique image for each rating value. Hence, you will include 5 images, each illustrating various rating values. For instance, to reveal the image of 5 stars for a rating of 5:

1. Select the 5-star image
2. Access the Settings panel (D)
3. Introduce a Condition (when this element is visible) under Conditional visibility
4. Select the “Ratings” numeric field in the initial dropdown
5. Choose Is Equal to in the second dropdown
6. Insert 5 in the third box
7. Tap Save

Repeat this process for every Rating value as follows: