1 2 3 Previous Next 32 Replies Latest reply on Mar 30, 2018 8:40 PM by Blue Bird

    How to display specific tab using Region Display Selector at displaying page?

    Blue Bird

      Hi,

       

      I'm using APEX 5.0.4. I have an interactive report page with data columns and one contain hyperlink (Identification > Type > Link) to another page. This another page have couple of charts. Each chart is on separate tab using Region Display Selector. What I would like to achive is that when user click link on first page, specific tab would open on my target page with charts (e.g. 3rd tab). My chart page open normally, but not necessary on the correct tab, but on before active tab (when I was on this page).

       

      I found one recipe here, which should do exactly that, but It doesn't work If I follow this instructions. Either I'm doing something wrong or I didn't set all correct or some parts are not described how it should be.

       

      Can someone please give me even easier solution for what I would like to achive or try to follow this instructions and tell me if this example work at all? Below are some settings but it's hard to write them all. The most helpfully to me would be if someone can follow this article and confirm that this example work out of the box or he has to do some additional steps which is not clearly written but it should be, so example would be valuable for other readers as well not just the author.

       

      I have Select list named P100_SELECT_TAB, which have List of Values > Static Values: STATIC2:User Data;1,Chart;2

      Then I have Region Display Selector (RDS in advance) with Advanced > Static ID > TABS (set to TABS)

      Inside this RDS I have two tabs (as shown above):

      - "User Data" with Advanced > Static ID set to TAB_1

      - "Chart" with Advanced > Static ID set to TAB_2

       

      For P100_SELECT_TAB I bind Dynamic Action (DA) with Condition When > Change > Item's > P100_SELECT_TAB equal to 1

      For True part of this DA I have Identification > Action > Execute JavaScript Code:

       

      sessionStorage.setItem(".&APP_ID..&APP_PAGE_ID..<TAB_CONTAINER>.activeTab","#CR_SR_<TAB_NAME>");
      $('#<TAB_CONTAINER> a[href="#CR_SR_<TAB_NAME>"]').trigger('click');
      

       

      Affected Elements > Item's > P100_SELECT_TAB.

       

      BB

        • 1. Re: How to display specific tab using Region Display Selector at displaying page?
          fac586

          Blue Bird wrote:

           

          I'm using APEX 5.0.4. I have an interactive report page with data columns and one contain hyperlink (Identification > Type > Link) to another page. This another page have couple of charts. Each chart is on separate tab using Region Display Selector. What I would like to achive is that when user click link on first page, specific tab would open on my target page with charts (e.g. 3rd tab).

          See APEX 5.1 Region Display Selector - Choose the Active Region

           

          Don't know if this works in 5.0.4, and won't be able to find out for several hours.

          • 2. Re: How to display specific tab using Region Display Selector at displaying page?
            Blue Bird

            I even more simplify target page with charts.

             

            On the top I have Text Field control PXX_DEFAULT_TAB which I successfully fill with calling this page. When I call this page inside textbox contain for example value 1, 2, 3, etc. Regarding to this value specific RDS Tab should open automatically. So even if this would work only at Page Open Dynamic Action would be enough for now. Even more efficient would be if would work over select list, but Dynamic Action should be similar. So the missing part is correct JavaScript code which would be open correct tab. Probably this would be handled over values in Advanced > Static ID for each of this Tab inside RDS. Any solution is appreciated.

            • 3. Re: How to display specific tab using Region Display Selector at displaying page?
              Franck Nyassa

              Hi

              if you aim to do something like this:

              please create a Dynamic Action on your dropList Item:

               

              //this will get you the value of your list selection

               

              value = apex.item(" P1_ITEM_3").getValue();

               

              // make sure that  the the entries in Ur LOVs  return some Value ( in my case tab1 & tab2);

               

              // (CR_SR_tab1) is the href which you can access using your google develloper. make sure to provide an ID to the Tabs in your case  maybe it will be ((CR_SR_ID))

               

               

              //here your dynamic action  ''onChange'' on your dropdownList-Item

               

               

              if(value === "tab1"){

                  javascript:apex.jQuery("li[aria-controls='CR_SR_tab1'] a").trigger("click");

              }else if (value === "tab1"){

                  javascript:apex.jQuery("li[aria-controls='CR_SR_tab2'] a").trigger("click");

              }

               

              the result will be this :

              • 5. Re: How to display specific tab using Region Display Selector at displaying page?
                Blue Bird

                Hi Franck,

                This look promising but I really can't figure out where to put where because it's look like you talk about two dynamic actions or I don't understand exactly what do you want to show me. So I would like to answer me on this questions:

                1. For my Select list I have List of Values > Static Values: STATIC2: User Data;tab1,Chart;tab2. I used for return value tab1 and tab2. Do you reference yourself only on this return values tab1 and tab2 or is important also this what I used for display values? I have "User Data" and "Chart". Using for both same name is not intuitive and you never know which part the rest of the code reference inside then. So I think this values always should be diffrent so it's clear what is used where.

                2. You wrote to create Dynamic Action and write this: "value = apex.item(" P1_ITEM_3").getValue();! You didn't explain how to create this DA, how to set it and where to use this peace of code. Always assume that user who ask doesn't know this, otherwise he wouldn't probably ask this.

                3. Is CR_SR internal name Apex generate automatically (probably) or do I have to name that way any control?

                4. Do I have to assign some specific name for Region Display Selector?

                5. Then you write that I have to create again dynamic action with provided code (here your dynamic action ''onChange'' on your dropdownList-Item). Should I use JavaScript Expression under Affected Elements for Identification > Action > Set Value or should I select Identication > Action > Execute JavaScript code. It's not clear if this piece of code is JavaScript code or JavaScript Experession and it's not written. I don't know JavaScript, nor Java, how can I find out where this code belong to? Where to click and what to select ...

                 

                Or just write simple: First click here, select this or use simply Section > Property > WriteValue | ChooseFromSelection. Second do this ... It's very simple if you know how to do this and you understand the procedure (recipe). I don't currently, so you have to "step into my shoes" in watch on the problem from my perspective / view.

                • 6. Re: How to display specific tab using Region Display Selector at displaying page?
                  Franck Nyassa

                  Hi,

                  that's right:

                  in this case one dynamic action is required on your Item (of type Select list).

                  To question 1:

                  The Return values are  relevant to us (in your case Tab1 and tab2). And yes it should be different to the display Value ("labels") for a better visibility.

                  To question 2:

                  you muss be having an Item of type dropList where you want to select your tab. that item in my case is "P1_ITEM_3".

                  doing this operation { value = apex.item(" P1_ITEM_3").getValue(); } give the tab return Values define by you (in your case either tab1 or tab2 according to your selection)

                  To question 3,4:

                  - CR_SR internal name Apex 5 generate automatically to identify a Tab which can be accessed using google develloper

                  - you just need to provide an ID to each Tab

                  To Question 5:

                  not at all.

                  you just need to create as i said a dynamic action on your droplistItem("P1_ITEM_3" of type change ) (which should be declare in the Parent Region) with a true action "Execute javascript code".

                  and add this simple code inside:

                   

                  value = apex.item(" P1_ITEM_3").getValue();    //to access your tab selection

                  if(value === "tab1"){                                         //check the return value of the tab (Question 2)

                                                                                          // does  the Tab selection

                      javascript:apex.jQuery("li[aria-controls='CR_SR_tabID1'] a").trigger("click");

                  }else if (value === "tab2"){

                      javascript:apex.jQuery("li[aria-controls='CR_SR_tabID2'] a").trigger("click");

                  }

                   

                  and it will work like a charm.

                   

                  regards

                  • 7. Re: How to display specific tab using Region Display Selector at displaying page?
                    Blue Bird

                    It doesn't work yet. My current settings:

                    For "User Data" I use "tab1" Static ID and for "Chart" I use "tab2".

                     

                    When I click on P100_Select_Tab DropList item (like you call it) nothing happen. I think problem is in JavaScript code here: [aria-controls='CR_SR_tab1']. In each post you write different name. What should be written here? "CR_SR_"  + StaticReturnValue or something else?

                     

                    You mention Google developer? What you have in mind with that? Explain in more detail. I'm using browser Google Chrome and APEX 5.0.4 as mention on the beginning. Do you also have the same version?

                     

                    Did you copy your code from your working example or you just copied code from some HTML source?

                    • 8. Re: How to display specific tab using Region Display Selector at displaying page?
                      fac586

                      fac586 wrote:

                       

                      Blue Bird wrote:

                       

                      I'm using APEX 5.0.4. I have an interactive report page with data columns and one contain hyperlink (Identification > Type > Link) to another page. This another page have couple of charts. Each chart is on separate tab using Region Display Selector. What I would like to achive is that when user click link on first page, specific tab would open on my target page with charts (e.g. 3rd tab).

                      See APEX 5.1 Region Display Selector - Choose the Active Region

                       

                      Don't know if this works in 5.0.4, and won't be able to find out for several hours.

                      That does not work in APEX 5.0 as the tab APIs are different. However, this is easily resolved by a simple change to the DA JavaScript code:

                       

                      // Make the RDS tab corresponding to the fragment identifier in the URL active 
                      $('.apex-rds a[href="' + location.hash + '"]').click();
                      

                       

                      The rest of the approach described in the linked thread remains exactly the same.

                       

                      This is infinitely simpler than whatever is being discussed elsewhere in this thread, which doesn't seem to have anything to do with the problem originally stated:

                      What I would like to achive is that when user click link on first page, specific tab would open on my target page with charts (e.g. 3rd tab).
                      • 9. Re: How to display specific tab using Region Display Selector at displaying page?
                        Franck Nyassa

                        Hi ,

                        i can see what you did wrong.

                        we have the same APEX Version.  It will work after you oper some Modification on your regions:

                        in your region "criteria"  modify the template as tabs Container:

                        the Region "region display selector" can be deleted here it is not required.

                        The other 2 region should be sub region of "criteria":

                         

                        And with google develloper i mean this:

                        this appear when you inspect your browser with right-click

                        1 person found this helpful
                        • 11. Re: How to display specific tab using Region Display Selector at displaying page?
                          Blue Bird

                          It's stil doesn't work. I will write one more time in detail what I have regarding to problem originally stated as you mention. And I would like to please for really exact solution steps if someone have it and tried on his PC with APEX 5.0.4. otherwise is all this replying waste of time of everybody.

                           

                          I have first report page with 3 links (could be even more):

                          For report column EMPNO (other have the same logic) I have Link, which open my target page with Region Display Selector and charts.

                          When you click Target > Page 19 I have this settings:

                           

                          I fill value 1, 2 or 3 (which value each column click will fill I define here) to Text field on target page and this work Ok.

                           

                          My target page look like this:

                           

                          If I click "RDS Charts" on the left side (seen above) I have this settings:

                           

                          If I click on left side "Line chart" I have:

                          For "Bar chart" and "Marker chart" is all same except that I have Static ID 2 respectively 3.

                           

                          My Dynamic action settings:

                          From above snapshots I hope is clear what I have currently. I'm not sure for DA if I have correct settings under Affected Elements or if this have any impact here at all.

                          The most easiest will be if someone know how to do this by simply writing from scratch: 1st set this here and here, 2nd to this and this, etc. This will be helpful also for someone else who just accidently open this thread and looking for same solution and don't want to get Ph.D from all this replies, especially if there is only one line of code and some settings, like you mention. Links to some posts doesn't help me a lot here.

                          • 12. Re: How to display specific tab using Region Display Selector at displaying page?
                            Franck Nyassa

                            Hi,

                            from your screen shot i can´t see any of the steps i mention before.

                            I have the same apex Version APEX 5.0.4 and it work very well for me. Please copy your page in another page and try  again with my steps then send me the snapshots with my steps maybe i will be able to see from your snapshot what is not working.

                             

                            regards,

                            Franck

                            • 13. Re: How to display specific tab using Region Display Selector at displaying page?
                              fac586

                              Blue Bird wrote:

                               

                              It's stil doesn't work. I will write one more time in detail what I have regarding to problem originally stated as you mention. And I would like to please for really exact solution steps if someone have it and tried on his PC with APEX 5.0.4. otherwise is all this replying waste of time of everybody.

                               

                              I have first report page with 3 links (could be even more):

                              For report column EMPNO (other have the same logic) I have Link, which open my target page with Region Display Selector and charts.

                               

                              When you click Target > Page 19 I have this settings:

                               

                              1. On the target page (19), the P19_DEFAULT_TAB item is unnecessary. Remove it any components and code related to it.
                              2. Assign each RDS region a Static ID.
                              3. On the origin page, in the EMPNO column link builder:
                                1. Change the Type to URL.
                                2. Enter the URL as f?p=&APP_ID.:19:&APP_SESSION.::::::#fragment_identifier, where fragment_identifier is the static region ID of the required region on page 19.

                               

                              My Dynamic action settings:

                              From above snapshots I hope is clear what I have currently. I'm not sure for DA if I have correct settings under Affected Elements or if this have any impact here at all.

                              There are no affected elements. Reset the Selection Type to - Select -.

                               

                              Set Fire On Page Load to No (this is a Page Load DA so that setting is pointless).

                               

                              The most easiest will be if someone know how to do this by simply writing from scratch: 1st set this here and here, 2nd to this and this, etc. This will be helpful also for someone else who just accidently open this thread and looking for same solution and don't want to get Ph.D from all this replies, especially if there is only one line of code and some settings, like you mention. Links to some posts doesn't help me a lot here.

                              The use of things like URLs and dynamic actions is fundamental to APEX development and APEX developers should be familiar with them and the concepts underlying them. Are you going to become a better developer simply by following instructions that you don't understand?

                              • 14. Re: How to display specific tab using Region Display Selector at displaying page?
                                Blue Bird

                                Thanks for that Franck. I create then another sample which is similar to your proposed solution (your first reply) which change tab regarding to Select list on the top. So I'm handling now two samples at the same time. My original was that I have first and target page (you can read my first post). Your solution work now. Problem that my didn't work was in names you used. You have "CR_SR_tab1" and I had only "tab1" (see below). That's why I ask where CR_SR came from.

                                Now I also know what you mean with Google developer. This is "Developer tools" in Google Chrome browser. You were not specific. I didn't use this much before but here I have seen that I don't see any CR_SR prefix.

                                 

                                Now I still have to implement this your working solution on my initial problem with initial and target page where I actually need it. I used you code and it this change the Tab but not display correct chart yet:

                                 

                                I changed now "Static ID" for each Chart tab as follows: 1 - Line chart, 2 - Marker chart and 3 - Bar chart. As you can see, I suplied 3 from my initial page, Bar chart button is selected correctly (encircled) on top, but chart is not refreshed. My current javascript code:

                                 

                                value = apex.item("P19_DEFAULT_TAB").getValue();
                                
                                if(value === "1")
                                  {
                                    javascript:apex.jQuery("li[aria-controls='1'] a").trigger("click");
                                  }
                                else if (value === "2")
                                  {
                                    javascript:apex.jQuery("li[aria-controls='2'] a").trigger("click");
                                  }
                                else if (value === "3")
                                  {
                                    javascript:apex.jQuery("li[aria-controls='3'] a").trigger("click");
                                  };
                                

                                 

                                I tried also to add Refresh but it doesn't help:

                                What could be a reason that RDS "Criteria" doesn't refresh? I tried also to refresh each tab, separately.

                                1 2 3 Previous Next