Building Apps with Jigx
UI

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
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.

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 

Document image

  1. Right-click the s folder and select New File...
  2. Type a unique name for the and press enter, the name must not contain any spaces. The file opens in the editor.
  3. Use IntelliSense (cntrl + space) in the file and select the type of you will build.
  4. Once the type is selected, the file populates with the core YAML structure ready for you to configure.
  5. 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.
  6. The validates the YAML; any issues are shown in red and need to be corrected before you can publish the solution.
  7. 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.
  8. Publish the solution.

How to edit a 

  1. Open your solution in .
  2. Click on the you want to edit, the editor opens.
  3. Make the required changes.
  4. Save and publish the solution.

How to delete a 

  1. Open your solution in .
  2. Click on the you want to edit, the editor opens.
  3. Make the required changes.
  4. 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
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


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 .
Document image

YAML


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:

  1. jig.calendar
  2. jig.default
  3. jig.document
  4. jig.list
  5. jig.composite



Updated 05 Aug 2024
Doc contributor
Did this page help you?
Yes
No