Dynamic binding for sap.m.switch in a sap.m.Table

[Shibaji]

I have a requirement where we need to show data in sap.m.Table where columns are Question and Ans.

For objective type question the Ans column should have a sap.m.switch instead of a free text.

I am able to do up to this.

However I am having issue in binding the state of the sap.m.switch control.

My table definition is:

<Table id="idQATable1"

inset="false"

items="{

path: '/QA',

sorter: {

path: 'QuestionType'}

/>

  <headerToolbar>...</headerToolbar>

  <columns>

  <Column1.../>

  <Column2.../>

  </Columns>

  <items>

      <ColumnListItem >

  <cells>

  <Text text="{Question}" />

  <Switch state="{Ans==true}" customTextOn="Yes" customTextOff="No"/>

  </cells>

      </ColumnListItem>

  </items>

</Table>

The issue is the data type on the table for "Ans" is String but Switch state is a boolean value. I tried with putting condition check directly in the binding

state="{Ans==true}". But this is always returning false. so the switch is showing in false state always.

Please help on how to put such conditions within table column?

Thanks

Shibaji

[Shibaji · Accepted solution]

Found a solution. So thought of sharing:

resolved this using formatter funtion:

Control declaration in my XML view:

<Switch id="ansYN" state="{ path: 'Ans', type: 'sap.ui.model.type.String', formatter: 'getBooleanValue' }" customTextOn="Yes" customTextOff="No"/>

And my formatter funtion:

getBooleanValue : function(Ans){

  var boolAns = new sap.ui.model.type.Boolean();

  if(Ans === "true"){

  boolAns = true;

  }else{

  boolAns = false;

  }

  return boolAns;

}

[joao_sousa2 · Accepted solution]

Just to add something, that works for one way binding, but if you're looking for two way binding, it's better to define a type for your answer:

sap.ui.model.SimpleType.extend("test.testscn.util.answer", {
    formatValue: function(oValue) {
        if(oValue=="Yes"){
            return true;
        }
        else{
            return false;
        }
    },
    parseValue: function(oValue) {
        if(oValue==true){
            return "Yes";
        }else{
            return "No";
        }
    },
});

This way you can then bind to xml view (make sure you have data-sap-ui-xx-bindingSyntax="complex" in your index.html):

<Switch state="{
                                path:'answer',
                                type: 'test.testscn.util.answer'
                            }"
            customTextOn="Yes" customTextOff="No"/>

[Shibaji · Accepted solution]

Thanks Joao,

Could you please let me know where I need to define the type. in the controller?

It would be great if you can show me the controller code where you defined it.

Regards

Shibaji

[joao_sousa2 · Accepted solution]

The code for the type is in a separated file (answer.js in the util folder in my case), I just used a jQuery.sap.require in the controller to reference it (and a jQuery.sap.declare in the answer.js which I didn't copy to the post).