Building Apps with Jigx
Best practice

Migration plan

9min

Release 2025.1 - introduces several updates to the index.jigx file, widgets, and location. Some properties have been deprecated, and a new grid jig type and a grid-item component have been added. These updates provide more versatility in app design, enhance layout options, and optimize screen space usage. To take advantage of these new features in your existing solutions, follow the guidance below to update your implementation.

Existing solutions

Existing solutions will continue to function in the mobile app as before. The navigation menu at the bottom of the app will now display as a bar and includes the profile icon that has been moved from the top right-hand corner into the navigation bar. In , deprecated or changed YAML properties are highlighted with a red squiggle. Before making changes, carefully review the affected areas and the migration steps outlined below. Plan your updates thoroughly, as multiple files may be impacted and require updates or code relocation to new files.

Existing solutions before updatesting Solutions
Existing solutions before update

Existing solutions after update
Existing solutions after update


New solutions

New solutions now offer greater versatility.

  1. The updated index.jigx with tabs, and new jig.grid functionality let you define the app layout precisely from the start, ensuring easy navigation and better utilization of space on the .
  2. The location now supports custom markers, state-based markers, user location display, radius, and location tracking.



New solution layout
New solution layout


Affected areas

The table below outlines the areas impacted by the introduction of bottom tab navigation, and the deprecation of the stories, home, and widgets properties in the index.jigx file.

Old

New

widgets property in index.jigx file.

tabs property in index.jigx file. See tabs for more information.

widgets property in files.

widgets in files now require a widgetId (Widget Name) property and remove the size, e.g. 1x1.

stories property in index.jigx story-group component

Deprecated.

home property in index.jigx file.

Reference the previously referenced in home as the custom now in the tabs property. The first configured under the tabs property becomes is the first screen displayed when the app is opened.

N/A

jig-grid - a new type used to configure s and components in a grid layout. See jig.grid for more information.

component.widgets

grid and grid-item component - a new component used to add a grid layout in a . This allows you to combine a grid layout with other components. See grid and grid-item for more information.

User profile

User profile has moved to the bottom tabs navigation. The user avatar will always show as the last tab in the navigation bar.

Solutions (Home)

Solution switching has moved into the user profile screen. A switch button opens the solution list for selection.

Switch solutions
Switch solutions


component.location

The location component's YAML structure now supports custom markers, state-based markers, user location display, and location tracking.

Migration steps

index.jigx

  1. Remove the stories property. - Delete the stories property and any associated jigs. Stories are deprecated and no longer displayed in the app. - To replicate this functionality, consider using the video-player or carousel components.
  2. Replace the widgets property.
    • Replace the widgets property with a new tabs property.
    • Define the tabs you want to display in the bottom tab navigation. Note:
      • A maximum of four tabs can be rendered.
      • The last tab will display the user avatar, linking to the user profile (previously located in the top-right corner).
      • The first jig listed under the tabs property will become the initial screen shown when the app is opened, the .
  3. Configure the tabs property.
    • For each tab, specify the following required properties: Tab Name, jigId, and icon.
    • Optional properties include badge and when.
    • Inputs previously specified in the index.jigx file must now be defined within the corresponding or in the grid-item.
  4. Remove the home property.
    • Reference the custom jigId in the first tabs property to maintain the same functionality.
  5. Unchanged properties.
    • All other properties, such as expressions, onLoad, onRefresh, and scripts, remain unchanged.
old-index.jigx
new-index.jigx


custom home-hub

To maintain the same functionality, reference the custom jigId in the first tabs property. Alternatively, take this opportunity to design a new by configuring a with both standard and custom components to be used in the tabs property.

old-index.jigx
new-index.jigx


widgets in jigs

In files using the component.widgets property, the YAML structure must be updated. Replace the size (e.g., 2x2) with a widgetId. The size is now configured in the grid-item property.

old-widget-property
new-widget-property
grid-item


location

Existing solution location components will continue to function as before, with one notable change: the default red markers will now appear as smaller black markers. To retain the red marker, configure the location marker icon to use the end-marker value. However, once a solution is republished, you must update the component.location YAML to ensure the location continues to function as expected.

Multiple enhancements were made to the location component which changed the YAML structure, these include:

  • User's location display
  • Follow a user location
  • A new action, action.open.map, opens a modal, allowing you to select a map app on your device for navigation to an address.
old-location-component
new-location-component
datasources