Skip to Content

In some situation you may want to change the title of the portal page. OR you may want to change the link, meta tags, etc..

One way to do is to identify the correct place where you have to change this, and make it work. Say for example, changing the title of SAP EP, will change title in all portal pages. If you don’t want to change system wide, and only you want to change it in particular page, you can follow this example.

In my requirement, I had to change my Logo, text’s in portal logon page. For that i developed/deployed the custom logon on page from the standard war files.

And used these commands to make it work.

Added these (below mentioned commands) java-script commands in <script></script> section of the logon.jsp / logonmobile.jsp files.

In this case i was not able to locate the <head></head> tag in my page, because it was getting derived from EP framework level.

To change Title of the logon page :

document.title = “My title”;

And to Add link element in head section of the html page i used this command.

var l1 = document.createElement(“link”);

l1.rel = “icon”;

l1.sizes = “196×196”;

l1.href = “<%=webpath%>layout/android-touch-icon-Mobility-196×196.png”;

document.getElementsByTagName(‘head’)[0].appendChild(l1);

To Add Meta tag


var m1 = document.createElement(“meta”);

m1.name = “mobile-web-app-capable”;

m1.content = “yes”;

document.getElementsByTagName(‘head’)[0].appendChild(m1);

To know the details about why you have to add such tag’s, you can find it in this links:

For Apple – Mobile WebApp :

https://developer.apple.com/Library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

For Andriod

https://developer.chrome.com/multidevice/android/installtohomescreen

Similar way, you can also change the favicon

Refer this page for details about it : stackoverflow.com/questions/260857/changing-website-favicon-dynamically

Other useful links :

5 Tips for Turning Your Website Into an iOS Web… – Chief Creative Mechanic

In this case i was not able to locate the <head></head> tag in my page, because it was getting derived from EP framework level. So i had to use the above mentioned method of adding, link, meta tags to the <head> section of the page.

In some other case, (Say in Fiori home page, launchpad page,) you want to add such details, you can directly add them as per the developer.apple or developer.chrome links given above.

Hope this helps to create custom bookmark of SAP portal logon in Android, iOS and other mobile apps, and web-browser bookmarks with custom pictures.

Thanks for reading.

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

    1. Sridhar k

      Hello Ravi,

      Can you please let me know how you have changed for Fiori Launch Pad? Is there any property to change Similar to portal text – portal.html.head.title

      Thanks,

      Sri

      (0) 

Leave a Reply