Migration plan

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 Jigx Builder, 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.

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

2. The location now supports custom markers, state-based markers, user location display, radius, and location tracking.

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 for more information.
widgets property in jig files.	widgets in jig 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 jig previously referenced in home as the custom Home Hub now in the tabs property. The first jig configured under the tabs property becomes is the first screen displayed when the app is opened.
N/A	jig-grid - a new jig type used to configure jigs and components in a grid layout. See for more information.
component.widgets	grid and grid-item component - a new component used to add a grid layout in a jig. This allows you to combine a grid layout with other components. See 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. : []{src="" size="44" position="center" caption="Switch solutions" alt="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 Home Hub .

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 jig or in the grid-item.

4. Remove the home property.

   • Reference the custom Home Hub 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

name: student-app
title: Student-app
category: analytics
# Stories have been deprecated.
stories:
  - story-group-video
  - story-group-image
# Home has been replaced with tabs, see new-index.jigx example.
home:
  - instanceId: home-jig
    jigId: home-jig
# Widgets have been replaced with tabs and inputs must be specified in the jig iteself,
# or in the grid-item component.
widgets:
  - size: 2x2
    jigId: student-courses
  - size: 1x1
    jigId: students-details
    inputs:
      name: [email protected]
      number: 350.66
      boolean: true
      array:
        [
          { name: John, age: 30 },
          { name: Melany, age: 35 },
          { name: Scott, age: 21 },
        

new-index.jigx

custom home-hub

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

old-index.jigx

name: Expo
title: Expo
category: business

# home and instanceId needs to be removed in the new structure.
home:
  - instanceId: custom
    jigId: yoga-wellness

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

new-index.jigx

widgets in jigs

In jig 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

widgets:
  # Replace 2x2 with a name for the widget that becomes the widgetId.
  2x2:
    type: widget.avatar
    options:
      text: LS
      uri: https://i.pravatar.cc/150?img=68
      bottom:
        type: component.titles
        options:
          align: center
          title: Leo Siphron
          subtitle: React Web Developer

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

children:
  # Basic location component with address.
  - type: component.location
    options:
      address: |
        [email protected] & ',' & 
        @ctx.datasources.address.city & ',' & 
        @ctx.datasources.address.country
      zoomLevel: 9

  # Basic address with latitude and longitude.
  - type: component.location
    options:
      address: |
        40.759412, 
        -73.912306

  # Location component with paths.
  - type: component.location
    options:
      pathsData: [email protected]
      isAnimationDisabled: true

  # Location component with markers.
  - type: component.location
    options:
      markersData: |
        [email protected]_location.
        {"lat":$.latitude, 
        "lng":$.longitude}
      zoomLevel: 12
      isAnimationDisabled: false

new-location-component

datasources