CRUD Operations in SAPUI5

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>
    <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

    <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>








Post a Comment

Previous Post Next Post