+ Start a Discussion
Sagar DumbreSagar Dumbre 

XSLTProcessor fails in lightening web component when added to page layout

Hi,
I am trying to apply an XSLT transformation to an XML file and display the output in div element. Below code works in the local development server. However, if I add this component in any page layout in salesforce, it failed with below error.

TypeError: XSLTProcessor constructor: 'new' is required
import { LightningElement } from 'lwc';
import testXml from '@salesforce/resourceUrl/testXml';
import testXslt from '@salesforce/resourceUrl/testXslt';

export default class MyComponent extends LightningElement {

    renderedCallback() {
        const xsltProcessor = new XSLTProcessor();
        xsltProcessor.importStylesheet(testXslt);
        const result = xsltProcessor.transformToFragment(testXml, document);

        this.template.querySelector('.container').appendChild(result);
    }
}
Any suggestion to make it work in salesforce page/record layout.
 
RituSharmaRituSharma
I think XSLT Processing is not yet included to the LWC framework. Instead of XSLT based approach, you may think about using child components,
Sagar DumbreSagar Dumbre
Hi Ritu,
I am not sure, what do you mean by child component approach? How would i transform xml to html?
Alain CabonAlain Cabon

Johannes Wilm has published his own adapted XLST processor on github that works well with Salesforce LWC.

XSLT-processor builds on Google's AJAXSLT which was written before XSLTProcessor() became available in browsers, but the code base has been updated to comply with ES2015+ and to make it work outside of browsers.

https://github.com/fiduswriter/xslt-processor

User-added image

 
<template>

    <lightning-card title="LWC XSLT" icon-name="custom:custom14">
        <div class="slds-card__body slds-card__body_inner">
            <p>{outXmlString}</p>
            <div class="container" lwc:dom="manual"></div>
        </div>
    </lightning-card>

</template>
 
import { LightningElement, track } from "lwc";
import { xsltProcess } from "./xsltprocessor/xslt.js";
import { xmlParse } from "./xsltprocessor/dom.js";

export default class xsltdemo extends LightningElement {
  xlstInitialized = false;

  @track
  outXmlString;

  renderedCallback() {
    if (this.xlstInitialized) {
      return;
    }
    this.xlstInitialized = true;
    this.initializeXSLT();
  }

  initializeXSLT() {
    let xmlString =
      '<?xml version="1.0" encoding="UTF-8"?>\n' +
      "<catalog>\n" +
      "  <cd>\n" +
      "    <title>Empire Burlesque</title>\n" +
      "    <artist>Bob Dylan</artist>\n" +
      "  </cd>\n" +
      "  <cd>\n" +
      "    <title>Hide your heart</title>\n" +
      "    <artist>Bonnie Tyler</artist>\n" +
      "  </cd>" +
      "</catalog>";

    let xsltString =
      '<?xml version="1.0" encoding="UTF-8"?>\n' +
      '<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">\n' +
      '<xsl:template match="/">\n' +
      "  <h2><b>My CD Collection</b></h2>\n" +
      '  <table border="1">\n' +
      '    <tr bgcolor="#9acd32">\n' +
      '      <th style="text-align:left">Title</th>\n' +
      '      <th style="text-align:left">Artist</th>\n' +
      "    </tr>\n" +
      '    <xsl:for-each select="catalog/cd">\n' +
      "    <tr>\n" +
      '      <td><xsl:value-of select="title"/></td>\n' +
      '      <td><xsl:value-of select="artist"/></td>\n' +
      "    </tr>\n" +
      "    </xsl:for-each>\n" +
      "  </table>\n" +
      "</xsl:template>\n" +
      "</xsl:stylesheet>";

    this.outXmlString = xsltProcess(xmlParse(xmlString), xmlParse(xsltString));

    console.log("outXmlString:" + this.outXmlString);

    const container = this.template.querySelector(".container");
    console.log("container:" + container);
    container.innerHTML = this.outXmlString;
  }
}
Sagar DumbreSagar Dumbre
Hi Alain,
Do you think we should zip all the .js files from GitHub repo and add as a static resource in Salesforce? Then by using loadScript component (https://developer.salesforce.com/docs/component-library/bundle/lightning-platform-resource-loader/documentation), load all the javascript files.

The reason I am suggesting this approach because dom.js is having dependency with util.js file.