$(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

UI5 - TreeTable with XML Model Rendering Issue

Feb 18, 2017 at 06:29 AM

196

avatar image

I am currently construting a tree table in XML view with XML Data Model.

Following is My XML:

<?xml version="1.0" encoding="utf-8"?>
<Rowsets>
<Rowset>
<Row>
<root>
<id>root</id>
<level>root</level>
<children>
<id>01</id>
<level>01</level>
<name>Case Packer</name>
<children>
<id>0101</id>
<level>0101</level>
<name>Unscheduled</name>
</children>
<children>
<id>0102</id>
<level>0102</level>
<name>Lunch</name>
</children>
<children>
<id>0103</id>
<level>0103</level>
<name>Scheduled Operations</name>
<children>
<id>010301</id>
<level>010301</level>
<name>Cleaning</name>
</children>
<children>
<id>010302</id>
<level>010302</level>
<name>Major Changeover</name>
</children>
<children>
<id>010303</id>
<level>010303</level>
<name>Paid Break</name>
</children>
<children>
<id>010304</id>
<level>010304</level>
<name>Running Production</name>
<children>
<id>01030401</id>
<level>01030401</level>
<name>Lowrater</name>
</children>
<children>
<id>01030402</id>
<level>01030402</level>
<name>Labeler 1</name>
</children>
<children>
<id>01030403</id>
<level>01030403</level>
<name>Depalletizer</name>
</children>
<children>
<id>01030404</id>
<level>01030404</level>
<name>Filler</name>
</children>
<children>
<id>01030405</id>
<level>01030405</level>
<name>Bottle Coder</name>
</children>
</children>
</children>
</children>
</root>
</Row>
</Rowset>
</Rowsets>

Following is My XML View:

<?xml version="1.0" encoding="utf-8" ?>
<core:View 
    xmlns:core="sap.ui.core" 
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:l="sap.ui.layout"
    xmlns="sap.m" 
    xmlns:t="sap.ui.table" 
    controllerName="treetabledemo.TreeTableDemo"
    xmlns:commons="sap.ui.commons" 
    xmlns:common="sap.suite.ui.commons"
    xmlns:h="http://www.w3.org/1999/xhtml">
<Page showHeader="false" enableScrolling="false">
<l:Splitter orientation="Vertical">
<l:contentAreas>
<Page title="TreeTableDemo">
<content>
<!-- rows="{path:'/Rowsets/Rowset/Row/Root', parameters: {arrayNames:['/children']}}" -->
<t:TreeTable id="idProductionTable" rows="{path:'/Rowsets/Rowset/Row/root', parameters: {arrayNames:['/children']}}">

<t:toolbar>
<Toolbar>
<Title text="Production"/>
</Toolbar>
</t:toolbar>
<t:columns>
<t:Column width="130px" demandPopin="true" id="idProdReportNode" showSortMenuEntry="false"
                                                         minScreenWidth="Tablet">
<Label text="NAME" design="Bold" />
<t:template>
<ObjectIdentifier text="{name}" />
</t:template>
</t:Column>
<t:Column width="130px" demandPopin="true" id="idProdReportProdCount" showSortMenuEntry="false"
                                                        minScreenWidth="Tablet" hAlign="End">
<Label text="Level" design="Bold" />
<t:template>
<ObjectIdentifier text="{level}" />
</t:template>
</t:Column>
</t:columns>
</t:TreeTable>
</content>
</Page>
</l:contentAreas>
</l:Splitter>
</Page>
</core:View>

Following is my controller:

sap.ui.controller("treetabledemo.TreeTableDemo", {

onInit: function() {

    var sPath = "resources/data/treedata.xml"; 
    var oModel = new sap.ui.model.xml.XMLModel(sPath);
    var that = this;

    var oTable = this.byId("idProductionTable");
    oTable.setModel(oModel);    

    },

});

But it gives me following error:

Uncaught Error: Path path:'/Rowsets/Rowset/Row/root', parameters: {arrayNames:['/children']} must start with a / 
    at d.a.getContext (sap-ui-core.js:1549)
    at f.c.applyFilter (sap-ui-core.js:1381)
    at f.c.checkUpdate (sap-ui-core.js:1386)
    at f.B.initialize (sap-ui-core.js:1313)
    at f.h._bindAggregation (sap-ui-core.js:511)
    at f.z._bindAggregation (Table.js:6)
    at f.h.updateBindings (sap-ui-core.js:517)
    at f.h.setModel (sap-ui-core.js:528)
    at constructor.onInit (TreeTableDemo.controller.js:15)
    at f.a.fireEvent (sap-ui-core.js:449)

I tried various permutations and combinations but it does not seem to work.

What am I doing wrong here?

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

1 Answer

Best Answer
avatar image
Former Member Feb 18, 2017 at 04:46 PM
1

In an XML model, we will have to ignore the root element while binding the nodes.

https://help.sap.com/saphelp_uiaddon10/helpdata/en/b8/a2c24356c443228f7819d45697a2b8/content.htm

 rows="{path:'/Rowset/Row/root', parameters: {arrayNames:['/children']}}"

Please try this as a path.

However, you would probably see lot of empty rows displayed in the output. That's because you are trying to recursively iterate over "/children" node and it has other nodes like "id", "name", "level" nodes in it. So, on iterations these additional nodes will be displayed as empty rows.

I am not sure how we can get rid of this. If i happen to find it out, I will update my answer.

Share
10 |10000 characters needed characters left characters exceeded