Number field overview

Updated

The Number field is a Collection field used when the input is meant to be a numeric value.

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 include ratings, rankings, custom sort order, pricing, population, and quantities.

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 (e.g., 1), a Decimal (e.g., 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.

  1. Add a text element in a collection list or on a collection page
  2. Check the Get text from checkbox in the Inner Text Settings that appears
  3. Connect it to the relevant number field from the field dropdown
  4. 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.

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.

  1. Select the collection list you want to filter
  2. Go to the Settings panel
  3. Add a Sort order under Collection List Settings
  4. Select your number field in the first dropdown
  5. Choose the sort order in the second dropdown: smallest to largest, or largest to smallest
  6. 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:

  1. Select the collection list you want to filter
  2. Go to the Settings panel
  3. Add a Filter under Collection List Settings
  4. Select the relevant number field in the first dropdown
  5. Choose any of the following rules in the second field: Equals, Does Not Equal, Is Greater Than, Is Less Than, Is Between
  6. Specify the value(s) if needed
  7. 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

Learn more about filters

Show or hide elements based on a number field

You can use conditionals to show or hide elements based on a number field, as long as the element is inside a Collection list or on a Collection page.

For example, if you display star ratings, you can show a different image for each rating value (e.g., 1–5 stars). To show the 5-star image only when a rating equals 5:

  1. Select the 5-star image element (must be inside a Collection list or on a Collection page)

  2. Go to Element settings > Visibility

  3. Click the “plus” icon

  4. Choose your number field (e.g., “Rating”)

  5. Set the rule to Is

  6. Enter 5

  7. Set Visibility > Visible

  8. Set Else > Visibility > Hidden

  9. Click off the modal or press Esc on your keyboard to save the conditional

Repeat these steps for each rating value, updating the number and selecting the matching image (e.g., 4-star image = 4).

Related articles