APEX 5 Universal Theme – Analyzing and Modifing Navigation Menus

Preparation

I’m currently analyzing a lot of the navigation menu possibilities of the universal theme. The goal is to find ways to enhance the current navigation possibilities in various way. I’m not a webdesigner. I do understand a fair bit of HTML5 and CSS3, but I’m far from an expert there. But this is why I like Apex. In general we do not need to have an extensive design wisdom. My personal strength is on the database level. However I feel that especially with APEX5 it becomes even more useful to understand CSS.

Information gathering

Unfortunatly there is not much information available from oracle. Patrick Wolf made a nice list of Apex Blog entries. However most of them do show only how apex 5 behaves normally. Not like you can break out of the norm. Fortunatly the list gets longer and longer, so you might want to recheck it from time to time.

One should be used to analyze the html code using tools like code inspector and firebug.

Or you can “read” the css and js files. I did this a few times, just to see if I can find some more hidden options or reusable css classes.

John Synder blogged about the different widgets that are used in the page designer: http://hardlikesoftware.com/weblog/2015/04/29/apex-5-0-page-designer-meet-the-widgets/

How to test drive new layout settings

There are a couple of things I regularily do when experimenting with layouts, especially with the menu.

Since I’m usually not the only developer in a project, I do not want to confuse or disturb the others. Therefore some reasonable precautions seem necessary.

1. Copy the whole application into the same workspace
2. When playing around with the theme roller, create a new style and save that.

If you have static files set up, then you can directy use the result from the theme roller in the application copy and later in the original application. If not, then you can download and store the resulting css manually and reference it.

Experiments

#1 Trying to keep the first two menu hierachy levels open

The goal was to reduce the number of clicks for the users. One idea was to keep the first two levels in the menu hierarchy always open.

Different approaches tried :

1. set the autocollapsible option for the navigation tree to false
   ==> No success so far
   The autocollapsible option is a default option for the tree widget. Not sure if I correctly used that, but changing it to false seemed to have no effect.
2. use the class a-TreeView–noCollapse
   ==> No success so far
   This class should be considered during tree initialisation and by the expand/collapse events. I could add the class using a modified list template for the top level list entries, but that was not working.
3. make second level hierachy entries look like top level entries
   ==> Seems possible with large changes to the list template and by adding some additional attributes.
4. make all second level entries to top level entries and add an attribute to change the look like second level entries
   ==> this is the only one I sucessfully implemented. Not my favourite solution, but only 2 hours of work.
   Here is a blog entry to show the steps how to do it.

#2 Trying to create a “Windows Startmenu” like navigation

The idea is to have a menu on the left hand side, where the sub menu entries open simliar to the windows start menu (if you still remember that you metro users!). One problem is to have the sub menus overlap the normal page body. This is solved for the top menu bar widget, but not so easily done with the side bar tree widget.

Different approaches possible:

1. Use the top menu logic for the side.
   ==> This is tricky, but I got some mediocre “in between” results.
   So far the additional work to do is more time than I wanted to spent. So I stopped the experiment. Might want to come back to that one day.
2. Using Twitter Bootstrap directly to circumvent the whole apex internal logic.
   ==> This is definitly possible. I did the same with a Topbar Menu in Apex 4.2 . I think there is even a plugin from Dan McGhan that does it. However with the new apex 5 possibilities, this is not my preferred way.

#3 Decreasing the size of the sidebar menu

In one project we already used a tree based menu. After migration to Apex5 and Universal Theme, this menu was way larger than before. Here is how to decrease the line height for the side menu: https://svenweller.wordpress.com/2015/09/24/apex-5-universal-theme-navigation-experiment-3/

#4 Coloring the Menu

The idea is to enhance the side bar menu by having different regions colored differently. This works but I discovered a few quirks during the process of doing so.

This is the result

And here is how to do it: https://svenweller.wordpress.com/2015/11/05/apex-5-universal-theme-navigation-experiment-4/

 

Apex 5 Universal Theme – Navigation Experiment #3

Decreasing the size of the side navigation menu

