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.

Summary

Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.

Core structure
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. The value is shown to the right of the title. counter - useful for showing a count, for example, the number of sales made in a month. The value is shown to the left of the title.
title	The main text to display on the component.

Other options
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.
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 and counter.

Actions
OnPress	The action is triggered while pressing on the LeftIcon in the summary. Use IntelliSense (ctrl+space) to see the available list of actions.
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 title use title: ' '.

• To format the value property, for example, adding a currency symbol in front of the value or percentage behind the value, use the Text with Format option available in IntelliSense (ctrl+space).

• Only numbers can be shown in the value property.

• If the value property 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 actions or summary buttons across parent and child jigs, the following behavior applies:

  • If both the parent and child jigs have an action or summary configured, the child’s configuration takes precedence and overrides the parent’s.

  • If only the parent has an action or summary, it automatically applies to the child.

  • If only the child has an action or summary, it is used in the parent jig as well.

Examples and code snippets

Summary - default

Default layout

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

title: Products
type: jig.list

# Add the summary showing an icon with default layout.  
summary:
  children:
    type: component.summary
    options:
      title: Your cart is empty
      layout: default
      leftIcon:
        element: icon
        icon: shopping-cart-empty-1
        
data: [email protected]
item:
  type: component.product-item
  options:
    title: [email protected]
    discount: [email protected]
    image:
      uri: [email protected]
    price:
      format:
        numberStyle: currency
      value: [email protected]
    tag: [email protected]

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.

Cart layout

summary-cart-product-item

title: Products
type: jig.list

# Add the summary to show there are two products available using a cart layout.  
summary:
  children:
    type: component.summary
    options:
      title: "Items in cart:"
      layout: cart
      value: 2
      
data: [email protected]
item:
  type: component.product-item
  options:
    title: [email protected]
    discount: [email protected]
    image:
      uri: [email protected]
    price:
      format:
        numberStyle: currency
      value: [email protected]
    tag: [email protected]

summary-cart-expander

datasources 1 (static)

datasources 2 (static)

Summary - counter

Counter layout

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.

Example: The full example of the summary type: counter using product-item is on GitHub. The full example of the summary type: counter using expander is on GitHub.

summary-counter-product-item

title: Products
type: jig.list
# Add the summary to show there are two items.  
summary:
  children:
    type: component.summary
    options:
      title: Items in cart
      layout: counter
      value: 2
      
data: [email protected]
item:
  type: component.product-item
  options:
    title: [email protected]
    discount: [email protected]
    image:
      uri: [email protected]
    price:
      format:
        numberStyle: currency
      value: [email protected]
    tag: [email protected]

summary-counter-expander

datasources 1 (static)

datasources 2 (static)

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 with action

summary-cart-action

title: Flights
type: jig.list

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://images.unsplash.com/photo-1490430657723-4d607c1503fc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8ZmxpZ2h0c3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60

# Add the summary to show there are three flight options available.
summary:
  children:
    type: component.summary
    options: 
      layout: counter
      value: 3
      title: "Flights found:"
                
data: [email protected]
item:
  type: component.expander
  options:
    header:
      centerElement: 
        type: component.stage
        options:
          right:
            title: [email protected]
            subtitle: [email protected]
          left:
            title: [email protected]
            subtitle: [email protected] 
    children:
      - type: component.entity
        options:
          children:
            - type: component.entity-field
              options:
                label: Boarding
                value: [email protected]
            - type: component.entity-field
              options:
                  label: Destination
                  value: [email protected]
            - type: component.field-row
              options:
                children:
                  - type: component.entity-field
                    options:
                      label: Board Time
                      value: [email protected]
                  - type: component.entity-field
                    options:
                        label: Disembark Time
                        value: [email protected] 
                  - type: component.entity-field
                    options:
                      label: Passenger
                      value: [email protected]
            - type: component.field-row
              options:
                children:
                  - type: component.entity-field
                    options:
                      label: Flight
                      value: [email protected] 
                  - type: component.entity-field
                    options:
                        label: Gate
                        value: [email protected]
                  - type: component.entity-field
                    options:
                        label: Seat
                        value: [email protected]    
      - type: component.location
        options:
            viewPoint:
                address: [email protected]  

# Use the go-to action to navigate to a jig to book a flight.    
actions:
  - children:
      - type: action.go-to
        options:
          title: Book a flight
          linkTo: expander-trip 

datasource