Parsing XML Using External Libraries (fast-xml-parser Example)

You can integrate external data in XML format into your graphics using a third party library that converts XML to JSON. In this example we will show you how you can achieve this using the fast-xml-parser library that is fast, lightweight, and compatible with UI Builder’s scripting environment.

Note

You need a reachable HTTP endpoint that returns XML (for testing you can use a local server, e.g. http-server . --cors from a folder with your .xml file).

Installation

1. Online (CDN): loadLibrary("https://cdnjs.cloudflare.com/ajax/libs/fast-xml-parser/5.2.5/fxparser.min.js");
2. Offline:
   • Download fxparser.min.js
   • Place it in: C:\ProgramData\Erizos\Erizos Studio\Resources\Libs
   • Load it using: loadLibrary("fxparser.min");

Example Script

// Load external library
loadLibrary("https://cdnjs.cloudflare.com/ajax/libs/fast-xml-parser/5.2.5/fxparser.min.js");
// For offline installations uncomment:
// loadLibrary("fxparser.min");

button1.onClick = async () => {
  try {
    // Fetch XML
    const response = await request.get("URL-TO-XML-HERE");
    const xmlData = response.data;

    // Create parser
    const parser = new XMLParser.default({
      ignoreAttributes: false,
      attributeNamePrefix: "@_"
    });

    // Convert XML → JS object
    const parsed = parser.parse(xmlData);

    console.log("Parsed XML:", parsed);

    // Example mapping: update UI field
    // Adjust based on your specific XML structure
    if (parsed?.channel?.title) {
      text1.value = parsed.channel.title;
    }

  } catch (error) {
    console.log("XML Parsing Error:", error.message);
  }
};

Troubleshooting

Problem	Cause	Solution
undefined values	Wrong object path	Use console.log(parsed) to inspect structure
Parsing failure	Invalid XML formatting	Validate the XML source
Network error	URL blocked / offline server	Check access or firewall
CORS errors	External source blocked request	Use same-origin source or enable backend proxy

Summary

Using fast-xml-parser allows UI Builder scripts to convert XML into JavaScript objects. Once parsed, you can map values to UI components the same way as JSON.