Static Data

6min
With Static Data, the dataset is created directly inside the jig file or as a global datasource in the datasources folder of a Jigx solution. Static Data is useful because it can be created quickly right inside the jig file, and there is no need to specify any database connections or set up any tables. The amount of records that can be created for the Static Data is unlimited. Static Data is normally used to bind data to the UI components.
﻿Static Data can be created in two ways:﻿
1. In any Jig under the datasources section
Under the datasource section specify the name of your datasource
Type must datasource.static
In the data object, you need to specify the key and value pair for your array of records
You can use Expressions﻿ in your static data items as well.
﻿
﻿
See the full example in GitHub﻿
my-jig.jigx
title: Static data with list
type: "@jigx/jig/list"

datasources:
  people:
    type: "datasource.static"
    options:
      data:
        - id: 1
          firstname: Lukas
          lastname: Otahal
          email: lukas@gmail.com
          mobile: 783432565
        - id: 2
          firstname: Andrej
          lastname: Becka
          email: andrej@gmail.com
          mobile: 437874221
        - id: 3
          firstname: Jane
          lastname: Doe
          email: jane@gmail.com
          mobile: 783432531

data: =@ctx.datasources.people
item:
  type: "component.list-item"
  options:
    title: =@ctx.current.item.firstname
    subtitle: =@ctx.current.item.lastname

title: Static data with list
type: "@jigx/jig/list"

datasources:
  people:
    type: "datasource.static"
    options:
      data:
        - id: 1
          firstname: Lukas
          lastname: Otahal
          email: lukas@gmail.com
          mobile: 783432565
        - id: 2
          firstname: Andrej
          lastname: Becka
          email: andrej@gmail.com
          mobile: 437874221
        - id: 3
          firstname: Jane
          lastname: Doe
          email: jane@gmail.com
          mobile: 783432531

data: =@ctx.datasources.people
item:
  type: "component.list-item"
  options:
    title: =@ctx.current.item.firstname
    subtitle: =@ctx.current.item.lastname
﻿
2. As a global datasource file
Inside the datasources folder of your solution create a new file called <your_datasource_name>.jigx
Inside that file set componentId to datasource.static
In the data object you need to specify the key and value pair for your array of records
﻿
See the full example in GitHub.
people.jigx
list-with-global.jigx
#Your jig where you bind your global data to the list component
name: Static data with list
type: "@jigx/jig/list"

data: =@ctx.datasources.people
item:
  componentId: "@jigx/component/list-item"
  options:
    title: =@ctx.parents.list-data.item.firstname
    subtitle: =@ctx.parents.list-data.item.lastname
#Your jig where you bind your global data to the list component
name: Static data with list
type: "@jigx/jig/list"

data: =@ctx.datasources.people
item:
  componentId: "@jigx/component/list-item"
  options:
    title: =@ctx.parents.list-data.item.firstname
    subtitle: =@ctx.parents.list-data.item.lastname
﻿
﻿
You can also create static data right inside your component or as an initialValue, without a need to specify the datasource. See examples below.
﻿
﻿
See the full code sample on Github.
dropdown.jigx
title: Dropdown with values
type: jig.default

datasources:
  employees-list: 
    type: datasource.static
    options:
      data:
        - title: 'Jane Stevens'
          value: 'Jane'
        - title: 'Mark Anders'
          value: 'Mark'
        - title: 'Haley Marshall'
          value: 'Haley'
        - title: 'Andre Marks'
          value: 'Andre'
  
children:
  - type: component.form
    options:
      children:
        - type: component.dropdown
          instanceId: dropdown
          options:
            data: =@ctx.datasources.employees-list
            label: Dropdown with Employees
            item:
              type: component.dropdown-item
              options:
                title: =@ctx.current.item.title
                value: =@ctx.current.item.value
title: Dropdown with values
type: jig.default

datasources:
  employees-list: 
    type: datasource.static
    options:
      data:
        - title: 'Jane Stevens'
          value: 'Jane'
        - title: 'Mark Anders'
          value: 'Mark'
        - title: 'Haley Marshall'
          value: 'Haley'
        - title: 'Andre Marks'
          value: 'Andre'
  
children:
  - type: component.form
    options:
      children:
        - type: component.dropdown
          instanceId: dropdown
          options:
            data: =@ctx.datasources.employees-list
            label: Dropdown with Employees
            item:
              type: component.dropdown-item
              options:
                title: =@ctx.current.item.title
                value: =@ctx.current.item.value
﻿
﻿
See the code sample in GitHub.
list.jigx
title: List
type: jig.list
icon: contact 

data: "=[{'name':'Jane Stevens','position':'Worker','initials':'JS'},
      {'name':'Peter Marks','position':'Designer','initials':'PM'},
      {'name':'Garry Marks','position':'Worker','initials':'GM'}]"
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.name
    subtitle: =@ctx.current.item.position
    leftElement: 
      element: avatar
      text: =@ctx.current.item.initials
title: List
type: jig.list
icon: contact 

data: "=[{'name':'Jane Stevens','position':'Worker','initials':'JS'},
      {'name':'Peter Marks','position':'Designer','initials':'PM'},
      {'name':'Garry Marks','position':'Worker','initials':'GM'}]"
item:
  type: component.list-item
  options:
    title: =@ctx.current.item.name
    subtitle: =@ctx.current.item.position
    leftElement: 
      element: avatar
      text: =@ctx.current.item.initials
﻿
﻿
﻿