Skip to main content

Creating Event Handlers and Functions

  1. Navigate to Experience module, and right-click on Interfaces.
  2. Right-click on Event Handlers and Functions and add the following events.

OnInit Event​

The OnInit event is triggered when the application or the relevant component is initialized. This event handles the initial loading of product data from an external source (such as a REST API) to populate the availableProducts list.

The following properties have to be configured:

  • Name: OnInit
  • Async Operation: No
  • Description: None
  • Is Active: Yes

Note: The OnInit event is created by default when creating an interface. User must configure the same, as applicable.

dragEnd​

The dragEnd event is triggered when the user stops dragging a product. This event marks the conclusion of the drag action.

In the property pane that appears, configure the following properties:

  • Name: dragEnd
  • Async Operation: No
  • Description: None
  • IsActive: Yes

dragStart​

The dragStart event is triggered when the user begins dragging a product. This event initiates the drag action.

In the property pane that appears, configure the following properties:

  • Name: dragStart
  • Async Operation: No
  • Description: None
  • IsActive: Yes

Configure Input Parameter

  1. Navigate to the Input Parameter folder appearing within the created event.
  2. Configure the product input parameter by providing values for the following properties:
    • Name: product
    • IsArray: Yes
    • Type: Product
  3. Click Save.

dropProduct​

The dropProduct event is triggered when the user drops a dragged product. This event handles the transition of a product from one list to the other if a product is being actively dragged.

In the property pane that appears, configure the following properties:

  • Name: dropProduct
  • Async Operation: No
  • Description: None
  • IsActive: Yes

Configure Variable

  1. Navigate to the Variable folder appearing within the created event.
  2. Configure the product variable by providing values for the following properties:
    • Name: product
    • IsArray: Yes
    • Type: Product
    • Default Value: None
  3. Click Save to create the Variable.

findIndex Function

Create a findIndex function by right-clicking the ProductInfo Interface, and add the following Variable, Input Parameter, and Output Parameter:

  • Variable: curProduct
  • Input Parameter: productid
  • Output Parameter: index

Creating event handlers and functions