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)

            }

        });

    });

sapui5 read operation

 view

  <content>

                      <Table items="{/Employees}"  >

        <columns>

            <Column>

                <Text text="EmployeeID"></Text>

            </Column>

            <Column>

                <Text text="LastName"></Text>

            </Column>

            <Column minScreenWidth="Tablet">

                <Text text="Address"></Text>

            </Column>

            <Column minScreenWidth="Tablet" demandPopin="true">

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

            </Column>

        </columns>

        <items>

            <ColumnListItem>

                <cells>

                    <Text text="{EmployeeID}"></Text>

                    <Input value="{LastName}"></Input>

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

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

                </cells>

            </ColumnListItem>

        </items>

    </Table>  

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

     <Table items="{crud>/}" id="abc" >

        <columns>

            <Column>

                <Text text="EmployeeID"></Text>

            </Column>

            <Column>

                <Text text="LastName"></Text>

            </Column>

            <Column minScreenWidth="Tablet">

                <Text text="Title"></Text>

            </Column>

            <Column minScreenWidth="Tablet" demandPopin="true">

                <Text text="FirstName"></Text>

            </Column>

        </columns>

        <items>

            <ColumnListItem>

                <cells>

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

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

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

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

                </cells>

            </ColumnListItem>

        </items>

    </Table>  

                    </content>

Controller

sap.ui.define([

    "sap/ui/core/mvc/Controller"

],

    /**

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

     */

    function (Controller) {

        "use strict";

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

            onInit: function () {

                //     var oModel = new sap.ui.model.odata.v2.ODataModel("/V2/Northwind/Northwind.svc");

                //     var oThis = this;

                //     oModel.read("/Employees(1)", {

                //         success: function (oData) {

    

                //             var ocrud = new sap.ui.model.json.JSONModel({

                //                 Country: oData.Country

    

                //             });

    

                //             oThis.getView().setModel(ocrud, "crud");

                //         },

                //         error: function (oData) {

    

                // }

how to get a model in a controller

 // var data =this.getOwnerComponent().getModel("raja");

or

var data = this.getView().getModel("raja" );

var json = new JSONModel();

var oThis=this;

data.read("/Customers",{

     success: function (oData){

     debugger;

json.setData(oData.results);

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

}

                var oModel = new sap.ui.model.odata.v2.ODataModel("/V2/Northwind/Northwind.svc");

                var ocrud = new sap.ui.model.json.JSONModel();

                var oThis = this;

                oModel.read("/Employees", {

                    success: function (oData) {

    

                       ocrud.setData(oData.results);

    

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

                    },

                    error: function (oData) {

    

            }

    

            });

        },

        });

    })

    

details about tablets

https://www.tabletwise.com/

m.table js

table.view.js:
sap.ui.jsview("m.table.table", {
getControllerName : function() {
return "m.table.table";
},
createContent : function(oController) {
var oModel = new sap.ui.model.json.JSONModel([
                                               { value: 50, name: "ramu" },
                                               { value: 60, name: "ravi" },
                                               { value: 70, name: "raju" },
                                               { value: 80, name: "rao" }
                                             ]);

                                             var oTable = new sap.m.Table({
                                            id:"otable",
                                               columns: [
                                                 new sap.m.Column({ header: new sap.m.Label({text: "Name"})}),
                                                 new sap.m.Column({ header: new sap.m.Label({text: "Value"})})
                                               ],
                                               items: {
                                                 path: "/",
                                                 template: new sap.m.ColumnListItem({
                                                   cells: [
                                                     new sap.m.Text({ text: "{name}" }),
                                                     new sap.m.Text({ text: "{value}" })
                                                   
                                                   ]
                                                 })
                                               },
                                             });
                                           
                                             oTable.setModel(oModel);
                                             var btn1 =new sap.m.Button({
                                            id:"bt",
                              text:"button2",
                              press:function(){
                              oTable.removeColumn("value");
                              }
                             
                              }).addStyleClass("123");

return new sap.m.Page({
title: "Title",
showHeader:false ,
content: [
              oTable,btn1
]
});
}

});

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

</script>

<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

<script>

sap.ui.localResources("m.table");

var app = new sap.m.App({initialPage:"idtable1"});

var page = sap.ui.view({id:"idtable1", viewName:"m.table.table", type:sap.ui.core.mvc.ViewType.JS});

app.addPage(page);

app.placeAt("content");

</script>

<style>

#otable{

background-color: yellow;

 

}

.123{

background-color: dodgerblue;

justify-content:flex-end;

}

</style>

</head>

<body class="sapUiBody" role="application">

<div id="content"></div>

</body>

</html>

output: