Including external CSS frameworks

Is it possible to use external CSS frameworks like bootstrap with custom widgets?

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:

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`);
  }
}

@parth.parmar ^^^ see this for CSS library

@kirons How did you get on with the CSS? Anything tips and tricks to share? I am thinking of a couple of widgets to build that would leverage external CSS. So any learnings appreciated.

Hi Eddy, I haven’t gotten back to this beyond testing it after you initially provided feedback. However, I have used a couple of custom widgets in apps recently. One was the label preview that you built, modified for our environment, and the second was a text box that updates the ZPL for the label preview when the values change.

Would be nice to add this as default for all widgets.
Switch option on the widget dashboard, to use the default one or the reference

Hey @jajzler -

Can you give a little more context here?

  • You thinking just CSS formatting libraries could be selected from the widget configuration pane?
  • Would there be cases where you might use a widget in multiple steps or apps, but with different css libraries?
  • Would this behavior exist for JS libraries too?

If there are external libraries you want us to add native support for, please reach out and we can add them to the dropdown list. The code @EddyA shared above is really just a stopgap until we can natively support anything anyone would ask for.

Pete

image

Okay, maybe i was not explained clearly.
In the picture the have snapshot from the widget view.
If the settings has a new options like

  • define widget settings

Under that, the developer can set the new default settings that will be automatic load into to widget.
It is like the current default css style, that came by default. for each new widget.

Sometimes i need the same css style for many application, so the user has the same feeling.
(Material Design)

If you can add Bulma CSS as an external lib, without the code from Eddy. That would be nice.
I dont wont to put the same code in many widgets again and again.

I like the idea of applying CSS across all widgets, and that’s a common mechanism/feature many places where CSS is supported. What do you think about a “helper widget” with the connection to external library or framework, then referencing that helper widget instead of the entire code block?

2 Likes

That sounds very good :grinning: