jig.default

Type jig.default is the most versatile jig allowing you to create a jig with various setup options such as:

• A form

• A list

• The jig which can be a part of the jig.composite

• Used with a combination of different components and actions.

Default jig

Configuration options

Some properties are common to all jig types, see Common jig type properties for a list and their configuration options.

Core structure
children	Add the UI elements () under the children property, for example, component.form. Use Intellisense (ctrl+space) to select a component from the available list.
title	Provide the name of the screen. If you do not want to show a title in a jig use title: ' ' or add an expression.

Other options

The jig.default is the most versatile jig available allowing you to create a variety of screens. Many options are available for configuration on this jig.

Other options
actions	Choose from the provided list of available actions, for example, use the go-to action to open a different jig.
badge	Enhance your tabs with a badge, for instance show the number of grid-items. Add the badge property to the jig YAML with an expression.
bottomSheet	The bottomSheet element slides up from the bottom of the screen to present additional content, actions, or contextual information. See bottomSheet (Beta) for more information.
description	Give the jig a description that is displayed under the title.
expressions	Use the expressions property to set global expressions that are reusable throughout the jig.
filter	The filter property creates tabbed filter options to categorize and filter data in the jig. For more information, see the filter in the common jig type properties.
icon	The icon will be displayed on the jig widget. Start typing the name of the icon to invoke the available list in IntelliSense. See Jigx icons for information on working with icons. The icon property applies to component.jig-widget without a widgetId.
inputs	Configure inputs that allow you to receive data from other jigs and use it in the current jig.
isCollapsible	When the jig is used in a composite jig and this property is set to true, a collapse and expand icon is shown, allowing the jig to be collapsed. This is helpful if the composite jig has several jigs configured, making it easier to view and interact with the app.
isHomeButtonVisible	By default, the home button is visible on all jigs except the Home Hub. You can hide the home button on a jig if needed by setting the isHomeButtonVisible property to false. For more information, see the home button visibility in the common jig type properties.
isSearchable	By default, the home button is visible on all jigs except the Home Hub. You can hide the home button on a jig if needed by setting the isHomeButtonVisible property to false. For more information, see the filter in the common jig type properties.
isWaitingSync	Displays a waiting sync indicator.
jigId	Give the jig a unique ID that can be referenced outside the jig, for example, in state expressions.
output	Configure outputs that allow you to transfer data out of the current jig and use it in another jig. When referencing the output in another jig, use [email protected].[instance-id-of-the-jig].outputs.[key-of-output]
placeholders	Create a placeholder to show when there is no data to use yet.
state	See state for more information.
summary	Add a component that displays at the bottom of the jig. See the summary component for more information.
widgets	Add a widget in the jig. See widgets for configuration options.

Examples and code snippets

The code below is an extract from the full jigx-samples solution. The code snippets describe the component discussed in this section. For the solution to function in the Jigx app download the full jigx-samples project from GitHub, and follow the instructions in Setting up your solution.

Jig.default as a Form

Jig default with a form

Examples: See the full default-form.jigx code example in GitHub. Datasource: See the full datasource code example for dynamic data in GitHub.

default-form.jigx

title: Form
type: jig.default

actions:
  - children:
      - type: action.submit-form
        options:
          formId: default-form
          provider: DATA_PROVIDER_DYNAMIC
          title: Submit form
          method: save
          entity: default/form

children:
  - type: component.form
    instanceId: default-form
    options:
      children:
        - type: component.number-field
          instanceId: employee-id
          options:
            label: employeeId
            isHidden: true
            initialValue: =($count(@ctx.datasources.employees.id) = 0 ? 1 :$count(@ctx.datasources.employees.id) + 1)
        - type: component.avatar-field
          instanceId: employee-photo
          options:
            label: Photo
        - type: component.section
          options:
            title: Personal information
            children:
              - type: component.text-field
                instanceId: employee-first-name
                options:
                  label: First name
              - type: component.text-field
                instanceId: employee-surname
                options:
                  label: Surname
              - type: component.date-picker
                instanceId: employee-date-of-birth
                options:
                  label: Date of birth
              - type: component.email-field
                instanceId: employee-email
                options:
                  label: Email
                  icon: email
              - type: component.number-field
                instanceId: employee-phone-number
                options:
                  label: Phone number
                  icon: phone
        - type: component.section
          options:
            title: Business information
            children:
              - type: component.text-field
                instanceId: employee-position
                options:
                  label: Position
              - type: component.date-picker
                instanceId: employee-startWork
                options:
                  label: Date of starting work
              - type: component.media-field
                instanceId: employee-contract
                options:
                  label: Contract
                  mediaType: image

datasources

default.jigx

index.jigx

Jig.default as a List

Default jig with a list

Examples: See the full code sample with static data in GitHub. See the full code sample with dynamic data in GitHub.

Datasource: See the full code sample for datasource for static data in GitHub.

See the full datasource code samples for dynamic data for product and sales in GitHub.

Using the code below requires data in the database, the jigx.sample solution has the data provided for products. You can use the products.csv file in GitHub and upload it via the Data configuration in Jigx Management.

default-list-dynamic.jigx

title: List
type: jig.default

