Metric Widget

The Metric widget displays a single key number from form data — either a count of responses or the sum of a numeric field. Use it to surface an important figure in an applet, such as the total number of submitted cases or the sum of a reported cost.

When to use this

• You want to display a single key figure from a form on a page
• You need to sum numeric values from a specific field
• You want to count responses that match a selection
• You want to complement an overview with numbers alongside lists and charts

How it works

The metric fetches data from a selected form and displays a single value. You choose whether the value should be a count of responses or the sum of a numeric field. Filters and a date range limit which responses are included. The appearance — icon, size, color, and orientation — controls how the metric is presented on the page.

Add a metric

1. Open the Design editor for your applet.
2. Add the Metric widget to the page.
3. Open the widget settings.
4. Select the Form the metric should use.
5. Configure Summation, Styling, and Filtering as needed.
6. Save your changes.

Widget settings

Form

Select the form you want to display data from. The rest of the settings — field selection and filters — depend on the form you choose here.

Title

Enter a title for the metric. The title is shown together with the value.

Description

Enter a description for the metric. Use it to clarify what the number represents.

Summation

The metric can summarize in two ways:

• Count Responses — counts the number of form responses that match the current filters.
• Sum over field — sums the values in a selected numeric field across the responses that match the filters.

Turn on Count Responses to count responses, or select a field in Sum over field to sum numeric values. Only one of the two options can be active at a time.

Styling

Icon

You can add an icon for your metric. Choose from any icon available in AppStudio. By default, no icon is selected.

Icon Size

The icon size is set to 36 pixels by default. It can be adjusted to 16, 18, 20, 24, 30, 36, 48, 60, or 72 pixels.

Font Size

The font size of the metric is set to 36 pixels by default. It can be adjusted to 16, 18, 20, 24, 30, 36, 48, 60, or 72 pixels.

Direction

You can display the icon and the metric value in different layouts. By default, the direction is set to Row. Available options:

Direction	Description
Row	Icon is shown to the left of the value.
Column	Icon is shown above the value.
Row Reversed	Icon is shown to the right of the value.
Column Reversed	Icon is shown below the value.

Color

Select a color for the metric using the color picker. You can enter the color directly, as a hex code, or as RGBA — where A (alpha) controls transparency.

Filtering

Open Filtering to limit which form responses are included in the metric. Add conditions by first selecting a field and then an operator. The available operators depend on the field type:

Operator
Is equal to
Is not equal to
Is empty
Is not empty
Includes
Does not include
Greater than
Less than
Is within
Is not within

After selecting an operator, enter a Term to complete the condition. For example, on a user field you pick a user as the term.

Add multiple conditions to filter the data that should be reflected in the metric. All conditions must be met for a response to be included.

Date filter

Enter the start and end date and time for the period you want to filter form responses on. The dates refer to when the form response was created.

Example

Scenario: You are building a case-management applet and want to display the number of open cases for the current month.

1. Add a Metric widget to the overview page.
2. Select the Case form as the data source.
3. Set the title to Open cases and the description to This month.
4. Turn on Count Responses.
5. Add a filter: field Status, operator =, term Open.
6. In the Date filter, select the current month.
7. Pick the cases icon, set icon and font size to 48, and direction to Row.

The page now shows the number of open cases for the month, updating in real time as new responses are submitted.

Tips

TIP

Use Count Responses when you only need a count. Use Sum over field when you actually want to add up numeric values — for example amounts or hours.

TIP

Keep the title and description short. The metric is visual — the number should be the dominant element.

Common mistakes

WARNING

If no data appears, check your filters. All conditions must be met at the same time for a response to be counted — a filter that is too narrow returns an empty result.

WARNING

The date filter applies to when the form response was created, not to the value in a date field. If you want to filter on a date field in the form, add it as a regular condition under Filtering instead.