You can use Data Grid 2 instead of a List View for this.

Show only the Device column in the grid. Then make the row or a button in the row clickable. On click, open a popup page and pass the selected Device object to that page.

Inside the popup, use a Data View with that passed object as page parameter, and display all the other attributes there except the device name itself, such as CPU model, capacity, color, price, screen size, and so on.

This gives you a much cleaner interaction pattern:

the user selects a device from the grid, and the full details open separately in a popup instead of trying to render everything inside the same list.

So the idea is:

• Data Grid 2 = device selection
• Click action = open popup
• Popup Data View = show full details of the selected object

That is a cleaner and more user-friendly approach for this requirement than repeating all values in a List View.

If this resolves your issue, you can mark it as accepted.

Hi Rajkumar TAMBE

You can use Listen widget concept to build this logic easy, So follow the below steps

1.Domain Model – Create a Device entity (id, name) and a DeviceAttribute entity (key, value) with a 1-to-many association between them.

2.Microflow – Your existing REST call microflow is fine. Just make sure it commits the Device objects to the database so the List View can retrieve them.

3.Page Layout – Place a List View on top showing all devices. Below it, add a Data View and set its data source to "Listen to widget" → select your List View. Inside that Data View, add another List View showing the DeviceAttribute associated records.

4.Result – When the user clicks a device in the top list, the Data View automatically populates with that device's details below it. No extra microflow needed for the selection rest Mendix handles it natively.
I hope this helps

Rajkumar,

In the past, I have used one of the JSON viewers frome the marketplace for this kind of requirement. There are several of them. The newest one seems to be this one: JSON View Lite Widget To view your JSON interactively, you would:

• create a page with a dataview that has the JSON View Lite Widget
• Save the JSON you receive into an attribute on an entity
• create a page with a dataview that displays the entity you created
• Add the JSON View Lite Widget to that entity
• Point the JSON View Lite Widget to the attribute where you save the JSON

Hope that helps,

Mike

Rajkumar,

Another alternative is as follows:

Set up the domain model for the import mapping like this:

Add the Expand boolean manually.

Next, create a page that looks like this:

Note that this is a Dataview, with a nested Data Grid 2 and a Dataview nested inside of that. The conditional visibility on the child Dataview depends on the Expand boolean attribute.

The microflow used looks like this:

Hope that helps,

Mike

*******EDIT*******

To do this with a combo box,

• make the 3 entities that the import mapping uses persistable
• create a page that looks like this
• 
• For the nested dataview, use data source of Listen to Widget
• 
• the resulting page will look like this
• 

Hi RajKumar

Just check out my implementation logic which is very simple.

Step1: Create mapping

Step2: Consume the rest service and have the DS microflow for the listview

Step3: Design the page based on Listen to list vi

I hope this helps if not I can connect with you to help!!

Domain Model:

2 Entities for Product and Data (Product)

import_mapping for the JSON

Microflow to call REST and return ListofProduct

I have used below Page Layout

List View for Product Name using Microflow as source

Layout Grid to separate Product properties in 2 columns

Source as Association to Data View added to Each column with selected properties as shown.

But I am not convinced with this solution. I am able to present this way or in different layout which is not a problem.

Drop down is not working and I am still confused how to make it dynamic. Meaning either I should make a Product list in drop down and on change of items in drop down, the related properties only (Not all as it is seen) should be shown. E.g., Google Pixel has only 2 properties whereas Apple iPhone 12 Min 256 GB Blue has none and Apple Macbook Pro 16 has 4 properties.