Create a Language Switch Widget for your Freestyle Portal Sites

[former_member199536]

Moderator's note:

Note that our public GitHub repository, providing code samples for Cloud Portal on the Neo environment, is not available anymore. If you have further questions, contact us under sapportal@sap.com.

Since the October 2017 release, SAP Cloud Platform Portal admins can enable language selection for their end users. For Portal sites using SAPUI5 versions 1.48 and above, language setting is enabled in the Site Settings screen for freestyle sites (in the Site Designer) and Launchpad sites (in the Fiori Configuration Cockpit).



 

Portal admins can manage the translations available in their Portal sites using the Translation Service available in the Site Designer and use the SAP Cloud Platform’s Translation Hub Service to create the actual translations in the desired languages. The whole flow is described in this blog: Feature Showcase – Translating a Portal Site using SAP Translation Hub and can be applied to both Fiori Launchpad (FLP) and freestyle portal sites.

Once enabled by the portal admin, an end user can select the preferred language for the site. Each time this same user logs on, the site opens in the selected language. In both FLP and Freestyle Portal sites the language selection is performed in the site Settings screen available from the Me Area or from the Shell Header menu options:



But what if your freestyle portal site doesn’t use the Fiori shell header or you just want to create a different user experience for end user language selection?

In this blog, we will go through the steps required for creating a custom language selector widget for freestyle sites. The APIs we will use can be used in a Shell Plugin to create a custom language selector for an FLP Portal site.

You can try it out for yourselves in the freestyle portal site we created for this blog. Open the link  and login with your SAP Community ID.



 

The site was created with English texts but contains translations for 4 other languages (Japanese, German, Dutch and French) that were generated in the SAP Translation Hub service:



 

Step 1: Create an SAPUI5 app in SAP Web IDE

In your SAP Web IDE

• From the top level menu, select File > New > Project from Template to create a new project


• Select the SAPUI5 Application template and click Next


• Give the project a name: languageSelectorWidget and click Next


• Select the view type – XML, and click Finish

A new project is created in your workspace

Step 2:  Develop the SAPUI5 app

For the language selection, we will use a simple SAPUI5 Select control in the application’s View file, however you can create your own experience with raw HTML, external JS based library controls or any alternative SAPUI5 controls.

• Open the View1.view.xml file


• Replace the file content with the code below:

<mvc:View controllerName="languageSelectorWidget.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:core="sap.ui.core"

	xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">

<FlexBox alignItems="Center" justifyContent="End" class="hboxClass">

	<items>

		<Select id="languageSelect" items="{AvailableLanguages>/}" change="onDropDownSelect">

			<core:Item key="{AvailableLanguages>key}" text="{AvailableLanguages>text}"/>

		</Select>

	</items>

</FlexBox>

</mvc:View>

• Open the View1.controller.js file


• Add the following code for the onAfterRendering life-cycle method to the file:

onAfterRendering: function(){

	this.UserInfoService = sap.ushell.Container.getService("UserInfo");

	var that = this;

	this.UserInfoService.getLanguageList().then(function(langJSON){

		var oModel = new sap.ui.model.json.JSONModel();

		oModel.setData(langJSON);

		that.getView().setModel(oModel, "AvailableLanguages");

		

		var user = that.UserInfoService.getUser();

		var userLanguage = user.getLanguage();

		

		var languageSelect = that.getView().byId("languageSelect");

		languageSelect.setSelectedKey(userLanguage);

	});

},

Notice that the code

1. Extracts the list of languages available in the site using the UserInfo Shell service


2. Sets the list as a JSONModel in the view


3. Sets the selected language according to the logged in user’s selected language

• Add the following code for the Select control event handler invoked upon end user language selection:

onDropDownSelect: function(oEvent){

	var selectedItem = oEvent.getParameter("selectedItem");

	var selectedlaunguage = selectedItem.getKey();

	var user = this.UserInfoService.getUser();

	user.setLanguage(selectedlaunguage);

	this.UserInfoService.updateUserPreferences(user);

			

	location.reload();

}

Notice that the code

1. Extracts the selected language locale ID


2. Uses the UserInfo shell service to set the logged in user’s language and update the user’s preferences.


3. Reloads the browser window to apply the changes.

 

Step 3:  Convert the app to a Portal widget

Before proceeding with this step make sure you’ve enabled the Portal plugin for SAP Web IDE.

To run the SAPUI5 application embedded in freestyle portal site page we need to convert it to a portal widget.

• Right click on the languageSelectWidget project root folder and select Convert to Portal service component


• In the dialog

1. 
   
   
   
   1. Select the Component.js file
   
   
   2. Enter the Widget Name - Language Selector
   
   
   3. Check the checkbox at the bottom left
   
   
   4. Click OK.
   
   
   
   

• Notice that a new descriptor file was created in the project – the file contains the properties used to represent the widget in the portal’s content catalog.


• You can select the an icon from the SAPUI5 Icon Explorer for the widget thumbnail and add it to the descriptor file:

 

Step 4:  Deploy the widget app to SAP Cloud Platform

Now the app is ready to be deployed to the SAP Cloud Platform and made available for Portal Admins to add to their portal sites.

1. Right click on the languageSelectWidget root folder and select Deploy > Deploy to SAP Cloud Platform


2. In the popup verify that youre deploying a new app with the same Application Name used for the Project Name and click Deploy

Step 5:  Add the widget to a Freestyle Portal site

Now you can go ahead:

1. Create a freestyle portal site


2. Create new pages


3. Add applications, web content, navigation menus, widgets and specifically the new language selector widget.

 

For more information on building freestyle Portal sites - see the related documentation.

 



 

To manage the site translations and create new translations follow this blig:

Feature Showcase – Translating a Portal Site using SAP Translation Hub

Finally, publish the site and try the language selector widget. Switch between the languages and notice that the selected language is applied to the logged in user when ever he accesses the site.