Custom list with specific layout

How I can create a custom list with a different layout like this.

Replying because I am interested in hearing a solution here. I am mulling over ways that I would try to accomplish this, but I haven’t come up with anything solid yet.

Potentially it may help to understand what this will be a list of. Is this filtered? Is it based on a relationship to another collection? Can it be filtered dynamically by the user?

… using visible/not nvisible fields isnt it doable ? just duplicate them all and try using a odd-even ID numbering rule to hide/show L or R components…still this would require that you do not delete IDs :woman_shrugging:
Else, i dont see how you could alternate regularly the right or left display nicely

I have this with my chat. Basically you create a list with both the left and the right elements and you make the visibility of each element coinditional on what you want. So in my case it’s “show left element if loggedinuser <> message author” and “show right element if logginuser=message author”.

Hello in my situation is a list of services.

In my situation it will duplicate all the right ones.

Is the user able to filter this list on the screen? Are new services added often?

Well at the moment I only have 6 but it will be nice if they can filter. No I am not going to add more services, at list for now!

This looks awesome :+1:

Would you be comfortable sharing some more detail with screenshots or loom about how you implemented it in the editor - elements in custom list in the mobile screen, database schema, the collection + filters, etc. ?

No worries if you can’t. Your screenshot also also pretty neat and detailed.

if only services (like categories title…and only 6)
just add a property True/False to your service collection, named here “left”
Than :


Thank you

Check if this will help

I just add a couple of elements together and convert them as a list


Thank you
But I think this is not going to work because the position of the elements are different!
Check the result here.

I could sell you my mouse…she does wonders !

Can you please send me a loom or a print screen how you setup that?


I would do something similar to how the chat tutorial shows how to make different color bubbles for if the user sent the message or received the message. You will create a list with the two different bubbles you have above. Setting up the magic text and images to be the same in both. Add the true/false column. For bubble 1, set the visibility to true/false column = true and for for bubble 2 true/false column /= true.

Yeah thank you very much

I will give it a go and get back to you!


The solution is working for simple elements, in my situation it doesn’t look good.

I created 2 groups of elements

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.