doc-burger

How to use components in Peaka

Building Projects and Dashboards: An in-depth guide to working with components and related concepts.

How to Use Components in Peaka

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.

Placing Components

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.

adding new component

Component Properties

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.

showing styles of a component

The Styles tab provides options to change the visual appearance of a component.

using-components

Component Flows

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.

showing flow of a component

When in flow, you must first select an event type like "On Click," "On Mouse Enter," "On Mouse Leave," "On Change," etc.

Triggering Actions

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.

trigger events options
adding trigger events

Parameter Configuration

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?'

flow parameters
flow output

Jexl Syntax

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.'

label parameter input

In the jexl syntax, you can reference your app variables or page variables as demonstrated below.

using jexl with app variable
using jexl with page variable

Additionally, you can perform basic arithmetic operations and concatenate characters with dynamic values or numbers.

using jexl with string values

By mastering these component-related concepts, you'll be well-equipped to build dynamic and interactive Peaka projects.