Building Apps with Jigx
Home Hub

2min
Having a good home screen is essential for any mobile app as it is the first screen that users see when they open the app. A home screen should provide users with quick access to the most important features of the app, while also being visually appealing and easy to navigate. It should be intuitive and provide users with a clear understanding of what the app does and how to use it.  Careful consideration should be given during the design﻿ process. In 
﻿ the home screen is called 
﻿ and is accessed after signing into the app.
 
﻿ allows you to use various options when personalizing your 
﻿. 

There are three main elements used:
﻿Widgets﻿﻿
﻿Stories﻿﻿
﻿Custom Home Hub﻿ (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 that allows the widget to be displayed/hidden in a particular situation based on the expression.
Add an onPress event to a widget to configure an action such as open-url without going to 
﻿. 
Home hub 
﻿
index.jigx
index.jigx (with onPress)
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: [email protected]
  - size: 4x4
    jigId: widget-list-stage-sd
    when: [email protected] != true
  - size: 1x1
    jigId: onpress-widget 
       onPress: 
        type: action.open-url
        options:
          url: https://docs.jigx.com  
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
  - size: 1x1
    jigId: onpress-widget 
       onPress: 
        type: action.open-url
        options:
          url: https://docs.jigx.com  
﻿
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 .
Stories are created in a 
﻿ and the included in the 
﻿ by referencing 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 
﻿. If you want to create a Custom Home Hub﻿ you create a 
﻿and reference the 
﻿under the home property.
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 
﻿ you are using.
when - the condition when this view will be displayed/hidden (optional).
Home Hub when offline
﻿
Home Hub when online
﻿
Home
home:
  - instanceId: List items
    jigId: list-list-item
    # the list of items only displays if the decvice is offline
    when: [email protected] != 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
    # the list of items only displays if the decvice is offline
    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 31 May 2024
Did this page help you?
Index settings
Docs powered by Archbee
TABLE OF CONTENTS
Widgets
Stories
Home