UI Builder: How to extend an already included package?

Good evening,

has anyone had the need to extend an already included package with an additional plugin?

As an example, I'd like to use a plugin (utc.js) from the dayjs library.
In plain JavaScript would be easy to extend, see: UTC · Day.js

Is there a way to accomplish this in ui builder?

Code so far:


    <script src="../uibuilder/vendor/dayjs/dayjs.min.js"></script>
    <script src="../uibuilder/vendor/dayjs/plugin/utc.js"></script>

    <script src="./uibuilderfe.min.js"></script> <!--    //prod version -->
    <script src="./index.js"></script>


var app1 = new Vue({
    el: '#app',
    data: {
        periodParams: {
            startDate :  dayjs().startOf('day').subtract(1, 'month').toDate(), // works fine
            endDate : dayjs().utc().startOf('day').toDate() // fails to load ui builder page

The definition of endDate using the utc() function will lead to an
Uncaught TypeError with the browser complaining dayjs(...).utc is not a function.

Anyone having a tip how to get this plugin integrated?


Hi Marcel ..

have you tried dayjs.extend(utc) as described in the link you sent ?
either in Vue's created or mounted Lifecycle Hooks

or even outside the Vue app1 code .. before Vue is created.

ok .. i tested this and what worked for me was to use
dayjs.extend(window.dayjs_plugin_utc) // load utc plugin
outside the Vue app code

Yes mate, I've tried that.
Problem is, that it does not know 'utc'

in index.js:

    created: function() {
        var utc = require('dayjs/plugin/utc') // or whatever path to utc..
ReferenceError: require is not defined
    at wn.created (index.js:719)
    at He (vue.min.js:6)
    at Yt (vue.min.js:6)
    at wn.t._init (vue.min.js:6)
    at new wn (vue.min.js:6)
    at index.js:203`Preformatted text`

When I declare utc outside the Vue app like this...

var utc = require('dayjs/plugin/utc')

... it's not knowing require.

Regarding your edit. What is 'dayjs_plugin_utc' referring to?

Hi, this page has the answer: Loading plugin in the browser · Day.js.

You cannot use require or import in the browser unless you have a build step that converts it (or, for import, your library is a HTML module in a newish browser).



How could I miss this page in the same menu tree! :face_with_raised_eyebrow:

Now that it's working the timestamps sent to NR no longer carry that stupid local timezone. :sunglasses:

Again, you have my big Thanks! @TotallyInformation

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.