Using sequence variables

I am having a hard time following how to use the sequence variable in UI Bakery. The video tutorials I have watched so far are not too clear (visually) and go over the usage of the sequence variable pretty quickly. In order for a no-code user to get the most out of UI Bakery, very clear tutorials that carefully go through how to connect data and use data within UI Bakery I would say are very key. I would dare say the heart of UI Bakery for no coders with no programming background is the business logic and data portion - so great and clear documentation (both written and video) would be key to make it easy to use for those without a programming background.

Moving forward from my frustrated rant above, I am currently stuck after successfully loading some data via a get REST API call. I now need to map the retrieved data to different fields on a table in UI Bakery and I need to use the sequence variable, so all the rows retrieved via the get API are displayed on the table. I am currently stuck in not being sure of how to do the needed mapping. Any guidance would be greatly appreciated. Thanks!

Hello @ObyY!

You can add a code step in the action between the place where you get the data and the place where you save it.

Like this:

Hi @ObyY!
We can join for a call to help you :innocent:

1 Like

Thanks! I have scheduled a call

1 Like

Thanks! After mapping the data from the api call, how do I then map it to the rows in a table component in the UI Builder screen? For starters, do I add a text component in each of the rows and then for that text component, specify the sequence variable configuration? If so, how do I then reference the mapped data that has been saved to app state? Do I specify item.[field_name] under the Text field under the Appearance section? (doing so does not seem to work for me).

If there is a tutorial that already shows how to do this, I would appreciate the link to it. The tutorial I found showed how to use a smart table component and not a regular table component. For the smart table component, it seems there is already some preconfigured data mapping setup. However, for the add row on the smart table, the input fields are set and you can’t change them to perhaps a date picker or a selector component, so the user can perhaps choose a date or select a preconfigured drop down option.

@ObyY I love your questions :heart:
I hope I got the idea correctly, here is the step-by-step guide.

  1. you need to create a table component in UI Builder (click on a component picker (grey plus) and add a table.
  2. open Data Tool, create action. The first step of the action is an HTTP request.
  3. The second step is to save data to App State.

    Now go back to UI Builder and find your table component. Inside of it, find TableRow

    Open data settings of TableRow and find Sequence Variable field

    Select your variable

    Go back to TableRow, inside of it there are spaces. Put text components inside of these spaces.

    Replace text with the following syntaxis {{item.property_name}} in my case the property name could be id or login or password

    So I will use {{item.login}} and {{item.password}}

    Don’t forget to assign your action created in step № 2 to any UI element. I can recommend assigning this action to a root space “on init” (it means initialization).

    Click on preview, to see the result

    By the way, you can customize your text (font size, color, style and so on).
    .
    I hope this helps :hugs:
1 Like

Thanks Artem for this guide! It has solved the issue I was having.

1 Like

Glad to hear that!
You are welcome!

Hello Artem. I have a follow on question with regards using sequence variables. I have a card component and I want to repeat the card with repeating similar data. So each row/index returned from a get api needs to be shown or rendered on a different card. Can you confirm if this is possible and give examples of how to implement it? Right now when I try to do this, all the rows returned from ny get api are being shown/rendered on only one card as opposed to on multiple cards as I want.

Thanks

Hi @ObyY!
Glad to see you here!
I hope I got the idea correct.

  1. First of all create a card on the screen.
    and make the card width equal to 30%.
  2. Open the data tool and create an action.
    Action should consists of 2 steps: HTTP request and Save Data to App State.

    2.1) The first step is a HTTP request with GET method to your data source (I used this one https://run.mocky.io/v3/d78d7dfd-0a32-4768-90f2-08e19574bf53).

    2.2.) Now we need to save our data to App State Manager

    Give a name to variable and select the type of the variable - array.
    Go back to the Builder Tool and select the card, open the data settings of the card, find the field “sequence variable” and set the variable here (in my example, variable name is “datatest”.

    Now we need to assign our action created in the step № 2 on a root space. Select the root space, open its’ data settings and set the action “on init”.

    Put or replace the text with the following syntaxis - {{item.someproperty}}. In the example, we should use {{item.login}} and {{item.password}} because we have 2 keys: login and password in the data source (https://run.mocky.io/v3/d78d7dfd-0a32-4768-90f2-08e19574bf53).

    Let’s replace our dummy text “Header” with {{item.login}}.

    Don’t forget to click on “preview” button to see the result.

    You can add more data in the card, e.g. add {{item.password}} in the footer.

    Again click on the “preview” button

    Please let me know if I resolved the issue :hugs:
1 Like