Hidden fields reappearing behind mask screen

[RichDotsonMTD]

I have an issue where fields that were previously hidden on the UI appear behind the mask screen when another window is displayed over top of it.

Is there a way to keep those widgets hidden behind the mask screen so the user will not see them?

PUI1.png (238.75 KiB) Viewed 4096 times

[Scott Klement]

I'm not sure that I understand.

What do you mean by "the mask screen" -- do you simply mean that you're drawing another screen on top of the first one?

Web applications allow you to plot multiple things in the same place -- they have the concept of a "z-index", meaning you can control which ones are placed in front of the other, etc. So if you're saying that you tried to draw one screen on top of another, but some parts dont' end up on top, it probably means that the z-index of the "overlaid" (or perhaps I should say "meant to be overlaid") screen is higher than the new one you've drawn.

That said, I can't think of a good reason to draw one screen on top of another. Obviously, it's twice as much work for the computer to draw two screens as it is to draw one. (And if you continue this pattern, it could result in many screens being drawn with only one on top -- which would result in abysmal performance.) So I don't recommend this unless you have a good reason (such as a need to see parts of both screens at the same time.)

Of course, I may be completely misinterpreting the question, too. Any clarification you can provide would be helpful.

[RichDotsonMTD]

I have 2 screens. The main screen displays the details for an item that was selected by the user. There are a series of buttons across the top of that page that will take the user to other pages (record formats) within the same display file / RPGLE program. The main screen may have fields that have been set to visibility='hidden' based on the authority of the user.

When the user clicks one of the buttons the program does an EXFMT to another record format (pui_splash) before the code associated with the button is executed. This record format (pui_splash) displays small window centered on the screen containing a set of rotating gears and a message telling the user to "Please wait...". This record format has the properties show as window = true, center window = true and the mask screen property default of true. When the pui_splash record format is displayed, the fields that were hidden on the item details record format can now be seen behind the pui_splash "window".
.

[Scott Klement]

My guess is that you're not re-hiding the visibility=hidden fields after you do the EXFMT.

Every time you do EXFMT, it completely wipes out everything on the screen and re-draws it. This means it'll redraw all layers of overlaid screens as well, etc. So if you are hiding something with code that runs within the screen, you need to run it again when you do the EXFMT. It won't persist from before the EXFMT, because EXFMT wipes everything out and starts over.

On the other hand, if you use something like a bound field to hide the widgets, they should be re-hidden when the EXFMT runs because the bound fields will still have the same values as the last time you wrote that screen.

[RichDotsonMTD]

That is correct. I am not re-hiding the fields on the record format that appears behind the "splash" screen. The "visibility" property on those fields is not bound to an RPGLE field but is set via JavaScript in the onload() event. The flow is:

1. ExFmt ItemDetails
2. ItemDetails onLoad() event calls an ajaxJSON() function to retrieve a JSON listing the widgets to hide on that screen.
3. A JavaScript function processes the JSON and hides fields/widgets/tabs listed in JSON.
4. The ItemDetails format is displayed and the fields are hidden as expected.
5. User clicks button to go to another screen.
6. displaySplash() procedure executes ExFmt pui_splash to display "splash" screen.

The displaySplash() procedure is a global procedure that we wanted to use as standard in all our PUI applications. It is in a separate module outside of the Item Inquiry program.

Two questions:
1. Is there a way in the pui_splash display to determine which fields were hidden on the screen being overlaid? - OR -
2. Is there a way to "remove" those widgets/fields in Javascript so they are not displayed when the screen is redrawn? I tried the removeElement('id_field') function and the document.getElementById(widget.id_name).remove method and they had the same effect.
.

[RichDotsonMTD]

Another question:

Where would I put the javascript code to "re-hide" the fields? I put it in the onLoad() event of the pui_Splash record format but the fields are still appearing.

[Scott Klement]

1. Is there a way in the pui_splash display to determine which fields were hidden on the screen being overlaid?

I'm not sure that I understand the question. I thought the problem was that they are not hidden? Do you mean you want to call your AJAX request to see which ones were supposed to be hidden?

2. Is there a way to "remove" those widgets/fields in Javascript so they are not displayed when the screen is redrawn? I tried the removeElement('id_field') function and the document.getElementById(widget.id_name).remove method and they had the same effect.

Both removeElement() and document.getElementById() work on the current html page, they don't have any way to prevent the same element from rendering on future pages. A bound field is the only thing that comes to mind, aside from re-hiding them when the page is re-drawn. Also, to my knowledge, removeElement() is an old 5250 routine that you probably shouldn't be using anymore. Instead, if you want to do this on the currently active screen, I would suggest using getObj() and/or applyProperty()

