UI Builder, external components and "Events" tab.

[Sergey Sidorin]

I'm writing an external component and I'm going to add event mapping to this. I use this code in now-ui.json:

~~~
        "xxxxx-datepicker": {
            "innerComponents": [
                "now-input",
                "now-heading",
                "now-button",
                "now-record-mini-calendar"
            ],
            "uiBuilder": {
                "associatedTypes": ["global.core", "global.landing-page"],
                "label": "XXXXX Date Picker",
                "icon": "calendar-outline",
                "description": "Date Picker Control",
                "category": "primitives"
            },
            "properties": [],
            "actions": [{
                "description": "Dispatched when the button is clicked",
                "label": "Button clicked",
                "name": "XXXXX_DATEPICKER#CLICKED",
                "payload": []
            }],
            "slots": [],
            "handlers": []
        },
~~~

and index.js:

~~~
createEnhancedElement('xxxxx-datepicker', {
    renderer: {type: snabbdom},
    view,
    styles,
    dispatches: {
        'XXXXX_DATEPICKER#CLICKED': {schema: {type: 'object'}}
    },
    slots: {
        defaultSlot: {}
    }
});

And it doesn't work unfortunately, I mean, UI Builder still displays empty "Events" configuration tab for this component. "No events available. The selected component has no configurable events."

What did I wrong?

I'd read "Introduction to External Component Development - SD" course, but it doesn't cover event mappings, so I'm trying to learn by source code of @Servicenow/now-button component, for example.

[Jan Moser · Accepted solution]

Hi,

yes, there is a bug in now-cli. Here you can find the fix for that 😉 

https://youtu.be/fyBVjuAY1wo?t=156

Jan

[Sergey Sidorin]

Thank you!