How to bind the columns of sap.ui.table from XML Model?

[former_member305789]

Hi all,

Actually i have an SOAP response from a service that i serialize this way:

var parser = new DOMParser();                                        
var xmlDoc = parser.parseFromString(response, "text/xml"); 
var xmlD = xmlDoc.getElementsByTagName("My_Data")[0];
var xmlText = new XMLSerializer().serializeToString(xmlD);
var xmlP = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>" + xmlText;

var oModel = new sap.ui.model.xml.XMLModel();
oModel.setXML(xmlP);

Then i bind the rows to the table this way:

var myTable = this.getView().byId('myTableOnTheView');
myTable.setModel(oModel);
myTable.bindRows("/item");

I want to bind also the columns because the table on the back-end may change and also actually there are a lot of columns that i would like not to write all of them in the view and binding one by one.

Thanks in advance.

[former_member340030]

,

Hi Ndricim Cobo,

you can do the same as its done in the jsbin example , just in jsbin they are using odata so its easy to get the fields by simple default functions where as in your case you need to parse your soap response XML and get the properties into an array which you can later bind to JSON model and bind columns similar to jsbin example of yours .

For Parsing XML just follow this link : http://stackoverflow.com/questions/10364657/parsing-xml-from-soap-response-with-jquery-javascript

thanks

Viplove

[former_member305789]

Hi Viplove,

thank you for your reply. In fact my xml data is this:

<E_TT_PLAN>
    <item>
        <MANDT>100</MANDT>
        <RACCT>C100000</RACCT>
        <RBUSA>NONE</RBUSA>
        <ZZTIPOLAV>DIR</ZZTIPOLAV>
        <ZZTIPOPF>UE</ZZTIPOPF>
        <DATASOURCE>DS_0310</DATASOURCE>
        <ACCOUNT_BPC>ZDD_BAS_00100</ACCOUNT_BPC>
        <CANALE>NONE</CANALE>
        <CLCIV>NONE</CLCIV>
        <COMPANY>NONE</COMPANY>
        <DIV>NONE</DIV>
        <INTERCOMPANY>NONE</INTERCOMPANY>
        <LOB>NONE</LOB>
        <PRODOTTO>NONE</PRODOTTO>
        <RAMO>NONE</RAMO>
        <SCENARIO>MAPPING</SCENARIO>
        <RFF>NONE</RFF>
        <CURRENCY>NONE</CURRENCY>
    </item>
	<item>
	......
	</item>
</E_TT_PLAN>

where i have a number of items ( tag <item>) that corresponds to the rows. My columns should be all the children of the tag item.

My table should have as columns the tags <MANDT>, <RACCT>, <RBUSA>... and so on. Actually i do the binding of the rows as shown above and i write all the columns manually on the view like this:

		<t:Table
				id="Planning"
				selectionMode="MultiToggle"
				showColumnVisibilityMenu="true"
				enableColumnFreeze="true" 
				columnSelect="onColumnSelect"
				>
				<t:columns>
					<t:Column width="200px"
						showFilterMenuEntry="true"
						showSortMenuEntry="true"
						sortProperty= "RACCT"
						filterProperty= "RACCT"
						id = "p2Racct">
						<Label text="NUMERO CONTO" />
						<t:template>
							<Label text="{RACCT}"/>
						</t:template>
					</t:Column>
					.............
					<t:Column
					........>
					</t:Column>
		      </t:columns>
		</t:Table>

I don't want to create the columns manually. I want a dynamic way as with odata model like in this jsbin example:

    oTable.bindColumns('meta>/columns', function(sId, oContext) {
        var sColumnId = oContext.getObject().name;
        return new sap.ui.table.Column({
            id: sColumnId,
            label: sColumnId,
            template: new sap.ui.commons.TextView({"text" : {path: "data>" + sColumnId}}),
            sortProperty: sColumnId,
            filterProperty: sColumnId
        });

http://jsbin.com/hubofosaxe/1/edit?html,js,output

[former_member340030]

Hi Ndricim ,

Below is an example on the XML bindings , this might help you :

Test Data

<?xml version="1.0"?>

<team>

<member firstName="Andreas" lastName="Klark" enabled="true"/>

<member firstName="Peter" lastName="Miller" enabled="true" />

<member firstName="Gina" lastName="Rush" enabled="true" />

<member firstName="Steave" lastName="Ander" enabled="false" />

<member firstName="Michael" lastName="Spring" enabled="true" />

<member firstName="Marc" lastName="Green" enabled="true" />

<member firstName="Frank" lastName="Wallas" enabled="true" />

<editable>true</editable>

<selectedIndex>0</selectedIndex>

</team>

ListBox Binding

var oModel = new sap.ui.model.xml.XMLModel();

oModel.loadData("testdata/team.xml");

sap.ui.getCore().setModel(oModel);

var oLB = new sap.ui.commons.ListBox("myLb", {displaySecondaryValues:true, height:"200px"});

oLB.bindProperty("editable", "/editable", function(value) {return value == "true"});

var oItemTemplate = new sap.ui.core.ListItem();

oItemTemplate.bindProperty("text", "@firstName").bindProperty("additionalText", "@lastName").bindProperty("enabled", "@enabled", function(value) {return value == "true"});

oLB.bindAggregation("items", "/member", oItemTemplate);

oLB.placeAt("target1");

Radio Button Binding

var oRBGroup1 = new sap.ui.commons.RadioButtonGroup("RBGEntry1");

oRBGroup1.setModel(oModel);

oRBGroup1.bindProperty("editable", "/editable", function(value) {return value == "true"});

oRBGroup1.bindProperty("selectedIndex", "/selectedIndex", function(value) {return parseInt(value) || 0});

var oItemTemplate1 = new sap.ui.core.Item();

oItemTemplate1.bindProperty("key", "@firstName"); oItemTemplate1.bindProperty("text", "@firstName");

oItemTemplate1.bindProperty("enabled", "@enabled", function(value) {return value == "true"});

oRBGroup1.bindItems("/member", oItemTemplate1);

thanks

Viplove