Jig Types

jig.composite

7min

The composite

 is a

made up of several parts or elements. In this case, a

is made up of several

s. This

allows you to display multiple

s on one list where you would otherwise be unable to combine the functionality in the same way.

Jig Composite Preview
Jig Composite Preview


Configuration options

composite.jigx


Core Structure



jigId

The core structure includes: jigId 2x or more (depends on how many jigs you are connecting).

Other options



icon

The icon will be displayed on the widget of this

. Start typing the name of the icon to invoke the available list in IntelliSene. See Jigx icons for information on worknig with icons.

inputs

If you are setting up a jig.composite where

s rely on input to display or otherwise interact with very specific data, you'll need to use inputs. Here you set the data you would like to transfer to the composite jig. There are 2 options to make data available for input:

  1. Set them in output inside the
    
    .
  2. Set them as a global variable by using set-state action.

isTitleHidden

The boolean value allows you to hide the title of your

 in the composite jig. Even if the

's title is set to true , because the title is a mandatory property.

when

The ability to include or exclude a

 for display on a composite

. If set to true the

is included, if set to false the

will not appear on the composite

. Dynamically set this property by using expressions.

Considerations

  • When calling a
    
    in a composite
    
    for example, jigId: personal-details, you can add an instanceId on the composite
    
    . This allows you to interact with the referenced
    
    , such as saving or calling a control on the referenced
    
    . If no instanceId exists, IntelliSense cannot show it in the composite
    
    configuration.
composite.jigx


Examples and code snippets 



Composite Jig without any form of input

Composite jig
Composite jig


This example shows the simplest way in which a Composite Jig can be set up - referencing two separate

s and displaying them on one without having to filter the content.

Examples:

See the compsite

 code example in GitHub. See the location code and country list code examples in GitHub. See the static country datasource code example in GitHub. See the index.jigx code below to add the

to the

.



composite-jig.jigx
location-with-address.jigx
country-list-sd.jigx
datasources
index.jigx


Composite Jig with input

This example shows how a Composite

 can be used to only display certain data based on the input received.

Composite jig with input
Composite jig with input

Composite jig with input
Composite jig with input


Examples: See the full composite

 input code example in GitHub. See the folder with supporting files in GitHub. See the datasource code sample in GitHub.

See the default.jigx code snippet with the database table defined below.

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

.

service-details-comp.jigx
cleaning-serv-horizon-list-dd.jigx
service-details.jigx
datasources
default.jigx
index.jigx


See also



Updated 13 Aug 2024
Doc contributor
Did this page help you?