Learn how to use UI Builder to create a great experience for your custom apps. Brad Tilton, Sr. Developer Advocate with ServiceNow shows you how to deliver amazing experiences using ServiceNow's intuitive WYSIWYG builder.

Originally aired: November 30, 2021 8:00 AM PT

Links Mentioned

Featured Experts

Brad Tilton is a Sr. Developer Advocate for ServiceNow. He has been a customer and partner before joining ServiceNow in 2015. In addition to being passionate about ServiceNow I'm a Houston and Aggie sports fan, board game nerd, and dad to biological, adopted, and foster kids.

Chuck Tomasi is a Sr. Developer Advocate 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 Sr Staff Enterprise-wide Apps/Sys Developer within ServiceNow Training and Certification 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 Workflow Design Studio 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 and is a ServiceNow Certified Master Architect. 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!

Questions and Answers

What is the official reason we cannot use tables like sn_si_incident in UI builder?

No idea. It could be an oversight in how the table filter was created. I recommend reaching out to customer support for more information.

Does the CLI allow you to add the custom CSS that are hardcoded from the UI builder?

The CLI allows you to create your own custom components which can have their own CSS theming hooks.

Is there something in Now Learning or on the Developer site with courses to learn this UI Builder?

We've got blog articles on the dev portal, videos on our YouTube channel, and I believe NowLearning just came out with a UI Builder course (https://community.servicenow.com/community?id=community\_article&sys\_id=70e78f831bebac100b8a9979b04bcb68).

will the page auto refresh with updates?

By default, it's manual. There is a way to make it auto refresh. Watch for an upcoming blog entry at https://devlink.sn/blog

Can UIB be used for creating agent workspace for ITSM ?

Hey Frank! Yes, if you're creating an "Agent" workspace, you'd have limited component use. If you choose to go "Configurable" workspace, you'll have access to over 100 canned components, and custom components! Both can be created in UIB. I did a session b

Do you also have a webinar for angular.js related to service now as well?

We do not. Some of our partners have done some wonderful content. We also have a Service Portal course that covers everything from the portal to some simple component building.

Can you please share with us the recording of this session, because I joined lately

Hi Talal, you can find it here in a couple of weeks: https://community.servicenow.com/community?id=community\_blog&sys\_id=7567db481ba7fc109a53ece7624bcb5a

Is it possible to change the size of a container manually?

If you're talking about the slots on a modal, yes, there's a height and width. Similar properties are available for the container.

Issue is that i want to create custom component for now experience but on deploy evrything is cleared?

Hi Bala, you would be correct. The CLI is the way to build and deploy custom components.

Thinking of all the SP pages I've built, can they plug and play on the same portal as UI Builder pages? Or components and SP widgets at the same page?

Service Portal and UI Builder are two different technologies. There is currently no "migration tool" to aid the transition. Similar to the legacy workflow and Flow Designer, maintain the old stuff where it is and look for opportunities to build the new st

are changes to these records shown in real-time?

For performance reasons, most lists are refreshed manually.

Thanks where can I find the service portal course? Will it be similar to that awesome JavaScript lessons by Chuck Tomasi on YouTube? That was a great lesson set!!!

The Service Portal course is a paid offering at https://nowlearning.servicenow.com. Thanks for the kind words about the JavaScript series. Don't forget to also check out the free content on integrations at https://devlink.sn/learn-integrations (shameless

I apologize I am fairly new to ServiceNow let alone UI Builder, Can you modify the max width of the center column in the layout? Can you create your own layouts?

Yes, you can adjust the pane width on the right and left. Custom layouts in UI Builder are not available at this point.

Is there a posibility of connecting two filters(In one filters you select Employees having companies as USA and taking the company USA as a base can we add filters in the 2nd filter)

You can connect two components to each other by binding client state parameters to the properties of one and updating the client state parameters from the events of the other.

Are any of the out-of-the-box layouts responsive? i.e. will the sections wrap, or otherwise adapt, to the available screen space?

Answered live. Still TBD on responsiveness.

