Building Apps with Jigx
UI

Actions

15min
actions refer to specific controls or operations that respond to an event or input they range from simple operations like clicking a submit button or navigating to a previous screen to more complex tasks like data interaction actions can be configured locally within a {{jig}} or globally to be re used in multiple {{jig}} s actions can be configured at the root level of a {{jig}} , inside a component or in the index file types of actions actions allow you to do many things in an app; below are the types of actions that can be configured when creating a solution execution actions to interact with data execute entity docid\ jgwlsfzaop6u6mph6u5to execute entities docid 04w n xofaosgbbwmozha submit form docid\ covtsqysmernliworms j sync entities docid\ u9lkbkf8sgwrscow2w0rm for getting data to the device navigational actions used to navigate to another {{jig}} or {{homehub}} go to docid\ om2t6omkn6luu2u7s5ga4 go back docid\ lx00zq840zhc06t8gkwzn actions to open components open scanner docid l02eeip q4b1of0duqb8 open url docid\ bscwuuj6wjvb3k8j2zqa state actions used to determine a specific status or value of a property or component set state docid\ xgciwo 4mrlawwxftktgy reset state docid\ eqv7lutbz9p2 zyfcosyv events actions that execute after a user or device performs a trigger onrefresh onfocus onpress onload (only on index jigx) onchange ondelete onbuttonpress (only on calendar jigs) for the complete list and code examples of available actions, see action list docid\ c214apgfspkq gkyzryo7 where to add actions in a jig you can configure actions in various places in the {{jig}} file, depending on what you need to create an action as a button that appears at the bottom of the screen, place the actions property at the root level in the yaml, and as the last set of properties in the yaml the actions property has a title property used for the text on the button action button # edit customer button to navigate to the newcustomer jig actions \ children \ type action go to options title edit customer linkto updatecustomer parameters custid =@ctx datasources mydata id in a list a combination of differnet actions can be configured throughout a list {{jig}} , as shown in the example below use parameters or expressions such as =@ctx current item value to get the context specific detail you need actions can also be added to the swipeable elements of a list for example, swipe left to delete a list item actions list title list customers description show a list of all customers in a sql database type jig list icon contact header type component jig header options height medium children type component image options source uri https //images unsplash com/photo 1553413077 190dd305871c?ixlib=rb 4 0 3\&ixid=mnwxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8\&auto=format\&fit=crop\&w=1035\&q=80 \# onfocus is triggered whenever the jig is displayed the sync entities action calls the jigx sql function and populates the local sqlite tables on the device with the data returned from azure sql onfocus type action sync entities options provider data provider sql entities \ entity customers function get customers datasources mydata type datasource sqlite options provider data provider local entities \ entity customers query | select id, '$ first name', '$ last name', '$ email', '$ phone number', '$ address line1', '$ address line2', '$ city', '$ state', '$ zip code', '$ country' from \[customers] order by '$ first name' data =@ctx datasources mydata item type component list item options title =@ctx current item first name & ' ' & @ctx current item last name subtitle =@ctx current item email description | \=@ctx current item address line1 & ' ' & @ctx current item city & ' ' & @ctx current item state & ' ' & @ctx current item zip code label title =@ctx current item country leftelement element avatar text =$substring(@ctx current item first name,0,1) & $substring(@ctx current item last name,0,1) divider solid \# a go to action is triggered when pressing on a list item onpress type action go to options \# the name of the jig to navigate to when the item is pressed linkto viewcustomer parameters \# the id column of the current item being pressed on is passed as a parameter called customerid to the viewcustomer jig customerid =@ctx current item id \# add customer button to navigate to the newcustomer jig actions \ children \ type action go to options title add customer linkto newcustomer parameters custid =$uuid v4() in the index file for best performance when working with data, is to get the data when the solution loads in the {{jigxapp}} this is achieved by using the onload action in the index file which will ensure the data is available from the beginning and throughout the rest of the app index jigx widgets \ size 1x1 jigid home hub \# configure the onload to sync the salesforce data to the device when the app is opened onload type action action list options actions \ type action sync entities options provider data provider salesforce entities \ entity account \ entity opportunity \ entity opportunitystage \ entity user \ entity userrole \ entity territory2 executing multiple actions to execute a series of actions use the action list docid\ c214apgfspkq gkyzryo7 , this allows you to configure multiple actions as a group the issequential property on the action list is important as it determines when the actions are executed false executes the actions randomly true executes the actions from the top down and waits for the action to complete before executing the next action in the list, making it important to list the actions in the correct order action list onfocus type action action list options \# actions set to execute one after the other starting at the first action in the list issequential true actions \# first action to execute \ type action set state options state =@ctx solution state focus key value focused \# second action execute after the first action completes \ type action sync entities options provider data provider dynamic entities \ default/employees local actions local actions are configured inside the {{jig}} and only execute on that specific {{jig}} , for example creating a button with an action at the bottom of the {{jig}} or in a list {{jig}} when swiping left or right global actions often, the actions called during onrefresh , onload , and onfocus are exactly the same; this means that yaml is duplicated, which leads to bloat and possible issues when making changes global actions allow you to define the action once and reuse it multiple times in different {{jig}} s you can configure the global action with parameters if an action requires context specific values these global actions can be called from mutiple areas, not just lifecycle events like onfocus global actions configure global actions global actions are added under the actions folder in {{jigxbuilder}} create a jigx file under the action folder auto completion pops up with the list of available actions select the required action and configure the properties' values using expressions will provide a list of available global options such as actions, expressions, and datasources action action type action execute entity options provider data provider dynamic entity default/contacts method update onsuccess description contact updated title contact updated data id =@ctx action parameters id name =@ctx action parameters name email =@ctx action parameters email parameters id type string required true name type string required true email type string required true call the global action in a jig or index jigx open the {{jig}} where you want to call the global action use intellisense (ctrl+space) to list the available actions and select the execute action option action execute action configure the action property by selecting the global action file from the list of global action files the when proprerty can be used to determine when the global action must execute in a {{jig}} jig call action actions \ children \# use the action execute action to reference the global action \ type action execute action options title update work details action update details parameters id =@ctx components id state value name =@ctx components name state value email =@ctx components email state value configure contextual values when configuring a global action you cannot use =@ctx current item in the file as there is no context to the current item or it's value, instead configure parameters in the global actions file that can be referenced in the {{jig}} the following parameter is configurable in global actions =@ctx action parameters parametername in turn configure the parameter value in the {{jig}} with =@ctx components name state value or =@ctx current item name global action jigx action type action execute entity options provider data provider dynamic entity default/contacts method update onsuccess description contact updated title contact updated \# set the global jig parameters data id =@ctx action parameters id name =@ctx action parameters name email =@ctx action parameters email parameters id type string required true name type string required true email type string required true jig jigx actions \ children \ type action execute action options title update work details action update details \# provide the context values for the global jig parameters in the jig calling the global action parameters id =@ctx components id state value name =@ctx components name state value email =@ctx components email state value considerations when creating sub folders under the actions folder, ensure that the jigx file names in each folder are unique files with the same name will result in only the first action file being available in the intellisense list certain types of actions have been omitted as they rely on context from the {{jig}} they are defined in, and the context cannot be supplied using parameters, these are action submit form is not available in global actions because the configuration is specific for each form using the formid action open scanner action is not available in global actions the when proprerty can be used to determine when the global action executes in a {{jig}} actions can be combined with components in the ui, for example summary docid\ vx 4wcfz0igarwj5myug0 component when using the actions action list as a global action you can call another global action in the global action list global action multiple jigx action \# execute multiple actions seqentially using the action list type action action list options issequential true actions \ type action go to options linkto detail list \# reference another global action file by using execute action and cntrl+space to select available global action files \ type action execute action options action sync data sync data (global action) jigx action type action execute entity options provider data provider dynamic entity default/details method update data id =@ctx action parameters id name =@ctx action parameters name email =@ctx action parameters email parameters id type string required true name type string required true email type string required true see also file handling docid\ ugaq4ae3icfrecrwfif01