Data Master with Compact Display and Detail Display

Rivai shared this question 3 months ago

Hello guys,

Im new to justinmind, i want to design & experiment the user experience before i hand over to my developers for full blown web app. This app seem perfect to cut down user interaction and design interface issue.

Im trying to simulate a database input like MySQL. I create some data from Data Masters. Now i want to style the way it display the data. I attach PDF file that i create from excel as an idea.

Basically i want to create a compact display which contains a minimum number of information and when i click on that row. It display additional information that i have input in data masters on the right. It is for web app not mobile.

Im trying to browse through some tutorial but couldnt find a particular example to this. Any idea how this can be done ?



Comments (3)


Sure! Create a Data List with the compact view and a Data Grid with the detail display fields. Have the Data Grid only show 1 cell per page.

On Current_Row_1 of the Data List, create an On Click + Set Value event, setting the value to the Data Grid. For the value, click 'Calculated' and then 'Add expression'. Drag Current_Row_1 into the open space in the expression and click 'OK' to finish building the event. This event will transfer the value of the row that you clicked on in the Data List over to the Data Grid.

We also added an On Click + Change Style event that changes the background color of the row you clicked on.

Check out the attached example file - and let me know how it works for you and if you have any questions.


Hi Danielle

Thank you for providing sample project, couldn't do it without it. I figure it out based on your file after couple of attempts, i got it to work. Yes that's exactly what im looking for. Thank you so much!

Now im styling the design further to my liking. Couple further questions.

1. The image placeholder aspect ratio by default is 1:1 square. and if i stretch size to be wider. The upload image follow the stretch instead of trying to fit width or fit height. Is there anyway to change this resizing method?

2. I position some parameter side by side like (amount ) (standard quantity). I expect the result becomes close to each other eg. 50 pcs instead it becomes 50 pcs. It spread quite far apart to each other. How do i close the gap while knowing how space the (amount) uses.

Once again thank you so much,



I realize what i type in the previous post didnt post as it should. What i mean is

50 pcs becomes 50_________pcs. The underline is the space gap.