How to do in mashup widget like this ?

[Porcelain_]

Hello guys, I want to display my data like this picture! how do i do ? 
Should I use grid, but how to display  infotable in a row? 

When I bind a data source do display every Equipment then how do I bind Equipment information to each row ? 

And Second question, how do i set a button to selected row? 

like this.

When select this row a button appears on the image, if not select the button doesn't appears.

If anyone knows how to do it, please teach me or give a hint, because i search online and on ptc community i can't get any answer. 

I am a intern developer learning how to developer thingworx application and it's spend me a lot of time but i still don't know how to do it. Thank you guys a lot!

[CharlesJi · Accepted solution]

Hi @Porcelain_, I guess you can try to use the Collection widget to show these repeated items with specific layouts by pre-defining them in a child mashup.

For the button question, you may add a Button widget in the child mashup, then set its visible to false by default and pass a boolean value from the parent mashup to control its visibility;

Or use a Value widget to show the picture and replace its content with another picture (with a button on it) when it gets selected.

[Porcelain_]

Thank you so much! I will try it !

[PEHOWE]

@Porcelain_ ,
I agree that the collection widget would allow what you describe. I tried to create an example and learned that in ThingWorx 9.3.2 the feature which allows the mashup displayed for the selected row does not always update as it should. If if fixed in a later version. Since I created an example. I though I would share.  Enjoy.

[Porcelain_]

Oh!!! Thank you so much !! 
I will download it and learn how you do that.