Okay, so you'll have to write a little bit of JavaScript code to make this work -- if you find this too difficult, don't forget that you can hire Profound Logic to do it for you. But, I'll give you some tips.
Background:
Each genie skin has a file called custom.js that is used to customize screens. In the Genie Administrator, you can click on your skin in the left-hand navigation, and then click on custom.js to make changes to it. You don't have to use the admin to make changes, either... if you have a program you like better, its found in the IFS under /www/YOUR-INSTANCE/htdocs/profoundui/userdata/genie skins/YOUR-SKIN/custom.js -- its perfectly fine to edit it directly from the IFS.
In custom.js there are two functions that Genie will call automatically. One is 'customize', this is called at the point when its time to customize all 5250 screens. The other is 'pui.onload', which is called when its time to customize all Rich Display screens. These are very handy vs. using the visual designer when you want to do something that applies to every screen on your system -- which is the case with these function keys.
We ship a customize function that demonstrates how to customize the sign-on screen. Beneath that customization, you'll see that it sets up something called 'afterInit' that will run after all customizations have already been applied. In the Hybrid skin that we ship, it looks like this:
Code: Select all
if (pui.genie.afterInit == null) {
pui.genie.afterInit = function() {
if (pui.genie.displaySize == 132) hybridSkin.screenWidth = 1100;
else hybridSkin.screenWidth = 775;
hybridSkin.displayLogo();
hybridSkin.displayUser();
hybridSkin.removeHeader();
hybridSkin.createHeader();
hybridSkin.createSideMenu();
}
}
So this will run after every single 5250 screen, and it calls a function called hybridSkin.createSideMenu() -- this is what transforms the function key buttons into the link menu on the left, and is found within this same custom.js file. Take a look at how it works... It searches for all html <input> tags, and any input tag that represents a function key is hidden, and then it creates links for each one.
My tips:
My suggestion is that you rewrite the createSideMenu to work the way you want. I'd start by turning off the "Function Key Buttons" option in the Genie Admin (under Rendering Settngs) since this creates buttons from the original 5250 F-keys text. The buttons won't have the 5250 attribute codes that you need to determine if it is reverse image.
Now look at what is rendered on the page in your element inspector. You'll see that they are now <div> tags that contain <a> anchors (links). I suggest rewriting the createSideMenu function to find these links and simply move them over to the left-hand menu. While you're at it, you might re-style them a bit so that they look nice.
By keeping these links, you'll also have the A21 class on them (and other Axx classes) that represent the 5250 attribute code. 21 is the attribute code for "normal, green, reverse-image".
This can be tricky coding if you're not already comfortable with JavaScript and the DOM, which is why I want to emphasize: It might be easier to just hire Profound to make a customized skin for you. Of course, if you are comfortable with this type of coding, it's really powerful and you can do pretty much anything you like :-)