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

Questions and Answers

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

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

How are we updating immutable state?

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.

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

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

Can we deploy React based Component of ServiceNow?

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.

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

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

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

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

How do you know what events are available?

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

Has Snabdom made any good performance impacts?

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

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

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

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

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

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?

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.

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

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.

Can you still use React type components?

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.

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

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.

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

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

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

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.

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

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

Is it going to replace the Service portal?

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.

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

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

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

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

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

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.

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?

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

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

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.

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

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

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

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

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

Thank you

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?

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.

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?

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

Beethoven makes for a nice intro, thanks ;-)

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

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

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.

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

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

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?

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

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?

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.

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

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.

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?

A solution for this is planned for the Paris release.

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)

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.

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

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.

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?

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

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?

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.

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

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.

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?

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

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

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.

Is there a defined list of ServiceNow Supported Libraries?

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

Channel link please?

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

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

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.

How to get old recordings?

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

Can we build components for a scoped application?

Each component project is deployed as a scoped app.

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

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.

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?

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.

Can we modify/Clone OOTB components?

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.

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

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

Need a youtube upload of this session ASAP

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.

Please post Wolfgang's YouTube site link

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

Thank you! Fantastic demo and very neat code!

You're welcome

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

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.

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

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.