Skip to Content
Author's profile photo Andy Goris

Update/Set Fiori application title with dynamic content

Hello and welcome to my first blog at SCN, I hope it will be useful to some of you.

As you know, Fiori applications are created to be simple so they are aimed to be used by normal end-users. However at the client I am currently working for, they want to use CATS (My Timesheet version 2) and give this application to a Time administrator who will fill in the timesheet of their assigned employees.

Next to a dozen of other required modifications, one of them is quite easy to achieve and will be the topic of this post: Updating the header title of the application with dynamic content.

 

The title is usually set in the manifest with a hardcoded value that links to a description in the i18n files as shown here:

 

The standard Fiori application for CATS has “My Timesheet” as title which is shown in the image below:

As the administrators won’t be filling in their time sheet but the one of the employee they selected in the previous screen, they want to have the employee’s name in the title.

 

After some searching on the web, a touch of OData extension, some trial and error and some praying, it was achieved in the following (quite easy) way:

 

  1. Include the shell service in the manifest file 
  2. Update the title in an overwritten method of the view (method initializeView in my case)
    		//Set employee info in title
    		var oInfo = this.oConfiguration.getInitialInfoModel();
    		if (oInfo.Pernr) {
    			this.getOwnerComponent().getService("ShellUIService").then( // promise is returned
    				function (oService) {					
    					var sTitle = that.getView().getModel("i18n").getResourceBundle().getText("TIMESHEET_TITLE") + oInfo.EmployeeName;
    					oService.setTitle(sTitle);
    				},
    				function (oError) {
    					jQuery.sap.log.error("Cannot get ShellUIService", oError, "XXXXXXXXX.hr.MyTimesheet");
    				}
    			);
    		}​

The result is shown like this (along with the modification of the standard legend colors which was a different requirement):

 

Enjoy trying it out yourself and feel free to post questions in case of problems/doubts/…

Assigned Tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Cristian Babei
      Cristian Babei

      Thx Alot Andy!

      Great Blog!

      Author's profile photo Mathew Davis
      Mathew Davis

      Good work..!!

      Author's profile photo Tina Petry
      Tina Petry

      Dear Andy,

      thanks very much for this example.

      I tried to use it for my App (which extends a standard app), but unfortunatley I’m not able to add the service declaration at mainfest file.

      I get this error at Web IDE error: Schema Error: Manifest json: “sap.ui5” – has addintional properties.

      This is the code part from mainfest:

      	"sap.ui5": {
      		"_version": "1.1.0",
      		
      		"services": {
      			"ShellUIService": {
      				"factoryName": "sap.ushell.ui5service.ShellUIService"
      			}
      		},
      		
      		"dependencies": {
      			"minUI5Version": "1.52.4"
      		},
      		"contentDensities": {
      			"compact": true,
      			"cozy": true
      		},
      		"models": {
      			"@i18n": {
      				"type": "sap.ui.model.resource.ResourceModel",
      				"uri": "i18n/i18nExtension.properties"
      			}
      		},
      		"extends": {
      			"component": "fin.travel.mytravelexpensesv2",
      			"extensions": {
      				"sap.ui.controllerExtensions": {
      					"fin.travel.mytravelexpensesv2.controller.ListPageExtension": {
      						"controllerName": "myApp.controller.ListPageExtensionCustom"
      					},
      					"fin.travel.mytravelexpensesv2.controller.DetailPageExtension": {
      						"controllerName": "myApp.controller.DetailPageExtensionCustom"
      					}
      				},
      				"sap.ui.viewModifications": {
      					"sap.fin.travel.lib.reuse.ListPage.view.ListPage": {
      						"template::UserText": {
      							"visible": false
      						},
      						"ExportButtonListPageID": {
      							"visible": false
      						}
      					},
      					"sap.fin.travel.lib.reuse.DetailPage.view.DetailPage": {
      						"ExportButtonDetailPageID": {
      							"visible": false
      						}
      					}
      				}
      			}
      		}
      	},

       

      I search for this error and in some blogs they say that the version statement should be removed – but this dosen’t help.

      Has anybody an idea what is wrong?

      Author's profile photo Andy Goris
      Andy Goris

      Sorry for my late reply, I'm using a different account now. Do you only get the error when you add the part of the service?

      Author's profile photo Chede Nag
      Chede Nag

      I followed the same steps as mentioned, but I am getting the below error.

      The ServiceFactory sap.ushell.ui5service.ShellUIService for Service ShellUIService not found in ServiceFactoryRegistry!

      Could any one help me in this.

       

      Author's profile photo Andy Goris
      Andy Goris

      How do you launch the application? From Fiori launchpad? Or using index.html?

      Author's profile photo Karsten Schaser
      Karsten Schaser

      Thanks Any, works like a charm 🙂