How to show XML data in collapsed/expandable format in html web resource

(0) Share

Report

Posted on by VPrashant

675

Hi all,

I am showing a XML data in to HTML web resource. That is done. But I want to see the XML data in +/- format that is to expand / collapse nodes in it.

Can anyone let me know what is to be done in such case?

I tried this:

document.getElementById("pp").innerHTML = "<?xml version='1.0'?>" + xml_escaped;

but no success.

Thank you,

Prashant

*This post is locked for comments

I have the same question (0)

All responses (9)

Answers (2)

Suggested answer

Bas van de Sande 4,383 on at

Like (0)

Report

Hi Prashant,

if you want to show the xml in xml format, you need to escape the xml.

you don't need to add the <?xml version=1.0> op top of it (unless you escape it)

what you can do in the html webresource is to add a <div>. You can make the <div> collapseble by adding a button. using the button you can toggle the visibility of the div.

Is this what you want to do?

Bas

Was this reply helpful? Yes No
VPrashant 675 on at

Like (0)

Report

Thank you Bas van de Sande,

I will take your half answer. I will not escape the xml. But the div thing will not work. I want to show the xml the same thing as we see in IE browser having + and - icons and we can see the nodes collapse and expanding.

That is what I need Sir.

I am working on it still.

Was this reply helpful? Yes No
Verified answer

Bas van de Sande 4,383 on at

Like (0)

Report

Hi Prashant,

this is whatyou actually want.

www.levmuchnik.net/.../DisplayXMLFileWithJavascript.html

<div id='XMLHolder' > </div>

<LINK href='XMLDisplay.css' type='text/css' rel='stylesheet'>

<script type='text/javascript' src='XMLDisplay.js'></script>

<script>LoadXML('XMLHolder','test.xml'); </script>

you have to put the js and css file in your webresources. the css and js can be downloaded from the site I mentioned above

I think this will do the trick!

Bas

Was this reply helpful? Yes No
VPrashant 675 on at

Like (0)

Report

Hey Bas,

Thank you for your answer.

Infact I had seen this link earlier. Tried once but couldn't do it. So I left that idea. Posted the question in this forum and you came up with the same solution.

So I tried again this morning and all came in place and now its working. Great.

I did some changes in css and now working on .js part.

In this code the NodeName and its value come on different lines. I want it in single line. Now checking the code.

If you find it before me let me know please.

I am marking your reply as answer. But still let me know regarding showing value in same line of nodevalue.

thanks again Bas.

Was this reply helpful? Yes No
Bas van de Sande 4,383 on at

Like (0)

Report

Hi Prashant,

I think that is going to be a real tough nut to crack.

What you can do is create a temporary project (simple web page) and set some breakpoints on the javascript.

I think you might need to look in this function...

function AddTextNode(ParentNode,Text,Class)

{

NewNode = document.createElement('span');

if (Class) { NewNode.className = Class;}

if (Text) { NewNode.appendChild(document.createTextNode(Text)); }

if (ParentNode) { ParentNode.appendChild(NewNode); }

return NewNode;

}

Bas

Was this reply helpful? Yes No
VPrashant 675 on at

Like (0)

Report

Hi Bas,

That I have figured out but a new problem had arised.

If I collapse a single node containing many attribute values, it vanishes.

I think I need to debug the code now. The "-" sign is creating issue I think so.

For some nodes it work and for some it vanishes.

Man I was so happy that the feature was done but will need some more time now.

:(

Was this reply helpful? Yes No
Verified answer

VPrashant 675 on at

Like (0)

Report

Hi Bas,

I managed to find the solution. in 1 place the 1 line code was missing. I will state here so other may benefit it.

function ShowXML(xmlHolderElement, RootNode, indent) {

if (RootNode == null || xmlHolderElement == null) { return false; }

var Result = true;

var TagEmptyElement = document.createElement('div');

TagEmptyElement.className = 'Element';

TagEmptyElement.style.position = 'relative';

TagEmptyElement.style.left = NestingIndent + 'px';

if (RootNode.childNodes.length == 0) {

var ClickableElement = AddTextNode(TagEmptyElement, '', 'Clickable');

ClickableElement.id = 'div_empty_' + IDCounter;

++IDCounter;

AddTextNode(TagEmptyElement, '<', 'Utility');

AddTextNode(TagEmptyElement, RootNode.nodeName, 'NodeName')

for (var i = 0; RootNode.attributes && i < RootNode.attributes.length; ++i) {

CurrentAttribute = RootNode.attributes.item(i);

AddTextNode(TagEmptyElement, ' ' + CurrentAttribute.nodeName, 'AttributeName');

AddTextNode(TagEmptyElement, '=', 'Utility');

AddTextNode(TagEmptyElement, '"' + CurrentAttribute.nodeValue + '"', 'AttributeValue');

}

AddTextNode(TagEmptyElement, ' />');

xmlHolderElement.appendChild(TagEmptyElement);

//SetVisibility(TagEmptyElement,true);

}

The ++IDCounter in red was missing in this function. So due to this, if the previous node is empty as like:

<Mail xsi:nil="true" />

-<FrontPage>MidOffer </FrontPage>

so in that case the id for Mail and FrontPage were getting same. And due to this if we click on "-" the whole node vanishes. But after incrementing the counter; all the nodes were incremented correctly and nothing vanishes.

Awesome.

GB Thanks to the creator "Lev Muchnik".

Bas, shall I mail Lev Muchnik regarding this change in code, so he updates the code in his blog.

Thank you again Bas. :)

I am marking this post as answer too as it contains the corrected code.

Was this reply helpful? Yes No
Community Member on at

Like (0)

Report

Hello Prashant,

How are you? I too found the same problem with nodes disappearing when collapsed! Thank you for your solution!

As for the attributes showing in multiple lines, I am working on a fix and will share it as soon as I am done.

thank you,

Everardo

Was this reply helpful? Yes No
testingvivekname 5 on at

Like (0)

Report

Hi bas,

I was looking for same solution tried to access the link but I think its not working anymore.

can you please hep me out.

Was this reply helpful? Yes No