How to change corresponding button image???

[Former Member]

I am trying two button one EDIT second SAVE two buttons are taken in images , my concept  save button is a disabled image ,nothing should happen on click of it , when edit is click  save image should be changed to green save button. how to achieving this???

[saivellanki · Accepted solution]

Hi Nagaraju,

Play with the button properties - enabled and style. Check this sample: JS Bin - Collaborative JavaScript Debugging

Regards,

Sai Vellanki.

[Former Member · Accepted solution]

thank you for your response, but i am declaring function in view and function definition writing in controller, how to write in controller???

[saivellanki · Accepted solution]

Using MVC: JS Bin - Collaborative JavaScript Debugging

Regards,

Sai Vellanki.

[Former Member · Accepted solution]

i am trying below but not working

FIRST.view.js

sap.ui.jsview("inline.FIRST", {

  /** 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 inline.FIRST

  */

  getControllerName : function() {

  return "inline.FIRST";

  },

  /** 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 inline.FIRST

  */

  createContent : function(oController) {

  var aData = [

               {ID: 1, Name: "Al", Age: 32, Salary: 100000},

               {ID: 2, Name: "Andy", Age: 28, Salary: 75000},

               {ID: 3, Name: "Anita", Age:25, Salary: 45000},

               {ID: 4, Name: "Doris", Age: 24, Salary: 35000},

               {ID: 5, Name: "Doris", Age: 22, Salary: 15000}

               ];

       var oTable2 = new sap.ui.table.Table("tableId",{

       title: "Table with fixed columns Example",

       visibleRowCount: 7,

       });

       //Define the columns and the control templates to be used

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

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

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

      content : [ 

  new sap.ui.commons.Button("oEditBtn",{

         title: "EDIT",

         icon: "images/edit.png",

         press: function(oEvent) {oController.Edit(oEvent); }

  }),

  new sap.ui.commons.Button("oSaveBtn",{

         title: "SAVE",

         icon: "images/save.png",

         enabled:false,

         press: function(oEvent) {oController.Save(oEvent); }

  })

       ]

  }),

  width: "200px"

  }));

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

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

       template: new sap.ui.commons.TextView().bindProperty("text", "ID"),

       sortProperty: "ID",

       filterProperty: "ID",

       width: "200px"

       }));

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

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

       template: new sap.ui.commons.TextField({editable:false}).bindProperty("value", "Name"),

       sortProperty: "Name",

       filterProperty: "Name",

       width: "200px"

       }));

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

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

       template: new sap.ui.commons.TextField({editable:false}).bindProperty("value", "Age"),

       sortProperty: "Age",

       filterProperty: "Age",

       width: "200px"

       }));

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

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

       template: new sap.ui.commons.TextField({editable:false}).bindProperty("value", "Salary"),

       sortProperty: "Salary",

       filterProperty: "Salary",

       width: "400px"

       }));

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

       oModel2.setData({modelData: aData});

       oTable2.setModel(oModel2);

       oTable2.bindRows("/modelData");

       var ele=new sap.ui.layout.VerticalLayout({content:[oTable2]});

       return ele;

       }

     });

FIRST.controller.js

sap.ui.controller("inline.FIRST", {

/**

* Called when a controller is instantiated and its View controls (if available) are already created.

* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.

* @memberOf inline.FIRST

*/

// onInit: function() {

//

// },

/**

* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered

* (NOT before the first rendering! onInit() is used for that one!).

* @memberOf inline.FIRST

*/

// onBeforeRendering: function() {

//

// },

/**

* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.

* This hook is the same one that SAPUI5 controls get after being rendered.

* @memberOf inline.FIRST

*/

// onAfterRendering: function() {

//

// },

/**

* Called when the Controller is destroyed. Use this one to free resources and finalize activities.

* @memberOf inline.FIRST

*/

// onExit: function() {

//

// }

Edit:function(oEvent){

  var oSaveButton = sap.ui.getCore().byId("oSaveBtn");

  oSaveButton.setEnabled(true);

  oSaveButton.setStyle("Accept");

    var celID = oEvent.getSource().getParent().getParent().getId() +"-col2";

    var tdCell= document.getElementById(celID);

    console.log(tdCell);

    var inputF= tdCell.getElementsByTagName("input");

    console.log(inputF);

     inputF[0].readOnly = false;

            },

Save:function(oEvent){

    var celID = oEvent.getSource().getParent().getParent().getId() +"-col2";

    var tdCell= document.getElementById(celID);

    console.log(tdCell);

    var inputF= tdCell.getElementsByTagName("input");

    console.log(inputF);

   var name= inputF[0].value;

   console.log(name);

   alert("Save Name is  :   "+name);

     inputF[0].readOnly = true;

            }

   });

[saivellanki · Accepted solution]

Plunker

Regards,

Sai Vellanki.

[Former Member · Accepted solution]

i want which row select edit button that row save image editable, but the above code i am select next row edit button the above save image is also in editable corresponding edit button save images also editable mode,but i want which edit button i am select that corresponding save image is only editable mode reaming are in false 

[saivellanki · Accepted solution]

Plunk Edited: Plunker

Regards,

Sai Vellanki.

[Former Member · Accepted solution]

the above example i am taken save button as two images one is black , second is green. In enabled mode save images is black , i am click edit button the save button image change green image how to achieving this???