children:
  - type: component.section
    options:
      title: Products
      children:
        - type: component.list
          options:
            data: [email protected]
            item:
              type: component.product-item
              options:
                title: [email protected]
                image:
                  uri: [email protected]
                tag: [email protected]
                price:
                  value: [email protected]
                  format:
                    numberStyle: currency
  - type: component.section
    options:
      title: Sale
      children:
        - type: component.list
          options:
            data: [email protected]
            item:
              type: component.product-item
              options:
                title: [email protected]
                image:
                  uri: [email protected]
                tag: [email protected]
                price:
                  value: [email protected]
                  format:
                    numberStyle: currency
                discount: [email protected]

datasources

default.jigx

Other examples of jig.default

Default employee jig

Examples: See the full code sample with static data in GitHub. See the full code sample with dynamic data in GitHub

Datasource: See the full datasource code sample for static data in GitHub See the full datasource code samples for dynamic data in GitHub

Using the code below requires data in the database, the jigx.sample solution has the data provided for employees. You can use the employee.csv file in GitHub and upload it via the Data configuration in Jigx Management.

employee-detail-dynamic.jigx

title: Employee detail
type: jig.default

children:
  - type: component.avatar
    options:
      title: ""
      uri: [email protected]
      size: large
      align: center

  - type: component.entity
    options:
      children:
        - type: component.section
          options:
            title: Personal information
            children:
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: Birth date
                        value: [email protected]
                    - type: component.entity-field
                      options:
                        label: Gender
                        value: [email protected]
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: Email
                        value: [email protected]
                        contentType: email
                    - type: component.entity-field
                      options:
                        label: Phone
                        value: [email protected]
                        contentType: phone
        - type: component.section
          options:
            title: Address
            children:
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: Street
                        value: [email protected]
                    - type: component.entity-field
                      options:
                        label: City
                        value: [email protected]
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: State
                        value: [email protected]
                    - type: component.entity-field
                      options:
                        label: Country
                        value: [email protected]

  - type: component.list
    options:
      data: [email protected]
      isHorizontal: true
      item:
        type: component.pie-chart
        options:
          chart:
            title:
              text: [email protected]
              verticalAlign: center
            subtitle:
              text: [email protected]
              verticalAlign: center
            width: 140
            height: 140
            isAnimated: true
          legend:
            isHidden: true
          series:
            - data: [email protected]

datasources

default.jigx

Default jig

Examples: See full code sample with static data in GitHub See full code sample with dynamic data in GitHub.

Datasource: See the full datasource code sample for static data in GitHub. See the full datasource code sample for dynamic data in GitHub.

Using the code below requires data in the database, the jigx.sample solution has the data provided for products. You can use the products.csv file in GitHub and upload it via the Data configuration in Jigx Management.

default-product-detail-dynamic.jigx

title: Name
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        title: [email protected]
        subtitle: [email protected]
        source:
          uri: [email protected]

summary:
  children:
    type: component.summary
    options:
      layout: default
      title: Add to cart
      leftIcon:
        element: icon
        name: shopping-cart-empty-1

children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: ""
            isMultiline: true
            value: [email protected]
  - type: component.expander
    options:
      header:
        centerElement:
          type: component.titles
          options:
            title: Details
      children:
        - type: component.entity
          options:
            children:
              - type: component.section
                options:
                  title: Bluetooth 4.0 connection
                  children:
                    - type: component.entity-field
                      options:
                        label: ""
                        isMultiline: true
                        value: [email protected]
              - type: component.section
                options:
                  title: Fast, Precise Tracking
                  children:
                    - type: component.entity-field
                      options:
                        label: ""
                        isMultiline: true
                        value: [email protected]
              - type: component.section
                options:
                  title: Rechargeable Type-C Port
                  children:
                    - type: component.entity-field
                      options:
                        label: ""
                        isMultiline: true
                        value: [email protected]
              - type: component.section
                options:
                  title: Modern, Ergonomic Design
                  children:
                    - type: component.entity-field
                      options:
                        label: ""
                        isMultiline: true
                        value: [email protected]

  - type: component.expander
    options:
      header:
        centerElement:
          type: component.titles
          options:
            title: Tech Specs
      children:
        - type: component.entity
          options:
            children:
              - type: component.section
                options:
                  title: Compatible Devices
                  children:
                    - type: component.entity-field
                      options:
                        label: ""
                        isMultiline: true
                        value: [email protected]
        - type: component.entity
          options:
            children:
              - type: component.section
                options:
                  title: Weight
                  children:
                    - type: component.entity-field
                      options:
                        label: ""
                        isMultiline: true
                        value: [email protected]
        - type: component.entity
          options:
            children:
              - type: component.section
                options:
                  title: Guarantee
                  children:
                    - type: component.entity-field
                      options:
                        label: ""
                        isMultiline: true
                        value: [email protected]

  - type: component.expander
    options:
      header:
        centerElement:
          type: component.titles
          options:
            title: Shipping & Returns
      children:
        - type: component.entity
          options:
            children:
              - type: component.entity-field
                options:
                  label: ""
                  isMultiline: true
                  value: [email protected]

datasources

default.jigx

index.jigx

See also

• Jigs (screens)

• Related examples (Github)