Recent News
View all
ServiceNow Dev Sandboxes + IDE for Seamless Collaboration
New article articles in ServiceNow Community
·
10 months
Developer Sandboxes in Yokohama: True Isolation for ServiceNow Devs
New article articles in ServiceNow Community
·
10 months
Level Up Your Workflows: Introducing Conversational Subflows and Actions in Yokohama
New article articles in ServiceNow Community
·
10 months
Your First CreatorCon? Here’s What You Need to Know!
New article articles in ServiceNow Community
·
10 months
Streamlining Automated Testing: How Reusable Tests in ServiceNow Yokohama Enhance ATF
New article articles in ServiceNow Community
·
11 months
Two ways to save multiple GraphQL Queries in GraphQL Explorer
New article articles in ServiceNow Community
·
12 months
Using GraphQL API's for Better Performance
New article articles in ServiceNow Community
·
12 months
ServiceNow IDE New Features in Yokohama
New article articles in ServiceNow Community
·
about 1 year
You sunk my mothership: Creating complex interactivity in the Next Experience
JSON? That's not on the menu! But our Now-CLI Menu Builder sure is!
MGW
Conference Sessions
Stepping beyond the portal: Transitioning your skills to the Now Experience
CCB1117-K22
## Transcript X-TIMESTAMP-MAP=LOCAL:00:00:00.000,MPEGTS:0 [MUSIC PLAYING] Welcome to Stepping Beyond the Portal. I'm Travis Toulson. In this session, we're going to be discussing how to transition your skills from the Service Portal to the Now Experience. So first of all, I want to cover a couple of things that we're not going to be covering in this session. And that's going to be NodeJS, now-cli, Component Project Scaffolding. For help on any of these things on getting started, you can check out the developer site, where there's a URL at the bottom. And there's a fantastic guide to help you get started down that road. So first up, let's talk about the editor experience. And for this, we're going to compare some of the features and attributes between the Service Portal editor versus what we are now working with in the Now Experience Components. So with the Service Portal editor experience, we're all familiar with that three-panel layout. And of course, there's a couple of hidden panels we can switch in. Widget source code is stored in ServiceNow in HTML, CSS, and ES5. The source code is combined primarily in a single record with the sp_widget. There are a couple of other widgets off of that. But for the most part, it's all governed within that single widget. Of course, the editor is browser-based, unless you're using the VS Code plug-ins. And whenever you save changes, you immediately get that update in the instance. You can immediately reload the page and see your results. And of course, one of the key features of Service Portal is that your server code and your client code sits side by side in the same widget, so you can rapidly iterate and build out those widgets on both sides of the network. Now, the UI Component editor experience really changes the game on this. First of all, your components are now stored in source code, basically in local files and folders on your local dev environment, using JSX, SCSS, and ES6. The source code is spread across numerous files. It's no longer consolidated to just one record. And you can bring your own code editor, which I highly recommend VS Code. Those changes also have to be deployed to the ServiceNow instance. So you're actually developing on a local environment. And you'll see those changes in the local environment. But if you want anybody else to see those changes, you're going to have to deploy your component up to the ServiceNow instance. Also, the UI component only contains the client code. So there's no server code inside of these components. And that's a very big difference between the two. So where do I put this code? Well, in the Now Experience, we're working primarily with JavaScript files and SCSS files. So your ES6 modules, in the form of JavaScript files, basically equate to your HTML templates, your Angular ng-templates, and pretty much all of your client-side JavaScript code-- the link function, the client controller, instance options, your angular providers. Basically any of this client's JavaScript that you would have put in Service Portal in various records is now all going to go into JavaScript files. And your SCSS equivalent, basically you'll have an SCSS inside of your local dev environment. And you will import those SCSS modules into your JavaScript modules. So it is a little bit different from what we're used to dealing with. But for the most part, there's really strong equivalent to the SCSS fields and the CSS dependency tables in your service portal widget. And as I said, there really is no equivalent for the server-side JavaScript. Basically, you can use UI Builder data resources or REST endpoints with the HTTP effect. But you really won't have the actual server code stashed in your components. Your components are strictly client-side. Now, in terms of how this looks in your local development environment, on the left-hand side, I've got the File Explorer for VS Code as the sample project that I'm currently working with. And you can see that the ES6 modules and the SCSS modules all fall under that SRC folder. And you can see the index.js and the styles.scss, which is part of your boilerplate project. Now, you can add additional files, additional folders, import things in. You can get as wild and crazy with the folder structure and file structure as you want. And that's one of the key advantages, is you can build larger projects in a very structured way, as compared to what we used to be able to do in Service Portal. So let's take a look at a sample project. And let's start out with the HTML template. So you can see in the laptop on the side there the example of what we're going to be outputting with the code. And so the view typically is done in the HTML template in the Service Portal. But let's look at how we would accomplish this in a Now Experience component. So in the Now Experience component, you can see the code on the right-hand side. And basically, if you look at that orange bar, you'll see a view function. Now, this is using the ES6 arrow function syntax. But trust me, it's basically just a function. So the HTML templates are going to be written in JSX. You'll notice the HTML inside of that view function. Now, JSX is a syntax extension to JavaScript. It's not actually HTML. We're not returning HTML out. Officially, your returning JavaScript objects that represent DOM nodes. But that's a little complicated for this session. The important part is to note that it is not HTML. And it has more equivalence to calling JavaScript functions. It does get compiled to JavaScript functions. And each view function can only return a single top-level element. And the last thing that I'll note is the parentheses after the return statement and at the end there. Those parentheses are very important when you're dealing with multiple HTML nodes. So you absolutely have to have that. And it basically creates the expression. So now let's talk about data binding. So in this one, you'll notice that I've changed the message from Hello, World to Hello, Travis. So basically, how would we bind that dynamic data? Now, in Service Portal, we used one way binding. And that used the double curly brace syntax in the HTML template. So let's take a look at how that's going to be done now. Again, on the right-hand side, you'll see the code. And you'll see in the first orange bubble that there's a var name equals Travis. So we're setting up a local variable. And then on the second red bubble there, you'll see a single curly brace with that name variable inside of it. Basically, since views are just functions, we can declare variables in them the same way we would in any JavaScript function. And that little single curly brace syntax is part of the JSX expression that embeds-- or binds the data to that particular expression. So it's very similar to our double curly brace syntax from Service Portal. And that's going to make the transition really easy. Now typically, we're going to want to get that dynamic data from somewhere else. We're not just going to use a static variable name. So let's take a look at how we can pass some instance options and hold internal state. And basically, this is going to be functionally equivalent to passing instance options into your widgets. Now, the one thing I want to highlight, though, is that there is a bit of a difference. Because in Now Experience components, the properties are much more powerful and a much more prevalent part of components than what they were in Service Portal. So once again, the example is there on the right. And let's take a look at the code. So first of all, take a look at that second orange line down there, where it specifies the properties inside of that createCustomElement call. And you'll see that we've defined a property called name. So this whole scaffolding is setting up our Now Experience component. This is some of the boilerplate scaffolding that is required. And the properties are basically equivalent to instance options. That name property is then being passed in to the view function via the state property. And you'll see on that first orange bubble, the Hello, state.properties.name. So the properties are exposed via that state variable-- or that state parameter. And you can use this in any of your custom components. Any properties that you add in that createCustomElement syntax is going to be available inside the view. And those properties can be updated as we perform different events and actions. But that, basically, is how you are going to pass data into your components in order to expose them within your view. So since we mentioned events and changing that data, let's go ahead and talk about, where's the ng-click? Where are these events? So once again, you'll see on the right-hand side, I have an example view with a button that says Change Name. So instead of changing that manually to Hello, Travis, we're going to change it when we click that button. So instead of using the on-click handlers in Service Portal, you usually use ng-click. And there's a bunch of other events we can use. But the short of it is that that triggers a digest loop, which reprocesses the view and updates it for you. Components are a little bit more straightforward. So once again, we're going to be using that view function. Everything basically goes inside this view function. It makes things very easy. And instead of the ng magic, you're actually going to bind events using on, dash, eventname, Just like you would traditional HTML and JavaScript events. And what's really powerful about this is that it even works with custom events. So if you define custom JavaScript events, you can just use on dash whatever event name you created, and it still works. Basically, behind the scenes, that on dash is just instructing the Snabbdom renderer to call element.addEventListener, where you pass the event name. So it's just a declarative syntax for that. And it makes it really easy to bind any event. So you really don't have to memorize any special magic ng incantations to make it work. You just have to know your event name. And you can see in the updateProperties where we are-- or sorry, we're passing in the updateProperties on that first orange dashed as a co-effect. And then on-- and I'm not going to go too much into that particular topic. You can find more on that in the guides. But we're going to call that update properties in order to update the name parameter to World. And that way, when we click on that button, that on-click event will fire. What's really cool is that we're still just dealing with JavaScript. JSX is just JavaScript. There's nothing particularly fancy about it. So we can create event handler functions the same way that we would in vanilla JavaScript. And this is going to be roughly equivalent to your c.handle something in Service Portal, c.updateName. So if you look at the second orange dash there, you'll see the updateName handler being called in the on-click. And up on that first orange dash, you'll see the updateName function being created. And because it's done within the view function, it has access to the updateProperties co-effect that we passed into the view function. All of this is handled by the Snabbdom renderer and by the overall Now Experience framework. So you just have to plug-in the right pieces in the right places. And the rest just fires and works. And of course, you'll also note that we're still using that curly brace syntax. Basically, any kind of dynamic binding that you will use will be done using the curly brace syntax, which makes it really easy to remember. Now, of course, no component is complete without a little bit of conditional logic. And of course, in Service Portal, we had ng-if ng-show, ng-hide, ng-switch. We had a lot of magical directives that we had to memorize in order to set up some of these conditional statements and some of these conditional templates that show and hide the view. So basically, in this one, when we click the button, we're actually going to hide that button. And once again, we're just using pure JavaScript here. So you'll see that, on the second dash there, the second orange dash, we call a getButtonTemplate function, where we pass the state parameter in. And then you'll see in that first long orange line, you'll see the getButtonTemplate that passes in the state. Now, the important part there is the if statement inside of that template function. So if state.properties.name name is not equal to World, then we will return that button template. So this is how we set up a conditional template inside of our view function. And you'll notice it's just plain JavaScript. It's just an if statement. This will work with switch statements. This will work with ternary statements. So basically, it's just JavaScript. And that really simplifies the learning curve on this. Because once you get a handle on the view functions and some of the magical bindings in the createCustomElement, you're really free to write those components how you want. You're not constrained to the magical directives that AngularJS offers. And also, I'll point out that you can separate the view functions. So you'll notice that I don't have all the HTML in one place. I can call functions to get other fragments of HTML out of it. And this is a really powerful capability. We can also move those functions off to other ES6 modules, which is really going to help us clean up our code and make it very compact and very well-structured. So then we've got lists. Of course, most of what we're dealing with is repeating over a list, repeating the same template over lists. In Service Portal, this is done with ng-repeat to loop over iterable objects like arrays. Once again, components have no problem leveraging pure JavaScript to accomplish this. So in the component, you'll see, first of all, that I'm passing in properties. I'm passing in an array as the default, with five items. And then in the first orange dash, you'll see my little ul tag there with state.properties.items.map. Yeah, it's just JavaScript, array.map function. So we're going to iterate over the array using plain JavaScript. And we will return the list item template that represent each item. So the map function is going to be similar to for each, except that it returns a new array, where each new item in that array is the result of the original item passed to the map function. I'm going to leave it to you guys to go look that one up in a little more detail because I don't have a clear demo of that one for this presentation. But suffice it to say, it works just like for each, except that it creates a new array using the function that you pass it. In this case, we're returning to LI tags that contains the item name. Similar to conditionals, we can separate that template fragment out into its own named function, like the getListItem one that you now see in the code section. And this can make templates much easier to read. And again, we can separate that off into separate files to get a very well-structured project out of it. And of course, we're just getting started with this. There's so much more to add. There's actions. There's life cycle. There's hooks and behaviors. There's a lot of stuff that we haven't really covered today. This is really just a foundation to give you those basic ng-ifs, ng-repeats, how to get data in and out of your components. But for more, you can go to the developer website, where there's a really good introduction, getting started guide, for building out these Now Experience components. But this should really help you get started on your journey in transitioning your skills from the Service Portal to the Now Experience framework. So with that, if you have any questions, you can feel free to reach out to me. My email is Travis@codecreative.io. Or you can head to the codecreative.io website. Thank you very much. [MUSIC PLAYING]
You sunk my mothership: Creating complex interactivity in the Next Experience
CCL1353
<p>That is no moon. That is the classic game of Battleship taken to a galaxy far, far away using UI Builder and the Next Experience framework. At least it will be after you join this lab where to will learn how to wire up data and interactive behaviors in UI Builder to build out the game of Battleship. Gain experience with using Data Resources, Client State Parameters, and using events as well as exposure to how custom components can be used to build out an application that doesn't just "got it where it counts".</p>
JSON? That's not on the menu! But our Now-CLI Menu Builder sure is!
CCB1257-K23
Every experience needs a menu. We'll talk about the long and arduous journey we took to make a reusable tool so we wouldn't have to deal with JSON! We'll show you how our Menu Builder helps you import, edit and build menus for your Experiences using a user-friendly interface. We'll talk about teaching ourselves ReactJS, how we converted this to a Now-CLI component, and the bumps we hit along the way. At the end of the session, you'll have a link to a Share item where you can download the update set yourself and use it in your own development environments!
The CreatorCon Hackathon - Complete Your Registration
CCA1169
Ready to build something amazing? This session is your gateway to the CreatorCon Hackathon! Join us to complete your registration, get important event details, and ensure you're set up for success. Whether you're a seasoned builder or a first-time hacker, this is your first step toward innovation. Don’t forget to register for all CreatorCon Hackathon sessions!
CreatorCon Unscripted: An Unconference Open Forum
CCA1172
Got a big idea, unique insight, or best practice to share? The Unscripted Unconference is your stage! We’re hosting 6–8 lightning talks — quick, 10-minute sessions where industry knowledge, practical tips, and bold perspectives come to life. Whether you’re a seasoned speaker or just passionate about your work, this is your chance to inspire and connect with the community. **Weren’t selected to speak during Knowledge 2025? No problem.** Swing by the CreatorCon Pavilion, sign up on-site, and claim your moment in the spotlight. We’re keeping the mic open for fresh voices and big ideas throughout the event. This is your time. Your platform. Your people. Let’s hear what you’ve got.
The CreatorCon Hackathon - Crowning a Champion
CCA1168
Who in their right minds spends eight hours on the first day of a busy conference to hack solutions to hypothetical problems? Your Hackathon teams and winners, that's who! During this session we will reveal and award the winners of the 2025 CreatorCon Hackathon!
The CreatorCon Hackathon - Team Formation
CCA1167
The CreatorCon Hackathon needs you! This isn't just for developers - any and all backgrounds and skills are welcome! A well-rounded team is often the key to success. During this time, we will help participants create teams (up to five team members each). Be sure to register for all the CreatorCon Hackathon sessions, too!
The CreatorCon Hackathon: You’re Invited!
CCA1166
The sky's the limit at the CreatorCon Hackathon. Teams of all types go head-to-head in this one-night quest for fun, prizes, and glory. This is your opportunity to build apps that solve real world problems. Any and all backgrounds and skills are welcome! You + the ServiceNow platform = unlimited brilliance! Required in-person registration opens 2 hours prior to start.
Ask the [Developer] Advocates!
CCA1647
Join us for a fun and interactive panel discussion with our famous ServiceNow Developer Advocates, as they discuss all things ServiceNow Dev. Plus, stick around for a photo opportunity at the end!
You & I Builder Live: Live!
CCB1174
Get ready for a rollercoaster of UI Builder madness in the second ever LIVE "You & I Builder Live" session! Join Travis and Maria as they embark on a quest to make things work in UI Builder - no promises, just pure live action! Expect memes, fun, and a dash of chaos as we navigate the UI landscape. Will it work? Who knows! But one thing's for sure, it's going to be a wild ride - Buckle up!
Live Coding Happy Hour - More Live than Usual!
CCA1171
Grab a drink and unwind with us as we build together. Real-life development isn't so clean as our well-polished demos make them out to be. There's a ton to learn from watching experts struggle despite years of knowledge. Hosted by your ServiceNow Developer Advocates, this YouTube show is coming to life, live on stage!