test ganaral binding(testing )

 

/home/user/projects/project1/webapp/model/record.json:

{

    "text": "outer text",

    "myrecorsd": [

        {

            "text": "text"

        },

        {

            "text": "text2"

        },

        {

            "text": "text3"

        }

    ]

}

/home/user/projects/project1/webapp/view/View1.view.xml:

 <List items="{/myrecorsd}">

    <StandardListItem title="{text}" />

</List>

 <List items="{/myrecorsd}">

    <StandardListItem title="{/text}" />

</List>

<List items="{myrecorsd}">

    <StandardListItem title="{/text}" />

</List>

<List items="{myrecorsd}">

    <StandardListItem title="{text}" />

</List>

/home/user/projects/project1/webapp/controller/View1.controller.js:

  onInit: function () {

                // JSON model first....

                var json = new sap.ui.model.json.JSONModel("model/record.json");

                //Setting model to view...

                this.getView().setModel(json);

                this.getView().bindElement("/");

            }

output:

sap.m.table element binding

 View1.view.xml

<mvc:View controllerName="real.controller.View1"

    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"

     xmlns:f="sap.ui.layout.form"

    xmlns="sap.m">

    <Page id="page" title="{i18n>title}">

        <content>

                      <Table items="{crud>/}"  id="abc" selectionChange="onSelectionChange" mode="SingleSelectLeft"   includeItemInSelection="true">

        <columns>

            <Column>

                <Text text="ID"></Text>

            </Column>

            <Column>

                <Text text="Name"></Text>

            </Column>

            <Column minScreenWidth="Tablet">

                <Text text="City"></Text>

            </Column>

           

        </columns>

        <items>

            <ColumnListItem >

                <cells>

                    <Text text="{crud>ID}"></Text>

                    <Input value="{crud>Name}"></Input>

                    <Text text="{crud>Address/City}"></Text>

                   

                </cells>

            </ColumnListItem>

        </items>

    </Table>  

   

<f:SimpleForm id="SimpleFormDisplay354" editable="true">

  <f:content>

    <Label text="ID" />

    <Input value="{selectedRow>/ID}" width="20%" /> <!-- Bind to "ID" property in the "selectedRow" model -->

    <Label text="Name" width="20%" />

    <Input value="{selectedRow>/Name}" width="20%" /> <!-- Bind to "Name" property in the "selectedRow" model -->

    <Label text="City" />

    <Input value="{selectedRow>/Address/City}" width="20%" /> <!-- Bind to "City" property in the "selectedRow" model -->

  </f:content>

</f:SimpleForm>

                    </content>

    </Page>

</mvc:View>

View1.controller.js

sap.ui.define([

    "sap/ui/core/mvc/Controller",

    "sap/ui/model/json/JSONModel"

],

    /**

     * @param {typeof sap.ui.core.mvc.Controller} Controller

     */

    function (Controller,JSONModel) {

        "use strict";

        return Controller.extend("real.controller.View1", {

            onInit: function () {

                var data =this.getOwnerComponent().getModel();

                var json = new JSONModel();

                     var oThis=this;

                     data.read("/Suppliers",{

                        success: function (oData){

                     

                        json.setData(oData.results);

                        oThis.getView().byId("abc").setModel(json, "crud");

                         },

                         error: function (oData) {

   

                         },

                       

                       

   

                    });

                },

             

onSelectionChange: function(oEvent) {

    var oTable = oEvent.getSource(); // Get the table control

    var aSelectedItems = oTable.getSelectedItems(); // Get the selected items

 

    var oSelectedData;

    if (aSelectedItems.length > 0) {

      oSelectedData = aSelectedItems[0].getBindingContext("crud").getObject();

     

    }

 

    var oForm = this.getView().byId("SimpleFormDisplay354"); // Get the form control by its ID

    oForm.setModel(new sap.ui.model.json.JSONModel(oSelectedData), "selectedRow"); // Set the selected row data as a new model for the form

  }

 

 

                 

         

                });

            })

based on the table selection visible true false in sapui5(using json model)

 

view

     <!-- Button text, also retrieved from the i18n library -->

        text="{i18n>save}" 

        <!-- Name of the function that will be triggered when button is clicked -->

        press="onPressSave" 

        <!-- Determine the visibility of the button using the "visible" property -->

        visible="{json>/visible}" />

<!-- Define another button with emphasized style -->

<Button type="Emphasized" 

        <!-- Tooltip text, retrieved from the i18n library -->

        tooltip="{i18n>delete}" 

        <!-- Button text, also retrieved from the i18n library -->

        text="{i18n>delete}" 

        <!-- Name of the function that will be triggered when button is clicked -->

        press="onPressDelete" 

        <!-- Determine the visibility of the button using the "visible" property -->

        visible="{json>/visible}" />