Is it possible to export parts (containers)? (reuse in other pages)

This is not yet possible through UI Builder. However, since the structure of each page is stored as JSON on the page's sys_ux_macroponent record you can copy it out of one page to another through the back-end.

Is app engine studio part of core now platform or require additional licenses ?

Appe Engine Studio is available with an App Engine license. UI Builder is available outside AES, but harder (as Brad explained while I was typing this.)

can you nest containers?

Answered live, thanks for your question Jay!

How would we set alerts and email notifications for new todo entries and Also how do we set alerts and email notifications for TODO' that are DUE or 24 hours before DUE date?

That would be done outside UI Builder as it's more of a Flow Designer thing. You want to trigger a notification based on a due date change or state change. Pretty easy stuff.

Are we moving toward not having to use the CLI to make these things? -- The CLI isn't even easily accessible for independent developers.

Hopefully Brad answered this live.

can we add custom css class in containers/components?

This article and video helps explain how theming hooks can be applied to components and their containers: https://developer.servicenow.com/blog.do?p=/post/quebec-ui-builder-themes/

Can you configure a form to enter data on a parent table record and it’s child related list on the same form page

It's hard to say for sure without knowing more details, but something like this may be possible.

How to set roles to the variants?

The tip to doing that is to create an audience. let us know if you have any questions.

Is there a way to get a more customer friend-ler way to get a easier url instead of /x/random number/todo/todo to be something like https://instanceurl.service-now.com/todo

I believe you can with the Custom URL plugin. This plugin is mainly used for vanity URLs on a customers domain. E.g. "todo.byu.edu" could point to that to your TODO workspace.

Will we have a similar webinar for flow designer?

Hi Anthony, we've covered Flow Designer in the past. Check out our table of contents at https://devlink.sn/technow. I have a plan on the roadmap to do a Flow Designer series (much like JavaScript and Integrations), but no date yet.

Maybe a question for the end of the demo... Is Now Experience something we can use for the service portal? I.e. convert the service portal, \sp, to this new Now Experience for self service users? Or is Now Experience just for custom apps?

Hey Eric, you can absolutely build front-end experiences for a "portal" like interface. This will be iterative as we have lots of customers still enjoying Angular.js portal experiences. The beautiful thing is that you have the same "experience" in buildin

Can we configure Agent Workspaces created before Quebec using UI Builder ?

Yes, it will present the old UI Builder and doesn't have as much capabilities.

Can you give us some referance for Client Script in UI Builder

The client scripting APIs are available on the developer site: https://developer.servicenow.com/dev.do#!/reference/api/rome/client/?navFilter=ui+builder

As you mentioned that UI builder is not responsing at this stage,when do you recommend to use UI builder instead of service portals /

Hi Prasad, i'd recommend a couple of releases before entertaining that idea.

just on the refresh thing, if something is changed in terms of the configuration like we did right now. we will have refresh isn't it?

If you make a configuration change in UIB, you will need to refresh your "test window", just like any other portal.

How would we change the TODO date font to red as the DUE date gets closer to the DUE date or is on the DUE date?

Hopefully this works for you! https://docs.servicenow.com/bundle/rome-servicenow-platform/page/administer/workspace/task/highlight-list-fields.html

Are these pages & components responsive?

Hey Joshua, not yet. I'm being told that it's coming, but not sure what release just yet.

hi, where can these componets be used? in the portal? on the platform?

The components are used in UI Builder. The term "widgets" is how we refer to the Service Portal elements you can configure.

can we modify css for components like border, colors, text alignments?

Answered live, thanks for your question and check out the LCHH session.

We often have a problem with reporting and dashboarding where we want to view a record set based on filters of two child tables, where they share a parent table but are not directly referenced to each other. One example is sys_conversation and interaction_context which both relate to interaction, but not eachother directly. We can build record sets with scripting and glidequeries, but is there a way in UI builder to filter and respresent data without scripting? Something like a GUI based table "join" functionality between the two tables that filters can be applied to?

Have you tried Database Views, under System Definition?

