Custom Home Hub
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.
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 a button.
- Show a with no widgets.
- Have a placeholder showing on the .
A custom simply is a that you have created that is shown in place of the standard configured in the index.jigx file.
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.
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.
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 .
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.
- 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.
- 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.