website logo
👥 Community🎯 Samples on GitHub🚦System Status
💡 Guides
🚀 Examples
🍕 Developer Reference
⚡️ Changelog
🎥 Video Library
Navigate through spaces
⌘K
Examples Overview
Setting up your solution
Jig Types
Components
Datasource
Actions
Preview
Widgets
Expressions
Aggregation
Boolean
Comparison Operators
Date & Time
Path Operators
Functional Programming
Jigx Variables
Predicate Queries
String
Docs powered by
Archbee
Jig Types

jig.default

5min

Type jig.default allows you to create a  with various setup options:

  • The form
  • The list
  • The jig which can be a part of the jig.composite
  • Combination of different components and actions



Jig Default Preview
Jig Default Preview


Examples and code snippets 

The code below is an extract from the full jigx-samples solution. The code snippets describe the component discussed in this section. For the solution to function in the Jigx app download the full jigx-samples project from GitHub, and follow the instructions in Setting up your solution.



Jig.default as a Form

Form jig
Form jig


Examples:

See the full default-form.jigx code example in GitHub.

Datasource:

See the full datasource code example for dynamic data in GitHub.



default-form.jigx
datasources
default.jigx
index.jigx
|
datasources:
  employees:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/employees
      query: |
        SELECT 
          id
        FROM [default/employees]


Jig.default as a List

Default jig as a list
Default jig as a list


Examples:

See the full code sample with static data in GitHub.

See the full code sample with dynamic data in GitHub.



Datasource:

See the full code sample for datasource for static data in GitHub.

See the full datasource code samples for dynamic data for product and sales in GitHub.



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

default-list-dynamic.jigx
datasources
default.jigx
|
datasources:
  prods:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/products
      query: |
        SELECT
          id,
          '$.title',
          '$.uri',
          '$.tag',
          '$.price',
          '$.category',
          '$.sale'
        FROM [default/products]
        WHERE '$.category' = 'product' AND '$.sale' IS NULL
        
  sales:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/products
      query: |
        SELECT
          id,
          '$.title',
          '$.uri',
          '$.tag',
          '$.price',
          '$.category',
          '$.discount',
          '$.sale'
        FROM [default/products]
        WHERE '$.sale' = 'true'


Other examples of jig.default

Employee default jig
Employee default jig


Examples:

See the full code sample with static data in GiltHub. See the full code sample with dynamic data in GitHub.

Datasource:

See the full datasource code sample for static data in GitHub. See the full datasource code samples for dynamic data in GitHub.

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

employee-detail-dynamic.jigx
datasources
default.jigx
|
title: Employee detail
type: jig.default

children:
  - type: component.avatar
    options:
      title: ''
      uri: =@ctx.datasources.employee-detail-dynamic.photo
      size: large
      align: center
  
  - type: component.entity
    options:
      children:
        - type: component.section
          options:
            title: Personal information
            children:
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: Birth date
                        value: =@ctx.datasources.employee-detail-dynamic.birthdate
                    - type: component.entity-field
                      options:
                        label: Gender
                        value: =@ctx.datasources.employee-detail-dynamic.gender
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: Email
                        value: =@ctx.datasources.employee-detail-dynamic.email
                        contentType: email
                    - type: component.entity-field
                      options:
                        label: Phone
                        value: =@ctx.datasources.employee-detail-dynamic.phone
                        contentType: phone
        - type: component.section
          options:
            title: Address
            children:
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: Street
                        value: =@ctx.datasources.employee-detail-dynamic.street
                    - type: component.entity-field
                      options:
                        label: City
                        value: =@ctx.datasources.employee-detail-dynamic.city
              - type: component.field-row
                options:
                  children:
                    - type: component.entity-field
                      options:
                        label: State
                        value: =@ctx.datasources.employee-detail-dynamic.state
                    - type: component.entity-field
                      options:
                        label: Country
                        value: =@ctx.datasources.employee-detail-dynamic.country
                        
  - type: component.list
    options:
      data: =@ctx.datasources.quartal
      isHorizontal: true
      item:
        type: component.pie-chart
        options:
          chart:
            title:
              text: =@ctx.current.item.title
              verticalAlign: center
            subtitle:
              text: =@ctx.current.item.subtitle
              verticalAlign: center
            width: 140
            height: 140
            isAnimated: true
          legend:
            isHidden: true
          series:
            - data: =@ctx.current.item.data

