$(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: false, vro: false, 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
0

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

Jan 23, 2017 at 11:16 AM

113

avatar image
Former Member

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.

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

VIPLOVE KHUSHALANI Jan 23, 2017 at 12:29 PM
0

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

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Jan 23, 2017 at 02:00 PM
0

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

Share
10 |10000 characters needed characters left characters exceeded
VIPLOVE KHUSHALANI Jan 24, 2017 at 06:38 AM
0
,

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

Share
10 |10000 characters needed characters left characters exceeded