YAML order

When it comes to ordering YAML elements, it's crucial to structure your Jigx file in a clear and logical manner. By doing so, you can ensure that your YAML data is easy to read, maintain, and troubleshoot, and sometimes, even the performance and order of execution are determined by the order.

Here are the best practices for ordering YAML elements in a jig file and the recommended structure for items in a section, for example, components.

You won't necessarily use every element listed below in a single jig. You can modify the list to suit the elements you are including in your jig.

Jig YAML order

• Title

• Description

• Type

• Icon

• Badge

• Inputs

• Placeholders

• onFocus/onRefresh

• Expressions

• header

• actions

• summary

• datasources

• children

• preview

• widgets

YAML order

title: Name
description: Description of your Jig
type: jig.default
icon: hold-balloon
badge: empty

inputs:
  name: 
    type: string
    
placeholders:
  - title: No data to display

onFocus: 
  type: action.sync-entities
  options:
    provider: DATA_PROVIDER_LOCAL
    entities:
      - entity: default/department

onRefresh: 
  type: action.sync-entities
  options:
    provider: DATA_PROVIDER_DYNAMIC
    entities:
      - default/employee

expressions: 
  ExpressionName: [email protected]
  
header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        source:
          uri: https://builder.jigx.com/assets/images/header.jpg

actions:
  - children:
      - type: action.go-back
        options:
          title: go back

summary:
  children:
    type: component.summary
    options: 
      layout: default
      
datasources:
  food: 
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
  
      entities:
        - default/employee
  
      query: SELECT id, '$.id', '$.name' FROM [default/employee] 

children:
  - type: component.avatar
    options:
      title: Jigx
      
preview:
  children:
    - type: component.web-view
      options:
        uri: https://jigx.com/
        
widgets:
  widget name: 
    type: widget.image
    options:
      source:
        uri: https://jigx.com/

Order of items in a section

Order of items within a section, for example when defining a component we should aim to standardise as follows:

• Type is always the first thing to be defined so that we know what we are dealing with

• Meta elements for the list (data)

• Item definition

• Title

• Subtitle

• Description

• Left element , Right element , Label

• action

• OnPress

• Swipeable

section-order

children:
  - type: component.list
    options:
      data: [email protected]
      item:
        type: component.list-item
        options:
          title: Altitude
          subtitle: [email protected]
          description: [email protected]
          leftElement:
            element: avatar
            text: =$string(@ctx.current.item.loadNumber)
            uri: ''
          rightElement:
            element: value
            text: =$substring(@ctx.current.item.loadTime,0,5)
          label:
            title: [email protected]
            color: color1
            - when: [email protected] = 'Pending'
            color: color4
            - when: [email protected]= 'Accepted'
            color: color3
            - when: [email protected] = 'Completed'
            color: color2
            onPress:
            type: action.go-to
            options:
            linkTo: form-load
            parameters:
            loadid: [email protected]
            swipeable:
            right:
            - label: Delete
            icon: delete-2
            color: negative
              onPress:
              type: action.execute-entity
              options:
              provider: DATA_PROVIDER_DYNAMIC
              entity: default/load
                  method: delete
            data:
            id: [email protected]