Generating Client Events in Your Interaction
A Client Event step lets you send parameters from an X‑Platform client (or the wrapping application) by generating an asynchronous event in the Flow. The actions triggered by the event can be defined either in the Flow itself, or in the JavaScript of the containing page of the Flow. The actions are generally used to determine the direction in which the Flow progresses.
Some examples for using Client Events in Flows include:
Each time the user reaches a specific step in the Flow, a Client Event can open a relevant Help page in a portlet in the hosting web page.
A Client Event can redirect the user to a different web page (e.g., to schedule a technician).
Note
Client events are not supported in the Mobile Web application.
Creating a Client Event Step
When creating a Client Event, you specify the relevant action parameters.
At the top left of the Flow Map, click the round Add Steps icon. The Add Steps Toolbox opens.
From the Logic Elements group, select and drag the Client Event element to the desired location on the Flow Map. The Client Event editor opens:
In the Client Event Element Name field, enter a name for the element.
In the Event Name field, enter a name for the event.
If relevant, add an action parameter:
At the right side of the Client Event editor, click the Plus
icon. A row is added to the Parameters frame
In the Parameter Name field, enter a unique name for the parameter. Then, in the field to the right, specify the parameter's value. You can either type a hard coded value, or enter @ and select a variable from the Variables list. In the following example, a hard coded URL path is set for the value of the image.
To add another action parameter, repeat Step 4.
At the lower right corner of the screen, click Create Event. The Client Event element is configured. When the Flow is run in the X-Designer's simulator, a popup message is displayed to indicate that the event was fired.
Add the required JavaScript code to the hosting page of the Flow. An Client Event Flow example is provided below.
Client Event Flow Example
Here is a sample Flow that uses Client Event elements. The Flow is embedded in a website, as shown below:
![]() |
The following steps describe the Flow and how Client Event integration is executed:
![]() |
Enter the Identifier. In the first input question, end users are asked to enter a customer ID.
Check the Identifier. In this step, a Decision Point checks the input and, based on the ID received, sends the user to one of two Client Events.
Provide Possible Actions Based on the Client Event. At this point, implementation takes place according to the event that is fired:
When the Outage event is fired, users might be redirected to a website with more information before the Flow ends.
When the setImage event is fired, JavaScript code might be used to replace the image in the web page header, and the Flow will continue to the Paragraph1 step providing specific details based on the current ID.
In this case, the image called by the setImage function is defined in the Parameter Name field of the setProduct Client Event element, as described in Step 5.b of the procedure found above: