create dynamic navbar in Rich DSPF
Posted: Fri May 04, 2018 2:00 am
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
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