Skip to Content
0

how to add External JavaScript library in sap ui5

Feb 15 at 06:09 AM

123

avatar image
Former Member

hi i wanted to add external javascript library to my standard fiori app. where i dont have index.html file so where and how i want to add the library.

My contrller.js file:

/*
 * Copyright (C) 2009-2014 SAP SE or an SAP affiliate company. All rights reserved
 */
jQuery.sap.require("sap.ca.scfld.md.controller.BaseMasterController");
jQuery.sap.require("sap.ca.scfld.md.controller.ScfldMasterController");
jQuery.sap.require("sap.ui.core.mvc.Controller");
jQuery.sap.require("sap.ui.core.IconPool");
jQuery.sap.require("sap.ui.model.odata.Filter");
jQuery.sap.require("sap.ca.ui.CustomerContext");
jQuery.sap.require("cus.sd.salesorder.create.util.ModelUtils");
jQuery.sap.require("cus.sd.salesorder.create.util.Utils");
sap.ca.scfld.md.controller.ScfldMasterController.extend("cus.sd.salesorder.create.view.S2", {
	onInit: function() {
		sap.ca.scfld.md.controller.ScfldMasterController.prototype.onInit.call(this);
		this.isSalesOrder = true;
		this.setDefaultSelection = false;
		this.customerEvent = 0;
		this.sFilterPattern = "";
		this.lock = false;
		this.oModel = new sap.ui.model.json.JSONModel();
		this.initializeValues();
		this.getList().attachUpdateStarted({}, this.onListUpdateStarted, this);
		this.getList().attachUpdateFinished({}, this.onListUpdateFinished, this);
		this.getView().addEventDelegate({
			onAfterShow: jQuery.proxy(this.onShow, this)
		});
	},
	onShow: function() {
		var c = this.oApplicationFacade.getApplicationModel("soc_cart");
		if (!c || !c.getData().CustomerName) {
			this._setCustomerControl();
		}
	},
	onListUpdateStarted: function() {
		this.getView().byId("list").setNoDataText(this.oApplicationFacade.getResourceBundle().getText("LOADING"));
	},
	onListUpdateFinished: function() {
		this.getView().byId("list").setNoDataText(this.oApplicationFacade.getResourceBundle().getText("NO_ITEMS_AVAILABLE"));
	},
	onRequestCompleted: function() {
		this.lock = false;
		if (sap.ui.Device.system.phone) {
			return;
		}
		if (this.setDefaultSelection) {
			this.setDefaultSelection = false;
			if (this.getList().getItems().length > 0) {
				if (this.isSalesOrder) {
					this.setListItem(this.getList().getItems()[1]);
				} else {
					this.setListItem(this.getList().getItems()[0]);
				}
			} else {
				this.getView().byId("list").setNoDataText(this.oApplicationFacade.getResourceBundle().getText("NO_ITEMS_AVAILABLE"));
				this.navToEmpty();
			}
		}
	},
	onNavToSalesOrders: function() {
		if (this.lock) {
			return;
		}
		this.lock = true;
		this.isSalesOrder = true;
		this.updateCustomer();
	},
	onNavToProducts: function() {
		if (this.lock) {
			return;
		}
		this.lock = true;
		this.isSalesOrder = false;
		this.updateCustomer();
	},
	updateCustomer: function() {
		var c = this.oApplicationFacade.getApplicationModel("soc_cart");
		if (c && c.getData()) {
			this.oCustomerID = c.getData().CustomerNumber;
			this.oCustomerName = c.getData().CustomerName;
			this.oSalesOrganization = c.getData().SalesOrganization;
			this.oDivision = c.getData().Division;
			this.DistributionChannel = c.getData().DistributionChannel;
			this.CustName = c.getData().CustomerName;
			if (this.isSalesOrder) {
				this.updateSalesOrdersList();
			} else {
				this.updateProductsList();
			}
		}
	},
	updateSalesOrdersList: function() {
		var f = [];
		var s = new sap.ui.model.Sorter("PO", false, this.oGroupPO);
		f.push(new sap.ui.model.Filter("SalesOrganization", sap.ui.model.FilterOperator.EQ, this.oSalesOrganization));
		f.push(new sap.ui.model.Filter("DistributionChannel", sap.ui.model.FilterOperator.EQ, this.DistributionChannel));
		f.push(new sap.ui.model.Filter("CustomerID", sap.ui.model.FilterOperator.EQ, this.oCustomerID));
		f.push(new sap.ui.model.Filter("Division", sap.ui.model.FilterOperator.EQ, this.oDivision));
		f.push(new sap.ui.model.Filter("SalesOrderNumber", sap.ui.model.FilterOperator.Contains, this.sFilterPattern));
		this.setDefaultSelection = true;
		this.getList().bindItems("/SalesOrders", new sap.ui.xmlfragment("cus.sd.salesorder.create.view.ListItemTemplate", this), s, f);
		var t = this.getView().byId("SOC_MasterListHeaderTitle");
		t.setText(this.oApplicationFacade.getResourceBundle().getText("MASTER_TITLE", [this.CustName]));
		this.registerMasterListBind(this.getList());
	},
	updateProductsList: function() {
		var f = [];
		f.push(new sap.ui.model.Filter("SalesOrganization", sap.ui.model.FilterOperator.EQ, this.oSalesOrganization));
		f.push(new sap.ui.model.Filter("DistributionChannel", sap.ui.model.FilterOperator.EQ, this.DistributionChannel));
		f.push(new sap.ui.model.Filter("ProductID", sap.ui.model.FilterOperator.Contains, this.sFilterPattern));
		this.setDefaultSelection = true;
		this.getList().bindItems("/Products", new sap.ui.xmlfragment("cus.sd.salesorder.create.view.ProductListItemTemplate", this), null, f);
		var t = this.getView().byId("SOC_MasterListHeaderTitle");
		t.setText(this.oApplicationFacade.getResourceBundle().getText("PRODUCTS_CUST", [this.CustName]));
		this.registerMasterListBind(this.getList());
	},
	oGroupPO: function(c) {
		return c.getProperty("PO");
	},
	getHeaderFooterOptions: function() {
		if (sap.ui.Device.system.phone) {
			return {};
		}
		return {};
	},
	initializeValues: function() {
		this.top = 30;
		this.skip = 0;
		this.searchSkip = 0;
		this.firstTime = true;
		this.serverSearch = false;
		this.clientSearch = false;
		this.latestFetch = 0;
		this.latestSearchFetch = 0;
	},
	setListItem: function(i) {
		if (i && i.getBindingContext()) {
			this.setDefaultSelection = false;
			var l = this.getList();
			l.removeSelections();
			i.setSelected(true);
			l.setSelectedItem(i, true);
			if (this.isSalesOrder) {
				this.oRouter.navTo("detail", {
					contextPath: i.getBindingContext().sPath.substr(1)
				}, !sap.ui.Device.system.phone);
			} else {
				this.oRouter.navTo("productdetail", {
					customerID: this.oCustomerID,
					productID: encodeURIComponent(i.getBindingContext().getProperty("ProductID")),
					salesOrganization: this.oSalesOrganization,
					distributionChannel: this.DistributionChannel,
					division: this.oDivision
				}, !sap.ui.Device.system.phone);
			}
		}
	},
	navToEmpty: function() {
		if (this.isSalesOrder) {
			this.oRouter.navTo("noData", {
				viewTitle: "SALES_ORDER_DETAIL",
				languageKey: "NO_ITEMS_AVAILABLE"
			}, !sap.ui.Device.system.phone);
		} else {
			this.oRouter.navTo("noData", {
				viewTitle: "PRODUCT_DETAIL",
				languageKey: "NO_ITEMS_AVAILABLE"
			}, !sap.ui.Device.system.phone);
		}
	},
	onDataLoaded: function() {
		this.onRequestCompleted();
	},
	applySearchPatternToListItem: function(i, f) {
		if (f === "") {
			return true;
		}
		if (!i.getBindingContext()) {
			return false;
		}
		return sap.ca.scfld.md.controller.BaseMasterController.prototype.applySearchPatternToListItem.call(null, i, f);
	},
	isLiveSearch: function() {
		return true;
	},
	isBackendSearch: function() {
		return true;
	},
	applyBackendSearchPattern: function(f, b) {
		this.sFilterPattern = f;
		var F = [];
		if (this.isSalesOrder) {
			F = [new sap.ui.model.Filter("CustomerID", sap.ui.model.FilterOperator.EQ, this.oCustomerID), new sap.ui.model.Filter(
					"SalesOrderNumber", sap.ui.model.FilterOperator.Contains, f), new sap.ui.model.Filter("SalesOrganization", sap.ui.model.FilterOperator
					.EQ, this.oSalesOrganization), new sap.ui.model.Filter("DistributionChannel", sap.ui.model.FilterOperator.EQ, this.DistributionChannel),
				new sap.ui.model.Filter("Division", sap.ui.model.FilterOperator.EQ, this.oDivision)
			];
		} else {
			F = [new sap.ui.model.Filter("ProductID", sap.ui.model.FilterOperator.Contains, f), new sap.ui.model.Filter("SalesOrganization", sap.ui
				.model.FilterOperator.EQ, this.oSalesOrganization), new sap.ui.model.Filter("DistributionChannel", sap.ui.model.FilterOperator.EQ,
				this.DistributionChannel)];
		}
		this.setDefaultSelection = true;
		b.filter(F, sap.ui.model.FilterType.Application);
	},
	_setCustomerControl: function() {
		this.customerContext = new sap.ca.ui.CustomerContext({
			personalizationPageName: "SRA017_SD_SO_CR",
			showSalesArea: true,
			customerSelected: jQuery.proxy(this.onCustomerSelected, this),
			path: "/Customers"
		});
		this.customerContext.setModel(this.oApplicationFacade.getODataModel());
		this.customerContext.select();
	},
	changeInCustomerContext: function() {
		this.setDefaultSelection = true;
		this.customerChanged = true;
		this.customerContext.change();
	},
	onCustomerSelected: function(e) {
		this.setDefaultSelection = true;
		if (this.customerChanged) {
			this.customerChanged = false;
			this.customerNewParams = e.getParameters();
			var t = this;
			sap.ca.ui.dialog.confirmation.open({
				question: this.oApplicationFacade.getResourceBundle().getText("CONFIRM_CLEAR_CART"),
				showNote: false,
				title: this.oApplicationFacade.getResourceBundle().getText("CONFIRMATION"),
				confirmButtonLabel: this.oApplicationFacade.getResourceBundle().getText("YES")
			}, function(r) {
				if (r.isConfirmed) {
					t.handleCustomerChange(t.customerNewParams);
				}
			});
		} else if (this.customerChanged === undefined && e.getParameters().CustomerID === undefined) {} else {
			this.handleCustomerChange(e.getParameters());
		}
	},
	handleCustomerChange: function(c) {
		cus.sd.salesorder.create.util.ModelUtils._setCartModel();
		var C = this.oApplicationFacade.getApplicationModel("soc_cart");
		C.getData().CustomerName = c.CustomerName;
		C.getData().CustomerNumber = c.CustomerID;
		C.getData().SalesOrganization = c.SalesOrganization;
		C.getData().Division = c.Division;
		C.getData().DistributionChannel = c.DistributionChannel;
		C.getData().itemCount = 0;
		C.getData().SingleShipment = false;
		C.getData().PurchaseOrder = "";
		C.getData().NotesToReceiver = "";
		C.getData().ShippingInstructions = "";
		this.updateCustomer();
		if (c.CustomerID) var p = "(CustomerID='" + c.CustomerID + "'," + "SalesOrganization='" + c.SalesOrganization + "'," +
			"DistributionChannel='" + c.DistributionChannel + "'," + "Division='" + c.Division + "')";


		function s(r) {
			var o = sap.ca.scfld.md.app.Application.getImpl().getApplicationModel("soc_cart");
			o.getData().Currency = r.Currency;
			o.updateBindings();
		}


		function e(E) {
			cus.sd.salesorder.create.util.Utils.dialogErrorMessage(E.response);
		}
		this.oApplicationFacade.getODataModel().read("/Customers" + p, null, null, true, s, e);
	}
});

my component.js file

/*
 * Copyright (C) 2009-2014 SAP SE or an SAP affiliate company. All rights reserved
 */
jQuery.sap.declare("cus.sd.salesorder.create.Component");
jQuery.sap.require("cus.sd.salesorder.create.Configuration");
jQuery.sap.require("sap.ca.scfld.md.ComponentBase");
sap.ca.scfld.md.ComponentBase.extend("cus.sd.salesorder.create.Component", {
	metadata: sap.ca.scfld.md.ComponentBase.createMetaData("MD", {
		"name": "Master Detail Sample",
		"version": "1.6.7",
		"library": "cus.sd.salesorder.create",
		"includes": ["css/salesorder.css"],
		"dependencies": {
			"libs": ["sap.m", "sap.me"],
			"components": []
		},
		"config": {
			"resourceBundle": "i18n/i18n.properties",
			"titleResource": "DISPLAY_NAME",
			"icon": "sap-icon://Fiori2/F0018"
		},
		viewPath: "cus.sd.salesorder.create.view",
		masterPageRoutes: {
			"master": {
				"pattern": "",
				"view": "S2"
			}
		},
		detailPageRoutes: {
			"detail": {
				"pattern": "detail/{contextPath}",
				"view": "S3"
			},
			"productdetail": {
				"pattern": "productdetail/{customerID}/{productID}/{salesOrganization}/{distributionChannel}/{division}",
				"view": "S3_Product"
			}
		},
		fullScreenPageRoutes: {
			"quickCheckout": {
				pattern: "quickCheckout",
				view: "SalesOrderCreatePriceAndAvailabilityCheck"
			},
			"soCartDetails": {
				pattern: "soCartDetails",
				view: "SalesOrderCartDetails"
			},
			"soReviewCart": {
				pattern: "soReviewCart",
				view: "SalesOrderReviewCart"
			},
			"soCreateCart": {
				pattern: "soCreateCart",
				view: "SalesOrderCreateCart"
			}
		}
	}),
	createContent: function() {
		var v = {
			component: this
		};
		return sap.ui.view({
			viewName: "cus.sd.salesorder.create.Main",
			type: sap.ui.core.mvc.ViewType.XML,
			viewData: v
		});
	}
});

pls help in where and how to add the library i dont have manifest.json and index.html in the project

i wanted to add moment.js javascript library

thanks in advance

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

avatar image
Former Member Feb 15 at 06:20 AM
2

Hi,

Download the external js and save the content in any abc.js file.

Put that js file (abc.js) into controller folder of your project.

Give the path of your extrnal js file(abc.js) in controller of your view like below:

sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel',
'./CustomerFormat',
'./InitPage',
'./abc',
'./xlsx',
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator"
]
jQuery.sap.declare("resourctroot name of project.name of js file");
	jQuery.sap.declare("sap.ui.demo.wt.pie_final_test.abc");
	

Hope This will work.

Thanks

Show 3 Share
10 |10000 characters needed characters left characters exceeded
Former Member

thank you but still i didnt get how to use. im a beginner in UI5. if possible pls elaborate

0
Former Member

pls share the code

0
Former Member
jQuery.sap.require("cus.sd.salesorder.create.<FileName>");

Put your external js under controller folder of project and include above line in controller
where other files are included like below:
jQuery.sap.require("sap.ui.core.IconPool"); jQuery.sap.require("sap.ui.model.odata.Filter"); jQuery.sap.require("sap.ca.ui.CustomerContext"); jQuery.sap.require("cus.sd.salesorder.create.util.ModelUtils"); jQuery.sap.require("cus.sd.salesorder.create.util.Utils");
0
A K Feb 15 at 08:29 AM
0

Agree with gupta. Meanwhile you can check the below comment:

jQuery.sap.require("<NameSpace>.<FolderLocation>.<FileName>");
Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Mar 28 at 05:13 AM
0

Hi,

In manifest.json

"sap.ui5": {
"resourceRoots": {
"openui5.camera": "./thirdparty/openui5/camera/"
},
...
}

Regards,

Gururaj

Share
10 |10000 characters needed characters left characters exceeded