Building Apps with Jigx
...
UI
Home Hub

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
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 .

  1. Create and configure a with the functionality and style that you require on the . The versatile jig.default is a great option to use.
  2. In the index.jigx file invoke IntelliSense (ctrl+space) and select home from the list of options.
  3. Give the home screen an InstanceId.
  4. In the jigId property use IntelliSense (ctrl+space) and select the you configured as the customized home screen.
  5. 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
Simple custom Home Hub

index.jigx
yoga-wellness.jigx


Custom with multiple components & widgets

Custom home hub
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


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.

Document image


How to configure a Hybrid 

  1. Create and configure a with the functionality and style that you require on the .
  2. In the index.jigx file invoke IntelliSense (ctrl+space) and select home from the list of options.
  3. Give the home screen an InstanceId.
  4. In the jigId property use IntelliSense (ctrl+space) and select the you configured as the customized home screen.
  5. 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


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.



Updated 05 Aug 2024
Doc contributor
Did this page help you?
Yes
No