or 

<!-- This code defines an OverflowToolbar element with a Transparent design -->

<OverflowToolbar design="Transparent">

    <!-- This element is a spacer, used to separate the two buttons -->

    <ToolbarSpacer />

    <!-- This button is an Emphasized type button with a tooltip and text set to internationalized values. 

         It also specifies a function to execute when pressed, and its enabled state is bound to a JSON model property -->

    <Button type="Emphasized" tooltip="{i18n>add}" text="{i18n>save}" press="onPressSave" enabled="{json>/visible}" />

    <!-- This button is similar to the first button, with a tooltip and text set to different internationalized values. 

         It specifies a different function to execute when pressed, and its enabled state is also bound to the same JSON model property -->

    <Button type="Emphasized" tooltip="{i18n>delete}" text="{i18n>delete}" press="onPressDelete" enabled="{json>/visible}" />

</OverflowToolbar>

 <Table id="listTable"  noDataText="{i18n>noresult}" mode="MultiSelect" selectionChange="onSelectionChange"/>

Controller

// Create a new instance of the JSONModel class var jsonmodel = new sap.ui.model.json.JSONModel({ // Property named "visible" set to false visible: false }); // Set the newly created JSON model as the data model for the current view // and give it the name "json" this.getView().setModel(jsonmodel, "json");

// Function that is triggered by a selection change event

onSelectionChange: function (oEvent) {

  // Save a reference to "this" for use within the function

  var that = this;

  

  // Check if there are any selected items in the event source

  if (oEvent.getSource().getSelectedContexts().length > 0) {

    // Set the "visible" property of the "json" model to true

    this.getView().getModel("json").setProperty("/visible", true);

    

    // Uncomment the following lines to show buttons with IDs "asave" and "adelate"

    // this.getView().byId("asave").setVisible(true);

    // this.getView().byId("adelate").setVisible(true);

  }

  else {

    // Uncomment the following lines to hide buttons with IDs "asave" and "adelate"

    // this.getView().byId("asave").setVisible(false);

    // this.getView().byId("adelate").setVisible(false);

    

    // Set the "visible" property of the "json" model to false

    this.getView().getModel("json").setProperty("/visible", false);

  }

},

filterbar sapui5

