Building Apps with Jigx
Home Hub Experience

2min
After signing into the app, the user experience starts on ﻿. ﻿ allows you to use various options when personalizing your ﻿ . 

There are 3 main elements used:
Widgets
Stories
Custom Home Screen (Single ﻿)
Widgets
The widgets﻿ are available in 5 different sizes: 1x1, 2x2, 4x2, 2x4, and 4x4
The jigId property refers to the name of the ﻿ we are using
There is also an optional property when - It allows the widget to be displayed/hidden in a certain situation based on the expression
﻿
Home hub wi
﻿
﻿
index.jigx
widgets: 
  - size: 1x1
    jigId: types-summary
  - size: 1x1
    jigId: components-summary
  - size: 1x1
    jigId: actions-summary
  - size: 1x1
    jigId: chart-widget-line-chart
  - size: 2x2
    jigId: avatar-on-widget
  - size: 4x2
    jigId: image-widget
  - size: 2x4
    jigId: status-widget
    when: =@ctx.system.isOffline
  - size: 4x4
    jigId: widget-list-stage-sd
    when: =@ctx.system.isOffline != true
widgets: 
  - size: 1x1
    jigId: types-summary
  - size: 1x1
    jigId: components-summary
  - size: 1x1
    jigId: actions-summary
  - size: 1x1
    jigId: chart-widget-line-chart
  - size: 2x2
    jigId: avatar-on-widget
  - size: 4x2
    jigId: image-widget
  - size: 2x4
    jigId: status-widget
    when: =@ctx.system.isOffline
  - size: 4x4
    jigId: widget-list-stage-sd
    when: =@ctx.system.isOffline != true
﻿
Stories
﻿Stories﻿ are usually used in combination with widgets
If you are using more than one story, they will be stacked into the horizontal list. To get to the next story swipe left 
When including the stories in the ﻿ you only refer to the name of the ﻿﻿
﻿
First story on home hub
﻿
﻿
Second story on home hub
﻿
﻿
Stories
stories:
  - story-group-video-dd
  - story-group-image-dd

widgets: 
  - size: 2x2
    jigId: avatar-on-widget
    isHidden: 
  - size: 1x1
    jigId: types-summary
  - size: 1x1
    jigId: components-summary
  - size: 1x1
    jigId: actions-summary
  - size: 4x2
    jigId: image-widget
  - size: 2x2
    jigId: actions
  - size: 2x2
    jigId: widget-list-stage-sd
stories:
  - story-group-video-dd
  - story-group-image-dd

widgets: 
  - size: 2x2
    jigId: avatar-on-widget
    isHidden: 
  - size: 1x1
    jigId: types-summary
  - size: 1x1
    jigId: components-summary
  - size: 1x1
    jigId: actions-summary
  - size: 4x2
    jigId: image-widget
  - size: 2x2
    jigId: actions
  - size: 2x2
    jigId: widget-list-stage-sd
﻿
Home
The home property allows you to use a single ﻿ as your ﻿﻿
It's often used in combination with widgets/ widgets + stories - This setup allows you to switch between the ﻿ and widgets view (using the options in the navigation bar)
It includes: 
            instanceId - the unique identifier of your component
            jigId - the name of the Jig we are using
            when - the condition when this view will be displayed/hidden (optional)
Home
﻿
 
Home
﻿
﻿
Home
home:
  - instanceId: List items
    jigId: list-list-item
    when: =@ctx.system.isOffline != true

widgets: 
  - size: 2x2
    jigId: avatar-on-widget 
  - size: 1x1
    jigId: types-summary
  - size: 1x1
    jigId: components-summary
  - size: 1x1
    jigId: actions-summary
  - size: 4x2
    jigId: image-widget
  - size: 2x2
    jigId: actions
  - size: 2x2
    jigId: widget-list-stage-sd
home:
  - instanceId: List items
    jigId: list-list-item
    when: =@ctx.system.isOffline != true

widgets: 
  - size: 2x2
    jigId: avatar-on-widget 
  - size: 1x1
    jigId: types-summary
  - size: 1x1
    jigId: components-summary
  - size: 1x1
    jigId: actions-summary
  - size: 4x2
    jigId: image-widget
  - size: 2x2
    jigId: actions
  - size: 2x2
    jigId: widget-list-stage-sd
﻿
﻿
﻿
Updated 27 Jun 2023
Did this page help you?
Debugging
Index settings
Docs powered by Archbee
TABLE OF CONTENTS
Widgets
Stories
Home