How to test dependency widget with a sample widget?

[Ankita Kolhe]

Hello Community,

I have created below dependency widget:

The baseline widget makes use of a JavaScript library called OpenLayers. See https://openlayers.org/.

Requirements

1. Setup Widget Dependency

First we will setup the dependency, JS include, CSS include, UI script, and style sheet.

Create Widget Dependency [sp_dependency]

Name: "OpenLayers v10.7.0"

JS Includes: <create new, see below>

CSS Includes: <create new, see below>

Create JS Include [sp_js_include]

Display name: "ol.js"

Source: UI Script

UI script: <create new, see below>

Create CSS Include [sp_css_include]

Name: "ol.css"

Source: Style Sheet

Style sheet: <create new, see below>

Create UI Script [sys_ui_script]

API Name: "ol.js"

UI Type: All

Script: copy and paste contents from

https://cdn.jsdelivr.net/npm/ol@v10.7.0/dist/ol.js

Create Style Sheet [sp_css]

Name: "ol.css"

CSS: copy and paste contents from 

https://cdn.jsdelivr.net/npm/ol@v10.7.0/ol.css

Turn off SCSS compilation: true

2. If This Does Not Work

It may be that the minified ol.js will not work as a UI script for some reason. If that is the case, we can apply the following workaround:

Change JS Include

Display name: "ol.js"

Source: URL

JS file URL: 

https://cdn.jsdelivr.net/npm/ol@v10.7.0/dist/ol.js

Change CSS Include

Name: "ol.css"

Source: URL

CSS file URL: 

https://cdn.jsdelivr.net/npm/ol@v10.7.0/ol.css

Sample widget created for testing:

HTML:

<div>

<h3>Dependency Test</h3>

<div id="map" style="height:400px;"></div>

</div>

Client:

api.controller = function() {

    alert('t: ' + typeof ol);

    alert('ol: ' + ol);

    var c = this;

    console.log("OL object:", ol);

    if (typeof ol !== 'undefined') {

        console.log("OpenLayers loaded successfully");

        const map = new ol.Map({

            target: 'map',

            layers: [

                new ol.layer.Tile({

                    source: new ol.source.OSM()

                })

            ],

            view: new ol.View({

                center: [0, 0],

                zoom: 2

            })

        });

    } else {

        console.error("OpenLayers NOT loaded");

    }

};

ol is displaying as undefined. Also, I have attached dependency to sample widget.Could someone please help why is this not working?

Thanks

I have tried above methods 

[Naveen20 · Accepted solution]

Apply the workaround — switch the JS Include's Source from UI Script to URL and point directly to the CDN. Large minified libraries (OpenLayers, Chart.js, etc.) frequently fail when pasted into a sys_ui_script record because Service Portal wraps/serves UI Scripts differently than a raw <script> tag, and complex IIFE-style minified bundles often break under that wrapping. This is a known pattern — multiple community threads report "works as URL, fails as UI Script" with libraries like Chart.js and OpenLayers.

Check

1. On the sp_js_include record: Source = URL, JS file URL = https://cdn.jsdelivr.net/npm/ol@v10.7.0/dist/ol.js. Do the same for the CSS Include.

2. Confirm the sp_dependency is in the widget's Dependencies related list (not just created standalone).

3. If you want to keep the UI Script route: load the non-minified ol.js instead, ensure the UI Script is Active with UI Type = All, and verify it's not being wrapped — view page source in the portal and confirm the script body is present and parses.