7 Replies Latest reply on Sep 12, 2017 9:22 PM by kvsinfo

    How to hide sidarbar menu dynamically?

    kvsinfo

      I'm using apex 5.1.2 and universal theme.

       

      I used the article below but the sidebar is just minimized but I can still see it

       

      https://parthiban037.wordpress.com/2015/11/02/apex-5-0-universal-theme-side-bar-menu-navigation-default-hide/

       

      As of now I can hide the top (nav bar) using the inline css and js code below

       

      inline CSS

      .hide-nav-bar {

         height: 0px;  

      }

      JS Code

       

         $('.t-Header-branding').addClass('hide-nav-bar');

       

      I tried both but it does NOT worrk

         $('t_TreeNav').addClass('hide-nav-bar');

         $('t_TreeNav').hide();

       

      It seems like the issue is during page load the sidebar has NOT been rendered yet so anything I set is overwritten by APEX.

      I tried the console and both of these functions seem to be valid.

       

      Please note that I need the side bar hidden dynamically like below, thanks

      // Sidebar is displayed by default

      // When page load DA I would like to execute the code below

       

      if (condition) {

        // hide sidebar

      }

        • 1. Re: How to hide sidarbar menu dynamically?
          Justin Warwick

          While I'm sure you could figure out the problem with this Do-It-Yourself approach, I would advise using the built-in Dynamic Actions for showing/hiding items and regions. You would then not need to do any hand-coding of CSS or javascript (although that is indeed how dynamic actions work, but they do it in a systematic built-in way). Here is a documentation reference to get you started:

          https://docs.oracle.com/database/121/HTMDB/advnc_dynamic_actions.htm#HTMDB28003

          • 2. Re: How to hide sidarbar menu dynamically?
            kvsinfo

            As far as I know there is NO way to hide/show sidebar menu thru STD DA.

             

            Regions are for regions on a page but this DO NOT apply to the side bar.

             

            Below is sample page where the leftmost side bar that I'm referring to, thanks

            • 3. Re: How to hide sidarbar menu dynamically?
              Justin Warwick

              Ah ok, I see. I didn't realize this was sort of a special template region. Thanks for the screen shot, definitely clarifying. I think your approach will probably work with some tweaks.

               

              Some minor errors in the javascript you have proposed: you will want to use the element ID in your jquery selector, so prefix with the hash mark ("#"). Also, I think that #t_TreeNav is "too far down" the tree, and you will only clear out the clickable nav controls in the bar. Instead you will probably want to select #t_Body_nav .  Also, the t-header-branding css class corresponds to the horizontal top-bar (at least in my 5.0 installation's universal theme).

               

              Try this: skip the CSS, just put " $('#t_Body_nav').hide(); " into an Execute JavaScript Code action (true) for an After Page Load event.

              da_hide_sidebar.PNG

               

              And later in page actions, if you want it back again, just issue the "reverse" javascript/jquery

                $("#t_Body_nav").show();

              In a dynamic action, preferably.

              • 4. Re: How to hide sidarbar menu dynamically?
                kvsinfo

                Justin it works now except the space used by the side menu is still allocated.

                 

                Is there a way to move the breadcrumb and regions move to the left so there is almost no gap on the left side.

                 

                thanks again!

                 

                • 5. Re: How to hide sidarbar menu dynamically?
                  Justin Warwick

                  I'm glad it worked out. After peeking at the DOM changes while clicking the expand/collapse button, you can get it down to the collapsed width if you add this in:

                   

                  //Collapse the left-hand nav sidebar

                  $("body").removeClass("js-navExpanded").addClass("js-navCollapsed");

                   

                   

                  //And reverse that process to re-expand

                  $("body").addClass("js-navExpanded").removeClass("js-navCollapsed");

                   

                   

                  After that, to get it any further you'd need to modify the properties of the js-navCollapsed class (which, it turns out, is tricky)

                  or you might get by with assigning CSS attribute values directly to the content ellements.

                   

                  $("#t_Body_content").css("margin-left","5px");

                   

                  So all together now:

                   

                  $("body").removeClass("js-navExpanded").addClass("js-navCollapsed");

                  $('#t_Body_nav').hide();

                  $("#t_Body_content").css("margin-left","2px");

                   

                   

                  This definitely gets into less stable territory, as future upstream changes to themes might affect how this kind of approach works, or unforseen combinations of page actions break it. But I know sometimes its the best option, just caveat emptor and all that.

                  • 6. Re: How to hide sidarbar menu dynamically?
                    -Max-

                    Hello kvsinfo

                     

                    Have you thought of using the "Minimal (No Navigation)" page template?

                    That way you don't need to have any JavaScript code on you page.

                     

                    Hope this helps

                    Max

                    • 7. Re: How to hide sidarbar menu dynamically?
                      kvsinfo

                      Thanks Justin it all works now

                       

                      Max I cannot use a page template since I need same page to be normal or modal page.

                       

                      Below is the page normal page complex search screen (page navigation is a manual DA and u see 2 blue bars)

                       

                      Below is the same page used as a custom LOV page (no blue bars, modal page, user has to select close and cannot switch to another page).

                       

                      I could have duplicated the page but since its complex I tried to just use the same page and JS/css to make it work.