Now Experience

#Orlando Release , #Now Experience , #User Experience , #Framework

Andrew Barnes

5 minute read

It has been a pleasure writing blogs on the platform features we believe developers want to know about and their changes during the Early Access period of the Orlando Release. I hope you have found them to be useful and relevant to you as a developer. The Developer Blog will continue to seek out topics for technical deep dives as we exit the release season.

One more thing!

Wait, we can’t go just yet, you say? There is another feature that needs to be covered? Let me look… it isn’t under the pillow… Where is it? I found it! I guess this final blog may be longer than expected.

Creating experiences in ServiceNow has gone through many changes in my time in the ecosystem – UI Pages, CMS, ServicePortal, UI11, UI15, UI16. The next iteration has arrived!

Now Experience

You have likely already seen examples of the new UI, like workspaces which debuted in London. The ServiceNow Developer site, which this blog lives on, has also been relaunched and built with Now Experience technology.

The Now Experience Design System and UI Framework have been created to provide a clean, modern way for Developers and Designers to craft cohesive, consumer-grade user experiences on the Now Platform. It is built using the latest web standards, including Web Components, and is designed to be enduring and backward compatible. You can read more about the motivation behind the Now Experience from the team that built it.

With the Orlando release, we’re proud to announce that we’re opening this technology up for you to start unleashing your creative genius. You’ll be able to use the same tools and capabilities that we use here at ServiceNow to deliver powerful custom componentry into Now Experience based UIs. You’ll develop components offline locally and perform a build and deploy process to your ServiceNow instance. The components will be packaged in scoped apps, giving you a seamless mechanism for delivering them from your development to production instances or even sharing them on the store. Once on an instance, you can integrate them into Workspace by following the detailed steps over on the docs site.

The newly launched developer site has been rebuilt to provide content and documentation for how to leverage Now Experience. You can read the full blog about the launch to learn more about how to find all the new information.

But enough overview! Let’s dive into the details.

Now-CLI

The command-line interface (CLI) provided by ServiceNow will need to be utilized to create and edit components. A quick trip to the detailed steps linked above has the instructions on how to set up your environment. On the developer site, you will find additional reference material under Getting Started. Once installed, you can start your component building process.

now-cli

When you get to the Set up your project step, one point I will add is you should get your project into your source control system. The steps for that vary depending on your OS and company setup. In general, though, visit the folder via the command-line tool and perform a git init .. Read more about source control and git online.

Now that you have your project scaffolding and source control connected, it is time to start building! Drop into your editor of choice, be it VIM or something like VS Code.

vim-editor.png

Now let’s take a look at the scaffolding that is provided when you run the now-cli project command.

file-structure

The project configuration files and other handy things like a default .gitignore file is at the top level. Inside of src, which is expanded in the example above, is where your component .js files begin. You will see a folder with a name that comes from your scope and the component name given in the project command. It is at the component level you will edit and create your .js and .scss files to craft your new component. You can walk through the examples or the UI Framework 101 for far more details than I can provide in this blog.

Build locally

If you have gotten through installing node, running now-cli, connecting to an instance, and creating your first project and find yourself asking, “what next?” then I say “Let’s throw a hello developer blog in, and see it run!” In your newly created project, open the index.js found in project/src/componentname. On line 7 inside view, which is what gets rendered, you will find an empty pair of div tags to place the text.

hello-developer-blog.png

Save your project and head back to the command line, inside the project folder. Run the now-cli develop command, which will build your project locally and provide an interface to render and serve your component for local testing. note: if you forgot to run npm i after now-cli project then now is the time.

local-render.png

Head to your local browser and navigate to 127.0.0.1:8081 (adjust as needed if you specified a different port). You have now completed your first build and test of a component. You could deploy it as a scoped app to your instance with now-cli deploy. The next steps involve reading more details of the UI Framework 101 and trying out the counter example.

Resources

Sprinkled liberally through this are many handy resources. We will be performing some follow-up blog entries along with a Live-Code session crafting components on YouTube/Twitch.

Comments