The Number field is a Collection field used when the input is meant to be a numeric value. You can display numbers and decimals in your Collection lists or on Collection pages. You can also use the number field to filter or sort a collection list or set conditional visibility on elements in Collection lists and pages.
Common uses
- Ratings
- Rankings
- Custom sort order
- Pricing
- Population
- Quantities
In this lesson
- Creating a number field
- Adding content to a number field
- Connecting number fields to text
- Sorting a Collection list using the number field
- Filtering a Collection list using the number field
- Setting conditional visibility using the number field
Creating a number field
A number field can be added to a new or existing Collection. In Collection settings, click on New Field and then choose the Number field.
Before saving the number field, you can specify a label for this field. You can also add a Help text that will appear below the label to guide Collaborators. Other options you can set for a number field are:
- Setting a minimum and/or a maximum number that is allowed for this field
- Specifying the format of the number, whether it’s an Integer(1), a Decimal(1.0), or can have Any format
- Allow negative numbers or don’t
And as with any field, you can specify if the field is required or not.
Adding content to a number field
The number field will only accept numeric values. And if any restrictions were set when creating the field, you and Collaborators won’t be able to enter numbers that don’t meet those criteria. Just select a Collection item in the CMS and add a number into the field.
Connecting number fields to text
The number field can be connected to any text element to dynamically populate Collection lists and pages with numeric data from Collection items.
- Add a text element in a collection list or on a collection page
- Check the Get text from checkbox in the Inner Text Settings that appears
- Connect it to the relevant number field from the field dropdown
- Optional: specify the format for decimal numbers
You can also access the Inner Text Settings by selecting the text element and either clicking on the settings icon next to the element label on the canvas or by going to the Settings panel (D).
You can remove the connection by unchecking the “Get text from” checkbox under Inner Text Settings.
Sorting a Collection list using the number field
You can use numbers to sort collection items in a number of ways. One example would be to sort rated items by showing highest rated items first.
- Select the collection list you want to filter
- Go to the Settings panel (D)
- Add a Sort order under Collection List Settings
- Select your number field in the first dropdown
- Choose the sort order in the second dropdown: smallest to largest, or largest to smallest
- Click Save
Filtering a Collection list using the number field
If you only want to show items in a Collection list that have for example a rating of 4 or higher, you can use filters. To filter your collection list using a number field:
- Select the collection list you want to filter
- Go to the Settings panel (D)
- Add a Filter under Collection List Settings
- Select the relevant number field in the first dropdown
- Choose any of the following rules in the second field: Equals, Does Not Equal, Is Greater Than, Is Less Than, Is Between
- Specify the value(s) if needed
- Click Save
The filter rules that you can use with the number field and values are:
- Equals - looks for Collection items with a number value equal to the value you specify for this rule
- Does Not Equal - looks for Collection items with a number value that isn’t equal to the value you specify for this rule
- Is Greater Than - looks for Collection items with a number value that is greater than the value you specify for this rule
- Is Less Than - looks for Collection items with a number value that is less than the value you specify for this rule
- Is Between - looks for Collection items with a number value that is between two values you specify for this rule
- Is set - looks for Collection items where the number value is set
- Is not set - looks for Collection items where the number value is not set
Setting conditional visibility using the number field
You can use conditional visibility with text connected to a number field or with other elements. Here is an example:
Show different graphics for each rating value
Let’s say you want to display ratings using stars. Conditional visibility allows you to show a different image for each rating value. So, you'll add 5 images, each showing the different rating values. In this examples, we're using stars. For example, to show the image of 5 stars for a rating of 5:
- Select the 5-star image
- Go to the Settings panel (D)
- Add a Condition (when this element is visible) under Conditional visibility
- Select the “Ratings” number field in the first dropdown
- Choose Is Equal to in the second dropdown
- Type in 5 in the third field
- Click Save
Repeat for each Rating value like so:
