CRUD Operations in SAPUI5

April 03, 2019

0

App Name :- ZBRD_PCS_TRC

Views :-

App.view.xml

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="ZBRD_PCS_TRC.controller.App" xmlns:html="http://www.w3.org/1999/xhtml">
<App id="App"/>

</core:View>

Home.view.xml

<?xml version="1.0"?>

<mvc:View xmlns="sap.m"
controllerName="ZBRD_PCS_TRC.controller.Home"
xmlns:mvc="sap.ui.core.mvc">
<Page title="PCS Tracking System" showNavButton="true"
showFooter="true" showHeader="true">
<content>
<Table id="table" class="sapUiResponsiveMargin"
growingScrollToLoad="true" growingThreshold="20" growing="true"
showSeparators="All" mode="MultiSelect" noDataText="No data"
itemPress="onItemPress" width="auto" items="{path:'Key>/'}">
<headerToolbar>
<OverflowToolbar width="auto" enabled="true"
visible="true" design="Transparent" height="auto">
<content>

<Title width="auto" visible="true" textAlign="Begin"
text="Items (3)" wrapping="false" titleStyle="Auto" />

<ToolbarSpacer width="" />
<Switch enabled="true" visible="true" type="Default"
state="false" customTextOn="On" customTextOff="Off" />

<OverflowToolbarButton width="auto"
enabled="true" visible="true" text="Sort" press="onAddPCR"
iconDensityAware="false" tooltip="Add New" iconFirst="true"
icon="sap-icon://add" type="Transparent" />

<OverflowToolbarButton width="auto"
enabled="true" visible="true" text="Filter"
press="getTableIndex" iconDensityAware="false"
tooltip="Delete Selected" iconFirst="false"
icon="sap-icon://delete" type="Transparent" />

<OverflowToolbarButton width="auto"
enabled="true" visible="true" text="Group"
press="_onOverflowToolbarButtonPress2" iconDensityAware="false"
tooltip="Block Unblock Alert" iconFirst="true"
icon="sap-icon://alert" type="Transparent" />

</content>

</OverflowToolbar>

</headerToolbar>
<columns>
<Column width="auto" mergeDuplicates="false"
popinDisplay="Inline" demandPopin="false" minScreenWidth="Phone"
vAlign="Top" hAlign="Left">
<header>
<Text width="auto" visible="true" textDirection="Inherit"
textAlign="Begin" text="Part No" wrapping="false" maxLines="1" />
</header>
<footer />
</Column>
<Column width="auto" mergeDuplicates="false"
popinDisplay="Inline" demandPopin="true" minScreenWidth="Tablet"
vAlign="Top" hAlign="Left">
<header>
<Text width="auto" visible="true" textDirection="Inherit"
textAlign="Begin" text="Alert Category" wrapping="false"
maxLines="1" />
</header>

<footer />

</Column>

<Column width="auto" mergeDuplicates="false"
popinDisplay="Inline" demandPopin="true" minScreenWidth="Tablet"
vAlign="Top" hAlign="Left">

<header>

<Text width="auto" visible="true" textDirection="Inherit"
textAlign="Begin" text="Plant" wrapping="false" maxLines="1" />

</header>

<footer />

</Column>

<Column width="auto" mergeDuplicates="false"
popinDisplay="Inline" demandPopin="true" minScreenWidth="Tablet"
vAlign="Top" hAlign="Left">

<header>

<Text width="auto" visible="true" textDirection="Inherit"
textAlign="Begin" text="Block SMS" wrapping="false" maxLines="1" />

</header>

<footer />
</Column>
<Column width="auto" mergeDuplicates="false"
popinDisplay="Inline" demandPopin="true" minScreenWidth="Tablet"
vAlign="Top" hAlign="Left">

<header>

<Text width="auto" visible="true" textDirection="Inherit"
textAlign="Begin" text="Action" wrapping="false" maxLines="1" />

</header>

<footer />

</Column>

</columns>

<items>

<ColumnListItem type="Active">
<cells>
<Text id="PartNo" text="{Key>PartNo}" visible="true"
titleActive="false" />
<Text width="auto" id="Category" wrapping="false"
text="{Key>Category}" maxLines="1" />
<Text id="Plant" text="{Key>Plant}" />
<Text id="BLOCKSMS" text="{Key>Plant}" />
<Button width="auto" enabled="true" visible="true" press="fnEditRecord"
text="Edit" iconDensityAware="false" iconFirst="true"
type="Default" />
</cells>

</ColumnListItem>

</items>

</Table>
</content>
<footer>
<OverflowToolbar width="100%" enabled="true"
visible="true" design="Auto" height="46px">
<content>
<ToolbarSpacer width="" />
<Button width="auto" enabled="true" visible="true"
text="Save" iconDensityAware="false" iconFirst="true"
type="Emphasized" />
<Button width="auto" enabled="true" visible="true"
text="Cancel" iconDensityAware="false" iconFirst="true"
type="Default" />
</content>

</OverflowToolbar>

</footer>

<headerContent />

<subHeader />

<customHeader />

</Page>

</mvc:View>

========

Fragments

ADDEDITPR.fragment.xml

<core:FragmentDefinition
xmlns="sap.m"
xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core">
<Dialog title="Product Details" afterClose="dialogAfterclose">
<content>
<f:SimpleForm id="SimpleFormDisplay354"
minWidth="1024"
maxContainerCols="2"
editable="false"
layout="ResponsiveGridLayout"
labelSpanL="3"
labelSpanM="3"
emptySpanL="4"
emptySpanM="4"
columnsL="1"
columnsM="1">
<f:content>
<Label text="Part No" />
<Input id="PartNo" value="{PartNo}" />

<Label text="Alert Category" />
<Input id="Category" value="{Category}" />
<Label text="Plant" />
<Input id="Plant" value="{Plant}" />
</f:content>
</f:SimpleForm>
</content>
<buttons>

<Button id="idSave" text="Add" press="onAddToTable" type="Accept"
class="sapUiSizeCompact" />
<Button text="Close" press="onClosePrFrg" type="Reject"
class="sapUiSizeCompact" />
</buttons>

</Dialog>
</core:FragmentDefinition>

2nd Fragment :=
=======

AssignUser.fragment.xml

<core:FragmentDefinition xmlns="sap.m"
xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core">
<Dialog title="User Details" afterClose="dialogAfterclose">
<content>
<Table id="assignUser" class="sapUiResponsiveMargin" growingScrollToLoad="true"
growingThreshold="20" growing="true" showSeparators="All"
mode="MultiSelect" noDataText="No data" width="auto"
items="{
path:'Key1>/',
sorter: {
path: 'User',
descending: false
}
}">
<infoToolbar>
<Toolbar visible="false" width="100%" enabled="true"
design="Auto" height="auto">
<content>
<Label visible="true" width="100%" design="Standard"
textDirection="Inherit" textAlign="Begin" required="false"
text="Label" />
</content>
</Toolbar>
</infoToolbar>
<headerToolbar>
<OverflowToolbar visible="true" width="auto"
enabled="true" design="Transparent" height="auto">
<content>
<Title visible="true" width="auto" textAlign="Begin"
text="Items (3)" wrapping="false" titleStyle="Auto" />
<ToolbarSpacer width="" />
</content>
</OverflowToolbar>
</headerToolbar>
<columns>
<Column width="auto" mergeDuplicates="true"
popinDisplay="Inline" demandPopin="false" minScreenWidth="Phone"
vAlign="Top" hAlign="Left">

<Text visible="true" width="auto" textDirection="Inherit"
textAlign="Begin" text="User" wrapping="false" maxLines="1" />
</Column>

<Column width="auto" mergeDuplicates="false"
popinDisplay="Inline" demandPopin="false" minScreenWidth="Phone"
vAlign="Top" hAlign="Left">

<Text visible="true" width="auto" textDirection="Inherit"
textAlign="Begin" text="Mob" wrapping="false" maxLines="1" />
</Column>

<Column width="auto" mergeDuplicates="false"
popinDisplay="Inline" demandPopin="true" minScreenWidth="Tablet"
vAlign="Top" hAlign="Left">

<Text visible="true" width="auto" textDirection="Inherit"
textAlign="Begin" text="User Id" wrapping="false" maxLines="1" />

</Column>

<Column width="auto" mergeDuplicates="false"
popinDisplay="Inline" demandPopin="true" minScreenWidth="Tablet"
vAlign="Top" hAlign="Left">

<Text visible="true" width="auto" textDirection="Inherit"
textAlign="Begin" text="Mobile No" wrapping="false" maxLines="1" />

</Column>

</columns>

<items>

<ColumnListItem type="Active">
<cells>
<ObjectIdentifier
visible="true" text="{Key1>User}" titleActive="false" />
<ObjectIdentifier
visible="true" text="{Key1>MobileNo}" titleActive="false" />

<Input visible="true" width="auto" enabled="true"
type="Text" maxLength="0" valueHelpOnly="false"
showValueHelp="false" />
<Input visible="true" width="auto" enabled="true"
type="Text" maxLength="0" valueHelpOnly="false"
showValueHelp="false" />

</cells>

</ColumnListItem>

</items>

</Table>

</content>

<buttons>

<Button id="idSave" text="Add" press="onAddUserToLineitem" type="Accept"
class="sapUiSizeCompact" />
<Button text="Close" press="onClosePrFrg" type="Reject"
class="sapUiSizeCompact" />
</buttons>

</Dialog>
</core:FragmentDefinition>

=================

Controller.js

============

App.controller.js

sap.ui.define([
"sap/ui/core/mvc/Controller",
"ZBRD_PCS_TRC/controller/BaseController"
], function (Controller,BaseController) {
"use strict";

return Controller.extend("ZBRD_PCS_TRC.controller.App", {
onInit : function(){

}
});

});

============

Home.controller.js

sap.ui.define(
[ "jquery.sap.global", "sap/ui/core/mvc/Controller",
"ZBRD_PCS_TRC/controller/BaseController",
"sap/ui/model/json/JSONModel", "sap/m/Dialog",
"sap/m/MessageToast", "sap/m/MessageBox",
"sap/ui/core/format/NumberFormat",
"sap/ui/model/Filter", "sap/ui/model/FilterOperator", 'sap/ui/core/util/Export',
'sap/ui/core/util/ExportTypeCSV',
'sap/m/MessagePopover', 'sap/m/MessagePopoverItem'

],
function(jQuery, Controller, BaseController, JSONModel, Dialog,
MessageToast, MessageBox, formatter, NumberFormat,
Filter, FilterOperator, ExportTypeCSV, MessagePopover,
MessagePopoverItem) {
"use strict";
var oMessageTemplate = new MessagePopoverItem({
type : "{type}",
title : "{title}",
description : "{description}"
});

var oMessagePopover = new MessagePopover({
items : {
path : '/',
template : oMessageTemplate
}
});
var that, oView;
var tableData = [];
var tableData1 = [];

return Controller.extend("ZBRD_PCS_TRC.controller.Home",
{
onInit : function() {
this.oView = this.getView();
this.oView.setModel(new JSONModel({
PartNo : "",
Category : "",
Plant : "",
}));
var that=this;
var oModel = new sap.ui.model.json.JSONModel();
/* that.getOwnerComponent().getModel("ZMM_PR_ITSM_SRV").read("/ES_REQUESTOR", {success: function(oData, oResponse){
oModel.setData(oData);
that.getView().setModel(oModel, "REQUESTOR");
//that.getView().byId("idList1").setModel(oModelCAdmin);
},
error:function(oResponse){
}
})*/
},

/*** ************************PCR Add Functionality*****************************/
onAddPCR : function(oEvent) {
if (!this._oDialog) {
this._oDialog = sap.ui.xmlfragment("ZBRD_PCS_TRC.view.fragment.ADDEDITPR", this);
}
jQuery.sap.syncStyleClass("sapUiSizeCompact", this.getView(), this._oDialog);
this._oDialog.open();
},

onAddToTable : function(oEvent) {
var partNoValue,CategoryValue,PlantValue;
that = this;
partNoValue= sap.ui.getCore().byId("PartNo").getValue();
CategoryValue=sap.ui.getCore().byId("Category").getValue();
PlantValue=sap.ui.getCore().byId("Plant").getValue();
var d={
"PartNo" :partNoValue,
"Category" :CategoryValue,
"Plant" : PlantValue
};
tableData.push(d);
var oModel = new sap.ui.model.json.JSONModel()
oModel.setData(tableData);
var oTable = this.getView().byId('table');
oTable.setModel(oModel);
this.getView().setModel(oModel,"Key");
/* sap.ui.getCore().byId("PartNo").setValue("");
sap.ui.getCore().byId("Category").setValue("");
sap.ui.getCore().byId("Plant").setValue("");*/
// this.getView().byId("table").bindRows("/");

if (this._oDialog) {
this._oDialog.destroy();
this._oDialog = null;
}
// console.log(tableData);
},
dialogAfterclose: function(oEvent) {
if (this._oDialog) {
this._oDialog.destroy();
this._oDialog = null; // make it falsy so that it can be created next time
}
},

onClosePrFrg : function(){
if (this._oDialog) {
this._oDialog.destroy();
this._oDialog = null; // make it falsy so that it can be created next time
}
},

_onOverflowToolbarButtonPress2: function() {
return new Promise(function(fnResolve) {
var sTargetPos = "center center";
sTargetPos = (sTargetPos === "default") ? undefined : sTargetPos;
sap.m.MessageToast.show("The Notification For Selected Parts Are Blocked", {
onClose: fnResolve,
duration: 0 || 3000,
at: sTargetPos,
my: sTargetPos
});
}).catch(function(err) {
if (err !== undefined) {
MessageBox.error(err.message);
}
});

},
getTableIndex: function(oEvent){
/*var oTable = this.byId("table");
var oselectedItem = oTable.getSelectedItem();
var aggregations = oTable.getAggregation("items");
var index = aggregations.indexOf(oselectedItem);
sap.m.MessageToast.show("Selected Index is : "+index);*/

var oTable=this.getView().byId("table");
var oModel=oTable.getModel();
var aRows=oModel.getData()
var aContexts=oTable.getSelectedContexts();
if(aContexts.length>0){
for (var i = aContexts.length - 1; i >= 0; i--) {
var oThisObj = aContexts[i].getObject();
var index=$.map(aRows,function(obj,index){
if (obj == oThisObj){
return index;
}
})
aRows.splice(index,1);

}
oModel.setData(aRows)
oTable.removeSelections(true);
}else{
sap.m.MessageToast.show("First Select The Record For Delete", {
onClose: fnResolve,
duration: 0 || 3000,
at: sTargetPos,
my: sTargetPos
});
}
},

onItemPress : function(oEvent) {
/*var sInputValue = oEvent.getSource().getValue().toUpperCase();
this.inputId = oEvent.getSource().getId();*/

if (!this._valueHelpDialogAssignUser) {
this._valueHelpDialogAssignUser = sap.ui.xmlfragment("ZBRD_PCS_TRC.view.fragment.AssignUser",this);
this.getView().addDependent(this._valueHelpDialogAssignUser); }
this._valueHelpDialogAssignUser.open();
var d1=[{
"User" :"ABC",
"MobileNo":"123"
},{
"User" :"XYZ",
"MobileNo":"123"
},{
"User" :"ABC",
"MobileNo":"123"
},{
"User" :"XYZ",
"MobileNo":"123"
},
{
"User" :"ABC",
"MobileNo":"123"
},{
"User" :"XYZ",
"MobileNo":"123"
},
{
"User" :"DEF",
"MobileNo":"123"
},{
"User" :"XYZ",
"MobileNo":"123"
}];

var oModel = new sap.ui.model.json.JSONModel()
oModel.setData(d1);
var oTable = sap.ui.getCore().byId("assignUser");
oTable.setModel(oModel);
this.getView().setModel(oModel,"Key1");
/* var oItem = oEvent.getParameter("listItem") || oEvent.getSource();
var oCtx = oItem.getBindingContext();
var sPath = oCtx ? oCtx.getPath() : undefined;

alert("List item pressed: Binding path: " + sPath);*/
},

onAddUserToLineitem : function(oEvent) {

// var partNoValue,CategoryValue,PlantValue;
/* that = this;
partNoValue= sap.ui.getCore().byId("PartNo").getValue();
CategoryValue=sap.ui.getCore().byId("Category").getValue();
PlantValue=sap.ui.getCore().byId("Plant").getValue();*/

/* sap.ui.getCore().byId("PartNo").setValue("");
sap.ui.getCore().byId("Category").setValue("");
sap.ui.getCore().byId("Plant").setValue("");*/
// this.getView().byId("table").bindRows("/");

if (this._oDialog) {
this._oDialog.destroy();
this._oDialog = null;
}
// console.log(tableData);
},

fnEditRecord: function(oEvent){
/*var oTable = this.byId("table");
var oselectedItem = oTable.getSelectedItem();
var aggregations = oTable.getAggregation("items");
var index = aggregations.indexOf(oselectedItem);
sap.m.MessageToast.show("Selected Index is : "+index);*/

var oTable=this.getView().byId("table");
var oModel=oTable.getModel();
var aRows=oModel.getData()
var aContexts=oTable.getSelectedContexts();
if(aContexts.length>0){
for (var i = aContexts.length - 1; i >= 0; i--) {
var oThisObj = aContexts[i].getObject();
var index=$.map(aRows,function(obj,index){
if (obj == oThisObj){
return index;
}
})
aRows.splice(index,1);

}
oModel.setData(aRows)
oTable.removeSelections(true);
}else{
sap.m.MessageToast.show("First Select The Record For Delete", {
onClose: fnResolve,
duration: 0 || 3000,
at: sTargetPos,
my: sTargetPos
});
}
},
});
});

