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 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.
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.
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:
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.
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.
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
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!
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!
- SAP Managed Tags:
19 Comments