I think I understand the problem at a bit better, though. After Profound UI draws a screen, it runs the onload event. After the onload event, if that screen is to be overlaid by another one, it goes through and removes all of the "id" HTML attributes. It does this because HTML doesn't allow you to ever have the same ID repeated twice. So when it draws the new screen on top of the old one, there's always a chance that the new screen will have the same IDs. So it figures that once the "onload" event is complete, you no longer need IDs on the background screen, and it removes them all.

In your case, you are running an AJAX call, which by nature, runs asychronously. That means that by the time it has made it's request to the server and gotten the list of fields to hide, PUI has already proceeded to remove the IDs and has drawn the new screen that overlays it. When the AJAX function tries to hide them, they won't have IDs, so won't be hidden.

Where would I put the javascript code to "re-hide" the fields? I put it in the onLoad() event of the pui_Splash record format but the fields are still appearing.

I was thinking you'd do that in the onload of the overlaid screen. But, the fact that you need info from an AJAX request will definitely make this more complicated.

I think what you might have to do (and this is pretty ugly, imho) is create a lookup table before you submit the request. When the AJAX request completes, it would use this lookup table (rather than the ID) to locate the field to hide. That way, it doesn't matter if Profound UI has removed the id.

For example, you could create a table like this during your onload event (before running the AJAX):

Code: Select all

// define a global ("window." means global) variable to use as a lookup
// table.

if (typeof window.mtd === "undefined") window.mtd = {};
if (typeof window.mtd.elementTable === "undefined") window.mtd.elementTable = {};


// add the needed elements to the table.  This should consist of all
// of the ids you might want to hide (even if you never actually hide them)

var idlist = ["myId1", "myId2", "myId3", "etc"];
for (var i=0; i<idlist.length; i++) {
  var elem = getObj(idlist[i]);
  if (elem != null) {
    mtd.elementTable[idlist[i]] = elem;
  }
}

Now you have a lookup table with all of the elements that might be hidden with the info from the ajax request. When the request completes, it can use this lookup table to find the correct element, even if it no longer has an "id' associated with it. For example (this would be part of the code inside the response function from the ajax):

Code: Select all

  var elem = mtd.elementTable[idFromAjax];
  if (typeof elem !== "undefined") {
    applyProperty(elem, "visibility", "hidden");
    elem.style.visibility = "hidden";
    // extra processing may be needed for some elements, depending on 
    // how complex they are.  For example, a grid would need to be
    // re-rendered.
  }

This is just to give you the idea, I haven't tried it, and there may be errors in my code.

[RichDotsonMTD]

Thanks Scott. Your explanation cleared a lot of things up for me. I implemented the code as you suggested in your post. I changed my code to add the objects to a global collection (elementTable) and then change the visibility property via the object(s) in the collection instead of using the 'id' property of the object. This works when the screen is initially displayed but the hidden panels are still reappearing when the format is overlaid with another window. Below is a screen shot showing the initial display of the screen without the panels showing. I placed a series of console.log statements in the code to track what was happening. The debug console shows the pnl_CostInfo and pnl_Pricing objects in the elementTable collection.

When the logic goes into the hideUIwidgets() function the following code is executed:

Code: Select all

for(let key in elementTable) {
    console.log('-- key: ' + key);        // log key value
    let elem = elementTable[key];
    console.log('-- elem : ' + elem);  // log object value
    if (typeof elem !== undefined) {
       applyProperty(elem, 'visibility', 'hidden');
    };
  };

.
When I click on the "Manuals" button the "Item Manuals Group" window is displayed and the previously hidden panels appear. The panel objects are still in the elementTable collection but are not being hidden when the hideUIwidgets() function is called when the ManualScrn format is displayed.
.

[Scott Klement]

Rich,

Are you sure this code is right?

Code: Select all

    if (typeof elem !== undefined) {
       applyProperty(elem, 'visibility', 'hidden');
    };

It seems to me that "undefined" would need to be in quotes, since typeof returns a character string. I didn't test whether applyProperty() would activate right away, or whether it'd just change the property (in which case the widget would have to be re-rendered.) That's why, in my example, I set the style attribute of the dom element as well. You may have to experiment with what will actually hide them.

If the above paragraph doesn't help, I recommend stepping through this code in the debugger to see exactly which line of code isn't working and what the values of the variables are.

[RichDotsonMTD]

Scott,

I added the quotes to the "undefined" and added the style attribute and got the same result. Here is the current code:

Code: Select all

if (typeof elem !== "undefined") {
   applyProperty(elem, 'visibility', 'hidden');
   elem.style.visibility = "hidden";
};

I walked thru the code in the debugger and it appears that all the statements worked without issue and all the variables contained the correct values.