Creating a Home Hub

Creating a home screen (hub) for a mobile app can be a great way to enhance the user experience and provide more functionality. In this section, we will explore the benefits of creating a home screen and the steps involved in configuring one.

How to create a Home Hub

Steps to customize your Home Hub:

1. Create and configure a jig with the functionality and style that you require on the Home Hub. The jig.default or jig.grid are great options to use.

2. Use IntelliSense (ctrl+space) to open the list of available options in the index.jigx file, and select tabs.

3. In the jigId property, use IntelliSense again to choose the jig you configured as your Home Hub.

4. Optional - Choose an icon that will represent the Home Hub. The selected icon is displayed as the first icon in the navigation bar at the bottom of the app.

5. Add the onLoad or onRefresh events for syncing data.

6. You can configure additional tabs by repeating the steps above.

Example and code snippet

Single jig Home Hub

Here is an example of a Home Hub designed for its simplicity. A jig.default is used with a component.image and component.list.

Simple List Home Hub

index.jigx

name: Expo 
title: Expo
category: business

# Data is synced in the index.jigx file.
onLoad: 
  type: action.sync-entities
  options:
    provider: DATA_PROVIDER_DYNAMIC
    entities:
      - default/events

# Use the tabs property to reference the jig you want as the home screen.
# Select an icon for the jig in the bottom navigation bar.
tabs:
  - jigId: yoga-wellness
    icon: home-apps-logo

yoga-wellness.jigx

Home Hub with multiple components & widgets

Custom home hub

In this example a jig.default is created with a component.image , component.section, component.countdown and component.grid. The grid component references four jigs and shows them as widgets that when tapped opens the jigs

yoga-home.jigx

title: Yoga Wellness Week
type: jig.default
       
children: 
  - type: component.image
    options:
      height: 200
      resizeMode: cover
      source:
        uri: https://images.unsplash.com/photo-1524901548305-08eeddc35080?w=700&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8Y2FsbXxlbnwwfHwwfHx8MA%3D%3D
 
  - type: component.section
    options:
      title: Yoga Wellness Week
      children:
        - type: component.countdown
          options:
            size: medium
            expiresAt: "2025-01-25T17:30:00+02:00"
    
  - type: component.grid
    options:
      children:
        - type: component.grid-item
          options:
            size: 4x2
            children: 
              type: component.jig-widget
              options:
                jigId: yoga-list
        - type: component.grid-item
          options:
            size: 1x1
            children: 
              type: component.jig-widget
              options:
                jigId: my-bookings
        - type: component.grid-item
          options:
            size: "1x1"
            children: 
              type: component.jig-widget
              options:
                jigId: yoga-location
        - type: component.grid-item
          options:
            size: "1x1"
            children: 
              type: component.jig-widget
              options:
                jigId: yoga-info
        - type: component.grid-item
          options:
            size: "1x1"
            children: 
              type: component.jig-widget
              options:
                jigId: yoga-meals 

index.jigx

datasource

Home Hub with multiple tabs in bottom navigation bar

In this example, four jigs are created. In the index.jigx file, they are configured in the tabs properties, which generates the custom bottom navigation bar.

Bottom navigation bar with 4 tabs

index.jigx

name: Expo 
title: Expo
category: business
    
# Data is synced in the index.jigx file.
onLoad: 
  type: action.sync-entities
  options:
    provider: DATA_PROVIDER_DYNAMIC
    entities:
      - default/events
# Configure the tabs in the bottom navigation bar.
# Select an icon for the jig in the bottom navigation bar.
# The first four tabs display in the bottom navigation bar.
# Additional tabs display when the More (ellipsis) button is tapped.         
tabs:
  Home:
    jigId: yoga-wellness
    icon: home-apps-logo
  Location:
    jigId: yoga-location
    icon: location
  Meals:
    jigId: yoga-meals
    icon: vegan-vegetarian-food-dome
  Bookings:
    jigId: my-bookings
    icon: event        

yoga-wellness.jigx

yoga-location.jigx

yoga-meals.jigx

my-bookings.jigx

Best practice

• Adding videos directly to the Home Hub should be avoided if possible, instead add a gallery of images that when tapped open a jig with the video, use grid-item to create the gallery.

• Consider what you add to the Home Hub as it could impact the app's performance, for example, long lists with data.

• The onload event must be configured on the index.jigx file for syncing data to the device.

• When deciding on the type of jig to use as the Home Hub it is recommended to use the jig.default or jig.grid as they provide the broadest scope of components, actions, and widgets.