Siebel IP14 – Glyphify those navigation buttons please

[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!

Some recent posts by the Siebel Hub and SimplySiebel have discussed the option to change glyph icons in Siebel:

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:

  1. Style sheet
  2. Physical Renderer (including José Castano’s fix)
  3. Navigation glyphs font

Thanks to Duncan for this solution.

– Jeroen


13 thoughts on “Siebel IP14 – Glyphify those navigation buttons please

  1. Hi Jeron,

    thanks for your post. I have tested your solution code and works fine. I have just added only two lines code for preventing error messages if the user clics twice either the last record set button or the first.

    if (that.GetPM().ExecuteMethod(“CanInvokeMethod”, “GotoFirstSet”))
    that.GetPM().ExecuteMethod(“InvokeMethod”, “GotoFirstSet”);

    if (that.GetPM().ExecuteMethod(“CanInvokeMethod”, “GotoLastSet”))
    that.GetPM().ExecuteMethod(“InvokeMethod”, “GotoLastSet”);

    Have a nice day,
    Jose Luis

  2. Jeroen, Thanks for the great article. We are trying to implement the solution in our IP2014, PS10 environment. It works well in normal list applets. But the solution interferes with Contact — Maps/Card view and ‘Find’ results view which uses different layout. Any idea how to resolve this? We raised an SR but looking ahead to hear from you as well. Thanks – Vijay

  3. Hi Jeroen,
    I was working on IP2015.4 and got burnt by the global override order bug for List applets. So I updated the vanilla file itself. Used Font awesome for the glyphs and used minimum Js to transfer click from new glyph to existing nav buttons. I reduced the height of the latter.


      • Hi,

        Based on the solution von Jeroen and to prevent the override issue with the “DEFAULT LIST APPLET” I have done the following

        Go to Manifest Administration
        – Query for Applet, Physical Renderer and “DEFAULT LIST APPLET”
        – Go to the Object Expression without Expression and under Files:
        * File: siebel/jqgridrenderer.js
        + set Sequence Number to 1 and and Inactive Flag to Y
        * File: siebel/custom/DefaultListRendererPR.js
        + set Sequence Number to 2 and and Inactive Flag to N

        – Query for Applet, Physical Renderer and “Contact List Applet”
        – Go to the Object Expression and select the row “Grid” as Group Name and under Files
        * File: siebel/jqgridrenderer.js
        + set Sequence Number to 1 and and Inactive Flag to Y
        * File: siebel/custom/DefaultListRendererPR.js
        + set Sequence Number to 2 and and Inactive Flag to N

        This solution works fine for me and we have gone LIVE with this solution.

        Jose Luis

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s