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:
  flight-schedule-static:
    type: datasource.static
    options:
      data: 
        - id: 1
          airline: Get Stuff Done Airlines
          board: 11:30
          disembark: 12:30
          date: 30 Jul
          flight: A 0123
          from: Hawaii
          fromabrv: HNL
          gate: 16
          name: July Nelson
          seat: 12F
          to: New York
          toabrv: JFK
          image: https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cGxhbmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60
        - id: 2
          airline: Get Stuff Done Airlines
          board: 08:10
          disembark: 10:45
          date: 30 Jul
          flight: A 5738
          from: Phoenix
          fromabrv: PHX
          gate: 2
          name: Nora Gordon
          seat: 27A
          to: Alabama
          toabrv: MCZ
          image: https://images.unsplash.com/photo-1464037866556-6812c9d1c72e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8cGxhbmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60
        - id: 3
          airline: Get Stuff Done Airlines
          board: 14:00
          disembark: 19:59
          date: 30 Jul
          flight: A 1123
          from: Iowa
          fromabrv: DSM
          gate: 15
          name: Tracy Matthews
          seat: 13F
          to: Columbus, Ohio, US
          toabrv: DAY
          image: https://images.unsplash.com/photo-1488085061387-422e29b40080?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHBsYW5lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60
datasources:
  flight-schedule-static:
    type: datasource.static
    options:
      data: 
        - id: 1
          airline: Get Stuff Done Airlines
          board: 11:30
          disembark: 12:30
          date: 30 Jul
          flight: A 0123
          from: Hawaii
          fromabrv: HNL
          gate: 16
          name: July Nelson
          seat: 12F
          to: New York
          toabrv: JFK
          image: https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cGxhbmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60
        - id: 2
          airline: Get Stuff Done Airlines
          board: 08:10
          disembark: 10:45
          date: 30 Jul
          flight: A 5738
          from: Phoenix
          fromabrv: PHX
          gate: 2
          name: Nora Gordon
          seat: 27A
          to: Alabama
          toabrv: MCZ
          image: https://images.unsplash.com/photo-1464037866556-6812c9d1c72e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8cGxhbmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60
        - id: 3
          airline: Get Stuff Done Airlines
          board: 14:00
          disembark: 19:59
          date: 30 Jul
          flight: A 1123
          from: Iowa
          fromabrv: DSM
          gate: 15
          name: Tracy Matthews
          seat: 13F
          to: Columbus, Ohio, US
          toabrv: DAY
          image: https://images.unsplash.com/photo-1488085061387-422e29b40080?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHBsYW5lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60
﻿
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
datasource
type: datasource.static
options:
  data: 
    - id: 1
      airline: Get Stuff Done Airlines
      board: 11:30
      disembark: 12:30
      date: 30 Jul
      flight: A 0123
      from: Hawaii
      fromabrv: HNL
      gate: 16
      name: July Nelson
      seat: 12F
      to: New York
      toabrv: JFK
      image: https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cGxhbmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60
    - id: 2
      airline: Get Stuff Done Airlines
      board: 08:10
      disembark: 10:45
      date: 30 Jul
      flight: A 5738
      from: Phoenix
      fromabrv: PHX
      gate: 2
      name: Nora Gordon
      seat: 27A
      to: Alabama
      toabrv: MCZ
      image: https://images.unsplash.com/photo-1464037866556-6812c9d1c72e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8cGxhbmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60
    - id: 3
      airline: Get Stuff Done Airlines
      board: 14:00
      disembark: 19:59
      date: 30 Jul
      flight: A 1123
      from: Iowa
      fromabrv: DSM
      gate: 15
      name: Tracy Matthews
      seat: 13F
      to: Columbus, Ohio, US
      toabrv: DAY
      image: https://images.unsplash.com/photo-1488085061387-422e29b40080?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHBsYW5lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60
      
type: datasource.static
options:
  data: 
    - id: 1
      airline: Get Stuff Done Airlines
      board: 11:30
      disembark: 12:30
      date: 30 Jul
      flight: A 0123
      from: Hawaii
      fromabrv: HNL
      gate: 16
      name: July Nelson
      seat: 12F
      to: New York
      toabrv: JFK
      image: https://images.unsplash.com/photo-1436491865332-7a61a109cc05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cGxhbmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60
    - id: 2
      airline: Get Stuff Done Airlines
      board: 08:10
      disembark: 10:45
      date: 30 Jul
      flight: A 5738
      from: Phoenix
      fromabrv: PHX
      gate: 2
      name: Nora Gordon
      seat: 27A
      to: Alabama
      toabrv: MCZ
      image: https://images.unsplash.com/photo-1464037866556-6812c9d1c72e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8cGxhbmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60
    - id: 3
      airline: Get Stuff Done Airlines
      board: 14:00
      disembark: 19:59
      date: 30 Jul
      flight: A 1123
      from: Iowa
      fromabrv: DSM
      gate: 15
      name: Tracy Matthews
      seat: 13F
      to: Columbus, Ohio, US
      toabrv: DAY
      image: https://images.unsplash.com/photo-1488085061387-422e29b40080?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fHBsYW5lfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60
      
﻿
﻿

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.