TechNow Ep 78 | Building Now Experience Components

[Chuck Tomasi]

Join the TechNow team and their very special guest, Wolfgang Wedemeyer, Staff Software Engineer at ServiceNow as he takes you through the process of building, publishing, and presenting a Now Experience component that interacts with ServiceNow instance data.

Originally aired: August 18, 2020 8:00 AM PT

Featured Experts

Wolf is a senior UI framework hacker and tool builder for the Now Experience. He has led multiple teams of developers, presented to large groups around the world, and made software an integral part of his daily professional/personal life. Wolf is a musician, photographer, functional programming fanatic, blogger, and videographer in his remaining time.

Chuck Tomasi is a Sr. Developer Evangelist for ServiceNow. He is a computer science major with over 35 years of IT experience. As a former ServiceNow customer, Chuck won the first Innovation of the Year Award at Knowledge 10. Since joining ServiceNow in 2010 as a Technical Consultant, he has done many large scale ITSM implementations and custom applications, acted as an adjunct instructor for Education Services, created and lead the Technical Best Practices program, makes appearances on Live Coding Happy Hour, created dozens of fit for purpose custom applications, and co-hosts the ServiceNow series "TechNow".

Kreg Steppe is a Training and Certification Program Manager within ServiceNow developing and supporting cloud training infrastructure. He specializes in developing integration solutions, automating repeatable processes and Cloud Management in ITOM. Kreg's prior experience includes operating his own ISP, developing web applications in PHP, network integration, managing network support, Application Development on cloud based networks, DNS and email server maintenance. He is a Linux enthusiast and enjoys Photography.

Jeremy Duncan is a Platform Architect on the Innovation team at ServiceNow. Jeremy is an Enterprise Architect with over 16 years of IT and Service Management experience. His experience and certifications span across retail and manufacturing with focuses on hardware, software, and information security specialties. He has done many implementations in both the Enterprise Federal and Commercial spaces since 2011 and brings a breadth of platform knowledge that aids him in sound architectural decisions. He achieved his B.B.A. at MTSU and majored in Information Systems. He spends his free time fighting crime as a volunteer certified police officer in North Nashville since 2012 and enjoys family time, camping, with his wife and kids!

---

Links Mentioned

• ServiceNow Documentation
• ServiceNow Community
• Developer Portal
• TechNow Episode List
• Customer Success Center
• YouTube: Barely Functional Dev

---

LIST ALL EPISODES

Questions and Answers

where can we see the complete list of OOB components that can be added as dependencies?

-- Berny Alvarado

About 3/4 down the page are pointers to web components: https://developer.servicenow.com/dev.do#!/reference/now-experience/orlando/ui-framework/getting-started/introduction

-- Jeremy Duncan

How are we updating immutable state?

-- Foster Hardie

Immutable updates are represented by passing an object when calling updateState instead of modifying values in state directly. We have more details in our docs: https://developer.servicenow.com/dev.do#!/reference/now-experience/orlando/ui-framework/now-experience-ui-framework-101/state#state-updates.

-- Wolfgang Wedemeyer

Is there a plan for creating a local documentation website for overview of built components? Something like developer webiste or storybook?

-- Tomas Hrobarik

This isn't currently provided, but is possible to build yourself. Let us know if you build something.

-- Wolfgang Wedemeyer

Can we deploy React based Component of ServiceNow?

-- Vivek Verma

ServiceNow will not release any officially supported renderers other than the default renderer. However, you are free to create any renderer you like using the renderer contract, but ServiceNow will not provide support for any code that uses these renderers.

-- Wolfgang Wedemeyer

can you tell it to search only after X number of characters?

-- Richard Forristall

Yes, that logic would be easy to implement in the check before dispatching the action that makes the HTTP request.

-- Wolfgang Wedemeyer

is this being recorded so we can pour over it in detail later? Thanks.

-- Richard Forristall

Yes. I will have it on YouTube and the community in a few days.

-- Chuck Tomasi

How do you know what events are available?

-- Drew West

A good list is doumented here: https://developer.mozilla.org/en-US/docs/Web/Events.

-- Wolfgang Wedemeyer

Has Snabdom made any good performance impacts?

-- Chris Nanda

Snabbdom was not primarily chosen for performance reasons, but instead because it is modular so that we can include only the features we need.

-- Wolfgang Wedemeyer

Do we will have an equivalent to the Store to share/propose some dedicated component we created ?

-- Silvère Poirier

Components are deployed as scoped apps and can be shared in the same way as others.

-- Wolfgang Wedemeyer

