JavaScript expressions
JavaScript functions allow you to write modular and reusable code. By encapsulating specific functionalities within functions, you can easily reuse them across different parts of your application. This modular approach not only reduces redundancy but also makes the codebase more maintainable and scalable. For example, a function that handles user date and time can be reused in multiple components or screens, ensuring consistency and reducing the likelihood of errors.
Refer to the section on JavaScript expressions to learn:
Return a string
In this example, a JavaScript function called helloWorld is created to return a string showing Hello World in a text-field. In the value property an expression calling the function is used.
Example: See the example in GitHub.
Concatenate first and last name
Create a full name by joining a first and last name using a simple JavaScript function, but using JSONata offers a faster and more efficient approach due to its inline nature. In the value property text-field an expression is used that calls the function to provide the full name. The functions variables values are defined in the form's text-field components.
Example: See the example in GitHub.
Capitalize job title
The function capitalizes the first letter of each word in a string while fully capitalizing specific acronyms such as CEO, COO, CFO, CTO, CIO, CMO, CSO, CPO, CHRO, and CDO. This ensures that job titles are formatted accurately, respecting the conventions for common acronyms. In the value property an expression is used that calls the function to capitalize the job title. The functions variables values are defined in the form's text-field components.
Example: See the example in GitHub.
Calculate tax plus total
In this example three functions are used:
- The calculateTax function is designed to compute the tax amount based on a given subtotal and a specified tax rate. It takes two parameters: subtotal, which represents the pre-tax amount, and taxRate, which is the tax percentage to be applied.
- The calculateTotal function takes a subtotal and a tax rate, calculates the tax, adds it to the subtotal to get the total.
- The formatCurrency function converts a numerical amount into a string formatted as currency, including commas for thousands and two decimal places, and prefixes it with the specified currency symbol.
In the value property of the text-field an expression is used that calls the function to show the tax and the total. The functions variables values are defined in the form's text-field components.
Example: See the example in GitHub.
Calculate loan payment
The calculateLoanPayment function calculates the monthly loan payment based on the principal amount, annual interest rate (as a percentage), and loan term in years. This function is useful for financial applications that calculate monthly mortgage or loan payments based on the principal amount, annual interest rate, and loan term in years. It helps users determine their monthly payment obligations accurately.
The formatCurrency function converts a numerical amount into a string formatted as currency, including commas for thousands and two decimal places, and prefixes it with the specified currency symbol.
In the value property of the text-field an expression is used that calls the function to show the monthly repayment amount. The functions variables values are defined in the form's text-field components.
Example: See the example in GitHub.
Calculate age
The calculateAge function determines a person's age based on their date of birth provided in the YYYY-MM-DD format. This function is particularly useful in scenarios requiring age verification, such as user registration forms, social media profile management, or determining eligibility for age-restricted services.
A date-picker is used to select the date of birth, which is set as a state using the onChange event. The state's value uses an expression with a function to calculate the age and show it in a text-field.
Example: See the example in GitHub.
Distance between two cities
The distanceApart function takes the longitude and latitude coordinates of two cities and calculates the straight-line distance between them, as the crow flies. Use a dropdown to select the to and from cities. When a selection is made the onChange sets the state of the dropdown by using a function in the expression to work out the latitude and longitude of the selected city and the distance between them. The distance is shown in a text-field.
Example: See the example in GitHub.
Days to next state holiday
The daysUntil function calculates the number of days remaining from today's date until a specified future date provided in the YYYY-MM-DD format. It returns the number of days remaining.
Use a dropdown to select holiday. When a selection is made the onChange sets the state of the dropdown by using a function in the expression to work out the number of days to the date of the holiday. The number of days is shown in a text-field.
Example: See the example in GitHub.
Work days left in a month
The workdaysLeftInMonth function calculates the number of workdays (Monday to Friday) remaining in the month from a given date. This function is useful in business applications where the number of remaining workdays from a specific date is important for scheduling, project management, or payroll processing.
A date-picker is used to select the current date. An expression with the function is used to calulate the number of days and show it in a text-field.
Example: See the example in GitHub.
Next work day
The getNextBusinessDay function calculates the next business day from a given date. It returns the next valid business day in the format "Month Day, Year". A date-picker is used to select the current date. An expression with the function is used to calulate the number of days and shows it in a text-field.
Example: See the example in GitHub.
Format phone number
The formatPhoneNumber function formats a 10-digit telephone number into the (XXX) XXX-XXXX format. It removes all non-digit characters, checks if the length is correct, and then formats the cleaned number accordingly. This function is useful in applications that require consistent formatting of user input for telephone numbers, such as contact forms, user profiles, or customer service systems. It ensures that telephone numbers are displayed in a standardized and readable format. The value property of the text-field uses an expression that calls the function.
Example: See the example in GitHub.
Get employee details
The getEmployeeInfo function constructs a formatted string from an object that includes an employee's first name, last name, position, and email address. The value property of the entity-field uses an expression that calls the function.
Example: See the example in GitHub.
