Custom Home Hub

10min

Creating a customized home screen (hub) for a mobile app can be a great way to enhance the user experience and provide more functionality than what is available in the standard home screen. In this section, we will explore the benefits of creating a custom home screen and the steps involved in configuring one. 
Custom Home Hub examples
﻿
Why customize the home hub
Creating a custom home screen is only necessary when you cannot achieve that amazing screen you want using the standard home screen. The standard home hub ﻿ offers functionalities that are enough for most users. However, a custom home screen can be a great solution if you have specific requirements or want to offer a more personalized experience, from creating a simplistic to a complex interactive hub for your users. 
Benefits of customizing the 
﻿: 
﻿
﻿ with no titles showing.
Show widgets﻿ with no titles.
Have components on the 
﻿, for example, a progress-bar﻿ or countdown﻿.
Show a button. 
Show a 
﻿ with no widgets.
Show a list﻿.
Have a placeholder showing on the 
﻿.
Show headings for different sections using section﻿.
What is a custom 
﻿﻿
A custom 
﻿ simply is a 
﻿ that you have created that is shown in place of the standard 
﻿ configured in the index.jigx file.
How to customize the 
﻿﻿
Steps to customize your 
﻿.
Create and configure a 
﻿ with the functionality and style that you require on the 
﻿. The versatile jig.default﻿ is a great option to use.
In the index.jigx file invoke IntelliSense (ctrl+space) and select home from the list of options.
Give the home screen an InstanceId.
In the jigId property use IntelliSense (ctrl+space) and select the 
﻿you configured as the customized home screen.
Add the onLoad or onRefresh events for syncing data after the home property.
Example and code snippet
Single 
﻿ custom 
﻿﻿
Here is an example of a customized 
﻿ designed for its simplicity with no titles and no widgets. A jig.default is used with a component.image and component.list. 
Simple custom Home Hub
﻿
index.jigx
yoga-wellness.jigx
name: Expo 
title: Expo
category: business

# use the home property to reference the jig you want as the home screen
home:
  - instanceId: custom
    jigId: yoga-wellness
    
# data is still synced inthe index.jigx file
onLoad: 
  type: action.sync-entities
  options:
    provider: DATA_PROVIDER_DYNAMIC
    entities:
      - default/events
name: Expo 
title: Expo
category: business

# use the home property to reference the jig you want as the home screen
home:
  - instanceId: custom
    jigId: yoga-wellness
    
# data is still synced inthe index.jigx file
onLoad: 
  type: action.sync-entities
  options:
    provider: DATA_PROVIDER_DYNAMIC
    entities:
      - default/events
﻿
Custom 
﻿ with multiple components & widgets
Custom home hub
﻿
In this example a 
﻿.default is created with an component.image , component.section, component.countdown and component.widget. The widget component references four 
﻿s and shows them as widgets that when tapped opens the 
﻿. 
yoga-custom-home.jigx
index.jigx
title: Yoga Wellness Week
type: jig.default

datasources:
  yoga: 
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - default/events

      query: 
        SELECT
          id, 
          '$.EventName', 
          '$.StartDate', 
          '$.Time', 
          '$.Venue', 
          '$.Type' 
        FROM [default/events] WHERE '$.Type' = 'Yoga'
       
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: "2024-01-25T17:30:00+02:00"
# add the widget component and reference the jigId. The list shows as a list widget covering a 2x4 block on the home hub.            
  - type: component.widgets
    options:
      children:
        - size: "4x2"
          jigId: yoga-list
        - size: "1x1"
          jigId: my-bookings
        - size: "1x1"
          jigId: yoga-location
        - size: "1x1"
          jigId: yoga-info
        - size: "1x1"
          jigId: yoga-meals
title: Yoga Wellness Week
type: jig.default

datasources:
  yoga: 
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - default/events

      query: 
        SELECT
          id, 
          '$.EventName', 
          '$.StartDate', 
          '$.Time', 
          '$.Venue', 
          '$.Type' 
        FROM [default/events] WHERE '$.Type' = 'Yoga'
       
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: "2024-01-25T17:30:00+02:00"
# add the widget component and reference the jigId. The list shows as a list widget covering a 2x4 block on the home hub.            
  - type: component.widgets
    options:
      children:
        - size: "4x2"
          jigId: yoga-list
        - size: "1x1"
          jigId: my-bookings
        - size: "1x1"
          jigId: yoga-location
        - size: "1x1"
          jigId: yoga-info
        - size: "1x1"
          jigId: yoga-meals
