Working with Elements

Modified on Wed, 22 Jun 2022 at 10:04 AM

Learn more about the types of elements and how to use them

Components are the visible and functional features of your app, such as images, text, and units of logic.

Types of Elements

Components may be split up into three major categories:

  • UI Elements which are blue and mostly track to HTML elements
  • Logic Elements which are gray and are non-stateful pieces of logic 
  • Stateful Elements which are green have state and are not in the UI

Above we see a green Request element which is calling an API. On a successful completion of the API call, the gray Get Values Logic element  is allowing us to parse the object we got as a response into the two string values it contains: id and title. Then we are setting the label of the blue Text UI element with the title string in the object we got as a response, and the onSuccess call is allowing us to set it.

This flow will change the text inside of a button to the title attribute of the response of an API call once the button has been clicked.

Creating and Selecting Elements

To add a component to your application, you must find it in the elements panel on the left hand side of the studio and drag and dropping it into one of your three working panels: the tree panel, the flow panel, or the preview panel. Likewise, any element may be selected by double clicking on it in one of those three panels.
Once selected, you can edit the element in the inspector panel. Properties mode in the inspector panel will allow you to give your component a label and add styling. Actions mode will allow you to add interactivity.

Element Menu

If you click the three dotted menu on the right side of each element, you will enable a menu of actions for the element. There are four buttons in the menu that allow you to take the following actions:

  • Copy: this allows you to duplicate an element and all of its child elements.
  • Duplicate: this copies and pastes the element and all of its children into the same level of the app
  • Convert to Class: this allows you to change the element from an instance to a class
  • Delete: this will destroy the element

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article