Are there plans to integrate Components into a Service Portal like experience?

-- Luke McKenna

If the question is "can you build a portal with Now Experience components?", the answer is yes. The entire developer.servicenow.com site was rebuilt in early 2020 using the Now Experience technology. We are looking at ways to make that easier to build and maintain (think something like Service Portal configuration/UI Builder.)

-- Chuck Tomasi

Some of the internal components in workspace are written as React components that are wrapped inside a web components. What is the reason of using these React components instead of using the now web components? I also noticed some internal react renderer which can be used to embed a react component inside my now component. Is there a plan to release this renderer for public? Are there any plans to release any other renderers that would allow me to use e.g. Angular, Vue components?

-- Tomas Hrobarik

ServiceNow will not release any officially supported renderers other than the default renderer. However, you are free to create any renderer you like using the renderer contract, but ServiceNow will not provide support for any code that uses these renderers.

-- Wolfgang Wedemeyer

Are there planes to be able pull the original code from the instance?

-- Drew West

This is not supported and there are not currently plans to add this feature. The code that is pushed to the instance is a production bundle and not intended to pull for development. Plese use source control tools such as Git to share your component code between developers.

-- Wolfgang Wedemeyer

Can you still use React type components?

-- Chris Nanda

ServiceNow will not release any officially supported renderers other than the default renderer. However, you are free to create any renderer you like using the renderer contract, but ServiceNow will not provide support for any code that uses these renderers.

-- Wolfgang Wedemeyer

Can i watch this back, and get the code to share this knowledge with the developers in my team?

-- jack den Hertog

The code I used is a slightly modified version of this example: https://github.com/ServiceNowDevProgram/now-experience-component-examples/tree/master/src/agent-assist-example.

-- Wolfgang Wedemeyer

Are their any github repositories of some of these demos that we can reference?

-- Chris Nanda

Yes. You can find the Now Experience reference with examples on developer.servicenow.com. We will be updating/adding to this over time.

-- Chuck Tomasi

When will we be able to build a Now Experience UI on this cloud-based platform, using a cloud-based builder?

-- Timothy Woodruff

Our drag and drop experience for building UIs is called UI Builder. It doesn't allow for creating new components from scratch today, that requires local development tools.

-- Wolfgang Wedemeyer

Will dependencies support wild card versions to keep things up-to-date, or do you need to define a specific SN version

-- Luke McKenna

Use a platform release tag to get latest compatible version i.e. "orlando".

-- Wolfgang Wedemeyer

Is it going to replace the Service portal?

-- Vivek Verma

It's a similar story to legacy Workflow and Flow Designer. Developer resources will be invested in Now Experience and Service Portal will be put in maintenance mode. SP won't be going away. If we did, we'd have a lot of upset customers.

-- Chuck Tomasi

You said there is an on-input event but that is not listed on MDN?

-- Drew West

The list on MDN are the values you can fill in after the on- prefix: https://developer.mozilla.org/en-US/docs/Web/Events.

-- Wolfgang Wedemeyer

Is there a mechanism to override OOTB components like the loader, so branding can be a bit more complete?

-- Luke McKenna

Support for theming of Now Experience components is something we're looking into.

-- Wolfgang Wedemeyer

Seismic used to use React, and some still do I know, I didn't know if they still could be built.

-- Chris Nanda

ServiceNow will not release any officially supported renderers other than the default renderer. However, you are free to create any renderer you like using the renderer contract, but ServiceNow will not provide support for any code that uses these renderers.

-- Wolfgang Wedemeyer

Just to validate, ServiceNow's official response to supported libraries is that if we're legally allowed to use a given library that ServiceNow will provide full Hi support and, if necessary, P1 support for?

-- Joe Dukes

Third party libraries can be used when building custom components but support will be provided by the library vendor and not ServiceNow.

-- Wolfgang Wedemeyer

Do you have to update the innerComponents with everything that you imported?

-- Drew West

For information on how to use innerComponents, please see our docs: https://developer.servicenow.com/dev.do#!/reference/now-experience/orlando/cli/now-ui-config.

-- Wolfgang Wedemeyer

how do we find the UI builder in our developer instance?

-- Paul Hegel

Please see our documentation for UI Builder: https://docs.servicenow.com/bundle/orlando-servicenow-platform/page/administer/workspace/task/drag-and-drop-tutorial.html#drag-and-drop-tutorial

-- Wolfgang Wedemeyer

Is the only way to get data to the component from platform is using REST API?

-- Rupam Rupam

Only the HTTP effect is currently supported for getting data for the component.

-- Wolfgang Wedemeyer

