Using Custom UI5 libraries in SAP Fiori on SAP ABAP Repository

[muhammadraza_hasan]

Don't feel left alone if you don't have WebIDE and don't know how to use Custom UI5 libraries in SAP Fiori on SAP ABAP Repository.

For custom UI5 libraries, I am using UI5Lab, you can find there interesting new custom controls to use in your SAP Fiori app.

 

First, you need is to download custom library in your system from Github, For that I usually use SmartGit.

Open UI5Lab and click on Source Code.



Now download that repository on your system.

Copy content of dist>resources folder in your app under libs folder. (in our case ui5lab folder)



Then add ui5lab in your manifest.js file.



Also add manifest: true in your component.js file



 

Simple as that your Custom UI5 library is now available to use in your app with alias ui5lab.wl.pdf.

 

Let's try to use it now.

I have added ui5lab.wl.pdf with pdf namespace in my view as mentioned below. 

<core:View controllerName="app.pdf.view.Page" 

	xmlns:mvc="sap.ui.core.mvc" 

	xmlns:f="sap.ui.layout.form" 

	xmlns:core="sap.ui.core"

	xmlns:pdf="ui5lab.wl.pdf"

	xmlns="sap.m" height="100%">

	<Page showHeader="false">

		<content>

			<f:SimpleForm id="AttachmentForm" minWidth="1024" editable="true" layout="ResponsiveGridLayout" title="LR_ATTACHMENTS_FORM" class="editableForm">

			</f:SimpleForm>

			<pdf:PdfViewer pdfSource="{/pdfsource}" />

			

		</content>

		<footer>

			<OverflowToolbar>

				<ToolbarSpacer />

				<ToolbarSpacer />

				<ToolbarSpacer />

				<Button icon="sap-icon://paper-plane" iconFirst="true" iconDensityAware="true" type="Accept" text="Submit" press="onSubmit" />

			</OverflowToolbar>

		</footer>

	</Page>

</core:View>

 And my controller is as following: 

sap.ui.define([

	"jquery.sap.global",

	"sap/ui/core/mvc/Controller",

	"sap/ui/model/json/JSONModel",

	'sap/m/MessageToast',

	"sap/ui/unified/FileUploader",



], function (jQuery, Controller, JSONModel, MessageToast, FileUploader) {

	"use strict";



	var PageController = Controller.extend("app.pdf.view.Page", {



		reader: {},

		onInit: function () {

			var that = this;

			this._oModel = new JSONModel({

				pdfsource: ""

			});

			this.reader = new FileReader();

			this.reader.onload = function(oEvent){

				that._oModel.setProperty("/pdfsource", oEvent.target.result);

			};

			

			this.getView().setModel(this._oModel);

		},



		onBeforeRendering: function () {

			var that = this;

			var oAttachmentForm = this.getView().byId("AttachmentForm");

			oAttachmentForm.addContent(new sap.m.Label("AttachmentFile_Label", { text: "LR_SEL_ATTACH" }));

			oAttachmentForm.addContent(new FileUploader("fileUploader", {

				style: "Emphasized",

				fileType: "pdf,jpeg,jpg,png",

				width: "100%",

				change: function (oEvent) {

					var file = oEvent.getParameter("files")[0];

					that.reader.readAsDataURL(file);

				},

				typeMissmatch: function (oEvent) {

					var aFileTypes = oEvent.getSource().getFileType();

					jQuery.each(aFileTypes, function (key, value) { aFileTypes[key] = "*." + value });

					var sSupportedFileTypes = aFileTypes.join(", ");

					MessageToast.show(that.oBundle.getText("LR_ATTACHMENT_TYPECHECK", [oEvent.getParameter("fileType"), sSupportedFileTypes]));

				}

			}));

		}

	});



	return PageController;



});

 

Custome UI5 library is now working in my SAPUI5 app.