Components

summary

7min

Summarize the information in the  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 Preview
﻿
﻿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 Jigx color palette﻿.  
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 Jigx icons﻿ 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  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  and make it more efficient by using the summary component along with an action﻿.
﻿Examples and code snippets ﻿
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
summary:
  children:
    type: component.summary
    options: 
      layout: default
      title: Your cart is empty
      leftIcon:
        element: icon
        icon: shopping-cart-empty-1
summary:
  children:
    type: component.summary
    options: 
      layout: default
      title: Your cart is empty
      leftIcon:
        element: icon
        icon: shopping-cart-empty-1
﻿
In 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
summary-cart-expander
datasources 1 (static)
datasources 2 (static)
datasources:
  products:
    type: datasource.static
    options:
      data:
        - title: Headphones WH-1000XM4
          uri: https://images.unsplash.com/photo-1618366712010-f4ae9c647dcb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=776&q=80
          tag: free transport 
          price: 211.96
          discount: 0.10
        - title: Bluetooth speaker Charge 5
          uri: https://images.unsplash.com/photo-1608043152269-423dbba4e7e1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2062&q=80
          tag: in stock
          price: 191.6
          discount: 0.15
        - title: M1 Bluetooth Wireless Mouse
          uri: https://images.unsplash.com/photo-1611850698562-ae3d28934080?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80
          tag: in stock
          price: 59.96
          discount:
        - title: Wireless headphones T3S
          uri: https://images.unsplash.com/photo-1578319439584-104c94d37305?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80
          tag: in stock
          price: 84.3
          discount: 0.10
        - title: Multifunction charging station
          uri: https://images.unsplash.com/photo-1587749091230-fb8a034d695c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80
          tag: in stock
          price: 71.08
          discount:
datasources:
  products:
    type: datasource.static
    options:
      data:
        - title: Headphones WH-1000XM4
          uri: https://images.unsplash.com/photo-1618366712010-f4ae9c647dcb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=776&q=80
          tag: free transport 
          price: 211.96
          discount: 0.10
        - title: Bluetooth speaker Charge 5
          uri: https://images.unsplash.com/photo-1608043152269-423dbba4e7e1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2062&q=80
          tag: in stock
          price: 191.6
          discount: 0.15
        - title: M1 Bluetooth Wireless Mouse
          uri: https://images.unsplash.com/photo-1611850698562-ae3d28934080?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80
          tag: in stock
          price: 59.96
          discount:
        - title: Wireless headphones T3S
          uri: https://images.unsplash.com/photo-1578319439584-104c94d37305?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80
          tag: in stock
          price: 84.3
          discount: 0.10
        - title: Multifunction charging station
          uri: https://images.unsplash.com/photo-1587749091230-fb8a034d695c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80
          tag: in stock
          price: 71.08
          discount:
﻿
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
summary-counter-expander
datasources 1 (static)
datasources 2 (static)
summary:
  children:
    type: component.summary
    options: 
      layout: counter
      title: Flights found
      value: 3
      
data: [email protected]-schedule-static
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.field-row
              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:
          address: [email protected]
summary:
  children:
    type: component.summary
    options: 
      layout: counter
      title: Flights found
      value: 3
      
data: =@ctx.datasources.flight-schedule-static
item:
  type: component.expander
  options:
    header:
      centerElement: 
        type: component.stage
        options:
          right:
            title: =@ctx.current.item.toabrv
            subtitle: =@ctx.current.item.disembark
          left:
            title: =@ctx.current.item.fromabrv
            subtitle: =@ctx.current.item.board
    children:
      - type: component.entity
        options:
          children:
            - type: component.field-row
              options:
                children:
                  - type: component.entity-field
                    options:
                      label: Boarding
                      value: =@ctx.current.item.from
                  - type: component.entity-field
                    options:
                      label: Destination
                      value: =@ctx.current.item.to
            - type: component.field-row
              options:
                children:
                  - type: component.entity-field
                    options:
                      label: Board Time
                      value: =@ctx.current.item.board
                  - type: component.entity-field
                    options:
                      label: Disembark Time
                      value: =@ctx.current.item.disembark
            - type: component.entity-field
              options:
                label: Passenger
                value: =@ctx.current.item.name
            - type: component.field-row
              options:
                children:
                  - type: component.entity-field
                    options:
                      label: Flight
                      value: =@ctx.current.item.flight
                  - type: component.entity-field
                    options:
                      label: Gate
                      value: =@ctx.current.item.gate
                  - type: component.entity-field
                    options:
                      label: Seat
                      value: =@ctx.current.item.seat
      - type: component.location
        options:
          address: =@ctx.current.item.to
