Adding a Mobile Ellipsis button
Following a day of hard work building APEX applications, I jumped on the train home and started catching up with the latest news & sport.
I loaded up the BBC News App, I noticed a button I regularly used but never really took notice of it.
It’s the Ellipsis button and it features in many other mobile applications.
The Ellipsis button is used to represent additional options, settings or preferences and it’s often placed on the top right of the interface. The icon is sometimes featured as an Ellipsis, cog or three horizontal bars.
Back in the office the next day, I tried to recreate this in a Mobile Application. It should be quite easy as all I would need to do was change the Navigation Bar Entries, change the icon and all would be good. Well…. that’s how it’s done in the Universal Theme with a little jQuery magic.
Before I started, I found the Mobile Theme (51) was set as “Classic” for its Navigation Bar Implementation and therefore I needed to amend the Classic Navigation Bar entries instead of the List based equivalent.
Whilst editing the Classic Navigation Bar I noticed that none of my changes were taking affect. Amazingly, could even remove the “Log Out” entry yet the Log Out button still remained on screen.
The panel is nicely animated from the side and collapses again when the user swipes it back to the side of the screen. The panel is a familiar navigation item for mobile users.
The Global Page also holds a text button for the Log Out button. This is simply a button which, when tapped, opens up the Log Out URL. Therefore the Navigation Bar is not sourced from the Classic Navigation Bar entries but instead is set by editing buttons on the Global Page.
The Universal Theme performs an excellent job of displaying menu entries in the Navigation Bar however for mobile applications we would have to do something different. I liked the look of the left-hand side panel when the Home button is tapped and I wondered if I could adapt it for an Ellipsis Button.
I then took a copy of the “Pages” Templates, applied the new template to Page 1 and started to edit the template.
I found the panel entry, duplicated it and changed the id to barpanel and the data-position so that the menu would appear from the right hand side of the screen.
However I needed to change the navigation list this panel was based upon and looked around for possible substitution stings, experimenting unsuccessfully with #TOP_GLOBAL_NAVIGATION_LIST# , which returned no results, and then with #NAVIGATION_BAR#. The latter did provide my Classic Navigation Bar entries by not in the HTML format which this panel required and so the formatting was off.
The final option I tried was to use a new Application Item called &APP_BAR. which I substituted in place of #SIDE_GLOBAL_NAVIGATION_LIST# . This Application Item contained the correct HTML which was set from an Application Process.
The Result is really quite nice and complements the Menu Option:
Matt is an experienced APEX solution designer having designed numerous complex systems using a broad range of Oracle Technologies. Building on his previous experience of Oracle Forms & PL/SQL, he is entirely focused on providing functionally rich APEX solutions. Matt promotes APEX as a software platform and openly shares best practises, techniques & approaches. Matt has a passion for excellence and enjoys producing high quality software solutions which provide a real business benefit.