Friday, April 1, 2016

Region in Left-side Navbar Menu

As of now, there is now way to edit the Navigation Menu template under the page template to let's say add a region above or below it.

It's possible to do it using jQuery though.

The way to do it is to have a region (in any position on the page) and to move it inside the left side navigation menu.
Make sure the region you want move doesn't have any item in it, because it could result in error.
For more info/details you could have a look at Martin D'Souza's blogposts:
http://www.talkapex.com/2015/07/back-to-basics-html-form.html
http://www.talkapex.com/2015/07/apex-and-html-form.html
http://www.talkapex.com/2015/07/apex-and-order-items-are-submitted.html

Let's start by creating a Pie Chart region using the "Blank with Attributes" template.
Under Appearance, I set the CSS Classes attribute to "underNavBar".
Under the region's attributes, I disabled the labels and the markers. I also fixed the width/height so that it would fit in the side menu region.

Now to get the region to be displayed above or below the left side navigation menu, we need to create a Page Load dynamic action that executes the following JavaScript code:
Use this one if you want the region to display above the left side menu
$('.underNavBar').prependTo('#t_TreeNav');
Use this one if you want the region to display below the left side menu
$('.underNavBar').appendTo('#t_TreeNav');
What's left to do is adjust the CSS of the it all.
#t_TreeNav {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#t_TreeNav ul {
    flex: 1 0 auto;
}

div.underNavBar{
    flex: 0 0 auto;
}
You can also hide the region when the menu is collapsed.
#t_PageBody.apex-side-nav.js-navCollapsed .underNavBar {
   display: none;
}
You will then get something like this:


You can have a look at my Demo Application

6 comments:

  1. Nice! I like the fancy flexbox display, although it would be worth mentioning that this has limited browser support.

    Also, what is the .detach() function for? I usually just use .appendTo and it does the job of moving the object.

    ReplyDelete
    Replies
    1. Thanks Vincent.
      You're correct, I can remove the .detach() and simply use the .appendTo() or .prependTo() directly.

      Delete
  2. Hi MrTremblay,
    Thank you for this demonstration, but i want to know where can i add the CSS code using in the 2 lasts steps.

    Also, i want to know, if it is possible to add search field to search easily the list of entry.
    For example:
    if i have 4 entries: Home, Employees, Departements and Locations, and i tape 'De' i get directly Departements entry.

    ReplyDelete
    Replies
    1. Hello Soukaina

      What you can do is include the CSS in the Theme Roller's custom CSS. Click on the "Theme Roller" link in the developer toolbar then in the Theme Roller copy the CSS in the "Custom CSS" attribute.

      You could also save the CSS in a file and copy that file on your webserver (or you could upload it in the shared components' static files) and then simply include it in you application. To do so, go in the Shared Components then go in the User Interface Attributes and in the Cascading Style Sheets you'll be able to include your file. You can have a look at the item's help for more information.

      Regarding the search item, currently there no built-in feature to do that. But I'm sure you could do it in some way using dynamic actions or JavaScript to do it.

      Regards
      Maxime

      Delete