Including external CSS frameworks

Custom Widgets
2

Hey Kevin,

Yes it is. You can leverage external CSS library in a similar way to the external JS library.

You need the code below in the JS of your widget. Here I referencing the https://getbootstrap.com/ library. It is possible to use others in the same way. I also attaching an example widgets which you can download and install in your instance to test.
customWidget-Example External CSS - Bootstrap.json (2.4 KB)
This is the output from a simple example:
Before Bootstrap CSS:
image

With Bootstrap CSS:

image
image988×464 20.7 KB

Code required in JS:

let urls = ["https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"];

loadStyles(urls);

async function loadStyles(...urls) {
  for (const thisUrl of urls) {
    console.log(`Loading style "${thisUrl}"...`);

    const response = await fetch(thisUrl);
    const responseBody = await response.text();

    const styleElm = document.createElement("style");
    const inlineStyle = document.createTextNode(responseBody);
    styleElm.appendChild(inlineStyle);
    document.body.appendChild(styleElm);

    console.log(`Style "${thisUrl}" successfully loaded`);
  }
}