UI Style Using Cards

Hi. I want to replace a CRM suite I am using that uses"cards" to represent opportunities. We can drag these info different status categories or click on them to edit. How can i create this in Mendix? Can I customize and create such an interactive UI element. 
4 answers

For drag and drop functionality see this widget: https://appstore.home.mendix.com/link/app/1856/Synobsys/Drag-and-drop-support-widget

The rest you will need to do with CSS.





In addition to Ronald's answer. You can take a look at the Starter Atlas UI apps "Asset manager" and  "Event app"  how to create a card based dashboard. Instead of the fixed layout grid container you could also put the class card to items in your listview and with some custom styling you have it working in no time.


You might like this widget: https://appstore.home.mendix.com/link/app/78941/ I think it does exactly what you need it to?


Hi Ivan,

I ve recently built a similar interface in Mx 7.5.1. We used a boolean attribute & conditional visibility to control whther the card is collapsed or expanded (similar to groupboxes).

The advantage is that you do not have to load all the information at start (things that are only shown in the expanded view are loaded when a card is actually expanded by clicking on it).

One of the drawbacks with this approach is that in order to update the boolean attribute you have only two options:

1. Put your cards in an editable listview. Pros: you can toggle their state without any microflows, so very performant. Cons: you can not use sorting or paging, because it is a listview (so it only works if you have a small number of objects < 100)

2. Put your cards in a template grid. Pros: you have paging and sorting. Cons: you can only toggle a card by firing a microflow that refreshes the whole template grid.

I have never used the widget that Bas recommends but it looks like a great alternative.