Implementing Vertical & Horizontal List

How to can I implement Horizontal & Vertical list in Designer 2.0 ?

8 Likes

Creating an list is extremely easy in vahana 2.0, steps to do so are:

  1. Drag the list element from the elements tab onto the canvas.
  2. On the properties panel on the right you have to pass the data on the basis of which the list will be created. you can either pass it statically or from the datastore. (i’ll be using static). the data is supposed in the form of an array of object, ex:
[
    {
        "title":"Gold Loan"
    },{
        "title":"Personal Loan"
    },{
        "title":"Home Loan"
    }
]

this will create a list with 3 cards
after applying the changes to the list, you can style the card according to your design.
2. now we’ll add text element by dragging it onto the list in which we want to show the data from the object.


you can delete the text property of the text element or leave it in which case the data will get appended to the existing text.
3. Lastly in the list attribute id of the text element you can insert the attribute whose data you want to display. in our case its “title”

After applying the changes just save and sync and its done
Result:

5 Likes

Great solution: In addition to above you can refer the documentation on below link:
https://academy.vahanacloud.com/design/vertical-list/

2 Likes

I was trying the same for Image element where the URL is in the format (coming from an API) https://w7.pngwing.com/pngs/895/199/png-transparent-spider-man-heroes-download-with-transparent-background-free-thumbnail.png
This is not working, is there alternative to show the image elements.

7 Likes

the last i used, for the image element we need to append “url::” before the url for every object.
so the new value that we’ll pass would be
“url::https://w7.pngwing.com/pngs/895/199/png-transparent-spider-man-heroes-download-with-transparent-background-free-thumbnail.png

so the new data in my case would be

[
    {
        "title":"Gold Loan",
        "url":"url::https://w7.pngwing.com/pngs/895/199/png-transparent-spider-man-heroes-download-with-transparent-background-free-thumbnail.png"
    },{
        "title":"Personal Loan",
        "url":"url::https://w7.pngwing.com/pngs/895/199/png-transparent-spider-man-heroes-download-with-transparent-background-free-thumbnail.png"
    },{
        "title":"Home Loan",
        "url":"url::https://w7.pngwing.com/pngs/895/199/png-transparent-spider-man-heroes-download-with-transparent-background-free-thumbnail.png"
    }
]

and we’ll pass the url to the attribute id of the image element

2 Likes