How to import an external CSS into a UI Builder page

The introduction of the Custom Code codeless block opens up a lot of possibilities. One of them is importing external CSS files. This may become necessary when you need to embed an external UI component into your UI Builder application. For example, the AG Grid component comes with its own CSS files. Of course, you could copy/paste that CSS into a UI Builder theme extension, however, importing original CSS for a component seems like a better approach.

So here we go:

  1. Switch to the LOGIC tab in UI Builder and click the FUNCTIONS tab on the right side of the screen. Click the + NEW FUNCTION button:

  2. Type in loadCSS in the Create New Global Function popup and click CREATE:
    UI Builder - ConsoleDemo - Backendless 2021-10-06 03-02-44

  3. Click the gear icon in the function block, drag input name [x] into inputs and change x to url. This will be the function argument:
    UI Builder - ConsoleDemo - Backendless 2021-10-06 03-03-24

  4. Deselect the with return checkbox:
    UI Builder - ConsoleDemo - Backendless 2021-10-06 03-20-20

  5. Click the gear icon to close argument definitions. Now we will add the Custom Code block to the function’s logic. Locate the Advanced section in the Codeless blocks menu on the left and drag the Custom Code block into the function:

  6. Click name in the Custom Code block and change it to loadCSSWithURL. This is not an important step, but it is better to assign logical names your Custom Code blocks:
    UI Builder - ConsoleDemo - Backendless 2021-10-06 03-21-36

  7. Click the gear icon in the Custom Code block. This will open the custom code editor. Click the field that says Add a new argument and type in cssURL. Press enter to register the argument:

  8. Paste the following code into the editor:

    await new Promise(resolve => {
      const link = document.createElement('link')
    
      link.href = cssURL;
      link.rel = 'stylesheet'
      link.type = 'text/css'
      link.onload = () => resolve()
    
      document.head.appendChild(link);
    })
    
  9. Click SAVE and CLOSE.

  10. Drag the url argument of the custom function to the cssURL argument of the Custom Code block:

At this point all the code and logic for loading an external CSS is ready. To use this functionality, you will need to use the new global function. For example, suppose you need to load the following css file:

https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css

Switch to the On Page Enter handler:

Your new loadCSS global function will be available in the Custom Functions menu item. Drag the codeless block for the function into the On Page Enter connector:

The last remaining step is to add the Text connector to the url argument of the loadCSS function:

And finally enter the URL of the CSS to load:
UI Builder - ConsoleDemo - Backendless 2021-10-06 03-25-18

You might be asking the question: “why did we use a global function that wraps the custom code?” The reason is convenience. Global functions can be reused between different pages of your app. By defining a global function (loadCSS) it now can be reused and you will be saving time since all the steps described above would need to be done once.

1 Like

Hi @mark-piller ,
Thanks for providing this. The Custom Code feature is great!
What is the specific reason to wrap the code as a Promise which is then “awaited”.
Wouldn’t this work without the promise just using the plain code?
Regards,

The reason for wrapping it into Promise and then using await is to provide the guarantee that the rest of the code will wait until the file is loaded.

Regards,
Mark

Hi @mark-piller ,
Does the shown procedure provides a generic way to add html elements to the header of the overall html doc? For instance also <meta>-tags?

  • create a custom code block in the “On Page Enter”-handler of my home page.
  • add JS statements like the ones shown by you for creating tags like
    <link rel="manifest" href="webmanifest.json"> 
    <link rel="icon" type="image/ico" href="web/graphics/favicon.ico"/> 
    <link rel="shortcut icon" type="image/ico" href="web/graphics/favicon.ico"/> 
    <link rel="apple-touch-icon" href="web/graphics/1.png"/>   
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta content="My Name" property="og:site_name">
    <meta property="og:type" content="website">
    ...
    

Would this effectively extend the html header section?

Regards,

Hi Mark is there anyway to get a live demo and basic setup documentation of AG Grid with Backendless. I just completed all the load CSS steps (below) but had no idea on what to do next to get the grid displayed. I tried to follow this documentation and did the following.

1st


Added the loadCSS function and tried to load the Custom Code below.

2nd

The function addScript() section at the top kindly came from Dima on a different Custom Code question for declaring the script and loading the js library. The rest of the code came from the main.js example that is used in the AG Grid tutorial.

3rd

I added a block to the page and named it “myGrid” and defined the class as “ag-theme-alpine”

Then I tried to preview the page but nothing showed up. Thanks for your help!