Building Apps with Jigx

Jigs (screens)

11min

In 
﻿ we call screens in the app - 
﻿s, there are different types of 
﻿s depending on the type of layout you want in your app.
Jigs
﻿
Jig Types
The following 
﻿s types are available:
Types
Use
Code Examples
Calendar
Use this 
﻿to build a calendar to display scheduled events and create new events based on a date and time.
﻿jig.calendar﻿﻿
Default
The default 
﻿ is the most versatile and provides the majority of functionality and a combination of different components and actions﻿. The most common use of a default 
﻿ is for forms and lists. 
﻿jig.default﻿﻿
Composite
This 
﻿ allows you to display multiple 
﻿s on one screen where you would otherwise be unable to combine the functionality in the same way. For example, a form and list are on the same screen, where the form on completion populates the list with data.
﻿jig.composite﻿﻿
List
Create lists of data and style these lists with elements such as avatars﻿, or images﻿. Make the list interactive by adding checkboxes and swipeable elements for updating or deleting the data in the list-item. 
﻿jig.list﻿﻿
Document
Used to show PDF files or HTML pages inside your app.
﻿jig.document﻿﻿
Full-screen
Create a full screen to show a location﻿ across the entire screen.
﻿jig.fullscreen﻿﻿
Considerations
All 
﻿ files have the format name.jigx. You can add the name, and we will automatically add the extension.jigx for you.
All 
﻿ files must be located under the 
﻿s folder in 
﻿.
﻿Jig Templates﻿ are available for all the 
﻿ types, making it easy to insert and configure.
For your 
﻿s to be included in the app solution, they must either be added to the index.jigx file (to appear on the home screen﻿) or referenced by another 
﻿ that is included in the index.jigx, for example, is referenced by the go-to﻿ or go-back﻿ actions.
A 
﻿ can be used as a Custom Home Hub﻿ or a hybrid home hub﻿.
﻿Group widgets﻿ provide the functionality to have 
﻿s availalbe inside other 
﻿s.
How to create a 
﻿﻿
﻿
Open 
﻿ and Create a Jigx solution﻿.
Right-click the 
﻿s folder and select New File...
Type a unique name for the 
﻿ and press enter, the name must not contain any spaces. The 
﻿ file opens in the editor.
Use IntelliSense (cntrl + space) in the file and select the type of 
﻿ you will build. 
Once the 
﻿ type is selected, the file populates with the core YAML structure ready for you to configure.
Add your values or remove the YAML that is not required, for example, if you do not want a header image at the top of the screen, remove the header: section.
The 
﻿ validates the YAML; any issues are shown in red and need to be corrected before you can publish the solution. 
If you want the 
﻿ to be accessed from the 
﻿, add the 
﻿ to the index.jigx﻿ file. Otherwise, reference the 
﻿ from another 
﻿ for it to be included in the app.
﻿Publish﻿ the solution.
How to edit a 
﻿﻿
Open your solution in 
﻿.
Click on the 
﻿ you want to edit, the editor opens. 
Make the required changes.
Save and publish﻿ the solution.
How to delete a 
﻿﻿
Open your solution in 
﻿.
Click on the 
﻿ you want to edit, the editor opens. 
Make the required changes.
Save and publish﻿ the solution.
How to combine 
﻿s
There are two options available for joining 
﻿s which depend on your requirements.
1.Create one screen that contains many jigs
Four jigs combined into one
﻿
Use the jig.composite type to combine multiple 
﻿s into one.
Provide the jigId for each of the 
﻿s to be included. 
The order of the jigIds configured in the YAML determines the order in which the jigs appear in the composite 
﻿. 
There are properties  available to hide the title of each 
﻿ (isTitleHidden).
Provide inputs into each 
﻿ if required.
YAML
title: My hike information
type: jig.composite

children:
  - jigId: hike-details
    isTitleHidden: false
  - jigId: hiking-friends
    isTitleHidden: true
  - jigId: hike-images
    isTitleHidden: true
  - jigId: Location
    isTitleHidden: true
title: My hike information
type: jig.composite

children:
  - jigId: hike-details
    isTitleHidden: false
  - jigId: hiking-friends
    isTitleHidden: true
  - jigId: hike-images
    isTitleHidden: true
  - jigId: Location
    isTitleHidden: true
﻿
2.Add widgets to a jig to navigate to other jigs 
Add the component.widgets to a 
﻿. Configure the size and jigId for all the jigs you want to navigate to from the current 
﻿.
The order of the jigIds configured in the YAML determines the order in which the widgets appear in the 
﻿. 
﻿
YAML

title: Yoga Wellness Week
type: jig.default

datasources:
  yoga: 
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC

      entities:
        - default/events

      query: 
        SELECT
          id, 
          '$.EventName', 
          '$.StartDate', 
          '$.Time', 
          '$.Venue', 
          '$.Type' 
        FROM [default/events] WHERE '$.Type' = 'Yoga'
       
children: 
  - type: component.image
    options:
      height: 200
      resizeMode: cover
      source:
        uri: https://images.unsplash.com/photo-1524901548305-08eeddc35080?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8Y2FsbXxlbnwwfHwwfHx8MA%3D%3D
 
  - type: component.section
    options:
      title: Yoga Wellness Week
      children:
        - type: component.countdown
          options:
            size: medium
            expiresAt: "2024-01-25T17:30:00+02:00"
                  
# Add widgets to the jig to allow for navigation between jigs.
  - type: component.widgets
    options:
      children:
        - size: "4x2"
          jigId: yoga-list
        - size: "1x1"
          jigId: my-bookings
        - size: "1x1"
          jigId: yoga-location
        - size: "1x1"
          jigId: yoga-info
        - size: "1x1"
          jigId: yoga-meals

title: Yoga Wellness Week
type: jig.default

datasources:
  yoga: 
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC

      entities:
        - default/events

      query: 
        SELECT
          id, 
          '$.EventName', 
          '$.StartDate', 
          '$.Time', 
          '$.Venue', 
          '$.Type' 
        FROM [default/events] WHERE '$.Type' = 'Yoga'
       
children: 
  - type: component.image
    options:
      height: 200
      resizeMode: cover
      source:
        uri: https://images.unsplash.com/photo-1524901548305-08eeddc35080?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8Y2FsbXxlbnwwfHwwfHx8MA%3D%3D
 
  - type: component.section
    options:
      title: Yoga Wellness Week
      children:
        - type: component.countdown
          options:
            size: medium
            expiresAt: "2024-01-25T17:30:00+02:00"
                  
# Add widgets to the jig to allow for navigation between jigs.
  - type: component.widgets
    options:
      children:
        - size: "4x2"
          jigId: yoga-list
        - size: "1x1"
          jigId: my-bookings
        - size: "1x1"
          jigId: yoga-location
        - size: "1x1"
          jigId: yoga-info
        - size: "1x1"
          jigId: yoga-meals
﻿
How to pass data from one 
﻿ to another (input & outputs)
In certain scenarios, there is a need to transfer data, such as customer IDs or opportunity IDs, from one 
﻿ to another. This can be effectively accomplished by utilizing inputs and outputs. See Passing data using inputs﻿ and Passing data using outputs﻿ to understand the configuration options.
See Also
The following examples with code snippets are provided:
﻿jig.calendar﻿﻿
﻿jig.default﻿﻿
﻿jig.document﻿﻿
﻿jig.list﻿﻿
﻿jig.composite﻿﻿
﻿jig.fullscreen﻿﻿
﻿

Updated 05 Aug 2024

Did this page help you?

Stories

Passing data using inputs

Docs powered by Archbee

TABLE OF CONTENTS

1.Create one screen that contains many jigs

2.Add widgets to a jig to navigate to other jigs

How to pass data from one jig to another (input & outputs)

Jigs (screens)

Jig Types

Considerations

How to create a

How to edit a

How to delete a

How to combine
s

1.Create one screen that contains many jigs

2.Add widgets to a jig to navigate to other jigs

How to pass data from one
to another (input & outputs)

See Also

Types	Use	Code Examples
Calendar	Use this to build a calendar to display scheduled events and create new events based on a date and time.	jig.calendar
Default	The default is the most versatile and provides the majority of functionality and a combination of different components and actions. The most common use of a default is for forms and lists.	jig.default
Composite	This allows you to display multiple s on one screen where you would otherwise be unable to combine the functionality in the same way. For example, a form and list are on the same screen, where the form on completion populates the list with data.	jig.composite
List	Create lists of data and style these lists with elements such as avatars, or images. Make the list interactive by adding checkboxes and swipeable elements for updating or deleting the data in the list-item.	jig.list
Document	Used to show PDF files or HTML pages inside your app.	jig.document
Full-screen	Create a full screen to show a location across the entire screen.	jig.fullscreen

Jigs (screens)

Jig Types

Considerations

How to create a ﻿﻿

How to edit a ﻿﻿

How to delete a ﻿﻿

How to combine ﻿s

1.Create one screen that contains many jigs

2.Add widgets to a jig to navigate to other jigs

How to pass data from one ﻿ to another (input & outputs)

See Also

How to create a

How to edit a

How to delete a

How to combine
s

How to pass data from one
to another (input & outputs)