Change title of Fiori App

[Former Member]

Hello,

we have a Fiori App (which is not a Standard App extension).

We are able to Change the texts via the i18n files.

There is an index.html where there is a fixed tag <title>TITLE</title>

As we want to use several languages, this title needs to be dynamic, ideally configured also by entering a title in the i18n files.

Within standard apps, i was able to achieve this by entering folllwing code into the Component.js:

metadata: {
config: {
"titleResource": "FULLSCREEN_TITLE",
"resourceBundle": "i18n/i18n.properties"
},

FULLSCREEN_TITLE is located in the i18n file and holds the title in the specific languages.

But this way does not work for our custom app.

Currently we have this structure of Folders/files:

controller
>App.controller.js
>BaseController.js
>Detail.controller.js
>Master.controller.js
css
i18n
localService
>metadata.xml
>mockserver.js
model
view
>App.view.xml
>Detail.view.xml
>Master.view.xml
Component-preload.js
Component.js
index.html

Any ideas or hints where to Change the title?

[thomas_arnesen]

Hi there

If you use JSON for the metadata you should be able to use a localized title for the app.

In your manifest.json:

{
	"_version": "1.1.0",
	"sap.app": {
    		"_version": "1.1.0",
    		"i18n": "i18n/i18n.properties",
    		"title": "{{appTitle}}",
    		"description": "{{appDescription}}",
    ...
}

(Notice the i18 tags are enclosed by double curly brackets)

Then, in your i18n file(s):

appTitle=My App Title
appDescription=My App Description

Hopefully that'll sort you out.

More details on manifest.json here:
https://sapui5.hana.ondemand.com/#docs/guide/be0cf40f61184b358b5faedaec98b2da.html

Regards,
Thomas

[Former Member]

Hy tom thanks for your answer.

I tried it but it does not work

I have the appTitle Tag in my manifest.json, and I also have the tags in my i18n files, but they do not display in the title.

But the i18n files work because all other tags are displayed and translated correctly.

One thing that is weird is the hard coded <title>TITLE</title> tag in the index.html. Maybe it overwrites everything we configure via the manifest.json? But the title also does not come up even if i delete the whole line "<title>TITLE</title>" or if i delete "TITLE" so that the tags are empty.

Any other ideas?

[Former Member]

Yes so the app we have problems with is a standalone app, because we can access it via a normal link to the application, which is not possible for NOT standalone applications:

/sap/bc/ui5_ui5/sap/APPLICATION_ALIAS

Can you explain briefly how we have to configure a standalone app so that the index.html is ignored?

Basically we have the following configuration for all our apps:

We use semantic objects which point to the application in the Launchpad defined via LPD_CUST. In the Launchpad we configure the apps by defining the Controler to load (SAPUI5.Component=...)

Do you need more information?

[htammen]

Do you run your Fiori app in FLP? Then you have to set the title of your tiles in FLP configuration , either on ABAP, HCP or portal side.

When running apps in FLP the index.html is ignored. The FLP loads the component.js directly .

[Former Member]

Hy, can you give me a little bit more information about that?

Because i am not sure, i think the index.html is not ignored:

If i set <title>TITLE</title> in the index.html and i run the app via the Fiori Launchpad, it shows TITLE in the tab. So it does not seem like the index.html is ignored?

[htammen]

If you run your FLP on an ABAP system you can use the transaction /UI2/FLPD_CUST to configure your Catalogs, Groups and Tiles.

On HCP you can do the same in FCC (Fiori Configuration Cockpit)

[Former Member]

Ok now i know what you mean. I think i did not make 100% clear what is my problem.

I am aware that i can change the title of a tile within transaction /UI2/FLPD_CUST. But this has nothing to do with what i am trying to achieve: I want to change the title of an app which is shown in the TAB of the browser.

Also the index.html is not ignored, because the <title>TITLE</title> is still present

Any solutions?

[htammen]

Ok, I understand now. You have to add metadata like this to your Component.js.

sap.ui.define([
   "sap/ui/core/UIComponent",
   "sap/ui/Device",
   "de/.../.../.../model/models"
], function(UIComponent, Device, models) {
   "use strict";

   return UIComponent.extend("de..........Component", {
     metadata: {
       manifest: "json",
       name: "Sample Component", 
       library : " mycompany.abc", 
       includes : [
         "css/style.css" 
       ],
       dependencies : {
       },
       config : {
         "resourceBundle" : "i18n/i18n.properties",
         "titleResource" : "appTitle"
       }
     },

resourceBundle points to the i18n file. The base directory is the folder of your Component.js
titleResource is the key in your i18n.properties file.

In your i18n.properties you have an entry for appTitle.

appTitle = My cool App

[Former Member]

Unfortunately i have exactly this configuration:

My Component.js:

return UIComponent.extend("p78.Component", {
 metadata: {
  config: {
  "titleResource": "FULLSCREEN_TITLE",
  "resourceBundle": "i18n/i18n.properties"
  },
  }....

In my i18n file i have

FULLSCREEN_TITLE = Mytitle

but whenever i remove the

<title>TITLE</title> tag in the index.html file, the title is blank and nothing comes up...

[htammen]

Then you don't run it in FLP or you did not configure it as Fiori component app in FLP. You have to distinguish between runtime in FLP, running your app standalone and running it in Web IDE .

Where and when exactly does the problem occur? Can you post your FLP configuration?

[Former Member]

Yes so the app we have problems with is a standalone app, because we can access it via a normal link to the application, which is not possible for NOT standalone applications:

/sap/bc/ui5_ui5/sap/APPLICATION_ALIAS

Can you explain briefly how we have to configure a standalone app so that the index.html is ignored?

Basically we have the following configuration for all our apps:

We use semantic objects which point to the application in the Launchpad defined via LPD_CUST. In the Launchpad we configure the apps by defining the Controler to load (SAPUI5.Component=...)

Do you need more information?