Changing the FKey Links to a Menu.

[brees@gbsio.net]

Hello,

I would like to convert the FKey links into a menu within Genie. I added the following code to my createSideMenu.

var envMenu = new Object;
envMenu["id"] = "fkeyMenu";
envMenu["choices"] = "Test 1,Test2";
envMenu["choice values"] = "t1,t2";
envMenu["field type"] = "menu";
envMenu["top"] = "274px";

The choices would be dynamically generated. ( just piggy-backing off of your logic )

This is only a test, but I was expecting a menu to be on my screen.
Nothing happened. What am I missing?

Thank you,
Brian Rees

[Scott Klement]

You've created a JavaScript object... basically, the same thing as a data structure in other languages, such as RPG. In order to have a menu, you'd need to create a widget.

Is there code in there that does that, later on in the process, perhaps?

[brees@gbsio.net]

No. that is not in there, yet.

What command do I need to use to create a widget?
I tried pui.widgets.add() - That created a new widget on my genie screen.
I dont think I need that, the current Glass Menu would be perfect.

Thank you!

[Scott Klement]

Apologies, I am not being precise enough in what I'm saying.

I did not mean to imply that you should write code that implements a new design for a widget. I meant that you should create a new INSTANCE of an existing widget on the screen.

As an analogy, in the green-screen world maybe I want to put a subfile on the display to show a list of products. The following would be roughly equivalent to what you've done in JavaScript:

Code: Select all

   data(1).prod = 1234;
   data(1).desc = 'Blue Widget';
   data(2).prod = 2345;
   data(2).desc = 'Green Widget';

That won't put a subfile on the display, since all it does is set some variables in the RPG code. You'd need to code DDS that has a subfile in it, you'd need to write records to that subfile, and you'd need to display the control rtecord in order for an actual subfile to appear. Simply setting variables in your program doesn't show anything on the screen.

(Unless, of course, there's more code that I haven't shown you -- which is why I asked if there was code later in the process.)

What you've done is basically the same, you've done this:

Code: Select all

var envMenu = new Object;
envMenu["id"] = "fkeyMenu";
envMenu["choices"] = "Test 1,Test2";
envMenu["choice values"] = "t1,t2";
envMenu["field type"] = "menu";
envMenu["top"] = "274px";

This sets a bunch of variables. It doesn't do anything at all on the screen.

Instead (or in addition to?) this, you'll need to add some widgets to the display. I don't mean create a brand new style of widget that you wrote yourself, I mean take an existing widget type and add it to your display and set it's properties to what you've coded in your variables.

[Scott Klement]

Here's an example of what I'm referring to:

Code: Select all

  // create a new element.  "div" is the basic type of html element to start with,
  // but it can be changed into a menu widget:
 
  var envMenu = newElement("div", "fkeyMenu");
  applyProperty(envMenu, "field type", "menu");
  

  // These settings give it the "glass menu" look:  

  applyProperty(envMenu, "color", "#333366");
  applyProperty(envMenu, "font family", "Arial");
  applyProperty(envMenu, "font size", "12px");
  applyProperty(envMenu, "font variant", "small-caps");
  applyProperty(envMenu, "text align", "center");
  applyProperty(envMenu, "hover background color", "#ffffff");
  applyProperty(envMenu, "hover text color", "#0000ff");
  applyProperty(envMenu, "animate", "true");
  applyProperty(envMenu, "border color", "#EEEEEE");
  applyProperty(envMenu, "background color", "#c9dff3");
  
  
  // position/sizing:
  
  applyProperty(envMenu, "top", "274px");
  applyProperty(envMenu, "left", "-200px");
  applyProperty(envMenu, "height", "200px");
  applyProperty(envMenu, "width", "200px");
  
  
  // Application-specific settings:
  
  applyProperty(envMenu, "onoptionclick", "alert(value);");
  applyProperty(envMenu, "choice values", "T1,T2");
  
  //  apply "choices" last because it will redraw the menu with 
  //   the properties given above.
  
  applyProperty(envMenu, "choices", "Test 1,Test 2");
  

[brees@gbsio.net]

Awesome! Thank you!

[brees@gbsio.net]

This is looking good.

I have the following snipit in my custom.js code

applyProperty(envMenu, "choices", myChoice);
applyProperty(envMenu, "choice values", myOptions);
applyProperty(envMenu, "onoptionclick", "alert(value);");


myChoice = "Exit,AddlInfo,ADDOR,Comm,PrimPlan,MktSize,ACH,Sc2,AdmFeeOvr,BnsDrwOvr,CarBegDt,OLE,Contct,MCAID,Issue"
myOptions = "F01,F05,F09,F10,F11,F14,F15,F16,F17,F18,F19,F20,F21,F22,F23"

When I press the menu option; I get the name of the function ( Example: Exit ) instead of "F01".

I also tried "alert(text)"

[Scott Klement]

Ah, sorry... I knew I should've tested it before sending it to you ;-)

It looks like applying the "field type" is wiping out some of the settings. Try doing this:

1) Only apply the "field type" at the start (right after newElement) only.
2) Apply the "choices" parameter last. This has some special processing that will redraw the menu with the updated values.

I'll update the code in my earlier post.