Add the customer composite jig

4min
Overview
In this section, you learn how to join 
﻿s to create a single 
﻿ using the jig.composite type, this is useful in our solution as you want to capture a new customer and see the customer added to the list directly below the form, you also add an image header to the composite 
﻿.
Steps
Create the composite jig 
Open the Hello-Jigx solution in 
﻿ in 
﻿, right-click on the 
﻿s node in Explorer, and select New file.
Name the file composite. The file opens and shows the 
﻿'s auto-complete popup listing the five types of 
﻿s you can select. Click on Composite to open the skeleton YAML created by the 
﻿. 
Give the 
﻿ a title called Customers and provide a description like Customer form and list. 
Add icon: person under the description line. This icon displays on the widget on the 
﻿. 
For this jig you can delete the onFocus node. 
Under the header node you can leave it as is or add your own image uri. The jig-header component can be used in any type of 
﻿. It serves as a container for specifying headers, such as images. Change the height value to small and add a title: Customers after options. Here is an example of the header code with an image.
YAML
header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        title: Customers
        source:
          uri: https://cdn2.webdamdb.com/v1_1280_6enPaxIBt9M3.jpg?1554490336
header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        title: Customers
        source:
          uri: https://cdn2.webdamdb.com/v1_1280_6enPaxIBt9M3.jpg?1554490336
﻿
Add the jigIds
Next to the jigIds add new-customer and list- customer. The order of the children's jigIds determines the display order in the app. 
You can remove the
 inputs:
      recordid: [email protected] 
 Your composite.jigx file should resemble the code below.
composite.jigx
# The system name that uniquely identifies the jig
title: Customers
description: New customer form and list
# The jig type used to join multiple jigs together
type: jig.composite
# icon that displays on the widget on the home hub
icon: person

# A container for specifying jig headers such as images, videos or location
header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        title: Customers
        source:
          uri: https://cdn2.webdamdb.com/v1_1280_6enPaxIBt9M3.jpg?1554490336
      
# Specifiy the jigs to combine by listing the jigIds for each jig.  
children:
  - jigId: new-customer
  - jigId: list-customer
# The system name that uniquely identifies the jig
title: Customers
description: New customer form and list
# The jig type used to join multiple jigs together
type: jig.composite
# icon that displays on the widget on the home hub
icon: person

# A container for specifying jig headers such as images, videos or location
header:
  type: component.jig-header
  options:
    height: small
    children:
      type: component.image
      options:
        title: Customers
        source:
          uri: https://cdn2.webdamdb.com/v1_1280_6enPaxIBt9M3.jpg?1554490336
      
# Specifiy the jigs to combine by listing the jigIds for each jig.  
children:
  - jigId: new-customer
  - jigId: list-customer
﻿
﻿
Updated 01 Nov 2023
Did this page help you?
Combine the solution's elements
Add the solution stories jig and datasource
Docs powered by Archbee
TABLE OF CONTENTS
Overview
Steps
Create the composite jig
Add the jigIds