===========

Base.controller.js

sap.ui.define([
"sap/ui/core/mvc/Controller"
],
function(Controller){
"use strict";
return Controller.extend("ZBRD_PCS_TRC.controller.BaseController",{
/**
* Convenience method for accessing the router.
* @public
* @returns {sap.ui.core.routing.Router} the router for this component
*/
getRouter : function(){
return sap.ui.core.UIComponent.getRouterFor(this);
},

/**
* Convenience method for getting the view model by name.
* @public
* @param {string} [sName] the model name
* @returns {sap.ui.model.Model} the model instance
*/
getModel : function(sName){
return this.getView().getModel(sName);
},

/**
* Convenience method for setting the view model.
* @public
* @param {sap.ui.model.Model} oModel the model instance
* @param {string} sName the model name
* @returns {sap.ui.mvc.View} the view instance
*/
setModel : function(oModel, sName){
return this.getView().setModel(oModel, sName);
},

/**
* Getter for the resource bundle.
* @public
* @returns {sap.ui.model.resource.ResourceModel} the resourceModel of the component
*/
getResourceBundle : function(){
return this.getOwnerComponent().getModel("i18n").getResourceBundle();
}

});
});

============

manifest.json

=========

{
"_version": "1.1.0",
"sap.app": {
"_version": "1.1.0",
"id": "ZBRD_PCS_TRC",
"type": "application",
"title": "PCS TRACKING SYSTEM",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "1.0.0"
},
"dataSources": {
"ZMM_PR_ITSM_SRV": {
"uri": "proxy/sap/opu/odata/sap/ZMM_PR_ITSM_SRV/",
"type": "OData",
"settings": {
"odataVersion": "2.0"
}
}
},
"sourceTemplate": {
"id": "sap.ui.ui5-template-plugin.1worklist",
"version": "1.50.0"
}
},
"sap.ui": {
"_version": "1.1.0",
"technology": "UI5",
"icons": {
"icon": "sap-icon://task",
"favIcon": "",
"phone": "",
"phone@2": "",
"tablet": "",
"tablet@2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_hcb",
"sap_belize"
]
},
"sap.ui5": {
"_version": "1.1.0",
"rootView": "ZBRD_PCS_TRC.view.App",
"dependencies": {
"minUI5Version": "1.30.0",
"libs": {
"sap.ui.core": {

},
"sap.m": {

},
"sap.ui.layout": {

}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"": {
"dataSource": "ZMM_PR_ITSM_SRV",
"settings": {
"useBatch": false,
"defaultCountMode":"None"
}
}
},
"resources": {
"css": [
{
"uri": "css/style.css"
}
],
"js": [

]
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "ZBRD_PCS_TRC.view",
"controlId": "App",
"controlAggregation": "pages"
},
"routes": [
{
"pattern": "",
"name": "PRC",
"target": "Home"
}
],
"targets": {
"Home": {
"viewName": "Home",
"viewId": "Home",
"viewLevel": 1
}
}
}
}
}

=========

Component.js

sap.ui.define(
[ "sap/ui/core/UIComponent",
"sap/ui/model/json/JSONModel",
"sap/ui/Device",
'ZBRD_PCS_TRC/model/models'],
function(UIComponent,JSONModel,Device,models) {
"use strict";
return UIComponent.extend("ZBRD_PCS_TRC.Component", {

metadata: {
manifest: "json"
},

init : function() {
UIComponent.prototype.init.apply(this, arguments);
this.getRouter().initialize();

// set the device model
this.setModel(models.createDeviceModel(), "device");
}
}

);
}

);

===========

index.html
============
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{"ZBRD_PCS_TRC":"./"}'
data-sap-ui-frameOptions="allow">
</script>


<script>
sap.ui.getCore().attachInit(function() {
new sap.ui.core.ComponentContainer({
name : "ZBRD_PCS_TRC"
}).placeAt("content");
})
</script>

</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>

Tags: sap sap fiori

CRUD Operations in SAPUI5

Post a Comment

Contact form