[former_member182862 · Accepted solution]

Here is what I have modified from Sai example.

Using another model to achieve this.

JS Bin - Collaborative JavaScript Debugging

thanks

-D

[Former Member · Accepted solution]

please give me the above  example given to in detail in mvc strcture

[former_member182862 · Accepted solution]

And this is spoon feeding.

You need to understand the solution and then do it yourself 🙂

[Former Member · Accepted solution]

ok, thank you for given valuable suggestion

[saivellanki · Accepted solution]

Perfect Sample Dennis!

Regards,

Sai Vellanki.

[Former Member · Accepted solution]

yes but how to write in mvc???

[former_member182862 · Accepted solution]

Again, you have to do some work. Show us what you have tried.
Come On, you can do it if you try.

-D

[Former Member · Accepted solution]

i am writing below code, what is i need that is writing in comments,please check it

image.view.js

sap.ui.jsview("image_change.image", {

  /** 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 image_change.image

  */

  getControllerName : function() {

  return "image_change.image";

  },

  /** 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 image_change.image

  */

  createContent : function(oController) {

   var aData = [

                {ID: 1, Name: "Al", Age: 32, Salary: 100000},

                {ID: 2, Name: "Andy", Age: 28, Salary: 75000},

                {ID: 3, Name: "Anita", Age:25, Salary: 45000},

                {ID: 4, Name: "Doris", Age: 24, Salary: 35000},

                {ID: 5, Name: "Doris", Age: 22, Salary: 15000}

                ];

        var oTable2 = new sap.ui.table.Table("tableId",{

        title: "Table with fixed columns Example",

        visibleRowCount: 7,

        });

        //Define the columns and the control templates to be used

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

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

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

       content : [

   new sap.ui.commons.Button("oEditBtn",{

          title: "EDIT",

          icon: "images/edit.png",

          press: function(oEvent) {oController.Edit(oEvent); }

   }),

   new sap.ui.commons.Button("oSaveBtn",{

          title: "SAVE",

          icon: "images/saveDisable.png",

          enabled:false,

          press: function(oEvent) {oController.Save(oEvent); }

   })

        ]

   }),

   width: "200px"

   }));

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

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

        template: new sap.ui.commons.TextView().bindProperty("text", "ID"),

        sortProperty: "ID",

        filterProperty: "ID",

        width: "200px"

        }));

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

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

        template: new sap.ui.commons.TextField({editable:false}).bindProperty("value", "Name"),

        sortProperty: "Name",

        filterProperty: "Name",

        width: "200px"

        }));

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

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

        template: new sap.ui.commons.TextField({editable:false}).bindProperty("value", "Age"),

        sortProperty: "Age",

        filterProperty: "Age",

        width: "200px"

        }));

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

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

        template: new sap.ui.commons.TextField({editable:false}).bindProperty("value", "Salary"),

        sortProperty: "Salary",

        filterProperty: "Salary",

        width: "400px"

        }));

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

        oModel2.setData({modelData: aData});

        oTable2.setModel(oModel2);

        oTable2.bindRows("/modelData");

        var ele=new sap.ui.layout.VerticalLayout({content:[oTable2]});

        return ele;

        }

      });

image.controller.js

sap.ui.controller("image_change.image", {

/**

* Called when a controller is instantiated and its View controls (if available) are already created.

* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.

* @memberOf image_change.image

*/

// onInit: function() {

//

// },

/**

* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered

* (NOT before the first rendering! onInit() is used for that one!).

* @memberOf image_change.image

*/

// onBeforeRendering: function() {

//

// },

/**

* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.

* This hook is the same one that SAPUI5 controls get after being rendered.

* @memberOf image_change.image

*/

// onAfterRendering: function() {

//

// },

/**

* Called when the Controller is destroyed. Use this one to free resources and finalize activities.

* @memberOf image_change.image

*/

// onExit: function() {

//

// }

  Edit:function(oEvent){

  var oTable = sap.ui.getCore().byId("tableId");

  var oRows = oTable.getRows();

  for(var i=0;i<oRows.length;i++){

    var oCell = oRows[i].getCells()[0];

    var oSaveBtn = oCell.getContent()[1];

    oSaveBtn.setEnabled(false);

    oSaveBtn.setStyle("Default");  //images/saveDisable.png

  }

   var oCell = oEvent.getSource().getParent();

   var oSaveButton = oCell.getContent()[1];

   oSaveButton.setEnabled(true);

  oSaveButton.setStyle("Accept");  //images/save.png

     var celID = oEvent.getSource().getParent().getParent().getId() +"-col2";

     var tdCell= document.getElementById(celID);

     console.log(tdCell);

     var inputF= tdCell.getElementsByTagName("input");

     console.log(inputF);

     inputF[0].readOnly = false;

             },

  Save:function(oEvent){

     var celID = oEvent.getSource().getParent().getParent().getId() +"-col2";

     var tdCell= document.getElementById(celID);

     console.log(tdCell);

     var inputF= tdCell.getElementsByTagName("input");

     console.log(inputF);

     var name= inputF[0].value;

     console.log(name);

     alert("Save Name is  :   "+name);

     inputF[0].readOnly = true;

             }

});

[former_member182862 · Accepted solution]

but you never adapt it to our solution.

-D