Menu with sub-menu

Question

Rather than using related actions I want to create my own navigation bar. It looks like this 
 
 The problem that I am having is the the two center menu items need to have sub-menu. Both the Edit and Add menu items were easy to implement with a start process link. Here is the code: 
 a!sideBySideItem( item: a!richTextDisplayField( label: "Rich Text", labelPosition: "COLLAPSED", value: { a!richTextItem( text: { " Edit Promotion Details " }, link: a!startProcessLink( processModel: cons!SW_EDIT_PROMOTION_RECORD_PM, processParameters: { isEdit: "Yes", promotionId: ri!promoId } ) ), a!richTextItem( text: { " Request & Manage Estimates " }, link: WHAT CAN I USE TO SHOW SUB-MENU THAT CONTAINS START PROCESS LINKS? ), a!richTextItem( text: { " Request & Manage Rules " } ), a!richTextItem( text: { " Add Attachments " }, link: a!startProcessLink( processModel: cons!SW_ADD_ATTACHMENTS_PM, processParameters: { promotionId: ri!promoId, parentFolderID: local!promo.promotionFolderId, promotionName: local!promo.promoName, tempoEventID: local!promo.tempoEventId } ) ) } ) ) 
 I am hoping that someone has an easy solution for this problem.

Stewart Burchell · Accepted Answer

Unfortunately the a!sideBySideItem() won't take layout components as of 19.1. I'd suggest you re-structure the whole thing as a pair of a!columnsLayout() and use a!dynamicLink() to toggle the value of a local! Boolean variable, and use that as the value for the showWhen of an a!boxLayout(), which you can then use as the container for your sub-menu. Here's what I mean: 
 
load( 
 local!promo: null, 
 local!isMenu1Enabled: false, 
 local!isMenu2Enabled: false, 
 { 
 a!columnsLayout( 
 columns: { 
 a!columnLayout( 
 contents: { 
 a!richTextDisplayField( 
 value: { 
 a!richTextItem( 
 text: " Edit Promotion Details ", 
 link: a!startProcessLink() 
 ) 
 } 
 ) 
 } 
 ), 
 a!columnLayout( 
 contents: { 
 a!richTextDisplayField( 
 value: { 
 a!richTextItem( 
 text: " Request & Manage Estimates ", 
 link: a!dynamicLink( 
 value: fn!not(local!isMenu1Enabled), 
 saveInto: { 
 local!isMenu1Enabled, 
 a!save( 
 local!isMenu2Enabled, 
 false 
 ) 
 } 
 ) 
 ) 
 } 
 ) 
 } 
 ), 
 a!columnLayout( 
 contents: { 
 a!richTextDisplayField( 
 value: { 
 a!richTextItem( 
 text: " Request & Manage Rules ", 
 link: a!dynamicLink( 
 value: fn!not(local!isMenu2Enabled), 
 saveInto: { 
 local!isMenu2Enabled, 
 a!save( 
 
 local!isMenu1Enabled, 
 false 
 ) 
 } 
 ) 
 ) 
 } 
 ) 
 } 
 ), 
 a!columnLayout( 
 contents: { 
 a!richTextDisplayField( 
 value: { 
 a!richTextItem( 
 text: " Add Attachments ", 
 link: a!startProcessLink() 
 ) 
 } 
 ) 
 } 
 ) 
 } 
 ), 
 a!columnsLayout( 
 columns: { 
 a!columnLayout( 
 contents: {} 
 ), 
 a!columnLayout( 
 contents: { 
 a!boxLayout( 
 label: "Sub Menu", 
 showWhen: local!isMenu1Enabled 
 ) 
 } 
 ), 
 a!columnLayout( 
 contents: { 
 a!boxLayout( 
 label: "Sub Menu", 
 showWhen: local!isMenu2Enabled 
 ) 
 } 
 ), 
 a!columnLayout( 
 contents: {} 
 ) 
 } 
 ) 
 } 
)

Mike Schmitt · Answer

Appian doesn't really have drop-down submenus like you're thinking of, but you could probably come up with something pretty nice looking if you use either a!boxLayout or a!cardLayout just below that bar where clicking one of the two items in question causes the box/card to open, in which you could easily have a list of items like links/etc.

helmuta · Answer

Works like a champ Stewart. Need to see if there is another structure that might give me the same functionality as the boxlayout because I'm not sure if my users will like the border. Really appreciate your help.