UI Builder and Service Portal

[Brad Tilton]

This article is still accurate as of the Yokohama release

We field a lot of questions about when to use UI Builder vs when to use Service Portal, and also when customers will be able to build requester-facing enterprise service portals with UIB. The best answer I can give you to the second question is "not yet" but I'm going to attempt to answer the first one in this article.

UI Builder

• UI Builder is ServiceNow's web user interface page builder for agent and fulfiller experiences.
• It is built on and uses a ServiceNow JavaScript framework called the Next Experience UI Framework built on web components standards, similar to React. 
• You can use one of our 60+ OOTB workspaces or use App Engine Studio to create a starter workspace or a starter portal experience. These portal experiences should be small, departmental-type portals that do not need extensive catalog or knowledge interfaces.

Service Portal

• Service Portal is ServiceNow’s web user interface portal builder for requester experiences.

• It is built on and uses Angular widgets as its tech stack.

• Employee Center is our current recommended Service Portal.

Both of these technologies, UI Builder and Service Portal, are supported methods for building custom user experiences on the Now Platform.

UI Builder vs Service Portal

The first decision point in deciding whether to use UIB vs SP is whether the audience for your experience is a requester or fulfiller persona. Requesters typically need service catalog, responsive designs, and public page access, which are all fairly easy and straightforward in Service Portal.

If your app does not follow the standard requester/fulfiller model you can use the rest of the chart to determine which tool to use to build your experience. 

Capability	UI Builder	Service Portal
Target Audience	Fulfillers	Requesters
Portal Capability	Workspaces and small, departmental portals	Enterprise portals
Responsive	Partial for new pages in Xanadu+	Yes
Pixel Perfect Design	No	Yes
Service Catalog	Very limited support	Fully supported
ATF Testing	Partial	Fully Supported
Public Pages	Difficult to set up	Yes

Hopefully, this is helpful, and if you've got more questions please leave a comment.

[Mukul Garg1]

Very well explained @Brad Tilton!

[Kali Alexander]

Great summary of the content you and Ashley fleshed out in the academy session. Looking to see how UIB evolves in Utah. Thank you!

[Easwar2]

Great explanation @Brad Tilton 

[Tobey Coffin]

Is there by chance a video/job aid available for developing and working with the UI Builder!? I can't seem to find anything to help me get started.

Thanks in advance!

[Brad Tilton]

@Tobey Coffin Sure, check out the UI Builder Fundamentals course.

[Rajkumar Samaka]

Thank you so much the information is so helpful.

[ArjunBasnet]

This definitely helps making decision and clarifies confusion. The development in Next Experience UI Framework and UI Builder rightly address the developer needs to develop modern looking UI. In one of the recent PEAK session:  "Next Experience and UIB Utah",  @Brad Tilton it was mentioned that ServicecNow supported custom UI development are: UI Builder and Service Portal.

Then, it made me to questions what about traditional technologies such as: UI Pages, UI Macros, UI Scripts, and so on. These technologies form the foundation for "Classic UI", is it going to change in the future? What happens to customization done by customers or partner? Should custom application developed prior to "Next Experience", using traditional technologies, worry for the future? Should custom application UI developed using traditional technologies migrated?

Thanks,
Arjun

[Brad Tilton]

At this point I would not worry about anything being deprecated and just use the most appropriate technology for whatever you're trying to do.

[Community Alums]

Great explanation @Brad Tilton  

[scottl]

@Brad Tilton  How is ServiceNow solving the industry resource problem by introducing another overly complex developer app with UI Builder which comes with obvious pain points?  

[Brad Tilton]

Hi @scottl we're focused on making UI Builder easier to use and solving for those pain points.

[ARP3]

@Brad Tilton Would you mind taking a look at this question related to UI builder portal?

https://www.servicenow.com/community/next-experience-forum/ui-builder-portal-catalog-answers-retaine... 

[ayounis]

Hi, you mentioned Angular (vs AngularJS) which usually means Angular 2+. Which is the intended one?

[Brad Tilton]

@ayounis Service Portal is built on AngularJS (1).

[dev_hakimoufkir]

I learned a lot thank you.

[Yuriks]

Helpful article, thank you.

What is "Responsive" criteria in the table?

[Lucas S Pereira]

Your explanation is very good! 

[Satoshi Abe]

