TabPanels; how can I return to last selected tab

[Wayne C.]

Is there a way to return to the last tab selected (after executing a program or menu option on said tab)?

In other words, if a user executes a program from the 3rd panel ( of a 4 tab tabpanel) and ends that program, I'd like the user to return to that 3rd panel instead of to the default tab (first tab). I imagine there's some script involved.

I've tried the following code in the "ontabclick" property of the Tab Panel: setTab("TabPanel1", tab); (didn't work)

Don't know enough javascript to make this work (if that's what's needed). Can somebody point me in the right direction?

[Scott Klement]

What you need to do is:

1) Save the tab number somewhere in the ontabclick property.
2) Restore the tab number when the display re-loads (i.e. the onload event)

There are lots of places you could potentially save the tab number... for example, you could use "sessionStorage" which lasts for the rest of the browser session (i.e. until you close the browser window/tab). In the tab panel's ontabclick event, you'd do this:

Code: Select all

sessionStorage.setItem("MYSCREEN_LASTTAB", tab);

And in the screen's "onload" event, you'd do this:

Code: Select all

var lastTab = sessionStorage.getItem("MYSCREEN_LASTTAB");
if (lastTab) {
  setTab("TabPanel1", lastTab);
}

Hopefully that makes sense. When the user selects a tab, you save it into the browser's "sessionStorage" under a variable named "MYSCREEN_LASTTAB" (pick any name you like -- but keep in mind that variable names are case-sensitive.) Whenever the screen loads, it looks to see if the variable is in the session storage -- if it is there, it will set the tab. (If not there, it'll just use the tab panel's default/initial tab)

If you want it to keep the value even when the user closes and re-opens the browser window, replace "sessionStorage" with "localStorage".

[Wayne C.]

Thanks Scot. That seems to work great! I'm going to apply that to other occurrences of tab panels throughout our system.

[Wayne C.]

The logic you sent works great except under one certain condition. I think I need to use the setCursor function to correct this issue. It seems that the field (in green screen) where the cursor is positioned seems to override the "onload" script.

I've tried including the setCursor logic (found in the Profound documentation) in the onload event script.

setCursor("I_8_13"); (first input field of the second tab)
pressKey('F1');

I tried using the setCursor before the program included F1. Of course, I got an alert stating F1 was not allowed. I pressed enter to continue. The script seemed to work but the program locked up. I then changed the DDS and RPG to permit F1. Then retried the Genie version. If I remember correctly, it didn't change the cursor positioning but it did lock up program again.

It seems that if I go the nth tab, but the green screen cursor is positioned at the first input field (which is positioned on tab 1), then control always goes back to tab 1. However, all the logic works fine if the first input field / textbox is moved outside of the tab panel. That's why I think I need to use setCursor. I kind of ruled out focus() because I manually went to the tab 3 and clicked on a textbox, used a function key to go to another program, exited that program and was returned to tab 1 of the tab panel. We do have a convention of using F4 to search for a value from another file (ex. Customer name or city / state). After retrieving the value and returning to the calling program, we position the cursor at that field. That new cursor positioning seems to allow the set tab logic to work. That's why I think I need to include setCursor logic in the onload event in addition to the setTab. Am I on the right path?

I think I'm not using correctly since the use of it throws my browser session into a tizzy.

[Wayne C.]

Bump.

My work-around for this situation was to move the first input field to a location outside of the tab panel. This enables the "set tab" logic to work like a charm. However, my supervisor has an issue with the esthetics of a single input field outside of the tab panel.

I guess my question is "Is it possible thru javascript or whatever to actually move the position of the cursor in the DDS?" Otherwise, I will move these individual fields to a location within the borders of the tab panels. We can live with the fact that the program will not return to the proper tab.

Thanx.

[Scott Klement]

setCursor() moves the host cursor only, not the browser's cursor. In other words, if your program on the host uses the DDS CSRLOC keyword or another similar way of retrieving the row/column that the cursor left off, you'll get what was set by setCursor(). It will not position where the user sees the cursor on the screen.

Is that what you're trying to do?

If so, I'm not understanding the relationship between that and the tab panel or onload event.

The browsers cursor (aka "focus") will always be set immediately after the onload has completed. So you can't change the browsers focus very easily from the onload event. You could, however, use something like setTimeout() to change the focus a fraction of a second after the onload has completed. That way, you can try to make yours happen last -- and therefore be the effect that a user sees. The only disadvantage to this comes if using a mobile device where a touch keypad pops up, since they'd see the keypad open, then close, then open again as the setTimeout fires. But, I don't think you're using mobile, so this wouldn't be an issue.

Honestly, I don't feel like your situation is "clicking" in my brain. It would help a lot of you could show screenshots of what is happening.

[Wayne C.]

Here's our Driver maintenance entry screen. You can see the cursor is positioned at the "Status:" field. Basically, all the Driver's data is crammed onto one screen. At the bottom of the screen are all the associated function keys.

driverMaint.png (48.41 KiB) Viewed 2924 times

Here's the Genie rendering of the Driver maintenance. We divided the data into a 3-tab tab panel. Here is the first tab (Info). We moved the "Status:" field back onto the tab panel for testing purposes. All associated functions are now buttons running vertically along the left side of the screen

genie_drivermaint.png (107.65 KiB) Viewed 2924 times

Now I've clicked on the second tab ("Dates/Licensing"). Up to this point I haven't changed any data or even hit the Tab key. Browser cursor located at first input field "License:" .

genie_drivermaint_tab1.png (103.38 KiB) Viewed 2924 times

Say at this point I want to check the "Safety Notes" (one of the function keys) for this driver. When I return from the Safety Notes program, I am returned to the first tab (Tab 0) instead of Tab 1 where I called the function from. And I'm sure it's because (as you indicated in your post) that although the browser cursor location has changed, nothing has changed the host CSRLOC. The cursor is still located at the first available input field which is "Status:" which resides on Tab 0. It seems that the host cursor location overrides the "set tab" logic.

I don't know if this windy explanation makes the situation clearer ;)

So to answer your question, I think setCursor () is what's needed. I tried to use it back in April but got some weird results. So I gave up. It's not the end of the world if I can't make this happen.

[Scott Klement]

Calling setCursor() won't affect which tab is shown in a tab panel. All it does is change numbers that are sent back to IBM i.

Use setTab() if you want to change which tab is shown.