Consuming Custom SAP Fiori Library in SAP UI5 application

What is the use of custom library?

Custom Libraries help us to reduce our repetitive tasks which will ultimately reduce our development time. We can create all the common validations, controls, external js files and many more in our library and make use of it in many of our applications directly by calling it.

Prerequisite

1. Register SCP trial account by following the steps in below link if not registered already.

https://developers.sap.com/tutorials/hcp-create-trial-account.html

2. Create an SAP UI5 application from templates.

For the demo purpose, I am going to show you the consumption of the basic validation (input field to allow only alphabets) in the SAP UI5 application which is written in the SAP Fiori Library.

Lets see the step by step procedure,

Step 1: Create a new SAP Fiori Library App from template.

Just right click on workspace folder –> New –> Project from template.

Step 2: By default, Category value is featured. Now select all categories option from category dropdown and search for library and click next.

Step 3: Give the project name and click next.

Step 4: Enter “Title”, “Namespace”, check “Add Sample Control” and click “Finish”.

Step 5: You can see the sample controls in a directory as shown in the below screenshot.

Step 6: Now let’s create our own control.

New –> File –> Give a file name(Validation.js) –> Click “Ok”

Step 7: Copy the below code in Validation.js. We are going to use this function from our SAP UI5 application.

sap.ui.define([
	"./../library", 
	"sap/ui/core/Control", 
	"./ExampleRenderer",
	"sap/ui/base/Object",
	"sap/ui/model/Filter",
	"sap/ui/model/FilterOperator"
	], function (library, Control, ExampleRenderer,Object,Filter,FilterOperator) {
	"use strict";
   	return Object.extend("library.zlibrary.controls.Validation", {
   		onAlphaCheck: function(oEvent){
	    	var sInputValue = oEvent.getParameter("value");
            var aRegex = ["^[a-zA-Z- ]*$"];
            if (!sInputValue.match(aRegex)) {
                oEvent.getSource().setValueState(sap.ui.core.ValueState.Error);              
            } else {  
                oEvent.getSource().setValue(sInputValue);
                oEvent.getSource().setValueState(sap.ui.core.ValueState.None);
            }
	   	}
	   	}
   	}); 
});

Step 8: Deploy the library to abap repository or to cloud platform. Here lets go with SAP Cloud Platform Deployment.

Step 9: Now lets see how to add our library in SAP UI5 application. As a prerequisite I have already created an SAP UI5 application named “Demo” from the template. To add a library.

Right click on SAP UI5 application –> Project –> Add Reference to Library

Select the repository from the drop down. Here I go with SAP Cloud Platform since I deployed library in SCP.

Choose the required library, version and Hit on “Add”

Step 10: You could see the below codes generated in your neo-app.json file after adding reference to library.

Step 11: Lets see how to consume the library function.

In View.xml

<mvc:View controllerName="com.Demo.controller.View1" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml"
	displayBlock="true" xmlns="sap.m">
	<App id="idAppControl">
		<pages>
			<Page title="{i18n>title}">
				<content>
					<Input change="onInputChange"></Input>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

In controller.js

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"library/zlibrary/controls/Validation"
], function (Controller,Validation) {
	"use strict";
	return Controller.extend("com.Demo.controller.View1", {
		onInit: function () {
			this.oValidation = new Validation(); 
		},
		onInputChange: function(oEvent){
			this.oValidation.onAlphaCheck(oEvent);
		}
	});
});

Step 12: Save and run the application. You could see the validation runs perfectly in your SAP UI5 application

That’s it.. You have successfully consumed custom library in SAP UI5 application