﻿
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:
    children:
      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
      type: component.image
    height: medium
    
data: [email protected]-schedule-static
item:
  type: component.expander
  options:
    children:
      - options:
          children:
            - options:
                children:
                  - options:
                      label: Boarding
                      value: [email protected]
                    type: component.entity-field
                  - options:
                      label: Destination
                      value: [email protected]
                    type: component.entity-field
              type: component.field-row
            - options:
                children:
                  - options:
                      label: Board Time
                      value: [email protected]
                    type: component.entity-field
                  - options:
                      label: Disembark Time
                      value: [email protected]
                    type: component.entity-field
              type: component.field-row
            - options:
                label: Passenger
                value: [email protected]
              type: component.entity-field
            - options:
                children:
                  - 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.entity-field
              type: component.field-row
        type: component.entity
      - options:
          address: [email protected]
        type: component.location
    header:
      centerElement:
        type: component.stage
        options:
          left:
            subtitle: [email protected]
            title: [email protected]
          right:
            subtitle: [email protected]
            title: [email protected]
  
summary:
  children:
    type: component.summary
    options:
      title: "Flights found:"
      layout: cart
      value: 3
    
actions:
  - children:
      - type: action.go-to
        options:
          title: Book a flight
          linkTo: expander-trip
title: Flights
type: jig.list

header:
  type: component.jig-header
  options:
    children:
      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
      type: component.image
    height: medium
    
data: =@ctx.datasources.flight-schedule-static
item:
  type: component.expander
  options:
    children:
      - options:
          children:
            - options:
                children:
                  - options:
                      label: Boarding
                      value: =@ctx.current.item.from
                    type: component.entity-field
                  - options:
                      label: Destination
                      value: =@ctx.current.item.to
                    type: component.entity-field
              type: component.field-row
            - options:
                children:
                  - options:
                      label: Board Time
                      value: =@ctx.current.item.board
                    type: component.entity-field
                  - options:
                      label: Disembark Time
                      value: =@ctx.current.item.disembark
                    type: component.entity-field
              type: component.field-row
            - options:
                label: Passenger
                value: =@ctx.current.item.name
              type: component.entity-field
            - options:
                children:
                  - options:
                      label: Flight
                      value: =@ctx.current.item.flight
                    type: component.entity-field
                  - options:
                      label: Gate
                      value: =@ctx.current.item.gate
                    type: component.entity-field
                  - options:
                      label: Seat
                      value: =@ctx.current.item.seat
                    type: component.entity-field
              type: component.field-row
        type: component.entity
      - options:
          address: =@ctx.current.item.to
        type: component.location
    header:
      centerElement:
        type: component.stage
        options:
          left:
            subtitle: =@ctx.current.item.board
            title: =@ctx.current.item.fromabrv
          right:
            subtitle: =@ctx.current.item.disembark
            title: =@ctx.current.item.toabrv
  
summary:
  children:
    type: component.summary
    options:
      title: "Flights found:"
      layout: cart
      value: 3
    
actions:
  - children:
      - type: action.go-to
        options:
          title: Book a flight
          linkTo: expander-trip
﻿
﻿

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 Jigx color palette.
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 Jigx icons 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 and make it more efficient.