Chuck, Wolf and team... great session!!

-- Berny Alvarado

Thank you

-- Chuck Tomasi

Does each individual component become it's own bundle? Ex if I make and display 4 components and each one uses a library like lodash, is that shared or loaded 4 times?

-- Shane Hogan

There will be a separate bundle deployed to the instance for each component, but instance-provided external code including lodash will be deployed separately and de-duplicated. At runtime, these bundles will be combined when served to the browser.

-- Wolfgang Wedemeyer

With the discussion of this being the future of UI, is this planned to be the new UI21? Or can we expect a different implementation/feature-set for UI21?

-- Joe Dukes

I haven't heard any plans for a UI21 at this point. The workspace interface offers some distinct advantages over the legacy Jelly forms, lists, UI pages. That being said, I haven't seen a roadmap to convert the entire UI (yet).

-- Chuck Tomasi

Beethoven makes for a nice intro, thanks ;-)

-- Alan Simpson

We'd run in to license issues with copyrighted music. :)

-- Chuck Tomasi

(In other words, when will we not have to install stuff on our local machines and do all that complicated local jazz that we can't do on a Chromebook for example)

-- Timothy Woodruff

Our drag and drop experience for building UIs is called UI Builder. It doesn't allow for creating new components from scratch today, that requires local development tools.

-- Wolfgang Wedemeyer

Are there any plans for components to take over for portal widgets?

-- Jamie Stroud

I'm not entirely sure what you are asking. Can you elaborate in the comments below?

-- Chuck Tomasi

I did an npm install (win10 and there are many, many package dependencies that are deprecated. Should we be updating those ourselves or will SN be actively maintaining the dependencies in the cli package?

-- Joshua Harem

The NOW CLI will be providing updates and you don't need to manage these dependencies.

-- Wolfgang Wedemeyer

Sorry for the basic question, I am seeing this for the first time today, what is an example of where I could use this in my instance?

-- Brian Ritchey

He's building a knowledge search. You input a string and it fetches related KB articles and allows you to click the article to view it. It's an example of building an interactive component that fetches and displays data from the server.

-- Chuck Tomasi

Which all languages are being used here: reactjs, npm?

-- Manish Verma

The languages used are modern JavaScript (ES6+) and SASS, which compiles to standard CSS. We do use npm, but instead of React we are using our own Now Experience UI Framework.

-- Wolfgang Wedemeyer

What if I need to store some data inside a component but dont want to use it inside a state since it would cause a re-render. E.g. a component is using setInterval and I need to store a reference to it and clear it after component removal?

-- Tomas Hrobarik

A solution for this is planned for the Paris release.

-- Wolfgang Wedemeyer

If you get a chance, can you show how slots are used? I have struggled with getting slots to work (actually cannot build component once I add slots to now-ui.json)

-- Mark Sproule

Please see our recipe https://developer.servicenow.com/dev.do#!/reference/now-experience/orlando/ui-framework/recipes/slots and example https://developer.servicenow.com/dev.do#!/reference/now-experience/orlando/ui-framework/examples/flash-card on how to use slots in our documentation.

-- Wolfgang Wedemeyer

will a react renderer, @servicenow/ui-renderer-react, ever be released so that we can implement react components natively?

-- James Freund

ServiceNow will not release any officially supported renderers other than the default renderer. However, you are free to create any renderer you like using the renderer contract, but ServiceNow will not provide support for any code that uses these renderers.

-- Wolfgang Wedemeyer

I should refrase my question, How do you know how to properly format the event name? Like MDN lists oninput, onclose and onchange as examples. Am I always putting a dash between the "on" and the rest or is there more to it than that?

-- Drew West

Yes: https://developer.servicenow.com/dev.do#!/reference/now-experience/orlando/ui-framework/now-experience-ui-framework-101/view#event-handlers

-- Wolfgang Wedemeyer

How to create custom component, which can be "Container" and so one will be able to place other "Data Visualization" component inside of the custom container?

-- Oleg Kiriljuk

If you are referring to container components used to manage state which wrap presentational components our docs offer guidance for that: https://developer.servicenow.com/dev.do#!/reference/now-experience/orlando/ui-framework/best-practices/managing-component-state.

-- Wolfgang Wedemeyer

Will components ever expand past just landing pages? Will we (eventually) be able to make multiple custom pages built up of components, like the portal

-- Shane Hogan

Short answer yes. There's a roadmap to allow components to be placed on more of the workspace, apps, and even entire portals built with the Now Experience.

-- Chuck Tomasi

With ServiceNow officially NOT supporting code customization, and all of this being custom development, does this mean this entire resource is unsupported by Hi? If there is support for this, what level of support can we expect?

-- Joe Dukes

Third party libraries can be used when building custom components but support will be provided by the library vendor and not ServiceNow.

-- Wolfgang Wedemeyer

How we can deploy the component from one instance to another instance?

-- Rahul Jadhav

1. Login to the instance where your component (say, @org/your-component) is located. 2. Open the @org/your-component record from the sys_app table. 3. Click on Switch to @org/your-component 4. Under Related Links, click on Publish to Update Set... and click Publish and then Done in the dialog boxes that open. 5. You’ll now find yourself redirected to your component’s update set record. 6. Under Related Links, click on Export to XML. This should download your update set in .xml format. 7. Now login to the instance where you need to deploy your component. 8. Type Update Sets in the Filter Navigator and click on Retrieved Update Sets. 9. Under Related Links, click on Import Update Set from XML and upload the update set downloaded in Step 6. 10. Open the @org/your-component record and click on Preview Update Set and then click on Done. 11. Click on Commit Update Set and click on Close once it finishes the commit. 12. Your component is now deployed to this instance. You can find it in the sys_app table.

-- Wolfgang Wedemeyer

Is there a defined list of ServiceNow Supported Libraries?

-- Joe Dukes

Third party libraries can be used when building custom components but support will be provided by the library vendor and not ServiceNow.

-- Wolfgang Wedemeyer

Channel link please?

-- Rajat Gupta

Here's a link to Wolf's channel: https://www.youtube.com/channel/UCld0nRHCzNEKsZcGGa9xcoQ

-- Chuck Tomasi

for the login , is this will be automatic if i use SSO?

-- Samah Mechael

The NOW CLI login command needs to be manually run, but the credentials are cached and will continue to work as long as they are valid. This is a feature we are looking at supporting in the future.

-- Wolfgang Wedemeyer

How to get old recordings?

-- Madhu Dora

You can find all TechNow episodes at http://bit.ly/servicenow-technow

-- Chuck Tomasi

Can we build components for a scoped application?

-- Bala Krishna Mukka

Each component project is deployed as a scoped app.

-- Wolfgang Wedemeyer

How we are going to manage code outside of the ServiceNow environment?

-- Vivek Verma

If you are asking about managing your local custom component code, you can use any number of version control products including Git to manage that code.

-- Wolfgang Wedemeyer

How to apply some custom CSS rules of specific component placed on specific page of landing page. Service Portal allow to specify CSS on widget, instance, page, themes and global on the service portal. Is close features available for agent workspace?

-- Oleg Kiriljuk

Each Now Experience component is encapsalated within a shadow root and CSS rules are scoped to that component only. We do this to ensure consistent look and feel of components everwhere they are used. If you want a specific component instance to look or behave differently, please define a component property for this customization. For more information about shadow DOM here's a helpful article: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM.

-- Wolfgang Wedemeyer

Can we modify/Clone OOTB components?

-- Vivek Verma

If the Now Experience Components are missing features you need, we encourage you to let us know the request so we can put them in our backlog. We want to avoid a proliferation of duplicate components that provide similar features in favor of reusable components.

-- Wolfgang Wedemeyer

Is the only way to get data to the component is using REST API?

-- Rupam Rupam

Only the HTTP effect is currently supported for getting data for the component.

-- Wolfgang Wedemeyer

Need a youtube upload of this session ASAP

-- Rupam Rupam

Definitely. I'll be getting it on the ServiceNow Community channel in the next couple days. Just need to do a little post production clean up.

-- Chuck Tomasi

Please post Wolfgang's YouTube site link

-- David Rosevold

https://www.youtube.com/channel/UCld0nRHCzNEKsZcGGa9xcoQ

-- Chuck Tomasi

Thank you! Fantastic demo and very neat code!

-- Joe Dukes

You're welcome

-- Wolfgang Wedemeyer

For the prefix "now' for OOB items, are we locked to a prefix like scoped apps?

-- Shane Craddock

The now- prefix is reserved for ServiceNow-provided components. Custom element tag names need to have globally unique names and so vendor prefixes are required.

-- Wolfgang Wedemeyer

I'm also interested on migrating some of the REACT web apps that we have into ServiceNow. Please let me know if this is possible. balvarado@volteo.com

-- Berny Alvarado

ServiceNow will not release any officially supported renderers other than the default renderer. However, you are free to create any renderer you like using the renderer contract, but ServiceNow will not provide support for any code that uses these renderers.

-- Wolfgang Wedemeyer