1.view

  <mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:fb="sap.ui.comp.filterbar" xmlns:ui="sap.ui.table" xmlns:f="sap.f" xmlns:semantic="sap.f.semantic" controllerName=" 123">

    <Page id="_IDGenPage1" titleAlignment="Start" title="errrr" enableScrolling="true" class="sapUiContentPadding">

        <content>

            <fb:FilterBar id="filterbar" reset="onReset" useToolbar="false" search="onFbGoPress" showGoOnFB="true">

                <fb:filterGroupItems>

                    <fb:FilterGroupItem   groupName="filtergrp" name="User" label="{i18n>1w}" visibleInFilterBar="true">

                        <fb:control>

                            <Input id="IP1" />

                        </fb:control>

                    </fb:FilterGroupItem>

                    <fb:FilterGroupItem   groupName="filtergrp" name="Sold" label="{i18n>er}" visibleInFilterBar="true">

                        <fb:control>

                            <Input id="IP2" />

                        </fb:control>

                    </fb:FilterGroupItem>

                    <fb:FilterGroupItem   groupName="filtergrp" name="Name" label="{i18n>gf}" visibleInFilterBar="true">

                        <fb:control>

                            <Input id="IP3" />

                        </fb:control>

                    </fb:FilterGroupItem>

                    <fb:FilterGroupItem   groupName="filtegrp" name="Flag" label="{i18n>gf}" visibleInFilterBar="true">

                        <fb:control>

                            <CheckBox id="CB1"   />

                        </fb:control>

                    </fb:FilterGroupItem>

                    <fb:FilterGroupItem   groupName="filterp" name="Deletion" label="{i18n>gf}" visibleInFilterBar="true">

                        <fb:control>

                            <CheckBox id="CB2"   />

                        </fb:control>

                    </fb:FilterGroupItem>

                    <fb:FilterGroupItem   groupName="filtergrp" name="contractName" label="{i18n>gg}" visibleInFilterBar="true">

                        <fb:control>

                            <!-- <DatePicker id="DP6" change="handleChange" value="{  'type': 'sap.ui.model.type.Date',  'path': '/valueDP6',  'formatOptions': {  'pattern': 'yyyy-MM-dd '    }  }" />

                            -->

                            <DateRangeSelection

                                id="DRS1"

                                placeholder="YYY/MM/DD-YYYY/MM/DD"

                                value="{

                'type': 'sap.ui.model.type.DateInterval',

                'formatOptions': {

                    'pattern': 'yyyy/MM/dd'

                },

                'parts': [

                    {

                        'type': 'sap.ui.model.type.Date',

                        'path': '/start'

                    },

                    {

                        'type': 'sap.ui.model.type.Date',

                        'path': '/end'

                    }

                ]

            }"

                                change="handleChange"

                            />

                        </fb:control>

                    </fb:FilterGroupItem>

                    <fb:FilterGroupItem   groupName="filtergrp" name="rName" label="{i18n>dByID}" visibleInFilterBar="true">

                        <fb:control>

                            <Input id="IP4" />

                        </fb:control>

                    </fb:FilterGroupItem>

                </fb:filterGroupItems>

            </fb:FilterBar>

            <Table id="idTable" items="{crud>/}" paste="onPaste">

                <headerToolbar>

                    <OverflowToolbar  >

                        <Title   text="{i18n>UserPrivileges}"/>

                        <ToolbarSpacer id="_IDGenToolbarSpacer1" />

                        <Button id="_IDGenButton1" text="Add" type="Emphasized" press="onaddpress" />

                    </OverflowToolbar>

                </headerToolbar>

                <columns>

                    <Column  >

                        <Text   text="{i18n>we}" />

                    </Column>

                    <Column  >

                        <Text   text="{i18n>Se}"/>

                    </Column>

                    <Column  >

                        <Text   text="{i18n>See}"/>

                    </Column>

                    <Column  >

                        <Text   text="{i18n>gg}"/>

                    </Column>

                    <Column  >

                        <Text   text="{i18n>gg}"/>

                    </Column>

                    <Column  >

                        <Text   text="{i18n>gg}"   />

                    </Column>

                    <Column  >

                        <Text   text="{i18n>gg}" />

                    </Column>

                    <Column  >

                        <Text   text=" " />

                    </Column>

                </columns>

                <items>

                    <ColumnListItem  >

                        <cells>

                            <Text   text="{crud>gg}" />

                            <Text   text="{crud>g}" />

                            <Text   text="{crud>g}" />

                            <Text   text="{crud>g}" />

                            <Text   text="{crud>Dg}" />

                            <Text   text="{path:'crud>f',   type: 'sap.ui.model.type.DateTime' ,formatOptions: {

                    pattern: 'yyyy/MM/dd HH:mm:ss'

                }}" />

                            <Text id="_IDGenText15" text="{crud>n}" />

 <Button id="_IDGenButton2" press="onbuttonpress" icon="sap-icon://delete" visible="{=${crud>DELFLAG}==='X'?false:true}"/>

                        </cells>

                    </ColumnListItem>

                </items>

            </Table>

        </content>

        <footer>

            <OverflowToolbar id="otbFooter">

                <ToolbarSpacer id="_IDGenToolbarSpacer2" />

                <Button id="_IDGenButton3" text="Save" type="Emphasized" press="onSave" />

            </OverflowToolbar>

        </footer>

    </Page>

</mvc:View>

        </content >

    </Page>

</mvc:View>

2.controller

  onFbGoPress: function () {

                var ui1 = this.getView().byId("IP1").getValue();

                var stc1 = this.getView().byId("IP2").getValue();

                var stpn1 = this.getView().byId("IP3").getValue();

                var stdf1 = this.getView().byId("CB1").getSelected();

                var df1 = this.getView().byId("CB2").getSelected();

                var ubi1 = this.getView().byId("IP4").getValue();

                var frmDt = this.getView().byId("DRS1").getFrom();

                var toDt = this.getView().byId("DRS1").getTo();

                var ofilters = [];

                if (this.getView().byId("DRS1").getValue() != "" && this.getView().byId("DRS1").getValue() != " ") {

                    ofilters.push(new Filter("REGDATE", FilterOperator.GE, frmDt));

                    ofilters.push(new Filter("REGDATE", FilterOperator.LE, toDt));

                }

                if (ui1 != "") {

                    ofilters.push(new Filter("fdd", FilterOperator.Contains, ui1));

                }

                if (stc1 != "") {

                    ofilters.push(new Filter("ffff", FilterOperator.Contains, stc1));

                }

                if (stpn1 != "") {

                    ofilters.push(new Filter("f_NuM", FilterOperator.Contains, stpn1));

                }

                if (stdf1 != false) {

                    ofilters.push(new Filter("fFLG", FilterOperator.EQ, "X"));

                }

                if (df1 != false) {

                    ofilters.push(new Filter("ffG", FilterOperator.EQ, "X"));

                }

                if (ubi1 != "") {

                    ofilters.push(new Filter("UPDUfffSER", FilterOperator.Contains, ubi1));

                }

                var id = this.getView().byId("idTable");

                var oBinding = id.getBinding("items");

                oBinding.filter(new Filter(ofilters, true));

            }