On the Stylized Text component, what is the difference between the "Edit CSS" button in the "Config" tab and the CSS box on the "Styles" tab? Thank you!

Answered live, thanks for your question Bobby!

is it possible to implement a list edit on the simple list component?

It appears that both the list components should support inline editing, but you need to turn on a property: https://docs.servicenow.com/bundle/rome-servicenow-platform/page/administer/workspace/task/disable-inline-editing.html

Do we have documentation for these hooks? I was only able to find community posts on it

Check out the Reference > Now Experience section on the developer portal.

is UI Builder going to replace service portal and employee center in coming future?is there any roladmap to be compatible to mobile view also in upcoming release

The direction is to migrate most desktop portals to Now Experience. I don't have a timeframe on Employee Center. While I haven't seen any indication of "mobile friendly" in Now Experience, that's not to say it isn't coming, just that I haven't heard of it. For now, the direction for mobile is the mobile app.

so is the to_do table a custom table? what i mean is , can we create a custom table to wrok with these componets?

UI Builder allows you to work with both built-in and custom tables.

What's the best place to find documentation for what all of this means and contains in the code? For example, what "api" contains, and what "api.state" contains, and so on?

Hey Timothy, I'd recommend the following 1. Our Now Experience Center of Excellence: https://community.servicenow.com/community?id=community\_article&sys\_id=70e78f831bebac100b8a9979b04bcb68 | 2. Our Developer Site Component Library: https://developer.servi

Will you or have you had a demo on how to configure an out of the box workspace/dashboard with UI Builder? I'm currently looking into the Conversational Analytics-Virtual Agent Dashboard. What are the best practices to edit the pages.

We have done several Live Coding Happy Hour sessions on workspaces. I thought one of them involved an OOB workspace, but don't recall specifically (sorry.) Here's a URL with search results if you have a moment to do a quick review. https://www.youtube.com/c/ServiceNowDevProgram/search?query=workspace

Are there plans to add more CSS Custom Properties to the UIB components? Some components, like the Simple List component, have UI color choices that are hard-coded and can't be changed with the available UX Theme Custom Properties.

We don't know of any plans at the moment, but heard there are some exciting things coming in San Diego (Q1 2022). Stay tuned and don't forget about the idea portal on https://community.servicenow.com.

Not for that particular use case. I've tried to use them in the past for something else but it failed because in that situation I needed an outer join and the database views are only left inner joins.

Check this out for the outer and let me know if this doesn't help. https://community.servicenow.com/community?id=community\_question&sys\_id=0d7ea161db5f9b80e0e80b55ca96196b

Is UI Builder compatible with ATF?

There is some ATF compatibility with workspaces, but not full support.

The button still accepts keyboard inputs (enter/space) as well? If so, does that still send the onclick event?

It should send the list click event either way.

how can we utilize nownexpreince ui frame form on vs code? Is it sncli?

The CLI is multi-purpose. One of the things it does is allow you to build custom components. Hopefully Brad clarified that in the "1.0" slide.

Is it the idea that UI Builder will be the next iteration of Service Portal? Is the expectation that the component-based front-end frameworks (angular, React, Vue) won't be needed?

The main reason for migrating away from Service Portal to the Now Experience is technical debt. Now Experience is built on a ServiceNow technology which means the developer is insulated from the underlying technology. If it changes from language A to lang

Does UI Builder require any particular license to develop on or interact with the finished product?

Short answer no. For USING a UIB workspace, users can use it. The app that it's related to... that's may be a different discussion. As with any licensing questions, I defer to your friendly ServiceNow account team for up to date (and accurate) information

Any good resources around ServiceNow CLI ?

This CreatorCon lab is the best resource I know of: https://nowlearning.service-now.com/lxp?id=overview&sys\_id=3b99f0d61b3fe010a5e699b1b24bcb7d&type=course You should also check out the components section of the Now Experience COE Article: https://community.servicenow.com/community?id=community\_article&sys\_id=70e78f831bebac100b8a9979b04bcb68