1. The AngularJS mechanism is currently recommended for customer portals, but is there a roadmap for replacing it with UI Builder (Next Experience UI Framework) in the future?

2. In the future, we would like to know the indicators for building a portal for customers, for example, AngularJS within 6 months, and UI Builder after that.

3. If it becomes possible to build customer portals with UI Builder in the future, will App Engine Studio be required?

[Thomas Weyer]

@Brad Tilton We are upgrading to Washington DC within the next month and assessing the use of both Service Portal and App Engine Studio Portal experience as options for an employee/manager skill assessment tracking application.  Since this is out of the requestor/fulfiller realm and all internal employees, would you see any benefit in creating this in Service Portal?  We are slightly biased (read excited!) to use UI Builder more than AngularJS. 🙂   

Thanks for any insight! 

[Amit Gujarathi]

Thanks for this information this really helps.

[Brad Tilton]

@Thomas Weyer I think as long as you don't need catalog support, public pages, or responsive design UIB can be used for smaller departmental portals like you're describing.

[Ina]

Hi Brad!

We've already created a portal in UIB, for our entire organization.  

We have had some issues getting started. While things have improved, we still spend a significant amount of time on development, customizations and debugging.

ServiceNow Norway are saying to use ESC (I believe this is due to the overall recommendation to use ESC, and not so much to our specific situation),  but we’re hesitant to switch now that we’ve launched the UIB portal. Everything seems to indicate that UIB is the way forward.

Do you have any specific recommendations for our situation?

[Brad Tilton]

Our recommendation has been to use Employee Center (a service portal built on angular) for requester use cases and workspaces/UIB for requester/end user use cases.

If you've already built out a UIB portal I think it would depend on if you need things like responsive, catalog, public pages, etc. which EC does a lot better than a UIB portal.

[johnteddy20]

@Brad Tilton - In App Engine Studio, citizen developers have the option of creating a self-service portal (e.g., to allow users to submit requests) for their application using UI Builder. Given that UI Builder is geared towards agent and fulfiller experiences, should using UI Builder to create portals for requestor experience be discouraged?

[Brad Tilton]

Hi @johnteddy20, as long as your portal doesn't need to be responsive, public-facing (this is possible but requires a lot of manual effort), have a pixel-perfect design, or use advanced catalog it's fine to use for portals. It's just not yet feature-rich enough to be a true replacement for service portal and creating enterprise-wide requester facing service portals.

[Satoshi Abe]

Hi @Brad Tilton 

Is there a roadmap to be able to create with UI Builder (Next Experience UI Framework) in OOB to provide a customer portal?

[Brad Tilton]

Hi @Satoshi Abe this article remains accurate through Xanadu. We can't share forward-looking roadmap items publicly, but if you reach out to your account rep they may be able to get you more roadmap info.

[Joseph2]

I have a question about the UI Builder Portal and the record producer application I built. I followed a course on your site to create this application. The record producer appears on a page seemingly out of nowhere. I want to add a button on the web page, not necessarily on the record producer itself, though either option would be fine.

I tried to find how to place a button on the record producer, but I can't locate the objects that make up the developed page around the encased record producer to enhance it. Where is the page setup that encases the record producer? Why is it so difficult to add a button in the UI Builder setup for the record producer?

[scottl]

@Brad Tilton I hope you weren't responsible for that mess of a portal called Employee Center that you are recommending. Whoever was responsible for implementing that should've been fired. There isn't a single thing within that Portal that follows SN best practices, and let's not begin to mention the basic web development approach to CSS which someone butchered.  Good luck anyone wanting to changing the colours. I've never seen such a poor implementation of a portal ever, and that's even compared to SN's existing portals which are questionable. 

And how about the decision around the heavy caching the menus which was never mentioned, where people spend hours trying to understand why their menus weren't showing during development, and how "the menus" are built, while ignoring extending the current table which worked perfectly fine.

AND all this for a better "AI Search", which doesn't even work without some huge overhaul with one needing to be a Google search engineer in-order to change it! It can't even restrict which cat items to show based on the Catalog set against the portal, it just shows them all.

Because I don't see how SN is "making it easier to use and solving for those pain points." when SN just continues to introduce even more pain points. 

ServiceNow really does have some explaining to do, with their development community. Because it seems things are getting worse, to the point where a simple thing like returning a default value on a decision table doesn't even work ...still. How does that even get past testing on an ENTERPRISE level platform, that customers spend millions on?