﻿
Hybrid 
﻿﻿
You can combine a standard 
﻿ with a custom 
﻿. The hybrid experience will be that you can switch between the 
﻿s using the toggle icon at the bottom of the screen. 
 The custom 
﻿ will always be the first home screen to show, to view the standard 
﻿use the toggle icon in the navigation icons.
﻿
How to configure a Hybrid 
﻿﻿
Create and configure a 
﻿ with the functionality and style that you require on the 
﻿. 
In the index.jigx file invoke IntelliSense (ctrl+space) and select home from the list of options.
Give the home screen an InstanceId.
In the jigId property use IntelliSense (ctrl+space) and select the 
﻿you configured as the customized home screen.
Under the widgets property in index.jigx add the size and jigId as you would for the standard 
﻿. You can configure an onPress event with the widget properties that can be configured to do something other that open the 
﻿, for example, open a url.
index.jigx
yoga-wellness.jigx
name: Yoga Wellness Week
title: Yoga Wellness Week
category: business
 
onLoad: 
  type: action.sync-entities
  options:
    provider: DATA_PROVIDER_DYNAMIC
    entities:
      - default/events
# Add the jig you want to use as the custom home hub under home. This jig is the first of the home hubs to render   
home:
  - instanceId: custom
    jigId: yoga-wellness 
# Add the widget references for the standard home hub which will be the second hub to display when the icon is toggled
widgets:
- size: "4x2"
  jigId: yoga-image-widget
- size: "1x1"
  jigId: my-bookings
- size: "1x1"
  jigId: yoga-location
- size: "1x1"
  jigId: yoga-info
- size: "1x1"
  jigId: yoga-meals 
  onPress: 
    type: action.open-url
    options:
      url: https://thrivemarket.com/?utm_source=google&utm_medium=cpc&utm_campaign=Non-Brand_SEM_Diet_Healthy&utm_content=151719993106&utm_term=healthy%20food&device=c&ccode=acq60fogwp&ccode_force=1&gad_source=1&gclid=Cj0KCQjwpNuyBhCuARIsANJqL9ODbLM28MMxGvxJ9gK9ohdecVeLkrldAriwFwYg91JDLUEBMfwvK74aAsv6EALw_wcB
name: Yoga Wellness Week
title: Yoga Wellness Week
category: business
 
onLoad: 
  type: action.sync-entities
  options:
    provider: DATA_PROVIDER_DYNAMIC
    entities:
      - default/events
# Add the jig you want to use as the custom home hub under home. This jig is the first of the home hubs to render   
home:
  - instanceId: custom
    jigId: yoga-wellness 
# Add the widget references for the standard home hub which will be the second hub to display when the icon is toggled
widgets:
- size: "4x2"
  jigId: yoga-image-widget
- size: "1x1"
  jigId: my-bookings
- size: "1x1"
  jigId: yoga-location
- size: "1x1"
  jigId: yoga-info
- size: "1x1"
  jigId: yoga-meals 
  onPress: 
    type: action.open-url
    options:
      url: https://thrivemarket.com/?utm_source=google&utm_medium=cpc&utm_campaign=Non-Brand_SEM_Diet_Healthy&utm_content=151719993106&utm_term=healthy%20food&device=c&ccode=acq60fogwp&ccode_force=1&gad_source=1&gclid=Cj0KCQjwpNuyBhCuARIsANJqL9ODbLM28MMxGvxJ9gK9ohdecVeLkrldAriwFwYg91JDLUEBMfwvK74aAsv6EALw_wcB
﻿
Best practice
Adding videos directly to the customized 
﻿ should be avoided if possible, instead add a gallery of images that when tapped open a 
﻿ with the video.
Consider what you adding to the customized 
﻿as it could impact the app's performance, for example, long lists with data.  
The onload event must still be configured on the index.jigx file for syncing data to the device. 
When deciding on the type of 
﻿ to use as the 
﻿ it is recommended to use the  jig.default﻿ as it provides the broadest scope of components, actions, and widgets.  
﻿