Expressions
16 min
expressions allow you to structure and manipulate data before binding it to the ui components expressions are jsonata based jsonata is a lightweight query and transformation language for json data it also provides a rich complement of built in operators and functions for manipulating and combining data expressions are jsonata language based learn more about https //jsonata org/ https //jsonata org/ jsonata and try out your expressions in their https //try jsonata org/ https //try jsonata org/ jsonata exerciser the root element of expressions in jigx files always starts with "@ctx" vs "$$ " in jsonata exerciser (e g @ctx data vs $$ data) jigx supports shorthand $ expressions for jsonata shared expressions the shared expressions can be set either in the index jigx file or in the jig itself the expressions property is used for this and allows you to choose a custom name for the expression and save a value global expressions set in the index jigx expressions that are set in the index jigx are reusable throughout your whole solution by referencing the global expression in the jig create the reference to the global expression by using =@ctx expression ``name in the jig index jigx title jigx samples name jigx samples expressions lat =@ctx system geolocation coords latitude lng =@ctx system geolocation coords longitude expressions jigx title shared expressions example type jig default children \ type component entity options children \ type component section options title coordinates children \ type component entity field options label current latitude value =@ctx expressions lat \ type component entity field options label current longitude value =@ctx expressions lng expressions set inside the jig these expressions are only available in the jig itself title shared expressions example type jig default expressions numberofemployees =$count(@ctx datasources employee list id) address =@ctx datasources employee detail street & ', ' & @ctx datasources employee detail county & ', ' & @ctx datasources employee detail city employee =@ctx datasources employee detail name & ' ' & @ctx datasources employee detail surname & ', ' & @ctx datasources employee detail position children \ type component entity options iscompact true children \ type component section options title all employees children \ type component entity field options label number of employees value =@ctx expressions numberofemployees \ type component section options title employee detail children \ type component entity field options label employee value =@ctx expressions employee \ type component entity field options label employee address value =@ctx expressions addressdatasources employee list type datasource static options data \ id 1 name karl surname fisher \ id 2 name lucy surname nelson \ id 3 name mary surname gomez \ id 4 name john surname doe employee detail type datasource static options data \ id 1 street 89 55 hudson rd county bellerose city ny name karl surname fisher position ux designer expression structure avoid using state keywords, such as component , as instanceid values in expressions doing so will cause an "expression is not valid" error in the app using intellisense in jigx builder shows where and when you can add an expression by displaying the =$ or =@ctx in jigxexpressions alwasy start with = jigx converts @ctx to $$ when executing expressions in jsonata adding an empty array index \[] in the path forces jsonata to return an array of one item versuses the normal behavior where it returns the item directly \=@ctx datasources value \[{}] => {} \[{},{}] => \[{},{}] \=@ctx datasources value\[] \[{}] => \[{}] ← notice array of one \[{},{}] => \[{},{}] expressions can be used in many ways when creating apps, here are common use cases use description example datasource to call data from a datasource =@ctx datasource mydata datacolumn component used inside a component to reference data in that component =@ctx component state value components used in a jig to reference data from various components in that jig =@ctx components list state filter current item use data in the current component =@ctx current item value jig pull data in from another jig =@ctx jig inputs jigname description jigs pull data in from multiple jigs =@ctx jigs organization reference the name or id of the jigx organization https //docs jigx com/organization settings =@ctx organization name solution reference the jigx solution https //docs jigx com/solution details =@ctx solution name system get data about various system https //docs jigx com/examples/jigx variables#qusxj values such as offline status =@ctx system isoffline user reference data about the current jigx user https //docs jigx com/users =@ctx user displayname advanced expressions advanced expressions are helpful when you need to filter an array of records to display specific data and perform expression transformations over the data so, instead of writing complicated procedures and statements, you can run jsonata expressions https //docs jigx com/examples/advanced expressions to get the result you can format the expression strings and have them inline or multiline inline when you are writing advanced expressions, make sure you have the expression starting with '=' inside the quotes, as shown below advanced expression jigx text "=(@ctx datasources table field1 = '1' ? 'jane' 'rob') & ' ' & (@ctx datasources table field2 = '2' ? 'derek' 'doe')" multiline you can write advanced expressions as multiline, for better readability and cleaner code formatting when writing a multiline expression, make sure you have the expression in quotes and the next line must be indented on the same level as shown below advanced expression jigx title "=(@ctx datasources table field1 = '1' ? 'jane' 'rob') & ' ' & (@ctx datasources table field2 = '2' ? 'derek' 'doe')" javascript expressions you can use javascript functions in expressions to build logic into your solution this makes repetitive and complex tasks less taxing and makes the code easier to read, understand, and debug javascript functions surface as an expression in the yaml in jigx builder wherever you can add an expression, you can use jsonata, regex, javascript functions, or a combination of these to create logic in your app what is supported? only js files containing javascript functions are supported creating any file in the scripts folder, automatically adds the js extension currently, only https //date fns org/ https //date fns org/ date fns libraries are supported if you require other javascript libraries, contact https //mailto\ support\@jigx com https //mailto\ support\@jigx comsupport\@jigx com mailto\ support\@jigx com functions that call web services are not supported how does it work? javascript functions create the javascript function open a solution in jigx builder create a new file under the scripts/expressions folder and save it with a js extension, for example, functions js within this file, you can define your functions for a single functions, you simply write the function definition for multiple functions, you can define each function in a single file or separate then into their own files each function must be prefixed with export , for example, export function helloworld() { return 'hello world' } import is used to define the format for a specific function, for example, import { adddays, isweekend, format } from 'date fns'; export function getnextbusinessday(date) { let nextday = adddays(date, 1); while (isweekend(nextday)) { nextday = adddays(nextday, 1); } return format(nextday, 'mmmm d, yyyy'); } call the javascript function in an expression in a jig, where you configure an expression, use intellisense to surface the defined functions from the script/expression js files intellisense provides the javascript language options for selection starting with the =$ shortcut followed by the javascript file name and then the function name, such as =$functionfilename functionname , for example, =$jsfunctions helloworld() considerations one or more functions can be defined in a single javascript file this caters for the exporting of files multiple javascript files can be added under the script > expression folder in an expression, you can have functions inside functions, see tax calculation https //docs jigx com/examples/javascript expressions#qhbmt for an example javascript files are recognized throughout the solution and can by reused in multiple jigs javascript functions are not a replacement for jsonata expressions each has its purpose; combining the two will empower you while creating apps in certain instances, jsonata is inline and can be quicker and easier than using a javascript function, such as concatenating first and last names javascript functions can be used instead of regex expressions used for validation for example, javascript functions can be used to format a phone number rather than regex to validate if it is in the correct format use f12 to navigate from an expression to the javascript function script file see editor docid 0qer6kqt7jb1pjap7d36t from the script file use shift + f12 or right click and select editor docid 0qer6kqt7jb1pjap7d36t to see where all the script file is used in expressions jsonata and regular expressions in jigx you can combine a jsonata expression with a regex expression to create a validation pattern and provide a message if the pattern does not match see validation docid\ ybhesxwxdfsbraboirhxy and regex expression examples https //docs jigx com/examples/regex expressions for more information expression examples expressions are a powerful and flexible way to transform and extract data for use in a jigx app below are links to examples showing how jsonata expressions can be used when creating apps jsonata expressions example of use arrays https //docs jigx com/examples/arrays create filtered lists from arrays and handling arrays with sql and dynamic data aggregation https //docs jigx com/examples/aggregation to return minimum, maximum or an average value in an array boolean https //docs jigx com/examples/boolean evaluate data to find a true or false result comparison operators https //docs jigx com/examples/comparison operators compare values in data and use the value in a conditional logical expression, e g , is an amount greater than 100 date & time https //docs jigx com/examples/date and time return a date and time in various formats, e g , iso 8601 path operators https //docs jigx com/examples/path operators navigate and access specific elements or properties within a data set, e g , for filtering or searching functional programming https //docs jigx com/examples/functional programming compare values or display data based on certain conditions and using logical statements, e g , adding html variable in content, or a multi select as a functionparameter jigx variables https //docs jigx com/examples/jigx variables jigx variable set used in expressions to manipulate data specific to a jigx app, e g , determining the logged in user, or the organization and solution predicate queries https //docs jigx com/examples/predicate queries used for query refinement string https //docs jigx com/examples/string there are many uses for using string expressions, these can be to concatenate two strings to display multiple data records in one row or write numbers as strings, or select only a few characters from the whole string advanced expressions https //docs jigx com/examples/advanced expressions advanced expressions are helpful when you need to filter an array of records to display specific data and perform expression transformations over the data regex + jsonata https //docs jigx com/examples/regex expressions#1txjd create validation for text fields by combining jsonata and regex expressions javascript expressions https //docs jigx com/examples/javascript expressions javascript functions allow you to write modular and reusable code, by encapsulating specific functionality within javascript functions and calling the function in an expression see also expressions cheatsheet docid\ iw enfrdfajwjiimxcjhaexpression examples https //docs jigx com/examples/expressionsregex expressions https //docs jigx com/examples/regex expressionsjavascript expressions https //docs jigx com/examples/javascript expressions