I have one sample XML & XSL resource. I am getting XML as a string from API call in javascript. While XSLT is present as a static resource on the server. My goal is to display XML content along with stylesheet in HTML document element.
I do not want to use XSLTProcessor for now. I would like to try the browser way. And yes both the XML and XSLT would be coming from the same server.
Code:
import XSL from '#salesforce/resourceUrl/Roles';
export default class DisplayReport extends LightningElement {
renderedCallback(){
var xml = '<root> <node>one</node> <nodes> <node>1</node> <node>2</node> </nodes> <node>two</node> </root>';
var output = '<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="'+XSL+'" ?>'+xml;
console.log(output); //output on below line
//<?xml version="1.0" encoding="UTF-8"?><?xml-stylesheet type="text/xsl" href="/assets/project/b481ca5a6f/staticresources/Roles" ?><root> <node>one</node> <nodes> <node>1</node> <node>2</node> </nodes> <node>two</node> </root>
var xmlNode = this.parseXml(output);
console.log(xmlNode);
const element = this.template.querySelector('div.dms');
element.appendChild(xmlNode.documentElement);
}
parseXml(xmlStr){
if (window.DOMParser) {
return ( new window.DOMParser() ).parseFromString(xmlStr, "text/xml");
}
}
}
Markup:
<template>
<div class="dms" lwc:dom="manual">
</div>
</template>
Output: (no style sheet getting applied)
one 1 2 two
Any idea what is missing here?
Related
I am parsing XML via libxmljs2 and then trying to add an extra element, see example below.
var x = require('libxmljs2');
var xmlDoc = x.parseXmlString(`<?xml version="1.0" encoding="UTF-8"?>
<ns:FOO xmlns:ns=“example ns" xmlns:ns2="example ns 2”>
<ns:A>
<ns2:X>TEXT</ns2:X>
</ns:A>
<ns:B>
<ns2:Y>TEXT</ns2:Y>
<ns2:Z>TEXT</ns2:Z>
<ns2:P>TEXT</ns2:P>
</ns:B>
</ns:FOO>`)
What i want is to make it like:
<?xml version="1.0" encoding="UTF-8"?>
<ns:FOO xmlns:ns=“example ns" xmlns:ns2="example ns 2">
<NEW-ELEMENT>
<NEW-SUB-ELEMENT>
<ANOTHER-NEW-SUB-ELEMENT>TEXT</ANOTHER-NEW-SUB-ELEMENT>
<NEW-SUB-ELEMENT>
</NEW-ELEMENT>
<ns:A>
<ns2:X>TEXT</ns2:X>
</ns:A>
<ns:B>
<ns2:Y>TEXT</ns2:Y>
<ns2:Z>TEXT</ns2:Z>
<ns2:P>TEXT</ns2:P>
</ns:B>
</ns:FOO>
This is what I am trying to do:
const reqNode = xmlDoc.get('//ns:FOO', { FOO: 'example'})
const doc = new x.Document();
doc
.node('NEW-ELEMENT')
.node('Service', "TI")
.parent()
.node('NEW-SUB-ELEMENT')
.node('ANOTHER-NEW-SUB-ELEMENT', 'TEXT')
.parent()
.parent().toString()
reqNode.addChild(doc)
However it seems to make it like:
<?xml version="1.0" encoding="UTF-8"?>
<ns:FOO xmlns:ns=“example ns" xmlns:ns2="example ns 2">
<ns:A>
<ns2:X>TEXT</ns2:X>
</ns:A>
<ns:B>
<ns2:Y>TEXT</ns2:Y>
<ns2:Z>TEXT</ns2:Z>
<ns2:P>TEXT</ns2:P>
</ns:B>
<NEW-ELEMENT>
<NEW-SUB-ELEMENT>
<ANOTHER-NEW-SUB-ELEMENT>TEXT</ANOTHER-NEW-SUB-ELEMENT>
<NEW-SUB-ELEMENT>
</NEW-ELEMENT>
</ns:FOO>
Any ideas, where I'm doing wrong?
Much appreciated
node(...) always adds the node at the end. If you want to insert an element elsewhere you can use addPrevSibling(siblingNode) to insert a node before the Element that was called on. So here you would first find the ns:A Element and then call that function on it (you probably have to construct the child element explicitly so it can be passed as an argument).
If I have an empty XSL doc as follows:
<body>
<div id="myList">
</div>
</body>
How can I access the div tag and append XSL to it? For example, I want to do the following in my js code but it doesn't output anything. But if I manually insert the innerHTML value into the div tag it works:
document.getElementById("myList").innerHTML = `<xsl:value-of select="Movies/Authors/FirstName"/>`
I've tried using different quote styles but I can't seem to get the expected output. Is there any way around this?
Assuming you have an XSLT stylesheet as an XML DOM document and a recent version of a browser supporting innerHTML on XML elements (I have tested successfully with current versions of Chrome, Firefox and Edge on Windows 10 Creators Update) you can use e.g.
var xslString = `<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="Root">
<div id="myList">
</div>
</xsl:template>
</xsl:stylesheet>`;
var xmlString = `<Root>
<Movies>
<Authors>
<FirstName>Steven</FirstName>
</Authors>
</Movies>
</Root>`;
var domParser = new DOMParser();
var xsltDoc = domParser.parseFromString(xslString, 'application/xml');
var xmlDoc = domParser.parseFromString(xmlString, 'application/xml');
var div = xsltDoc.querySelector('#myList');
div.innerHTML = `<xsl:value-of select="Movies/Authors/FirstName"/>`;
var proc = new XSLTProcessor();
proc.importStylesheet(xsltDoc);
document.getElementById('result').appendChild(proc.transformToFragment(xmlDoc, document));
<section>
<h1>Result</h1>
<div id="result"></div>
</section>
OK, I have an XML/XSLT pairing (inserted into my HTML via Javascript from 2 external files) that creates a button on the page with the nodeValue taken from a tag called 'JobID' (a generated GUID).
<button id="5f8294ca-fe5a-4da9-847b-da99df999000" onclick="markFinished(this.id)" type="button">Finished</button>
Thus returning the id of the button to a function...
function markFinished(clicked_id)
{
cid = clicked_id;
document.write(cid)
}
The XML look like this...
<?xml version="1.0" encoding="utf-8"?>
<CurrentJobs>
<Job>
<JobID>25657287-cc52-415b-8781-be37d5098656</JobID>
<Status>a-current</Status>
</Job>
<Job>
<JobID>5f8294ca-fe5a-4da9-847b-da99df999000</JobID>
<Status>a-current</Status>
</Job>
<Job>
<JobID>05a84779-5801-4645-a7f9-74529ea5298b</JobID>
<Status>a-current</Status>
</Job>
<Job>
<JobID>07df3deb-4935-4504-8822-a73ccea038ae</JobID>
<Status>b-complete</Status>
</Job>
<Job>
<JobID>078c496d-ac60-48e7-b9fe-a0e1f78ff2c5</JobID>
<Status>c-upcoming</Status>
</Job>
<Job>
<JobID>07ec868e-d294-4bb3-807d-00df66f5bab2</JobID>
<Status>c-upcoming</Status>
</Job>
<Job>
<JobID>8bdeee5f-2bf6-4e44-8af8-69f600048dfe</JobID>
<Status>a-current</Status>
</Job>
</CurrentJobs>
I need a way for my function to match the clicked_id to the JobID and replace the nextSibling (Status) with 'b-finished'. Any help here would be greatly appreciated.
You'd do that by parsing the XML and traversing it nodes.
As the value you're looking for is the text, you have to iterate and check each element until a match is found, then get the next element and replace the text content of that
var parser = new DOMParser();
var doc = parser.parseFromString(xml, "application/xml");
function markFinished(clicked_id) {
var cid = clicked_id;
var nodes = doc.getElementsByTagName('JobID'),
match = null;
for (var i=nodes.length; i--;) {
if ( nodes[i].textContent.trim() === clicked_id ) {
match = nodes[i];
break;
}
}
if (match) {
match.nextSibling.textContent = 'b-finished'
}
}
FIDDLE
I saw a lot of posts online about MSXML4 to 6 or XSLT 1.0 versus 2.0 etc. But they could not answer my question.
I have a XSLT transformation code that works with MSXML4 APIs (XSLTransform and FreeThreadedDomDocument) on IE7 via Javascript.
Same code doesnt work with with MSXML6 APIs (XSLTransform and DomDocument) on IE9 via Javascript. It throws this error
"Namespace 'urn:mynamespace:mytable:transactions' does not contain any functions"
I have made sure that my ActiveX are enabled for MSXML4 and 6 both on IE9. Below is the code of the main tranformer XSLT, the reference XSLT & the JS code ...
Core XSLT: functions.xsl
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:myfuncs="urn:mynamespace:mytable:transactions" >
<msxsl:script language="javascript" implements-prefix="myfuncs">
<![CDATA[
// convert system GMT time into local time
// usage: <xsl:value-of select="myfuncs:localDateTime(datetime)"/>
var openBalance = 0;
function setOpenBalance(openBal)
{
openBalance = openBal;
}
function getOpenBalance()
{
openBalance = openBal;
return openBalance ;
}
]]>
</msxsl:script>
</xsl:stylesheet>
Main XSLT: MyTransformer.xsl ... that refers functions.xsl
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:myfuncs="urn:mynamespace:mytable:transactions">
<xsl:output method="xml"/>
<xsl:include href="functions.xsl" />
<!--<xsl:variable name="trade_cur_bal" select="myfuncs:getOpenBalance(100)"/>-->
<xsl:template match="/">
<Response>
<!-- Some working code here -->
</Response>
</xsl:template>
</xsl:stylesheet>
JS Code
var domXsl = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.4.0");
/*
// In case of IE9 ....
var domXsl = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.6.0");
*/
var domHTML = new ActiveXObject("Msxml2.XSLTemplate.4.0");
/*
// In case of IE9 ....
var domHTML = new ActiveXObject("Msxml2.XSLTemplate.6.0");
*/
domXsl.async=false;
domXsl.load("MyTransformer.xsl");
domHTML.stylesheet = domXsl;
var domData = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.4.0");
var input = "<MyInputData></MyInputData>"
domData.loadXML(input);
var result = tranform(domHTML, domData); //Works for MSXML 4.0 and fails for MSXML 6.0
function transform(template_, input_) {
var output = "";
if (input_ != null && input_.xml != "") {
var proc = template_.createProcessor();
proc.input = input_;
proc.transform();
output = proc.output;
delete proc;
}
return output;
}
Can someone guide me where am I going wrong w.r.t. MSXML6 or IE9?
Thx.
With MSXML 6 use of script inside XSLT is disabled by default for security reasons, so you need to explicitly enable it by calling
var domXsl = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.6.0");
domXsl.setProperty("AllowXsltScript", true);
And additionally to allow the use of xsl:import or xsl:include you also need to set
domXsl.setProperty("ResolveExternals", true);
I got this fixed by removing the versions (4 and 6) form the activeX class ID
e.g. new ActiveXObject("Msxml2.FreeThreadedDomDocument") etc.
I have a HTML page in which I have a button; pressing that button a javascript function is called - here results a String which is the representation of an xml. I want to represent this xml on the same page with the button, similar with what is in the picture below:!
Here is the simplified code I've tried but did not worked (see under the code the result of it - nothing displayed):
<html>
<head>
<script type="text/javascript">
function xml_test()
{
var xmlString = "<note><name>Kundan Kumar Sinha</name><place>Bangalore</place><state>Karnataka</state></note>";
var my_div = document.getElementById("labelId");
alert(xmlString)
my_div.innerHTML += xmlString;
}
</script>
</head>
<body>
<input type="button" value="TEST" onclick="xml_test()"/>
<br><br>
<label id="labelId">XML: </label>
</body>
</html>
I've tried with an iframe also, but I do not have an file for the src attribute.
What I've tried is:
<html>
<head>
<script type="text/javascript">
function populateIframe() {
var xml = "<?xml version='1.0' encoding='UTF8' standalone='yes'?><note><name>Kundan Kumar Sinha</name><place>Bangalore</place><state>Karnataka</state></note>";
var iframe = document.getElementById('myIframe');
var idoc= iframe.contentDocument || iframe.contentWindow.document; // IE compat
idoc.open("text/xml"); // I know idoc.open(); exists but about idoc.open("text/xml"); I'm not sure if exists;
idoc.write('<textarea name="xml" rows="5" cols="60"></textarea>');
//idoc.write(xml); // doesn't work
idoc.getElementsByTagName('textarea')[0].value= xml;
idoc.close();
}
</script>
</head>
<body onload="populateIframe();">
<iframe id="myIframe" width="900" height="400"></iframe>
</body>
</html>
and the result is:
I've already looked over How to display XML in a HTML page as a collapsible and expandable tree using Javascript?
I took some ideas from here
Thank you for helping me!
Just Create am HttpHandler, and open it in a Iframe:
public class Handler : IHttpHandler
{
#region IHttpHandler Members
public bool IsReusable
{
get { return true; }
}
public void ProcessRequest(HttpContext context)
{
XmlSerializer serializer = new XmlSerializer(typeof(Note));
MemoryStream stream = new MemoryStream();
StreamWriter writer = new StreamWriter(stream, Encoding.Unicode);
serializer.Serialize(writer, new Note() { Name = "Kundan Sinha", Place = "Bangalore", State = "Karnataka" });
int count = (int)stream.Length;
byte[] arr = new byte[count];
stream.Seek(0, SeekOrigin.Begin);
stream.Read(arr, 0, count);
UnicodeEncoding utf = new UnicodeEncoding();
stream.Close();
writer.Close();
context.Response.ContentType = "text/xml;charset=utf-8";
context.Response.Write(utf.GetString(arr).Trim());
context.Response.Flush();
}
#endregion
}
public class Note
{
public string Name { get; set; }
public string Place { get; set; }
public string State { get; set; }
}
You can pass your received xml string to this where I am doing
context.Response.Write('Pass you XML data here');
You must use your favorite JavaScript library with a tree widget to display that XML in tree form.
Note that the "tree-like" view you see is actually IE's default view for XML files. Other browsers will have different views for XML files, and some do not even let you view XML files without a plug-in.
You should not depend on browser-specific functionality if viewing the XML in tree form is important to your page's functionality.
If you, however, just want to press a button and then the whole page gets turned into an XML, then by all means just redirect to that XML URI on button press. IE will show that XML file in tree form, while other browsers may either ask you to download the file, or display the XML file in whatever format that is determined by their plugin's.
I set the xml data in the src attribute:
iframeElement.setAttribute('src', 'data:text/xml,<test>data</test>');