summary
Summarize the information in the jig at the bottom of the screen using the summary component. For example, a count of the number orders, or the number of items in a cart for an online shopping app.
The summary is fixed and displays even when the screen is scrolled. Make the summary actionable by combining it with an action.
Configuration options
Some properties are common to all components, see Common component properties for the properties and their configuration options.
layout
There are three types to choose from:
default- used to display information. This is the default layout, allowing you to specify what must be shown.cart- useful for an online shopping app to show the number of items in a cart. Thevalueis shown to the right of thetitle.counter- useful for showing a count, for example, the number of sales made in a month. Thevalueis shown to the left of thetitle.progress- useful for displaying completion or status over time, such as task progress, goals, or performance metrics. The value is shown as a visual progress indicator.
title
The main text to display on the component.
color
Changing color of title and leftIcon based on when conditions. First condition evaluated to true will be used. If the condition evaluates to false the default color (black) is used. Choose a color from the provided color palette as well as the status colors, e.g. isWarning. Default color is black if the property is not specified in the YAML. See the list of available colors in .
description
Provide third level of supporting text to be displayed. The position of the text is under the subtitle property. This property is only available with layout type cart.
leftIcon
Add an icon to show on the left before the title. A list of icons is available. See for more information. leftIcon is only available with the default layout.
steps
The number of steps in the progress bar or an expression that must equal a number.
subtitle
Provide supporting text to be displayed as a subtitle. The position of the subtitle text depends on the selected layout property.
value
The actual value in your summary configured by a string or an expression that must equal a number. This property is only available for layout types cart, counter, and progress.
- current: The current value of the progress bar.
OnPress
The action is triggered while pressing on the LeftIcon in the summary. Use IntelliSense (ctrl+space) to see the available list of actions.
By using the summary component along with actions, you can unlock a powerful feature that enables you to take necessary actions based on the information available from the summary. For instance, adding a sales opportunity. This feature can significantly enhance the usability of your jig and make it more efficient.
Consideration
The summary component is available on all Jig Types.
To show an empty
titleusetitle: ' '.To format the
valueproperty, for example, adding a currency symbol in front of the value or percentage behind the value, use theText with Formatoption available in IntelliSense (ctrl+space).Only numbers can be shown in the
valueproperty.If the
valueproperty exceeds 100 a default 99+ will be displayed in the property.Enhance the usability of your jig and make it more efficient by using the summary component along with an action.
Working with Parent and Child Actions and Summaries: When configuring
actionsorsummarybuttons across parent and child jigs, the following behavior applies:If both the parent and child jigs have an
actionorsummaryconfigured, the child’s configuration takes precedence and overrides the parent’s.If only the parent has an
actionorsummary, it automatically applies to the child.If only the child has an
actionorsummary, it is used in the parent jig as well.
Examples and code snippets
Summary - default
In this example the default layout property is used to show a title with a cart as a leftIcon.
Example: The full example is on GitHub.
Summary - cart
n this example the cart layout property is used in a jig.list with a product-item component to show the number of products in the cart. Notice the number of items in the cart is shown in a circle on the right of the title.
Example:
The full example of the summary type: cart using product-item is on GitHub.
The full example of the summary type: cart using expander is on GitHub.
Summary - counter
In this example the counter layout property is used in a jig.list with a product-item component to show the number of products in the cart. Notice the number of products is show on the left of the title.
Summary with action
In this example the cart layout property is used in a jig.list with the expander component to show the number of available flights. A go-to action is added to take you to book a flight.
Example: The full example is on GitHub.
Summary - progress in a form
This example defines a summary component that visually tracks a user's progress through a 3-step purchase order form. It acts as a progress indicator, giving users real-time feedback on how far along they are in completing the order process. The component monitors three separate forms (form1, form2, form3) and evaluates whether each one has been successfully validated. Based on this, it calculates a current progress score between 0 and 3, which is then displayed as a progress bar.
Examples:
See the full example in GitHub.
Summary - progress in tabs
This example defines a summary component that visually tracks a user's progress through a 4-step tab-based purchase order workflow. It provides users with a real-time progress indicator, clearly showing how far along they are in completing the purchase order process. The component monitors the active tab within the jig (screen) and maps each tab to a corresponding step number.
Examples:
See the full example in GitHub.
Last updated
Was this helpful?