add, edit and delete operations with table sapui5

How to do add, edit and delete operations with table ?



view. xml


<Table id="tableId2" items="{/omg2}" mode="MultiSelect">
<headerToolbar>
<Toolbar class="uploadColr ">
<Label text="Root Cause's" design="Bold"
class="clFontSize" />
<ToolbarSpacer />
<Button icon="sap-icon://add" press="onRootAdd"
type="Accept" visible="true" tooltip="Add Item"></Button>
<Button icon="sap-icon://less" press="onRootdelete"
type="Accept" visible="true" tooltip="Add Item"></Button>
</Toolbar>
</headerToolbar>
<columns>
<Column width="20%">
<Text text="Code" />
</Column>
<Column width="70%">
<Text text="Root Cause's" />
</Column>
<Column>
<Text text=""></Text>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>

<Input value="{c1}" editable="{editable}"></Input>

<Input value="{c2}" editable="{editable}"></Input>

<l:HorizontalLayout>
<Button icon="sap-icon://edit" press="onRootedit"
class="sapUiTinyMarginBegin" />

</l:HorizontalLayout>

</cells>
</ColumnListItem>
</items>
</Table>




controller.js

first i set one empty model for the same :


var a2 = this.getView().byId("tableId2");
var b2 = new sap.ui.model.json.JSONModel("model/data.json");
a2.setModel(b2);


i open one fragment here name with rootadd to add rows in my table :

onRootAdd : function(oEvent) {
var oFilterFrag;
if (!this.oFilterFrag)
this.oFilterFrag = sap.ui.xmlfragment("ESQA_SUPP.view.rootadd",this);
this.oFilterFrag.open();
sap.ui.getCore().byId("rr1").setValue("")
},

onRootsave : function() {
var val1 = sap.ui.getCore().byId("r1").mProperties.value
var val2 = sap.ui.getCore().byId("rr1").mProperties.value
debugger;
this.getView().byId("tableId2").getModel().oData.omg2
.push({
"c1" : val1,
"c2" : val2,
"editable" : false
});
debugger;
this.getView().byId("tableId2").getModel().refresh()
this.getView().byId("tableId2").getModel().updateBindings(true)
        this.oFilterFrag.destroy();
this.oFilterFrag = undefined;
},

in the rootsave i am taking valur of r1 and rr1 from fragment and adding this to val1 and val2
after that i am pushing this values in the one empty json file using push(). in that i written editable false also why because of m doing something new with this model..
what it is showen below;

onRootedit : function(oEvent) {
debugger;
var oTable = this.getView().byId("tableId2");
var oModel2 = oTable.getModel().oData.omg2;
oEvent.getSource().getBindingContext().getObject().editable = true;
debugger;
this.getView().byId("tableId2").getModel().refresh()
this.getView().byId("tableId2")
.getModel().updateBindings(true)
},

on root edit function i am editing the same row. what i m exactly doing in that ?
i m doing editing of the row using the model ?
how?
in the save i m push the value of editable false right?
in the onedit i m push the value of edit to true. in the view part i bind the editing value tehrefore its changes therefore this fields become editable.



how to delete particular row ? and delete icon in headertoolbar 

onRootdelete : function(oEvent) {

var oTable = this.getView().byId("tableId2");
var oModel2 = oTable.getModel().oData.omg2;

var aContexts = oTable.getSelectedContexts();
var aRows = oModel2;

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

this.getView().byId("tableId2").getModel().refresh()
        this.getView().byId("tableId2").getModel().updateBindings(true)


first set mode of your table to multiselect. why its required ?
if you not set mode to multiselect then its become non selectable row threfore mode is multiselectable required.

after that we find the index of particular row using the OEvent. and after that we splice the row which is selected.




what you do if requirement changes and client say's i want this delete buton in row not in header ?

at the same time mode multiselect method gets fail. then what you do?

dont take tens guys.. i here..


 first change the view of your table to folowing view :


<Table id="tableId2" items="{/omg2}" mode="MultiSelect">
<headerToolbar>
<Toolbar class="uploadColr ">
<Label text="Root Cause's" design="Bold"
class="clFontSize" />
<ToolbarSpacer />
<Button icon="sap-icon://add" press="onRootAdd"
type="Accept" visible="true" tooltip="Add Item"></Button>

</Toolbar>
</headerToolbar>
<columns>
<Column width="20%">
<Text text="Code" />
</Column>
<Column width="70%">
<Text text="Root Cause's" />
</Column>
<Column>
<Text text=""></Text>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>

<Input value="{c1}" editable="{editable}"></Input>

<Input value="{c2}" editable="{editable}"></Input>

<l:HorizontalLayout>
<Button icon="sap-icon://edit" press="onRootedit"
class="sapUiTinyMarginBegin" />

<Button icon="sap-icon://edit"                        press="onRootdelete"
class="sapUiTinyMarginBegin" />

</l:HorizontalLayout>

</cells>
</ColumnListItem>
</items>
</Table>

in that i just added one more button below edit button.


onRootdelete : function(){

var vPath = oEvent.getSource().getBindingContext().getPath().split("/")[2]
var oTabModel = this.getView().byId("tableId2").getModel().oData["omg2"]
var oTabData = this.getView().byId("tableId2").getModel().getData()["omg2"]
oTabData.splice(vPath, 1);
this.getView().byId("tableId2").getModel().refresh();
this.getView().byId("tableId2").getModel().updateBindings(true);

}

in the above function in the vPath i find the path of data first with index number.then i find the oTabData. in the oTabData i got the full data of that particular row.
then i splice the particular row using the oTabData.splice(vPath, 1); and then i refresh and update the json model

every time refresh() and updateBindings(true) required. dont forgot it.


i attatched fragment and data.json file below.. use it..


rootadd.fragment.xml

<core:FragmentDefinition xmlns="sap.m"
xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form"
xmlns:core="sap.ui.core">

<Dialog title="Add Root Causes">

<f:SimpleForm id="SimpleFormToolbar" editable="true"
layout="ResponsiveGridLayout" labelSpanXL="4" labelSpanL="4"
labelSpanM="12" labelSpanS="12" adjustLabelSpan="false"
emptySpanXL="0" emptySpanL="0" emptySpanM="0" emptySpanS="0"
columnsXL="1" columnsL="1" columnsM="1" maxContainerCols="3"
singleContainerFullSize="false" ariaLabelledBy="Title1">
<f:content>

<core:Title text="" />

<Label text="Root Causes">
</Label>
<l:VerticalLayout  >
<l:content>
<ActionSelect id="r1" class="compact" items="{/data1}">
<items>
<core:Item  key="{column}" text="code :" />
</items>
</ActionSelect>
</l:content>
</l:VerticalLayout>
<TextArea placeholder="Root causes " id="rr1" maxLength="60" />
</f:content>
</f:SimpleForm>
<beginButton>
<Button text="Save" type="Accept" press="onRootsave" />
</beginButton>
<endButton>
<Button text="CANCEL" type="Accept" press="onCancel1" />
</endButton>

</Dialog>
</core:FragmentDefinition>


data.json

{
"omg2":[
]

}

this data json file contain these empty json file. please check and questions me..!


thanks!







Post a Comment

Previous Post Next Post