Now Experience
So far in our Now Experience UI Builder series we’ve looked at creating pages, adding components to pages, using data sources to return data from the platform, and then binding that data to our components. As we continue this week we’re going to take a look at client state parameters, client scripts, and events. These are the tools that are going to allow the components on our UI Builder pages to communicate and share data with each other and ultimately make these pages more powerful.
It’s Now Experience week on the developer blog, and the Now Experience UI Framework had some significant enhancements and new capabilities in the Quebec release.
UI Builder The biggest and most obvious of these new capabilities is the new version of UI Builder in Quebec. UI Builder is a WYSIWYG web user interface builder that enables developers to build new pages or customize existing pages for web-based workspace and portal experiences using ServiceNow Experience Components and custom web components.
Last week we dove into creating and using data resources in UI Builder by binding the output from a data resource to component properties in order to make our components more dynamic. This week we’ll continue our UI Builder series by looking at the Entity View Action Mapper (EVAM) type of data source.
What if you want to show a data element as a card in a row, list, or a grid view, rather than one of the list components?
We are releasing some UI Builder related content every week during the Quebec Early Availability period. So far we’ve covered how to get started and a quick overview, and all about pages in UI Builder. This week we’ll be focusing on Data Resources.
A Data Resource in UI Builder allows you to fetch data from the instance to the page and then consume that data from a component. Previous to the Quebec release, component authors had to hard code REST or GraphQL queries as well as any data transformations into their components.
As we learned last week, the first thing you’ll do when working with experiences in UI Builder is create or open an experience and create a new page. When you create a new page you’ll be able to add containers, components, data resources, and more to the page.
This week, we’ll look at pages a little more closely and explore pages and their settings, parameters, templates, and variants.
Page Templates When you create a new page in UI Builder, you’ll have the option to create a blank page or a page from a template.
One of the primary highlights of the Quebec Release, the Now Experience UI Builder is a web user interface builder that lets you see what the final interface would look like as you build new pages or customize existing pages for web-based workspace and portal experiences.
UI Builder Foundations Let’s start with some foundational concepts and terms you’ll need to understand in order to work with UI Builder.
Experiences Creating an experience is the first thing you’ll need when working with a custom UI through UI Builder.
Hacktoberfest 2020 is all wrapped up and finished. What a fun event it was this year. Our awesome developer MVPs did a great job setting up and coordinating the Now Components GitHub org for the dozen of repositories that were collaborated on there. It resulted in my first podcast recording ever with the Author of Podcasting for Dummies Chuck Tomasi. Brad and I acted as maintainers on both the component and spoke orgs, which was a ton of fun.
Update: There is a brand new Now Experience UI Framework course on the developer site that you should absolutely run through if you’re looking to get setup on the framework
As we’re getting into Hacktoberfest, ServiceNow developers are getting more interested in the Now Experience UI Framework and wondering how to get started. I put together a quick video to show how you go from a freshly installed now-cli to scaffolding and rendering your first component.
Our own Developer Advocate, Andrew Barnes joins Break Point to talk about Hacktoberfest, the annual challenge to promote open source development, how it ties in with ServiceNow, how you can participate, and swag you can earn.
Links Mentioned Developer blog DigitalOcean’s Hacktoberfest 2020 GitHub for spokes GitHub for components CCW1856 - Automated ServiceNow CI/CD Andrew Barnes: LinkedIn | Twitter Listen Subscribe to Break Point Apple Podcasts Google Podcasts Spotify Amazon Music Stitcher TuneIn RSS
What is Hacktoberfest Hacktoberfest is an event run by stewards of open source to encourage contributing to projects that are also open source.
Why participate in Hacktoberfest The more able you have your community, the more that community can contribute.
When you have that, you can help any number of open source projects. There’s a free t-shirt. We’re all very well paid, but this shirt will convince most of you.
