Grid of Menu Elements

[christopherd]

I'd like to have a mashup (called mashup1) contain a grid of pictures, that each allow the user to go to a separate mashup. The best way of doing this I've found is to use 6 different menus, each with a single menu item that has an icon. By modifying the menu width and height to 400x350, and the placement of the icon in relation to the menu title, I've created the affect I want. 

I'd like mashup1 have a master, which allows the user to select amongst different mashups, including mashup1. When mashup1 has no master, it looks just fine. However, when I give mashup1 a master, the 400x350 menu elements go from one item to two columns, one with the icon, and the other a big blank square. The icon is probably 100x350, while the blank square is 300x350.

I'm thinking that maybe the menu on the master is causing issues, but I don't know. What should I do to overcome this issue? I'm open to using other widgets if that would be more appropriate.

[adam11]

Hi Christopher,

The Menu widget is not responsive, so the display issue you're encountering is most likely a matter of the resolution at which you are viewing the Mashup. Honestly, I think it would be best to abandon your solution entirely. Rather than using six Menus, I recommend using one DataTable to store the name of the Mashup and its corresponding image. Then, you'll use the Repeater widget to display the images and navigate to the particular Mashup. Here's a rundown of the work involved:

Setup a DataTable with two fields: mashupName (STRING), mashupPreview (IMAGELINK). 

Upload the relevant images as Media Entities.

Create entries in the DataTable for each Mashup and corresponding Media Entity.

Create a static Mashup to display the image (Value Display) and overlay it with a transparent Navigation widget. Add Mashup Parameters for mashupName and mashupPreview and bind each to the appropriate widget.

In mashup1, retrieve the data of the DataTable and bind the data to the Data property of the Repeater widget. To display a grid of images, set the View property of the Repeater widget to "Horizontal Wrap" and set the FixedMashupWidth and FixedMashupHeight properties to the dimensions of the +Mashup +being repeated.I think that's everything. It's a little more involved, but it offers much more flexibility and scalability than Menus and the Menu widget.

Thanks,

Adam

[adam11]

One more thing...

With the solution I described, you can retain the menu in the master to provide users with another option for selecting Mashups.

[christopherd]

I've done as you mentioned, and created a DataTable with a custom data shape (String and ImageLink), and I added properties to the data table (String and ImageLink). I then used the AddDataTableEntry to create the 6 entries. In the mashup, I'm having trouble binding the entries to the Value Display widget.

I've decided to simply go with the Image widget, paired with a label, and overlay with a navigation widget. I will do this 6 times. What are your thoughts on that method?

[adam11]

Using the Image widget will work, but the Value Display should work as well. If you like, I can setup a quick meeting to review your implementation.

[adam11]

Christopher,

When you say "you will do this six times," you aren't creating a Mashup for each DataTable entry, right? The Repeater widget will repeat one Mashup – you will pass values to that Mashup using Mashup Parameters. These values will be used to set the source of the Image widget and the MashupName of the Navigation widget.

Does this make sense? Again, we can setup a meeting to review your implementation.

[christopherd]

Once I ran into issues binding the data table to the value display widget, I abandoned the use of it, and simply created 6 images, each with a separate navigation widget overlaid. 

I don't think my method would be very effective for more elements than I have. I think I would need to do something more efficient like you're saying.