UI Builder - Adding a Custom Component with Events

#UI Builder , #UI Builder Bytes , #Quebec , #Now Experience

Brad Tilton

3 minute read

There are a lot of components available by default in the Quebec release in UI Builder you can use to build and customize your experiences, but you may run into a scenario where you need a component to do something that none of the default components can do. I do think that, compared to service portal, developers will not need to build custom components as often as they need to build custom widgets due to the power of UI Builder.

In the case where you do need to build a custom component you’ll probably want that component to fire events and attach event handlers to those events in UI Builder. Unfortunately, at the moment the CLI is not creating the necessary records for that to work when you deploy a component to an instance. The good news is that it’s a pretty easy process to get your events working in your component after you deploy to the instance.

How to Use Events with Your Custom Component

In the following video I take a very basic custom component, deploy it to a PDI, configure the event, and then attach an event handler in UI Builder. We don’t really get into how to create a custom component, but if you’re looking for more information I would start at the Now Experience API Documentation or my Getting Started with the Now Experience UI Framework blog post.

The rough steps are:

  1. Begin with a locally developed component that fires an event. You can reference the code for mine here: ServiceNowDevProgram/uib-component-events-blog
  2. Deploy your component to your instance.
  3. Create an event record in the sys_ux_event table. The event name should match the name of the event dispatched in your component. The label should be something unique and descriptive as it will show in a couple of places.
  4. Find the sys_ux_macroponent record for the component you’ve deployed and add the events you created in your previous step to the Dispatched Events list field on that record and save.
  5. Add your component to the UI Builder page and you should see an event you can add an event handler to in the Events tab.

More Resources

Make sure to check out the previous posts in this UI Builder series, and stay tuned for more posts.

Have a UI Builder topic you’d like me to hit in a future post? Let me know on Twitter, LinkedIn, or sndevs.com slack (@btilton).

Comments