TechNow Ep 92 | Building Custom Experiences with UI Builder

[Chuck Tomasi]

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

• Developer Portal

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!

LIST ALL EPISODES

Questions and Answers

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

-- Dagan Chapman

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

-- Chuck Tomasi

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

-- Brandon Phillips

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

-- Brad Tilton

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

-- Eric Krasinski

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

-- Jeremy Duncan

will the page auto refresh with updates?

-- Jay Tarantino

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

-- Chuck Tomasi

Can UIB be used for creating agent workspace for ITSM ?

-- Frank Van der Haeghen

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

-- Jeremy Duncan

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

-- Anthony Anijah

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.

-- Chuck Tomasi

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

-- Talal Alsibyani

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

-- Jeremy Duncan

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

-- Matthias Kuhn

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

-- Chuck Tomasi

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

-- Bala Krishna Mukka

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

-- Chuck Tomasi

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?

-- Alexandra Dickman

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

-- Chuck Tomasi

are changes to these records shown in real-time?

-- Erik Schreurs

For performance reasons, most lists are refreshed manually.

-- Chuck Tomasi

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!!!

-- Anthony Anijah

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

-- Chuck Tomasi

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?

-- Joe Callin

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

-- Chuck Tomasi

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)

-- Sushil Sunil Sawant

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.

-- Brad Tilton

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

-- Bobby Showalter

Answered live. Still TBD on responsiveness.

-- Jeremy Duncan

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

-- Frank Van der Haeghen

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.

-- Brad Tilton

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

-- Marc Lindsay

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

-- Chuck Tomasi

can you nest containers?

-- Jay Tarantino

Answered live, thanks for your question Jay!

-- Jeremy Duncan

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?

-- Anthony Anijah

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.

-- Chuck Tomasi

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

-- Timothy Woodruff

Hopefully Brad answered this live.

-- Chuck Tomasi

can we add custom css class in containers/components?

-- Bala Krishna Mukka

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/

-- Brad Tilton

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

-- Alex Khayo

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

-- Brad Tilton

How to set roles to the variants?

-- Girish N

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

-- Chuck Tomasi

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

-- Timothy Hirschi

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.

-- Chuck Tomasi

Will we have a similar webinar for flow designer?

-- Anthony Anijah

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.

-- Chuck Tomasi

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?

-- Eric Krasinski

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

-- Jeremy Duncan

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

-- Swarnim Das

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

-- Chuck Tomasi

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

-- Girish N

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

-- Brad Tilton

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

-- Prasad Polamarasetty

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

-- Jeremy Duncan

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?

-- Ishaan Shoor

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

-- Chuck Tomasi

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?

-- Anthony Anijah

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

-- Jeremy Duncan

Are these pages & components responsive?

-- Joshua Levie

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

-- Jeremy Duncan

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

-- Jay Tarantino

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

-- Chuck Tomasi

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

-- Bala Krishna Mukka

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

-- Jeremy Duncan

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?

-- Brian Burke

Have you tried Database Views, under System Definition?

-- Jeremy Duncan

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!

-- Bobby Showalter

Answered live, thanks for your question Bobby!

-- Jeremy Duncan

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

-- Gosia Urbanska

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

-- Brad Tilton

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

-- Nancy Bencosme

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

-- Chuck Tomasi

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

-- Kshitij Bhatnagar

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.

-- Chuck Tomasi

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

-- Jay Tarantino

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

-- Chuck Tomasi

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?

-- Timothy Woodruff

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

-- Jeremy Duncan

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.

-- Rebecca Froehlich

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

-- Chuck Tomasi

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.

-- Bobby Showalter

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.

-- Chuck Tomasi

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.

-- Brian Burke

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

-- Jeremy Duncan

Is UI Builder compatible with ATF?

-- Maarten ter Steege

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

-- Brad Tilton

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

-- Joe Callin

It should send the list click event either way.

-- Brad Tilton

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

-- Bala Krishna Mukka

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.

-- Chuck Tomasi

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?

-- Mitch Fleischman

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

-- Chuck Tomasi

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

-- Ethan Metcalf

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

-- Chuck Tomasi

Any good resources around ServiceNow CLI ?

-- Swarnim Das

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

-- Brad Tilton