CRUD OPerations

 These are examples for CRUD OPerations

var oModel = this.getView().getModel();

Create Operation
====================================================================
var oPayload = {
"name":"name";
};


            oModel.create("/SampleSet", oPayload, {
method: "POST",
success: function (oData, oResponse) {

},
error: function (error, resp) {

}
});

Update  Operation
====================================================================

var oPayload = {
"name":"name";
};
var sPath =  "/SampleSet(SampleNumber='2084093745')";
oModel.update(sPath, oPayload{
method: "PUT",
success: function () {

},
error: function (oError) {

}
});



Read operation
====================================================================
var oName = "Raj"
var aFilter = [
new sap.ui.model.filter({"Name","EQ",oName})];
oModel.read("/sampleSet", {
filters: aFilter,
success: function (oData) {

},
error: function (oError) {

}
});

Delete Operation
====================================================================

var sPath =  "/SampleSet(SampleNumber='2084093745')";
oModel.remove(sPath, {
success: function () {

},
error: function (oError) {

}
});



Read operation
====================================================================
var oName = "Raj"
var aFilter = [
new sap.ui.model.filter({"Name","EQ",oName})];
oModel.read("/sampleSet", {
filters: aFilter,
success: function (oData) {

},
error: function (oError) {

}
});

Delete Operation
====================================================================

var sPath =  "/SampleSet(SampleNumber='2084093745')";
oModel.remove(sPath, {
success: function () {

},
error: function (oError) {

}
});

element binding sap.ui.table

 View

<mvc:View

    controllerName="projecteb.controller.View1"

    xmlns:ui="sap.ui.table"

    xmlns:mvc="sap.ui.core.mvc"

    displayBlock="true"

    xmlns="sap.m"

         

    xmlns:f="sap.ui.layout.form"

         

>

    <Shell id="shell">

        <App id="app">

            <pages>

                <Page id="page" title="{i18n>title}">

                    <content >

                  <ui:Table     rows="{/Customers}"  selectionMode="Single"   

 rowSelectionChange="onrowSelectionChange" >

                    <ui:columns>

                        <ui:Column width="11rem">

                        <Label text="CustomerID" />

                        <ui:template>

                            <Text text="{CustomerID}"   />

                        </ui:template>

                    </ui:Column>

                    <ui:Column width="11rem">

                        <Label text="CompanyName" />

                        <ui:template>

                            <Text text="{CompanyName}"   />

                        </ui:template>

                    </ui:Column>

                    <ui:Column width="11rem">

                        <Label text="ContactTitle" />

                        <ui:template>

                            <Text text="{ContactTitle}"   />

                        </ui:template>

                    </ui:Column>

                    <ui:Column width="11rem">

                        <Label text="ContactName" />

                        <ui:template>

                            <Text text="{ContactName}"   />

                        </ui:template>

                    </ui:Column>

                        </ui:columns>

                  </ui:Table>

                    <f:SimpleForm id="SimpleFormDisplay354"

            editable="true" >

            <f:content>

                <Label text="CustomerID" />

                <Input id="CustomerID" value="{CustomerID}" />

                <Label text="CompanyName" />

                <Input value="{CompanyName} " />

                <Label text="ContactTitle" />

                <Input value="{ContactTitle}  " />

                <Label text="ContactName" />

                <Input id="ContactName" value="{ContactName}" />

            </f:content>

        </f:SimpleForm>

                    </content >

                </Page>

            </pages>

        </App>

    </Shell>

</mvc:View>

Controller:

sap.ui.define([

    "sap/ui/core/mvc/Controller"

],

    /**

     * @param {typeof sap.ui.core.mvc.Controller} Controller

     */

    function (Controller) {

        "use strict";

        return Controller.extend("projecteb.controller.View1", {

            onInit: function () {},

            onrowSelectionChange: function (oEvent) {

              var oRow = oEvent.getParameter("rowContext");

              var sPath = oRow.getPath();

              var oFORM = this.getView().byId("SimpleFormDisplay354");

              oFORM.bindElement(sPath)

            }

        });

    });

or

 onInit: function () {},

            onrowSelectionChange: function (oEvent) {

            //   var oRow = oEvent.getParameter("rowContext");

            //   var sPath = oRow.getPath();

            //   var oFORM = this.getView().byId("SimpleFormDisplay354");

            //   oFORM.bindElement(sPath)

            var oRow = oEvent.getParameter("rowContext");

            var oFORM = this.getView().byId("SimpleFormDisplay354");

            oFORM.bindElement(oRow.sPath)

            }

        });

    });