Document image




Examples:

See full code sample with static data in GitHub. See full code sample with dynamic data in GitHub.

Datasource:

See the full datasource code sample for static data in GitHub. See the full datasource code sample for dynamic data in GitHub.

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

default-product-detail-dynamic.jigx
datasources
default.jigx
index.jigx
|
title: Name
type: jig.default

header:
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.image
      options:
        title: =@ctx.datasources.product-detail-dynamic.title
        subtitle: =@ctx.datasources.product-detail-dynamic.price
        source:
          uri: =@ctx.datasources.product-detail-dynamic.uri

summary:
  children:
    type: component.summary
    options: 
      layout: default
      title: Add to cart
      leftIcon:
        element: icon
        name: shopping-cart-empty-1

children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: ""
            isMultiline: true
            value: =@ctx.datasources.product-detail-dynamic.overview
  - type: component.expander
    options:
      header:
        centerElement: 
          type: component.titles
          options:
            title: Details
      children:
        - type: component.entity
          options:
            children:
              - type: component.section
                options:
                  title: Bluetooth 4.0 connection
                  children:
                    - type: component.entity-field
                      options:
                        label: ""
                        isMultiline: true
                        value: =@ctx.datasources.product-detail-dynamic.bluetooth-detail
              - type: component.section
                options:
                  title: Fast, Precise Tracking
                  children:
                    - type: component.entity-field
                      options:
                        label: ""
                        isMultiline: true
                        value: =@ctx.datasources.product-detail-dynamic.precise-detail
              - type: component.section
                options:
                  title: Rechargeable Type-C Port
                  children:
                    - type: component.entity-field
                      options:
                        label: ""
                        isMultiline: true
                        value: =@ctx.datasources.product-detail-dynamic.recharge-detail
              - type: component.section
                options:
                  title: Modern, Ergonomic Design
                  children:
                    - type: component.entity-field
                      options:
                        label: ""
                        isMultiline: true
                        value: =@ctx.datasources.product-detail-dynamic.design-detail
                                                
  - type: component.expander
    options:
      header:
        centerElement: 
          type: component.titles
          options:
            title: Tech Specs
      children:
        - type: component.entity
          options:
            children:
             - type: component.section
               options:
                 title: Compatible Devices
                 children:
                   - type: component.entity-field
                     options:
                       label: ""
                       isMultiline: true
                       value: =@ctx.datasources.product-detail-dynamic.compatible-detail
        - type: component.entity
          options:
            children:
             - type: component.section
               options:
                 title: Weight
                 children:
                   - type: component.entity-field
                     options:
                       label: ""
                       isMultiline: true
                       value: =@ctx.datasources.product-detail-dynamic.weight-detail
        - type: component.entity
          options:
            children:
             - type: component.section
               options:
                 title: Guarantee
                 children:
                   - type: component.entity-field
                     options:
                       label: ""
                       isMultiline: true
                       value: =@ctx.datasources.product-detail-dynamic.guarantee-detail                          
                       
  - type: component.expander
    options:
      header:
        centerElement: 
          type: component.titles
          options:
            title: Shipping & Returns
      children:
        - type: component.entity
          options:
            children:
              - type: component.entity-field
                options:
                  label: ""
                  isMultiline: true
                  value: =@ctx.datasources.product-detail-dynamic.shipping-detail


See also

Related examples (Github)

Updated 19 Sep 2023
Did this page help you?
PREVIOUS
jig.calendar
NEXT
jig.composite
Docs powered by
Archbee
TABLE OF CONTENTS
Examples and code snippets
Jig.default as a Form
Jig.default as a List
Other examples of jig.default
See also
Docs powered by
Archbee
Copyright © 2023 Jigx, Inc. All rights reserved. Terms of Service