Auth0 Angular 10
Apex Designer Documentation
What's New
Getting Started
Projects
Business Objects
Processes
User Interfaces
App Behaviors
Files
Dependencies
Project Settings
Libraries
Patterns and Best Practices
App Showcase
Angular 10 Base Library
Frequently Asked Questions

User Interface Methods

Add business logic to the design of your user interface

Blank Profile Image
Written by Sunil Lingam
Updated 2 years ago
4 min read

In the Create a Suppliers Page and Create a Supplier Page lessons, you created a complete user experience without writing any code at all. In some cases, you will need more than that to achieve the user experience that you are shooting for. User interface methods are the key. A user interface method is a small code snippet that can be triggered by user action.

The Example

This page will use the example of calculating total cost. The user interface has three fields for unit cost, quantity and total cost (see User Interface Properties for more details) and a button:

Calculate cost page in Apex Designer

Add a Calculate Total Cost Method

To add a method, type "calculate total cost" in the "Add a method..." field and press enter. The user interface method is added and the dialog is opened:

User interface method

Add a single line of code to calculate the total cost:

this.totalCost.setValue(this.unitCost.value * this.quantity.value);

Let's go through this line piece by piece:

  • "this.totalCost" is a reference to the totalCost user interface property. "this" means the "Calculate Cost" page in this example.
  • ".setValue" will set the value of the total cost form control
  • "this.unitCost.value" is the value of the unit cost form control
  • "this.quantity.value" is the value of the quantity form control

Execute the Method When the Button is Clicked

Now that we have some business logic, let's use it. Type "cl" in the "Add attribute..." field of the Button and select "Click":

Button component

Type "cal" in the field and the calculate total cost method will appear in the typeahead:

Button component with click

Press enter to select the method.

Button component with click and method

The way to read this is "button click triggers the calculateTotalCost method". Give it a try yourself by creating this page.

Method with Inputs and Return Type

The method above read from the user interface properties and wrote the results back to them. Let's implement the same functionality using user interface method inputs for unit cost, quantity passed as inputs and a return type for the results.

Type "calculate total cost with params" in the "Add a method..." field and press enter. The user interface method is added and the dialog is opened:

User interface method dialog

Type "unitCost n" in the "Add an input..." field. Adding the "n" after the name helps select the type of the input (number in this case). Press enter to select the "unitCost number" option:

User interface method dialog

Add another input field named "quantity" of type number:

User interface method dialog

Now set the return type of this method to number:

Method return type

Finally, add a single line of code to calculate the total cost:

return unitCost * quantity;

Using the Method in a User Interface Element

To display the results, add a Paragraph user interface element and set the inner text to:

Total Cost: {{ calculateTotalCostWithParams(unitCost.value, quantity.value) }}

Paragraph component

The double curly braces are an Angular text interpolation. It automatically re-evaluates the expression any time there are changes in the user interface.

Call the Method On Load

You can set a user interface method to be  executed automatically when the user interface loads. Add a user interface method called "initialize". Notice that Apex Designer automatically checked the "Call on load" checkbox at the top:

Initialize method dialog

Add below code to set some initial values and call the calculateTotalCost method:

this.unitCost.setValue(100);
this.quantity.setValue(100);
this.calculateTotalCost();

Other Method Dialog Details

  • You can edit the name inline at the top of the dialog
  • You can edit the description inline in the "Please enter a description" field to the right of the name
  • The "Is async" checkbox sets the method up to call asynchronous methods (see Reading And Saving Data In User Interface Methods for more details)
  • The "Call on unload" checkbox sets the method to be automatically called when the user interface closes (see Cleaning Up Subscriptions for an example of using it)
  • The Copy icon button content_copy copies the method so that it can be pasted in this user interface or others
  • The Close icon button close closes the dialog
  • The Generate UI icon button autorenew triggers generate for this user interface
  • The Delete Method icon button delete deletes the method after confirmation
  • Call on unload: Indicates that the method will be called on the close of the particular page or the component it is called on.
Powered by Apex Designer
Terms of ServicePrivacy Policy
© 2017-2024 Apex Process Consultants