ページのルートを選択し、右パネルのActionsタブより「Add action」をクリックします。
表示したいデータをResponseにもつAPIをEndpointに指定
Custom componentを新規で作成します。
Propsに表示したいデータの型と名前を設定します（名前は任意ですが、実際のコードに反映されるため意味のある命名を推奨します）。
Textを選択した状態でText Content上部の「Set from variable」を押し、Custom Component Propsを選択し、先ほど設定したPropsを設定します。
Listコンポーネントを利用したいページへ戻り、先ほどのCustom ComponentをList Itemに設定し、 Propsの値を「Set from variable」からAPIを選択し表示するデータを選択します。

Edit pages/custom components

We can Duplicate/Export/Rename/Delete the pages/custom components

Layout tree

Layout tree used for display tree node of current focus Page/Molecule

At tab 2, we have the Layout tree, which is the tree structure of the current focus Page/Molecule, also we can drag to re-sort the position of each node

Left arrow button: This is for the collapse tree node item
Right plus button: We are able to quick add components inside of each node

Screenshot 2022-12-06 at 11.13.21.png

Add component

Choose on tab Add, then you can just drag the component you want into a canvas

Screenshot 2022-12-06 at 11.13.59.png

Adjust properties

This is for configuring properties for component

At first, you need to tap to focus on the component you wanna update properties, then can freely adjust properties on the right panel

Screenshot 2022-12-06 at 11.14.38.png

Actions

Actions for configuring authentication API, interacting with backend API

Select some Button component, then select the Actions tab on the right panel, you can add action to the button by adding Add action button

Screenshot 2022-12-06 at 11.45.03.png

Here are some important actions

Navigation: This action is for navigating to a specific page purpose
Authentication: This action is for handling some authentication methods like SignUp, Login …etc…
Backend call: This action is for calling some API endpoints configure at: https://docs.studio.jitera.app/api-endpoints

Screenshot 2022-12-06 at 10.41.54.png

Configure props

We can configure props for pages/components

We can configure props by choosing props configuration like the image below, just press Add prop to add more props to your custom components

Screenshot 2022-12-05 at 15.45.58.png

After configure props, we can use it in our component, example like image below, we choose Button component and we can set label from prop by select Set from variables

Screenshot 2022-12-05 at 15.46.26.png

Here’s the result after we set some values from the variables

Screenshot 2022-12-05 at 15.49.04.png

We also can configure Function prop to handle some on-click button action

Screenshot 2022-12-05 at 16.53.23.png

For Function prop, it a little bit complex, we must config which component action trigger this Function prop, like image below, we want when press on Button component it trigger this Function prop

We just select Actions → Add action → Choose action type Custom component props than just choose the Function prop we just defined

Screenshot 2022-12-05 at 16.53.00.png

Using custom component

Here is the benefit when configuring props for a custom component, you can just pass prop

Screenshot 2022-12-06 at 11.48.43.png

Preview source code

Click the preview code button to preview the code

Screenshot 2022-12-06 at 11.50.03.png

Here’s the result of previewed code

Screenshot 2022-12-06 at 11.49.29.png

Web settings

Configure Favicon icon

Screenshot 2022-12-06 at 09.18.48.png

Branding colors

With branding colors, you can configure some common usage colors and we can reuse them in Editor

Screenshot 2022-12-06 at 11.52.20.png

Screenshot 2022-12-06 at 11.53.27.png

Responsive configuration

After selecting the tree node, we can configure advanced properties settings for component As image below, we can set font-size to 100px only on a Tablet device

<aside> 💡 We use this to configure complex responsive design layout

</aside>

Screenshot 2022-12-06 at 13.33.59.png