Building Projects and Dashboards: An in-depth guide to working with components and related concepts.
Components are the building blocks of your Peaka projects, and understanding how to work with them is essential. In this comprehensive guide, we'll explore various aspects of components and how to utilize them effectively.
To add components to your project, simply drag and drop them onto the canvas. When positioning a component relative to another, you'll see placement options appear, making it easy to arrange them as needed.
Each component has its own set of properties and styles that you can customize. To access these settings, click on a component, and the Properties and Styles tabs will appear in the right pane.
The Properties tab allows you to modify a component's name, label, priority, and more. The available properties may vary depending on the component type.
The Styles tab provides options to change the visual appearance of a component.
Every component in Peaka comes with a flow. To access a component's flow, click on it and toggle the Show Flow switch. You can then create new flows by clicking on the "Create a new flow" button.
In the flow, you must select an event type, such as "On Click," "On Mouse Enter," or "On Mouse Leave," depending on the component type. Note that available trigger events may differ based on the component.
When in flow, you must first select an event type like "On Click," "On Mouse Enter," "On Mouse Leave," "On Change," etc.
Within a flow, you can define actions triggered by the selected event. Click on the disc-shaped plus button to add actions. If you need to insert a new action between existing steps, use the small plus buttons between the boxes.
When working with actions in a flow, selecting a step opens the Parameters and Output tabs in the right pane. This is where you specify the parameters for your chosen action.
For a more detailed discussion of the Output tab, please refer to the article titled 'What is Output and How to Use It?'
Some component properties and flow action parameters use the jexl syntax. When inputting values in the jexl syntax, ensure you include opening and closing double curly brackets.
For a more detailed about JEXL, please refer to the article titled 'Using JEXL.'
In the jexl syntax, you can reference your app variables or page variables as demonstrated below.
Additionally, you can perform basic arithmetic operations and concatenate characters with dynamic values or numbers.
By mastering these component-related concepts, you'll be well-equipped to build dynamic and interactive Peaka projects.