Sub Menu's with a vertical alignment

[Tomellache2B]

Good day,

I want a sub-menu to appear on click or hover of an existing menu. How do I do this?

Also, why is it that the title gets removed when I specify a menu item as a type menu? 

 

Could you please assist me with the steps that I can follow to achieve this:

 Currently what I do have is this: 

 The title has disappeared for the item of the main menu whose type is menu. (see the missing title below).

 

 Many thanks

[Surya_Tiwari]

Hi @Tomellache2B 

 Can you take a look at the below post, and let us know if it will help in your case or not?

https://community.ptc.com/t5/ThingWorx-Developers/Menu-Navigation-and-Sub-menu-with-Horizontal-alignment/td-p/854540

[Tomellache2B · Accepted solution]

Hi all,

One way to get the titles to not disappear on the main items is to use a service and dynamically create a data source that you will use to bind to your menu widget on the mashup.

This is the link on how to create an infotable data source for the menu widget with the MenuEntry datashape: 

https://support.ptc.com/help/thingworx/platform/r9/en/index.html?_gl=1*yqc4lc*_ga*MTY3NTQ4NDEyMC4xNjk0NDMxOTky*_ga_7NMP2MSYPM*MTcxMjE0MzE4NS4xMTQuMS4xNzEyMTQzMjI5LjE2LjAuMA..#page/ThingWorx/Help/Mashup_Builder/Widgets/MenuBarDefiningtheMenuBarItemsUsinganInfotable.html

Step 1: Create infotable

let result = Resources["InfoTableFunctions"].CreateInfoTableFromDataShape({
infoTableName: "InfoTable",
dataShapeName: "MenuEntry"

Step 2: define the top-level menu items by making use of the keyword: "topMenu"  as the menuId. This will be an item of the main menu

result.AddRow({
linkDestination: '',
isDefault: false,
parentMenuId: 'topMenu',
imageURL: 'TableView',
linkTarget: '', // (Popup, Mashup, New)
description: '',
menuId: 'idLogs',
linkType: 'Menu',
title: 'Logs'
});

Step 3: To add a sub item to a main item, use the value of menuId from the main item and pass this value as the parentMenuId to the menuId property of the sub item:
result.AddRow({
linkDestination: 'AllSitesMashup',
isDefault: false,
parentMenuId: 'idLogs',
imageURL: 'SiteIcon',
linkTarget: 'Mashup', // (Popup, Mashup, New)
description: '',
menuId: 'idAllSites',
linkType: 'Mashup',
title: 'All Sites'
});

The above should give you something like this (see image attached)

 

[Surya_Tiwari]

Hi @Tomellache2B  Thanks for sharing steps.