UI Builder: How to extend an already included package?

General
1

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:

index.html

...
    ...
    <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>
</body>
</html>

index.js:

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?

Cheers,
Marcel

2

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.

[EDIT]
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
source

3

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..
        dayjs.extend(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')
dayjs.extend(utc)

... it's not knowing require.

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

4

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).

2 Likes
5

facepalm

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

6

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