Dynamic Navigation Bar (Table Based and Custom Settings)

This is my first blog post. Feedback / Improvements are welcomed.

I was trying the solution given by Roel, to fix parent child relation in APEX 5 Dynamic Navigation Bar.

Create-navigation-bar-based-on-sql

We had few more thoughts, why not try more customized template based on SQL.

So we made few changes in the Backend so that Tooltip and Custom Icon settings can be used dynamically by the template.

While trying this we noted Image Attribute which is used to set style is not available in the template. So we choose to use custom attribute for that as well.

Below is the description of the custom attributes we used. A03 will be used to Tooltip class.

 

Image Attribute currently is not used in Navigation Bar template.

We will need to add a class for Toolip as well Style for an Image in below templates

1. List Template Current
2. List Template Current with Sublist Items

 

We used Pipelined function to return Navigation Bar Data and below is how we built

PIPE ROW (NAVIGATION_OBJ(1,’En’,’javascript:void(0);’,NULL,’fa fa-globe’,’color:white;’,NULL,NULL,NULL,’lang’,NULL,’LANG’,NULL));

Object was built as below

create or replace TYPE NAVIGATION_OBJ AS OBJECT (
      lvl                   NUMBER,
      label                  VARCHAR2(200),
      target                  VARCHAR2(200),
      is_current            VARCHAR2(10),
      image                  VARCHAR2(100),
      image_attrib          VARCHAR2(200),
      image_alt_attribute    VARCHAR2(100),
      attribute1            VARCHAR2(50),
      attribute2            VARCHAR2(50),
      attribute3            VARCHAR2(50),
      attribute4            VARCHAR2(50),
      attribute5            VARCHAR2(50),
      attribute6            VARCHAR2(50)
    );

For tooltip we used APEX Tooltip Plugin. And the final result looks like

 

Finally we have a template which is fully controlled based on tables in Backend.

Still trying to do further customization here and will update in next post.

Advertisement