An overview of components and related concepts
This article will give you a more detailed explanation of the component features and show you how to use them.
You can drag-and-drop components on the screen. Suppose you have a component (Component 1) on the screen that you want to place by another (Component 2). When you move Component 1 over Component 2, you will see different fields appearing next to Component 2, giving you options as to where you can place Component 1.
When you click on a component, the 'Properties and Styles' tabs will show up in the right pane.
The Properties tab allows you to change a component's name, label, priority, etc.
Please keep in mind that properties may vary depending on the type of components.
The Styles tab gives you options to change the style of a component, as seen in the image below.
Every component contains a flow. Clicking on a component and turning on the 'Show Flow' switch reveals the flow of that component. You can then click on the 'Create a new flow' button.
When in flow, you must first select an event type like 'On Click,' 'On Mouse Enter,' 'On Mouse Leave,' 'On Change,' etc.
Please keep in mind that the trigger events available may vary depending on the component type.
To select any action you want, click on the disc-shaped big plus button.
If you want to add a new action between two steps, click on the disc-shaped small plus buttons between the boxes.
When you click any on any step, the Parameters and Output tabs will open in the right pane. This is where you can fill in the parameters of your desired action.
For a detailed discussion of Output, please see the article titled 'What is Output and how to use it?'
For a detailed discussion of flows, please see the section titled 'Flows.'
Properties of some components and parameters of some flow actions contain jexl syntax, as seen in the image below. When entering values in jexl syntax, make sure to include the opening and closing double curly brackets.
In jexl syntax, you can select your app variables or page variables, as seen in the images below.
You can also do basic arithmetic operations and add characters to your dynamic values or numbers.
