- SAP Community
- Products and Technology
- Technology
- Technology Q&A
- how to add External JavaScript library in sap ui5
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for
Options
- Subscribe to RSS Feed
- Mark Question as New
- Mark Question as Read
- Bookmark
- Subscribe
- Printer Friendly Page
- Report Inappropriate Content
how to add External JavaScript library in sap ui5
Former Member
Options
- Subscribe to RSS Feed
- Mark Question as New
- Mark Question as Read
- Bookmark
- Subscribe
- Printer Friendly Page
- Report Inappropriate Content
on 02-15-2018 6:09 AM
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
- SAP Managed Tags:
- JavaScript,
- SAPUI5,
- SAP Cloud Platform, industry edition, client libraries,
- SRM External Requirements
Accepted Solutions (0)
Answers (3)
Answers (3)
former_member29
Explorer
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Report Inappropriate Content
02-15-2018
6: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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Former Member
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Report Inappropriate Content
02-15-2018
7:19 AM
Former Member
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Report Inappropriate Content
02-15-2018
7:28 AM
former_member29
Explorer
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Report Inappropriate Content
02-19-2018
10:44 AM
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");
gururajenamate
Explorer
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Report Inappropriate Content
03-28-2018
6:13 AM
Hi,
In manifest.json
"sap.ui5": {
"resourceRoots": {
"openui5.camera": "./thirdparty/openui5/camera/"
},
...
}Regards,
Gururaj
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
karthikarjun
Active Contributor
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Report Inappropriate Content
02-15-2018
8:29 AM
Agree with gupta. Meanwhile you can check the below comment:
jQuery.sap.require("<NameSpace>.<FolderLocation>.<FileName>");You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Ask a Question
Related Content
- Unlocking Full-Stack Potential using SAP build code - Part 1 in Technology Blogs by Members
- Handle Special Character(Single Quote) in Master Data Loading in Technology Q&A
- SAP Build Code - Speed up your development with Generative AI Assistant - Joule in Technology Blogs by SAP
- Gamifying SAP C4C with BTP, the Flutter or Build Apps way. in Technology Blogs by SAP
- SAP Asset Manager - .aar extensions source code in Technology Q&A
Top Q&A Solution Author
| User | Count |
|---|---|
| 93 | |
| 10 | |
| 10 | |
| 9 | |
| 9 | |
| 7 | |
| 6 | |
| 5 | |
| 5 | |
| 4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.