Widgets

widgets are navigational menu blocks shown either on the home hub docid\ gpvp1ajqwxiru83 jpzed or in a jigs (screens) docid\ i3uxj6x77d qvigo kjjc and are used to display information and provide interactivity widget sizes and content, such as icons, locations, images, charts, and more, are configurable configuration sizes a widget can be configured with the following sizes \ 1x1 \ 2x2 \ 2x4 \ 4x2 \ 4x4 consider the layout of the widgets on the mobile app screen specific sizes cover the entire width of the screen, for example, 4x4 the image on the right shows the layout of widgets on a mobile app screen how to configure widgets widget configuration add an icon to the top level of your jig the jigid , and size are configured in a jig grid https //docs jigx com/examples/jiggrid or grid item https //docs jigx com/examples/grid item component to display the widget jig with icon jigx title add new employee type jig default icon person jig grid jigx type component grid item options size "1x1" children type component jig widget options jigid jig with icon 2x2, 2x4, 4x2, and 4x4 widgets configured with content widgets are configured in the yaml in a jig file and a unique widget name is provided that is referred to as the widgetid the jigid , widgetid , and size are configured in a jig grid https //docs jigx com/examples/jiggrid or grid item https //docs jigx com/examples/grid item component to display the widget if inputs are required to pass data into the widget then configure them in the grid item under the inputs property inputs are not mandatory and are dependant on the scenario jig with widget jigx widgets \# provide a unique name for the widget this becomes the widgetid dev avatar \# configure the type of widget to display in the grid item type widget avatar options text ls \# configure the widget properties with inputs defined in the grid item, \# if data is to be passed into the widget uri =@ctx jig inputs photo bottom type component titles options align center title =@ctx jig inputs name subtitle react web developer jig grid jigx children \ type component grid item options \# specify the size of the grid item (widget) size "2x2" children type component jig widget options jigid jig with widget widgetid dev avatar \# if the widget requires inputs add it in the grid item inputs photo =@ctx user avatarurl name =@ctx user displayname change the widget behavior by default when tapping on a widget you are directed to the corresponding jig you can change the behavior of the widget by adding an onpress event to the widget configuration the onpress is configured with an action, which is triggered when pressing on the widget use intellisense to see the available list of actions jig jigx type component grid item options size "1x1" children type component jig widget options jigid company site \# add an onpress to open a specific url onpress type action open url options url https //docs jigx com change the widget content there are various ui elements available to make your widget inviting and engaging to end users content or information can be shown on the surface of a widget here is a list of available content/information widgets widget content description jigx icons docid 0vs mac9xgx524crpdiar choose an icon from thousands of available icons actions (buttons) https //docs jigx com/examples/actions buttons configure a button with an action that executes avatar https //docs jigx com/examples/veub avatar display an avatar on the widget chart https //docs jigx com/examples/chart configure a bar, line or pie chart to display on the widget image https //docs jigx com/examples/image configure an image to display on the widget, consider the size of the widget to ensure the image displays as expected , 1x1 is not suitable for most images list https //docs jigx com/examples/list display a list of data in the widget with additional left and right elements if required location https //docs jigx com/examples/location show a location in a map on the widget with markers status https //docs jigx com/examples/status configure a visual representation of a status, such as goal status, or sales quarterly status value https //docs jigx com/examples/value show values and amounts on the widget, such as sales target or number of orders to date to configure the widget content specify the widget property at the bottom of the jig provide a widget name for the widget that is referenced as the widgetid select the type of content to display in the widget you still need to add the widget size and jigid to the grid item component after changing the content of the widget in the jig file 1 configure an icon by default widgets are shown on the grid item with an icon if no icon is specified jigx assigns a default icon to the widget to configure an icon, add the icon property in the jig itself start typing the first two letters of an jigx icons docid 0vs mac9xgx524crpdiar to see a list of thousands of icons you can choose from in the example below the location icon is specified to replace the default icon yoga location jigx title location type jig default \# add an icon in the jig that displays on the widget icon location datasources address type datasource static options data \ street 768 5th ave city new york country us children \ type component location options viewpoint centerposition middle address | \=@ctx datasources address street & ',' & @ctx datasources address city & ',' & @ctx datasources address country zoomlevel 9 grid item jigx title yoga type jig grid children \ type component grid item options size "1x1" children type component jig widget options jigid yoga location 2 configure the widget content in jigx builder open the jig whose widget you want to configure use intellisense (ctrl+space) at the root level and select widgets specify the widget name next choose the type of content to display on the widget, such as widget location use intellisense to invoke the list of available types depending on the type you selected additional properties are required, see widget https //docs jigx com/examples/widgets examples on how to configure each type accordingly add the widget ( size , jigid , widgetid , and inputs ) to the grid item https //docs jigx com/examples/grid item in the example below the widget content is configured to show a location on the widget surface yoga studio jigx title location type jig default datasources address type datasource static options data \ street 768 5th ave city new york country us children \ type component location options viewpoint centerposition middle address | \=@ctx datasources address street & ',' & @ctx datasources address city & ',' & @ctx datasources address country zoomlevel 9 \#add a location content type to display on the widget surface widgets locationwidget type widget location options viewpoint centerposition middle address | \=@ctx datasources address street & ',' & @ctx datasources address city & ',' & @ctx datasources address country zoomlevel 9 home jigx title home type jig grid children \ type component grid item options \# specify the widget size \# ensure the selected size will display the content t size "2x2" children type component jig widget options jigid yoga studio widgetid locationwidget how to move or rearrange widgets the widgets display order on a screen is determined by the order of the grid item https //docs jigx com/examples/grid item in the yaml you can change the order of the widgets by simply changing the order in the yaml it is important to take into consideration the configured size of each widget when ordering widgets changing the order of the widgets can give your app a completely different look placing a 4x2 followed by 4x4 will result in white space next to the 4x2 initial widget order in grid https //docs jigx com/examples/grid home jigx title yoga type jig grid children \# first widget displayed \ type component grid item options size "4x2" children type component jig widget options jigid yoga image widget widgetid yoga image \# second widget \ type component grid item options size "1x1" children type component jig widget options jigid my bookings \# third widget \ type component grid item options size "1x1" children type component jig widget options jigid yoga location \# fourth widget \ type component grid item options size "1x1" children type component jig widget options jigid yoga info \# fifth widget \ type component grid item options size "1x1" children type component jig widget options jigid yoga meals reordered and resized widgets home jigx title yoga type jig grid children \ type component grid item options size "2x2" children type component jig widget options jigid my bookings \ type component grid item options size "2x2" children type component jig widget options jigid yoga location \ type component grid item options size "4x2" children type component jig widget options jigid yoga image widget widgetid yoga image \ type component grid item options size "2x2" children type component jig widget options jigid yoga info \ type component grid item options size "2x2" children type component jig widget options jigid yoga meals widget labels and titles widget labels are shown under the widget, and are read from the configured title property of the jig to display a widget with no label use title ' ' in the jig to display a label on the widget surface use the widget titles https //docs jigx com/examples/w2nl titles widget badging enhance your widget with a customizable badges for instance showing the number of events this week or the number of new orders add the badge property to the jig yaml with an expression calendar jig # jig file title calendar type jig calendar icon calendar 3 \# badge counting the number of events in the calendar, the badge shows on the widget badge =$count(@ctx datasources calendar data id) new customer jig title new customers type jig default \# add the badge to show when there are new customers to process badge =@ctx datasources customer new = 1 ? 0 1 inputs inputs allow you to pass data to the jig associated with the widget for example, when a customer taps on my orders widget the input is configured to pass that specific customer's id and name to the jig ensuring only the orders for that customer are shown for more information on inputs see passing data using inputs docid\ apjdctu2dlagpb1fsjvwf index jigx type component grid item options size "2x2" children type component jig widget options jigid my orders widgetid order detail \# specify the inputs for the widget inputs customer name =@ctx datasources customer\[5] name id =@ctx datasources customer\[5] id widget visibility & access you have the ability to control which widgets are visible as well as when the widget must be visible control which widgets are visible to certain user groups by granting permissions on each widget in a solution in jigx management > widgets / / /administration/solutions/widgets md by default everyone with access to the solution has the widgets visible in the app use the when property configured by an expressions docid\ gsvs1zswrgpc0ewjvpihm or a boolean statement to determine when a widget must be visible for example, show the order widget when there are orders awaiting approval grid jigx type component grid item \# determine when the widget will display when =@ctx datasources get hiker level participant group = 'easy' options size "4x4" children type component jig widget options jigid location considerations the content of the widget will determine the size to select for example, showing an image or location on a 1x1 widget will not display well rather uses a 4x4 or 4x2 best practice is to arrange widgets that fill the screen with no additional white space plan and design the widget layout and size of each widget in a design app or simply draw it on paper for more information see planning your app docid\ mwzyji2tyglhzfp3ujr1p a 1x1 widget will only display an icon examples and code snippets see widgets https //docs jigx com/examples/widgets for full code samples