create dynamic navbar in Rich DSPF

[DavidBal]

Hello all,

we have a Genie Skin which works like the hybrid Skin. The difference between them is that the function keys are placed in a navigationbar at the top. For the normal DSPF's everthing works fine. In Rich DSPF I created the same navigationbar but with a different onclick Event.
This onclick Event does not work correctly. Following my Genie and Rich Code.

Genie code:
var inputs = document.getElementById("5250").getElementsByTagName("input");
var buttons = [];
var dups = {};
// Alle Funktionstasten auslesen und in das Objekt buttons schreiben
for (var i = 0; i < inputs.length; i++) {
var input = inputs;
if (input.type != "button" || input.fkey == null) continue;
// don't add a nondisplay button to the side menu
if (input.className.indexOf("hide") >= 0) continue;
// don't add buttons in window formats to side menu, but do
// do style them as 'hybrid-button'
if (input.id.indexOf("W") != -1) {
changeElementClass(input.id, "HGWWS-button");
continue;
}

input.style.visibility = "hidden";
if (dups[input.value] == true) continue;
buttons.push({
fkey: input.fkey,
text: input.value
});
dups[input.value] = true;
}
var navbar = document.getElementById("HGNavBar");
while (navbar.firstChild) {
navbar.removeChild(navbar.firstChild);
}
if (buttons.length > 0) {
// sort buttons
buttons.sort(function(a, b) {
if (a.fkey < b.fkey) return -1;
else if (a.fkey == b.fkey) return 0;
else return 1;
});

for (var i = 0; i < buttons.length; i++) {
var fkeyLink = newElement("li", "", "fkey" + i);
fkeyLink.className = "HGNavButtons";
fkeyLink.style.whiteSpace = "normal";
fkeyLink.style.top = "2px";
fkeyLink.innerHTML = buttons.text;
fkeyLink.fkey = buttons.fkey;
fkeyLink.onclick = function(e) {
var target = getTarget(e);
if (target.fkey == null) target = target.parentNode;
var fkey = target.fkey;
pressKey(fkey);
}

navbar.appendChild(fkeyLink);
}
}

Rich DSPF code:
var inputs = document.getElementById("5250").getElementsByTagName("input");
var buttons = [];
var dups = {};
for (var i = 0; i < inputs.length; i++) {
var input = inputs;
if (input.type != "button" || input.className == "pui-find-filter-box") continue;
// don't add a nondisplay button to the side menu
if (input.pui.properties.visibility == "hidden") continue;

input.style.visibility = "hidden";
if (dups[input.value] == true) continue;
buttons.push({
id: input.id,
text: input.value,
});
dups[input.value] = true;
}
var navbar = document.getElementById("HGNavBar");
while (navbar.firstChild) {
navbar.removeChild(navbar.firstChild);
}
if (buttons.length > 0) {

for (var i = 0; i < buttons.length; i++) {
var fkeyLink = newElement("li", "", buttons.id);
fkeyLink.className = "HGNavButtons";
fkeyLink.innerHTML = buttons.text;
fkeyLink.style.whiteSpace = "normal";
fkeyLink.style.top = "2px";

// Icon für Funktionstaste setzen
var icon = newElement("span","","");
var iconClass = getButtonIcon(buttons.text);
icon.className = iconClass;
icon.title = buttons.text;
// Kindelemente Elternelemente hinzufügen
fkeyLink.appendChild(icon);
navbar.appendChild(fkeyLink);
}

navbar.addEventListener('click', function (e) {
var target = e.target;
while (target && target.parentNode !== navbar) {
target = target.parentNode;
if(!target) { return; }
}
if (target.tagName === 'LI'){
pui.click(target.id);
}
});
}

If I use a console.log for the target.id I have the correct buttonID. Where is my mistake?

Thanks for your help!

David

[Scott Klement]

David,

The 5250 code looks fine.

But, Rich Display does not work like 5250. It's very, very, different.

What I would do is not limit yourself to input HTML tags... I would search for any widget that has the "shortcut key" property set to a function key. So you'll want to retrieve <div>, <img> and <input> tags. Skip any that do not have the pui, pui.properties or pui.properties["shortcut key"] attributes attached to them. When you find pui.properties["shortcut key"] attached, you'll want to determine if it is a shortcut key that you will put in your nav bar. If so, hide it and create the navigation item.

[DavidBal]

Hi Scott,

I changed it. How can I press the function key when the user clicks?
Is it even possible to get the correct response when the user clicked on an item (in Rich DSPF)?

Have many thanks,

David

[DavidBal]

Hi Scott,

After using the same onclick code like Genie und using the shortcut key as button[].id I was able to get the response.
I did not read the documentation well. When I use the pressKey event I get the response in a rich dspf in the AID key of the INFDS. This was my fault. After declaring the data structure and using some constants, it works.

Thanks for your help.

David