$(function () { pageContext.i18n.modTalk = 'moderation talk'; pageContext.i18n.replyToComment = 'Reply'; pageContext.i18n.modTalkEmpty = 'moderation talk is empty'; pageContext.url.getModTalk = "/comments/%25ID%25/listModTalk.json"; pageContext.url.possibleCommentRecipients = "/comments/%ID%/possibleRecipients.json"; pageContext.url.commentEdit = '/comments/%25ID%25/edit.html'; pageContext.url.commentView = '/comments/%ID%/view.html'; pageContext.i18n.commentVisibility = { 'full': 'Viewable by all users', 'op': 'Viewable by the original poster', 'mod': 'Viewable by moderators', 'opAndMod': 'Viewable by moderators and the original poster', 'other': 'Advanced visibility', 'dialogTitle': 'Comment visibility', 'selectGroups': 'Visible to groups', 'selectOther': 'Other recipients', 'selectOriginalPoster': 'Original poster', 'selectModerators': 'Moderators', 'selectAssignees': 'Asked to answer users' }; pageContext.i18n.commentMenuLabels = { 'comment-edit': 'comments.menu.edit', 'comment-delete': 'comments.menu.delete', 'comment-convert': 'comments.menu.convert' };pageContext.i18n.answer= { bestAnswer: 'Best Answer', controlBar : { accept: 'Accept', unaccept: 'Unaccept', acceptCommand: 'Accept this answer as correct', cancelAcceptedCommand: 'Remove this answers accepted status' } }; window.croles = { u: false, op: false, m: false, og: false, as: false, ag: false, dc: false, doc: false, eo: false, ea: false }; tools.init({ q: { e: false, ew: false, eo: false, r: false, ro: false, d: false, dow: false, fv: false, c: false, co: false, p: false, tm: false , ms: false, mos: false }, n: { f: false, vf: false, vfo: false, vr: true, vro: true, c: false, co: false, vu: false, vd: false, w: false, wo: false, l: false }, c: { e: false, eo: false, d: false, dow: false, ta: false, tao: false, l: false }, a: { e: false, ew: false, eo: false, d: false, dow: false, a: false, aoq: false, ao: false, tc: false, tco: false, p: false, tm: false }, pc: croles }, { tc: true, nsc: true }); commandUtils.initializeLabels(); }); Skip to Content
avatar image
Former Member

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

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();

Then i bind the rows to the table this way:

var myTable = this.getView().byId('myTableOnTheView');

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.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Jan 23, 2017 at 12:29 PM

    Hi Ndricim ,

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

    Test Data

    <?xml version="1.0"?>


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




    ListBox Binding

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



    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);


    Radio Button Binding

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


    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);



    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Jan 23, 2017 at 02:00 PM

    Hi Viplove,

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


    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:Column width="200px"
    						sortProperty= "RACCT"
    						filterProperty= "RACCT"
    						id = "p2Racct">
    						<Label text="NUMERO CONTO" />
    							<Label text="{RACCT}"/>

    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


    Add comment
    10|10000 characters needed characters exceeded

  • Jan 24, 2017 at 06:38 AM

    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



    Add comment
    10|10000 characters needed characters exceeded