Migration plan

release 2025 1 https //docs jigx com/release notes#affhn 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 the updated index jigx with tabs , and new jig grid https //docs jigx com/examples/jiggrid functionality let you define the app layout precisely from the start, ensuring easy navigation and better utilization of space on the home hub the location now supports custom markers, state based markers, user location display, radius, and location tracking 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 home hub docid\ gpvp1ajqwxiru83 jpzed 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 jig grid https //docs jigx com/examples/jiggrid 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 grid https //docs jigx com/examples/grid and grid item https //docs jigx com/examples/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 image\[]{src=" https //archbee image uploads s3 amazonaws com/0tqnkgjpswht3gqzqohdy ngrww9smnv vpn6k1f6re 20250130 102419 png https //archbee image uploads s3 amazonaws com/0tqnkgjpswht3gqzqohdy ngrww9smnv vpn6k1f6re 20250130 102419 png " 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 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 https //docs jigx com/examples/video player or carousel https //docs jigx com/examples/carousel components 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 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 remove the home property reference the custom home hub jigid in the first tabs property to maintain the same functionality 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 =@ctx user displayname number 350 66 boolean true array \[ { name john, age 30 }, { name melany, age 35 }, { name scott, age 21 }, ] new index jigx name student app title student app category analytics tabs home jigid home jig icon home apps logo course jigid student courses icon online class student details jigid student details icon people man 1 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 name expo title expo category business \# add tabs and reference the previous home jig as a tab, \# you can even call the tab home and give it a home icon tabs home jigid yoga wellness icon home \# data is still synced inthe index jigx file onload type action sync entities options provider data provider dynamic entities \ default/events 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 widgets \# specify a widgetid dev avatar 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 grid item children \ type component grid item options \# specifiy the size of the widget size "2x2" children type component jig widget options jigid jig a \# the widgetid will automatically populate, \# if you have specified one in the jig's widget property widgetid dev avatar 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 | \=@ctx datasources address street & ',' & @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 =@ctx datasources coordinates isanimationdisabled true \# location component with markers \ type component location options markersdata | \=@ctx datasources live location {"lat" $ latitude, "lng" $ longitude} zoomlevel 12 isanimationdisabled false new location component children \# basic address \ type component location options viewpoint centerposition middle address 768 5th ave, new york, us zoomlevel 14 markers data =@ctx datasources address item type component marker item options address =@ctx datasources address\[0] street children type component icon options color negative icon pin 1 map \# basic address with latitude and longitude \ type component location options viewpoint centerposition middle latitude =@ctx datasources appointments\[0] latitude longitude =@ctx datasources appointments\[0] longitude markers data =@ctx datasources appointments item type component marker item options latitude =@ctx current item latitude longitude =@ctx current item longitude children type component icon options color negative icon pin 1 map \# multiple markers \ type component location options viewpoint centerposition middle address =@ctx datasources address\[1] street markers data =@ctx datasources points \# location with paths \ type component location options paths data =@ctx datasources points viewpoint centerposition middle latitude 40 759412 longitude 73 912306 isanimationenabled true \# a new action opens a modal, \# allowing you to select a map app on your device for navigation to an address actions \ children \ type action open map options icon landmark empire state title empire state building address 20 w 34th st , new york, ny 10001, united states datasources datasources \# first datasource used in the basic address example address type datasource static options data \ id 1 street 768 5th ave city new york country us \ id 2 street 137 w 111th st city new york country us \# second datasource used in location with paths example points type datasource static options data \ lat 40 759412 lng 73 912306 \ lat 40 745368 lng 74 057189 \# third datasource used in basic address latitude and longitude appointments type datasource static options data \ id 1 name empire state building latitude 40 748676182418976 longitude 73 98567513213604 address 20 w 34th st , new york, ny 10001, united states icon home \ id 2 name great lawn softball field 6 latitude 40 782091612607864 longitude 73 9655512166898 address 86th st transverse, new york, ny 10024, united states icon stadium 1 building \# fourth datasource used in the old location component with paths coordinates type datasource static options data \ id 1 latitude 40 769702 longitude 74 038241 \ id 2 latitude 40 759412 longitude 73 912306 \ id 3 latitude 40 803495 longitude 73 950694