How to add footer with few buttons in Eclipse Juno for SAPUI5 application

[Former Member]

Hello ,

i have created an application in SAPUI5 with Eclipse Juno, now i want to add a footer with few buttons. i am sharing 2 images for your kind considerations , image 1 consist of what i have developed , image2 consist of what i want to design ?

[karthikarjun]

Hi Pavan,

Will this help? http://jsbin.com/suqugi/edit?html,js,output

Regards,

KA

[Former Member]

Hello KA,

sending my code.

sap.ui.jsview("task3.page1", {

  /** Specifies the Controller belonging to this View.

  * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.

  * @memberOf task3.page1

  */

  getControllerName : function() {

  return "task3.page1";

  },

  /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

  * Since the Controller is given to this method, its event handlers can be attached right away.

  * @memberOf task3.page1

  */

  createContent : function(oController) {

  var vData=[

            {assID:"EM1234", name:"kishan", linkText:"crave Technology Solutions", gender:"Male", mobile:"9934307162", rating:5},

            {assID:"EM123456", name:"Bharath S", linkText:"crave Technology Solutions", gender:"Male", mobile:"9934307162", rating:5},

            {assID:"EM263521", name:"Arun M", linkText:"crave Technology Solutions", href:"http://www.cognizant.com", gender:"Male", mobile:"9786721460", rating:3},

            {assID:"EM323455", name:"Anitha", linkText:"Cognizant Technology Solutions", href:"http://www.cognizant.com", gender:"Female", mobile:"9524396759", rating:4},

            {assID:"EM237652", name:"Ganesh", linkText:"Cognizant Technology Solutions", href:"http://www.cognizant.com", gender:"Male", mobile:"9876543210", rating:1},

            {assID:"EM398454", name:"Ajai", linkText:"Cognizant Technology Solutions", href:"http://www.cognizant.com", gender:"Male", mobile:"9576113218", rating:4},

            {assID:"EM348092", name:"Pranav", linkText:"Cognizant Technology Solutions", href:"http://www.cognizant.com", gender:"Male", mobile:"9576113218", rating:5}

           ];

  var oTable = new sap.ui.table.Table({

                                      // Displayed as the heading of the table

     visibleRowCount: 8,                                           // How much rows you want to display in the table

     selectionMode: sap.ui.table.SelectionMode.Single, //Use Singe or Multi

     navigationMode: sap.ui.table.NavigationMode.Paginator, //Paginator or Scrollbar

     fixedColumnCount: 7,                     // Freezes the number of columns

     enableColumnReordering:true,       // Allows you to drag and drop the column and reorder the position of the column

     width:"1024px"                              // width of the table

   });

     oTable.addColumn(new sap.ui.table.Column({

     label: new sap.ui.commons.Label({text: "Name"}),

     template: new sap.ui.commons.TextField().bindProperty("value", "assID"),

     sortProperty: "assID",

     filterProperty: "assID",

     width: "125px"

  }));

     oTable.addColumn(new sap.ui.table.Column({

     label: new sap.ui.commons.Label({text: "Discription"}),

     template: new sap.ui.commons.TextField().bindProperty("value", "name"),

     sortProperty: "name",

     filterProperty: "name",

     width: "125px"

  }));

     oTable.addColumn(new sap.ui.table.Column({

     label: new sap.ui.commons.Label({text: "MasterReading"}),

     template: new sap.ui.commons.TextField().bindProperty("value", "name"),

     sortProperty: "name",

     filterProperty: "name",

     width: "125px"

  }));

     oTable.addColumn(new sap.ui.table.Column({

     label: new sap.ui.commons.Label({text: "Value"}),

     template: new sap.ui.commons.TextField().bindProperty("value", "name"),

     sortProperty: "name",

     filterProperty: "name",

     width: "125px"

  }));

     oTable.addColumn(new sap.ui.table.Column({

          label: new sap.ui.commons.Label({text: "Gender"}),

          template: new sap.ui.commons.ComboBox(

                         {items: [new sap.ui.core.ListItem({text: "Female"}),

                         new sap.ui.core.ListItem({text: "Male"})]}).bindProperty("value","gender"),

          sortProperty: "gender",

          filterProperty: "gender",

          width: "75px"

         }));

     oTable.addColumn(new sap.ui.table.Column({

     label: new sap.ui.commons.Label({text: "Details"}),

     template: new sap.ui.commons.TextField().bindProperty("value", "name"),

     sortProperty: "name",

     filterProperty: "name",

     width: "125px"

  }));

//    oTable.addColumn(new sap.ui.table.Column({

//    label: new sap.ui.commons.Label({text: "Details"}),

//    template: new sap.ui.commons.Button().bindProperty("value", "name2"),

//    sortProperty: "name2",

//    filterProperty: "name2",

//    width: "125px"

// }));

//   

     oTable.addColumn(new sap.ui.table.Column({ 

       label: new sap.ui.commons.Label({text: "Confirmation"}), 

       width: "125px",

       template: new sap.ui.layout.HorizontalLayout({ 

         content : [ 

           new sap.ui.commons.TextView({ 

             textAlign: sap.ui.core.TextAlign.Left, 

             visible : false

           }), 

           new sap.ui.commons.Button({ 

             text : "DETAILS", 

             visible : true

           })

         ] 

       })

      }));

   var oModel = new sap.ui.model.json.JSONModel();        // created a JSON model     

      oModel.setData({modelData: vData});                              // Set the data to the model using the JSON object defined already

      oTable.setModel(oModel);                                                                                 

      oTable.bindRows("/modelData");                              // binding all the rows into the model

      oTable.sort(oTable.getColumns()[0]);

      page = new sap.m.Page({

       title : "My Table",

       content : [new sap.m.Table()],

       footer : new sap.m.Bar({

         contentRight : [

           new sap.m.Button({

           text : "Order",

           type : "Emphasized"

           }),

           new sap.m.Button({

           text : "Start",

           type : "Emphasized"

           }),

           new sap.m.Button({

           text : "Submit",

           type : "Emphasized"

           }),

           new sap.m.Button({

           text : "Approve",

           type : "Emphasized"

           }),

           new sap.m.Button({

           text : "ER",

           type : "Emphasized"

           }),

           new sap.m.Button({

           text : "Synchoniz",

           type : "Emphasized"

           })

         ]

       })

      });

      page = new sap.m.Page({

       title : "My Table",

       content : [new sap.m.Table()],

       footer : new sap.m.Bar({

         contentRight : [

           new sap.m.Button({

           text : "Order",

           type : "Emphasized"

           }),

           new sap.m.Button({

           text : "Start",

           type : "Emphasized"

           }),

           new sap.m.Button({

           text : "Submit",

           type : "Emphasized"

           }),

           new sap.m.Button({

           text : "Approve",

           type : "Emphasized"

           }),

           new sap.m.Button({

           text : "ER",

           type : "Emphasized"

           }),

           new sap.m.Button({

           text : "Synchoniz",

           type : "Emphasized"

           })

         ]

       })

      });

  return oTable;

  return oModel;

  return footer;

  }

});

