SAP User Experience, Design, and Web Technologies

Quick Tip: How to disable images in top-level navigation for AFP

If you are looking to customize TLN (Top-Level Navigation) menu in Ajax Framework Page, then you have a configurable option to enable / disable images. This especially comes handy when you want to customize TLN menu and you are not able to find right set of icons for folder open and close. To be precise, these icons are called as Work Center Icons and their size is 71×48 px. If you have a graphic designer in your team or if you know someone who can get you these work center icons re-designed keeping in mind with organizational branding and colors, then perhaps you don’t need to worry about this configuration. Simply get new set of icons and upload from theme editor > Ajax Framework page > Top-Level Navigation > Work Center > Default image for work center & Down state for work center icon properties. However, if you do not have this privilege, then it is better to disable TLN Images and completely re-design TLN by customizing Ajax Framework Page.

To disable TLN Images, you have to navigate to Content Administration > Portal Display > Detail Level Navigation > Framework Page Configuration > Select Framework Page Name as “Ajax Framework Page (Ajax Portal Desktop)” as shown below.

Framework Page Selection

At this point, you will find that all contextual properties are now available for configuration. Now, navigate to bottom of the page to Top Level Navigation section. There is a property called “Display Mode”. Set this property to “No Images” by selecting new value from drop down.

TLN Display ModeNow, Save the configuration and log off from Portal, clear browser cache, and if possible launch portal in a new browser session. You will now see the TLN menu is rendered without any images.


(12) Comments

    • Hi Vinotha,

      1. Do you have an application.xml file in your EAR project?
      – If not, I guess you have created EAR project for java EE 5.0. You need to re-create for java EE 1.4. Without this, you won’t find application.xml file
      2. If you have application.xml, can you see your WAR project added as a module in modules tab?
      – If not, you need to fix this. If your projects are DCs, then add WAR DC dependency in EAR DC from DI Perspective
      3. If your answers are YES to above two questions, can you confirm that you have maintained custom Context Root property in NWA > Configuration > Securty > Authntication & SSO > Logon Properties > Maintain Context root alias here

      Let me know if you are still getting blank screen. Ideally, you should not be getting the blank screen,


  1. Hi Ameya,
    First of all nice blog on disabling the images in TLN but my requirement is a bit different. I want to render different images to the different roles present on TLN. I would really appreciate your help on this.

    Thanks and Regards
    Rritesh Baheti

    • Hi Ritesh,

      This sounds interesting. Let me play a round a bit and see whether it is possible. I will keep this blog posted in case I get any heads up. Thanks anyway!


    • Hi Ritesh,

      My apologies for delayed response. There isn’t any out of the box solution. That also mean there isn’t straight way out. I think this can be worked out if you write custom navigation with navigation tag libraries. This way, you have freedom to control display levels and associated styling with CSS. I cannot post more technically elaborating solution at this moment, but rest assured, I will definitely post a solution on this.


  2. Hi Ameya,

    We need the hover TLN effect in Portal 7.3 also.
    Kinldy let me know how can we implement this for portal 7.3 upto 3 level.

    Sarita Agrawal

    • Hi,

      You can go ahead and convert the PAR to EAR by using PAR Migration Tool. About additional levels, you can do that by traversing /reading further child nodes and add them to the node structure. Let me know if you need any help on that.


Leave a Reply

Your email address will not be published. Required fields are marked *