In one project we already used a tree based menu. After migration to Apex5 and Universal Theme, this menu was way larger than before. Especially after applying the “keep two menu” hierarchies open change (i blog about that later), I decided to play a bit with the theme roller settings and try decrease the height for each menu entry.

Here is the result. if you add the following css to your theme, the height of the typical menu item will decrease from 40px to 30px.

.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-row,
.t-TreeNav .a-TreeView-node--topLevel  .a-TreeView-label,
.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-toggle,
.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content,
.t-TreeNav .a-TreeView-node--topLevel  .a-TreeView-content .fa {
height: 30px;
line-height: 30px;
}

.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content .a-TreeView-label {
line-height: 30px;
}

.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-toggle {
padding: 0px;
}

.t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content .fa {
padding: 0px 9px 8px 13px;
}

.t-TreeNav .a-TreeView-node--topLevel > ul > .a-TreeView-node {
padding-left: 32px; padding-top: 0px; padding-bottom: 0px;
}

.t-TreeNav .a-TreeView-node--topLevel ul .a-TreeView-content {
line-height: 0px;
}

Don’t get hilarious by the nice green color. This was just me experimenting. The css will not change your color settings.

before/after:

As you can see the total size decreases considerably while maintaining font sizes.

I did only change the top level entries, since they take up the most space. The sub level entries where just alined a little bit to the right. So that they match their main entries better. This depends also upon having icons or not in the sub entry.

One place where you can add the css is the custom section of the theme roller.

  Simply copy and paste it there and see the change immediatly in your application.

Overview about other Experiments

Apex 5 Upgrade – correct colspan error

After upgrading to Apex 5 and switching to the new Universal Theme you might encounter an error regarding column spans. The error message will look similiar to this: “Label of Page Item P1_XXX cannot be rendered as the label column span grid setting for this page item is invalid …”

or the german version

I had the problem for an application which was gradually upgraded from Apex 4.0 to Apex 4.1 to 4.2 and now to Apex 5. During this, almost all form page items had the attribute colspan set to 1. This makes trouble with the new Universal Theme. I had more than 1500 items that needed to be changed. So clearly this was not a task to do manually.

Reason

The reason for this error is based upon how the Universal Theme handles items and its labels in combination with the page template. The standard page will use a fixed number of 12 columns in a grid to render anything. The labels will span 3 columns already. This is the default. If you have a column span set of 1, then this will include the label column span. And that is what the error message is all about.

Btw: This is also one reasons why the form pages now “waste” much more screen space than before. I changed this in the page template to a column span of 2. If you change it to 1 then this might be too small. The labels will then often be wrapped onto the next line.

Finding all items

We can use the apex dictionary to find all items that are affected.

Application Builder / Utilities / Item Utilities / All Page Items

I set a filter on “Column Span is not null”. Then the report shows many items we have in the application that have thios attribute set.

Another way to do the same is to run the follow select statement:

select * 
from apex_application_page_items
--where workspace = 'MYWORKSPACE'
where workspace != 'INTERNAL'
and application_id = 200
and column_span = 1;

Single page correction
If it is a low number of pages that is affected, we can do the change for all items on one page. From the report that shows all the items, we can navigate to the multi edit “pages” form.

There we can update all items for one page easily and fast.

All pages mass correction

If we have more than just a few pages, an even faster way is needed.

You need DBA privileges to do this mass update.
As an alternative you could try the update on the view via the SQL workshop. I didn’t test that.
An update on database level to the view will give you
ORA-01031: insufficient privileges
The update can be done directly on the apex internal table wwv_flow_step_items.
Here is how to mass update your application and set the column span to NULL.

The example changes all items in application 200. Adapt to your workspace and application id.

-- set environment
alter session set current_schema = apex_050000;
execute wwv_flow_security.g_security_group_id := 200000;

-- pre update check
select count(*) --colspan
from wwv_flow_step_items i
where flow_id = 200
and colspan = 1;

-- do the change
update wwv_flow_step_items i
set colspan = null
where flow_id = 200
and colspan = 1;

-- does the result match the pre update check
1,128 rows updated.

-- save 
commit;