Expanding card

Hi Guys,

I am implementing the expanding card UI in Outsystems

I have done it in the VS Code

See the attachment

How same can I do in Outsystems

Give me an .oml of it

http://127.0.0.1:5500/D/Expanding%20Cards/index.html 


Expanding cards.txt

Hi Rohan,

I updated your .oml as 2 ways as I mentioned above, please take a look.

Cheers,

Khuong

Expandingcards.oml

Hi Rohan,

I think you can try:

1. Add a block (or webblock if traditional web app).

2. Add container and add class, write css for that class.

3. In a screen can add List widget and add the block above as List Item.

4. In the screen add JavaScript widget in OnReady and add your scripts.

That's idea you can try first.

Cheers,

Khuong

Hi ,

I have try till step 2...can u send me .oml


Hi,

I just read your attachment again. I think your idea is to add or remove class when user click on a container right? If so I think you can do without using javascript as following:

1. Add a block with a local variable like IsClicked (type boolean and default False).

2. Inside block add a container widget and for style classes can add like: If(IsClicked, "clicked-class", "") <= this mean you add "clicked-class" or remove it base on IsClicked value.

3. For the container you can add onclick Event with Handler is client action. Inside the action update IsClicked = not IsClicked.

The above is for add/remove css class of a container. You can add css accordingly to make it work.

I think you can try, just give it a try first. Then if any issue can share your .oml then people can help.

Cheers,

Khuong

Hi, see an .oml please given an updated one I have try it but finding some errors after applying JS

Expandingcards.oml

Hi Rohan,

I updated your .oml as 2 ways as I mentioned above, please take a look.

Cheers,

Khuong

Expandingcards.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.