How to create a drop down menu?

June 30, 2015 at 12:54 pm #338

How to create a drop down menu?

July 1, 2015 at 3:24 pm #359

That is a great question Dan!

I would use a popup menu.  Then put an input group into the popup menu.

This will be the result of the drop-down menu:

 

1. Layout to contain the popup menu

 

2. Popup Menu

 

Popup Menu with Configuration

 

3. Input Group

4. Input Group

 

 

Dave Wakeman

July 26, 2015 at 9:40 pm #500

Lisa,

This is a great example, but how do I trigger something to occur when a menu item is clicked?  For example, imagine I have a vertical layout control bound to a list of items in a product catalog.  I want to create a set of drop down menus that can filter the list based upon which menu item was clicked.

In order to do this in my app as I currently have it built I have buttons that fire boundary events.  I have transitions on the diagram on the human service that calls an integration service that returns a new list with the appropriate filters applied and then transitions back to the coach, causing it to reload.  Is there a way for the menu items to fire a boundary event, and if so, how would I know which one was clicked?

I’m guessing the “Command” column in the Menu Items table on the configuration tab of the Popup Menu control might help me somehow but I haven’t found any documentation on what that field is for or what I can put in it.

Thanks in advance for your help!

– Dave

July 28, 2015 at 10:08 am #504

Hi Dave,

If I understand what you are asking, you are wondering:

1) What can trigger an event when an item is clicked from the popup menu?
There is a On Item Click event

2) How to populate another drop-down list based on a previous selection?
There are several ways to accomplish this. One of the simpler ways is to do it is. One the item is selected, call a method that sets the value for the control nested within the popup menu:
Ex: On Item Click : ${Text1}.setText(command);
“command” is a context variable that is specific to the On Item Click.
Add the string in command under the menu configuration for the popup menu. During runtime you can access command in On Item Click event handling.
The command item can be bound to a variable. You can then use this variable and pass it into an ajax services and return certain results accordingly.

3) How menu items can trigger a boundary event?
The NavigationEvent control would be a useful tool in creating conditions in triggering a boundary event.

Best regards,
Lisa Leung

Dave Wakeman

July 28, 2015 at 11:58 am #510

Okay, thanks!  I get the idea and I did sort of get this to work but I found that the “On Item Click” doesn’t always get fired when I click on an item.  I double checked my sample against your screen shots and I think I got it right, but I have to click around a bunch of times before my code in the “On Item Click” fires.  When it does fire it fires correctly, but it is very inconsistent on when it fires.

This isn’t the only thing I have on my coach; is there a chance something else is interfering with it?  I checked the browser console and I didn’t see any exceptions or errors so I am not sure why it is behaving this way.

I am using 4.0.2 – 8.5.6.0 enterprise.

Thanks!

– Dave

Elliot

July 31, 2015 at 8:58 am #543

Hey Dave,

I recreated the example and experienced the same issues as you did with 4.0.2 – 8.5.6.0 enterprise version of Spark. When I tried it with a new newer version (4.0.4 – 8.5.6.0) it worked properly. If you are working with 8.5.0.1 or 8.5.0.5 PD then 4.0.4 Spark is available for you to download, though if you are working in 8.5.0.6 PD, then 4.0.4 Spark will be available to download in the near future. Below is a link to view current available versions, note that you must be signed in to see this.

https://salientprocess.zendesk.com/hc/en-us/articles/205610398-How-do-I-get-the-SPARK-UI-Toolkit

-Elliot P.

Dave Wakeman

July 31, 2015 at 9:43 am #544

I am using 8.5.6, so I will test it out when the new version becomes available.

Thanks!

– Dave W.