Menu Creation

[bgrassie]

I am trying to add a menu and do not know how to get the option to change.
I'm not sure how to enter the script.

Any help would be greatly appreciated.

[Scott Klement]

Assuming you mean our menu widget... When the user clicks on a menu option, it should fire a JavaScript event called 'onoptionclick'. In Genie, you'll want to write some code for that onoptionclick event that saves the selected option into a field on your 5250 screen and submits the screen (by pressing enter or a function key, etc).

Does that help?

If not, can you explain more about what you've done and the trouble you're having?

[bgrassie]

Thank you for your response....I put the menu widget onto a page. Not sure how to assign the options....right now every time I click on a option it takes me to the same screen. Im not sure how to differentiate. I attached a screen shot. I apologize in advance for my lack of skill in this area...

[Scott Klement]

I'm sorry, I'm not understanding what you're trying to do. The screenshot is very small and hard to read, but I think it's showing a traditional IBM menu on the right, with... is that a menu widget on the left? You want these both on the same screen, then? What do you want to happen when you click a menu option in the menu widget?

Normally, I see menu widgets within programs and not on IBM menus. But, even so, it should work fine.

What do you want to happen? When someone clicks "Master" (or whatever) it 'types' the number for them, and presses enter for them?

[bgrassie]

Scott, Im sorry for the confusion....I am trying to create a menu. There is already a menu on the page. I was going to replace that with your widget on that page and then once I learned the process duplicate it on other(s). When I click on an option I want to goto the page/screen as I would the traditional IBM menu. It really isn't a big deal I just cant figure it out. Thank your responses.....

[Scott Klement]

Okay, I'll give you an example using an IBM menu (since I don't have the menu you are using) and maybe that'll help you.

For the sake of this example, I've chosen to use the IBM "Communications" menu. You can get to this menu on any IBM i system by typing 'GO CMN' -- so it's a menu we all have, and therefore makes a good example. In Genie, with the skin I'm using, the menu looks like this (obviously, it'll look a little different with different skins):

menu1.png (24.94 KiB) Viewed 4118 times

Note: There's really no need to do any special programming or use the menu widget to make the options clickable, here. You can simply turn on "Detect menus". You can turn this on globally for the entire Genie skin in the Genie Admin under "Rendering Settings". Or, you can turn it on on a per-screen basis in the Genie designer under "Screen properties / Misc". This is how most customers work with green-screen menus -- so your question about using the menu widget caught me off-guard a little. I've never seen a menu widget used this way.

But, assuming you still want to use the menu widget:

• Navigate to the menu. (GO CMN)
• Go into the Genie designer.
• Click the "CMN" in the upper-left corner, and while pressing the Ctrl key, also click the word "Communications" in the middle. Then, right click and choose "Mark as identifier", this is how Genie will recognize the screen.
• Drag a menu widget onto the screen.
• Set the "Choices" property to what you want the user to see.
• Set the "Choices values" property to whatever you want Genie to enter into the command line. In my example, I'm setting it to the same numbers (1-9 and 70) that IBM provided for this menu... I'll have Genie enter this number into the command line, and press enter for the user automatically.
• Your screen should now look something like this:

menu2.png (49.77 KiB) Viewed 4118 times

The 'choices' property and 'choice values' property correspond to one another. The first entry in "Choices" corresponds to the first entry in "Choice Values". The second entry in "Choices" corresponds to the second value in "Choice Values", and so forth. So I've listed all of the text for the menu options in "Choices", and I've put the numbers in the corresponding "Choice Values".

menu3.png (13.21 KiB) Viewed 4118 times

Now you have your menu, but it doesn't do anything yet. To make it do something in Genie, you need to set the 'onoptionclick' property to some JavaScript code. Since the code is relatively simple (at least, in this example) I'll just code it directly in the widget. (If it were more complex, you'd want to code it into a separate JavaScript file -- but that's probably not needed, here.)

• First, find the field where you want to enter commands. In the Genie designer, and on the IBM CMN menu, if I click on the command line, Genie will tell me that the field name is I_20_7. I'll jot that down on a piece of paper so I don't forget.
• Still in the Genie designer, click the menu widget and scroll down to the 'onoptionclick' event. This is (strangely, imho) under the 'Menu Options' section of the properties.
• Click the little button next to the property value to open up an editor and give you more space to work.
• In this code, Genie will pre-define two variables for you. One named 'text' will have the text of the menu option that was selected, and one named 'value' will have the choices value (in this case, the menu option number) that was selected.
• To put the option number into the command line, add this to your script: changeElementValue("I_20_7", value);
• To press enter after the number has been inserted, add this line to your script: pressKey("Enter");
• Your script should now look like this:

menu4.png (21.57 KiB) Viewed 4118 times

• Now click "OK" to exit the script editor.
• Click "Save screen" on the Genie design toolbar.
• Test it out!

If all is well, you could now drag your menu widget (and maybe resize it) so that it covers the original IBM menu, forcing the user to use the menu widget instead of the IBM commands.

Note that it's possible to put anything (that the user is allowed to type at the command line) instead of just the numbers. For example, if you have users with command-line accesss that might want to run WRKSPLF, then you could add a "Work with Spooled Files" to the Choices, and "WRKSPLF" to the corresponding choice values. Now it will be WRKSPLF that gets 'typed' (put into) the command line before pressing enter.

Does that help?

[bgrassie]

Thank you for your help.....

[Wayne C.]

I'd like to reawaken this thread with a couple of questions.

Is it necessary or helpful if al the menus in green screen have the menu option selection field to be in the same location?

changeElementValue("I_21_24", value);
pressKey("enter");

In order for the above code to work in the onoptionclick property of a pulldown menu widget, do consecutive menus need to have the menu option selection field in the same location (ex. "I_21_24") ? Currently, we do not. I've been playing around with the pulldown menu widget and can only navigate so far because (I believe) the next menu called by the pulldown menu has a different selection field location.

[Scott Klement]

They do not need to be the same, but you will need to update the changeElementValue() code to point to the correct position on each screen.

[Wayne C.]

Thanks for the response.

What I'd like to do is use a pulldown menu to navigate from our application's main menu to a selected menu and execute an option on that selected menu. Here's an example:

Our Main menu looks like this:
1. Operations
2. Billing
3. Warehousing
4. Tariffs

I've set up a pulldown menu widget on our Main menu rendering and thru coding "choices" and "choice values" (4,4/1,4/2,4/3), I can navigate to the Tariff menu just fine but I can't execute Option 1 (Tariff Entry) on the Tariff menu.

Am I trying to do something that the pulldown menu widget isn't capable of or am I missing something or coding "Choices" and "Choice values" incorrectly?