Skip to Content
avatar image
Former Member

how to add External JavaScript library in sap ui5

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Feb 15 at 06:20 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

    • 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");
  • Feb 15 at 08:29 AM

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

    jQuery.sap.require("<NameSpace>.<FolderLocation>.<FileName>");
    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Mar 28 at 05:13 AM

    Hi,

    In manifest.json

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

    Regards,

    Gururaj

    Add comment
    10|10000 characters needed characters exceeded