[Updated 26-Oct-15] José added a nice enhancement, which I included in the code too. It prevents errors when clicking twice on the “first” or “last” record set navigation glyph!
In this article I discuss the approach to change the pretty awful and tiny navigation buttons in the standard application. The buttons are so tiny you almost need spectacles to see them. Not to mention to click them. Initial thought would be to increase the size of the static image, but the image appears to be a CSS sprite. Not being a true web developer I only remembered the term “sprite” back from the days I was coding Basic on my C-64.
It turns out to be really straight-forward in this case too, to change these navigation buttons to glyphs. Just a couple of lines CSS. I went to IcoMoon to create a completely new custom font. This tool really is great. You can create your own font set containing a selection of selected glyphs.
I selected these fonts to act as navigation buttons.
On the IcoMoon site you select these fonts, and hit “create fonts”. At this stage you already see the hexadecimal address which uniquely identifies the glyphs.
Once you download, you get a nice zip archive contains the fonts, and as a plus also a demo page which again shows you the glyphs inside and their unique hexadecimal addresses.
The demo page is a good to save along side your actual fonts. So one week later, you will still be able to see what fonts you put inside the collection 🙂
Now, the next step is to identify the classes to override and to generate the necessary CSS. First create a font-face which loads the newly created fonts. I named the fonts respectively siebelnavicons.eot, siebelnavicons.svg, siebelnavicons.ttf and siebelnavicons.woff
The font-face definition I just copied from the standard theme-aurora.css.uncompressed. There is one “gotcha” here. The url needs to go two levels down (“../../”) because I put my custom CSS in the /enu/files/custom directory. Where as the theme-aurora.css is located in the /enu/files directory. Anyways, that was quickly spotted in the browser console.
Next the meat. Two points to mention in particular. First is that I could not find a descent “back” button. So I choose to flip it. Second is that styling for two additional navigation buttons got added too. Those are “move to first record” and “move to last record”. These buttons will mimic the traditional HI behavior where you could draw the vertical scroll bar all the way down to the bottom in order to move to the last record.
By only putting the styling in here, nothing happens. For that we need to override the Default List Renderer. Really, the best way to start with any OpenUI presentation model, physical renderer or control plug-in wrapper should be boiler plate code.
First we need to inject the HTML code which creates the placeholders for the buttons together with their own distinctive class (ui-icon-seek-top respectively ui-icon-seek-bottom).
Then code to actually Invoke the methods.
Finally, the stuff we just created needs to be administered to have it being loaded.The CSS should be added to Type = Application, Usage Type = Theme. To override the Default List Renderer you have to create a seperate entry for Type = Applet, Usage Type = Physical Renderer and Name = DEFAULT LIST APPLET. As per below.
The end-result should look like this. And of course you can select you own glyphs if you find these a bit too dodgy.
The things you need can be grabbed here:
Thanks to Duncan for this solution.