Skip to Content

Dear Fiori Friends,

The default Fiori Launchpad does not allow a user to switch languages, without having to log off/on. It is possible to see the language you are logged in with by opening the user menu and navigating to “User Preferences”. It is however not possible to change the language in this menu.

To allow users to switch languages while working in the Fiori Launchpad I added a UI-plugin to the that allows users to switch languages while working, without having to log off/on. The browser built-in navigation API is used for changing the value of URL parameter “sap-language”. In my example I will allow the users to switch between English and Dutch.

UI Plugins

UI Plugins in the Fiori Launchpad allow you to add UI elements to the Fiori launchpad page. You could call them extension poins for the Fiori Launchpad. Follow this step-by-step guide to find out how you can add your own UI plugin that will allow users to switch languages.

Step 1: create a UI Plugin in the SAP Web IDE

Create a new project in the Web IDE, do not start from a template, you just need to create a new folder in the “Workspace” folder. Give the folder a meaningful name, UIPlugin for example

 

Create a new file in your new project and call it Component.js, place the following code in it, it will define an empty SAPUI5 component.

sap.ui.define([
	"sap/ui/core/Component"
], function(Component) {

	return Component.extend("com.example.FLPPlugins.Component", {

		init: function() {

		}
	});
});

Let’s implement the init function. In this function we will first get a reference to the sap.ushell.renderers.fiori2.Renderer object. With this object we can add UI elements to the default Fiori Launchpad, for example by adding a button to the end of the header section. Place the following code in the init function:

var renderer = sap.ushell.Container.getRenderer("fiori2");
renderer.addHeaderEndItem("sap.ushell.ui.shell.ShellHeadItem", {
	id: "headerEnd",
	icon: "sap-icon://world",
	press: this._showLanguageMenu.bind(this)
}, true, false);

You can find all possible UI Plugins on the API reference page of the fiori2.renderer:
https://sapui5.hana.ondemand.com/#docs/api/symbols/sap.ushell.renderers.fiori2.Renderer.html

In this example an ActionSheet popover menu will show up when we click the button, we need to create 2 new functions: _createMenu and _showLanguageMenu. In these functions will create and open a new sap.m.ActionSheet element.

sap.ui.define([
	"sap/ui/core/Component",
	"sap/m/Button",
	"sap/m/ActionSheet"
], function(Component, Button, ActionSheet) {

	return Component.extend("com.example.FLPPlugins.Component", {

		init: function() {
			var renderer = sap.ushell.Container.getRenderer("fiori2");
			renderer.addHeaderEndItem("sap.m.Button", {
				id: "headerEnd",
				icon: "sap-icon://world",
				type: "Transparent",
				press: this._showLanguageMenu.bind(this)
			}, true, false);
		},

		_showLanguageMenu: function(oEvent) {
			var oButton = oEvent.getSource();
			if (!this._oMenu) {
				this._oMenu = this._createMenu();
			}
			// var oDock = sap.ui.core.Popup.Dock;
			// this._oMenu.open(false, oButton, oDock.BeginTop, oDock.BeginBottom, oButton);
			this._oMenu.openBy(oButton);
		},

		_createMenu: function() {
			var oMenu = new ActionSheet({
				showCancelButton: false,
				buttons: [
					new Button({
						text: "English",
						press: function() {
							window.location.search = "sap-language=EN";
						}
					}),
					new Button({
						text: "Nederlands",
						press: function() {
							window.location.search = "sap-language=NL";
						}
					})
				]
			});
			return oMenu;
		}
	});
});

Step 2: Deploy the UI Plugin to your ABAP Front-End System

Right-click your project and navigate to Deploy -> Deploy to SAPUI5 ABAP Repository

Select the target system, and enter a name for the application, Z_FLP_PLUGINS for example:

Click Finish to start the deploy process.

Step 3: Activate the UI Plugin on the ABAP front-end system

Open transaction /n/UI2/FLPD_CUST to open the Fiori Launchpad Configuration tool and create a new catalog. Make sure the catalogs tab is selected in the top left corner and click the “+”-button in the bottom left corner:

Give the new catalog a meaningful name, FLP Plugins and Z_FLP_PLUGINS for example.

Now navigate to the “Target Mappings” tab, and create a new Target Mapping:

Enter the following data for your Target Mapping and Save it:

Sematic Object: Shell
Action: plugin
Application Type SAPUI5 Fiori App
Title: FLP Plugins
URL: /sap/bc/ui5_ui5/sap/Z_FLP_PLUGINS
ID: com.example.FLPPlugins

Step 4: Create a role on the ABAP front-end server

Open transaction PFCG and create a new single role, z_flp_plugins for example. Give it a meaningful description.

Save the role and go to the “Menu” tab, insert a Fiori Catalo to the menu:

Assign the role to your user and save it. Open the Fiori Launchpad an check out your Fiori Launchpad UI Plugin!

Good luck!

To report this post you need to login first.

9 Comments

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

  1. saurabh vakil

    Thanks for this awesome blog! This is surely a very good to have feature since it is not available on the Fiori launchpad out-of-the-box.

    (2) 
  2. Sebastian Eßling

    Hey Thomas,

    thanks for this post. This helps me a lot, but I don’t get the plugin running on my gateway. I developed it in the SAP Web-IDE. I used a UI5-App Template for being able to test the plugin in the Fiori-Launchpad Sandbox. After developing I copied the Component.js to my Plugin-Project. In the Sandbox all is up and running as expected, but on my Gateway nothing happens. No Console-Error in Chrome or sth. to see. Just nothing. Do you know any pitfalls or sth. I’m maybe missing? Did all points of your articel.

    Thank you in advance 🙂

    (0) 
    1. Thomas Nelissen Post author

      Hi Sebastian,

      Can you double-check if the target mapping in your Fiori catalog points to the correct component name, and has Shell-plugin as intent?
      Did you include the Fiori catalog in a PFCG role on your gateway system?
      Is your user assigned to that role?

      If all these points are double-checked and you still can’t see any difference in your launchpad, try clearing the caches on the gateway system by running SE38 reports:

      /UI5/APP_INDEX_CALCULATE
      /UI2/INVALIDATE_GLOBAL_CACHES
      /UI2/INVALIDATE_CLIENT_CACHES

      When you say I copied the Component.js to my plugin project, do you mean that you copied the entire file, of just the necessary lines of code into the empty Component.js of your plugin project?

      (0) 
  3. Premanand P

    Dear Thomas Nelissen,

     

    Greeting of the day.

     

    I am having the same requirement and enhanced the Fiori launchpad with WEB IDE by following above steps, but i am facing one issue often icon getting hiding even used time out function still the same and visible once i refresh or once i navigate to some other apps screen.

     

    Please can you help me on the same.

     

    Regards,

    P Premanand

     

    (0) 
  4. Prasanna Kumar S

    Hello Thomas ,

     

    We have a requirement to add i18n functionality for the test displaying in the drop down. Any suggestion for the same .

     

    Regards,

    Prasanna

    (0) 
    1. Jakob Straub

      Hey Prasanna,

      you can add i18n functionality like this:

      var oResourceModel = new sap.ui.model.resource.ResourceModel({ bundleName:  your.application.namespace.i18n.i18n” });

      sap.ui.getCore().setModel(oResourceModel, “i18n”);

      new Button(text: text: oResourceModel.getResourceBundle().getText(“yourtextid”),

       

      Greetings.

      (1) 
  5. Jan Nyfeler

    Hi

    I just noticed that this does not work with target mapping REFERENCES. You cannot use a reference within a catalog, you have to create a new target mapping otherwise it won’t work.

    (0) 

Leave a Reply