please tell me where to put footer code exact in  this code.

Thanks in advance.

[saivellanki]

Hi Pavan,

Will this help? Plunker - PageFooter

Regards,

Sai Vellanki.

[Former Member]

Thank you sir for the help. But i want to add shell also in this screen, please tell how to add the shell in the screen.

Thanks in advance.

[former_member185414]

Hello Pavan,

Try wrapping the page into the app aggregation of shell container.

Generally we use XML views where we instantiate the component controller in a shell container in apps where we need shell features like letter boxing, etc.

BR.

[saivellanki]

Create a component for shell: Plunker - Shell - Page

Regards,

Sai Vellanki.

[vijay_kumar49]

Pavan

Please check this example code. it may be useful.

XML Code

<footer>
   <OverflowToolbar id="otbFooter">
   <ToolbarSpacer/>
   <Button type="Accept" text="Accept">
   <layoutData><OverflowToolbarLayoutData moveToOverflow="false" /></layoutData>
   </Button>
   <Button type="Reject" text="Reject">
   <layoutData><OverflowToolbarLayoutData moveToOverflow="false" /></layoutData>
   </Button>
   <OverflowToolbarButton text="Delete" icon="sap-icon://delete"/>
   <OverflowToolbarButton text="Edit" icon="sap-icon://edit"/>
   <OverflowToolbarButton text="Add" icon="sap-icon://add"/>
   <OverflowToolbarButton text="Favorite" icon="sap-icon://favorite"/>
   <OverflowToolbarButton text="Flag" icon="sap-icon://flag"/>

   </OverflowToolbar>
</footer>

JavaScript Code

//create an emphasized button
var oButton4 = new sap.ui.commons.Button({
text : "Emphasized",
style: sap.ui.commons.ButtonStyle.Emph,
press : function() {alert('Alert from ' + oButton4.getText());}
}).placeAt("sample4");

//create an accept button
var oButton5 = new sap.ui.commons.Button({
text : "Accept",
style: sap.ui.commons.ButtonStyle.Accept,
press : function() {alert('Alert from ' + oButton5.getText());}
}).placeAt("sample4");

//create a reject button
var oButton6 = new sap.ui.commons.Button({
text : "Reject",
style: sap.ui.commons.ButtonStyle.Reject,
press : function() {alert('Alert from ' + oButton6.getText());}
}).placeAt("sample4");

Kindly let me know if you need any more information.