welcome to code creative um travis Tolson in this video I am breaking down some of the new seismic framework and the nail design system this framework currently powers the agent workspace workspace UI and also appears to be the heir-apparent to service portal keep in mind though this framework isn't yet documented or even exposed for general use yet nothing I'm showing in this video should be taken as production-ready or best practice but for those who want to gaze into what the future may hold you've come to the right place now my objective in this first exercise was simple render something anything in the new framework so I started off with a create react app and added a behavior of loading a simple list of incidents and with some help from Nathan Firth Andrew Piske Lin Jace Benson and some of the other dev MVPs I was able to make the necessary changes to get this into the new UX system so let's take a look at how that was accomplished my first step was to elevate my roles and this was going to allow me to create some ACLs that were necessary to override some of the base maintenance roles on a couple of the tables next let's go ahead and create a scoped application and this is more just a personal preference on my part I like to encapsulate everything within a scoped application that allows me to easily delete my changes when I'm done and I really like some of the advantages that scoped apps bring so I'm just gonna go ahead and give it a name here create the app and I'm gonna go ahead and continue in studio to skip over some of the data entry we won't be needing any custom tables or custom roles so we can just bypass that step now we can start diving into the data model so you can see down the side here I've got a few of the tables already laid out the first one we've got is the page registry now this one here I do have to modify some security rules I don't have access to the new button by default so we're just gonna go ahead and create some access controls first one we're gonna do is a create and I'll go ahead and set the table and then grant that role to admin then I will save this and next I'm going to insert a new one for the write operation and we'll do insert with roles so it captures the admin role for this one as well and now we're ready to create our UX page registry record now that is on the assists underscore UX page registry and this record allows us to expose a URL in ServiceNow so this is the entry point for the custom UI so I'm just going to go ahead and give it a title for now I'll specify the UI builder page and then we'll give it a UX playground URL path next is the UX page record now we don't want to leave the UI builder page that one's an out-of-box one for the new UI builder feature we want to create our own page but of course once again this is locked behind the maintenance role so I'm gonna go ahead and override some of these ACLs and I'd like to point out that there is another way to accomplish this we could just create a new workspace app and that would generate the UX page and UX page registry on its own but I wanted to bypass the workspaces and go straight to the UX framework that underpins it now I'll go ahead and save this one and once again I got a set a second one to allow me to write to this table so I'll insert with roles continue alright now we're all set to create our page record now the UX page record is roughly equivalent to an HTML page we're still dealing with single page applications it appears similar to service portal and so this UX page exposes a root element that defines the actual top-level element of the HTML page we're gonna leave the root element field on the UX playground page empty for now instead we're gonna skip down to the source code so now the source codes are where we actually store all of these scripts so this is somewhat equivalent to an angularjs directive or something along those lines this is where we actually put our code now I've already prepared a react component so I'm just gonna copy and paste that into here and I will be sharing my component source code on the code creative blog but we won't be diving too deep into it today I do however want to call attention to lines 194 and 195 you'll see that I'm rendering the component to a specific tag name in this case UX playground root this becomes important in a moment when we create the UX element the other thing I want to highlight is the tectonic react dependencies I put a wrapping function around my compiled component so I could inject the react library ServiceNow already provided through tectonic which I assume is a part of the seismic framework as far as I can tell seismic supports multiple renderers which means they can adapt the technology under the hood while still exposing the ServiceNow component interfaces through web components and that should help future-proof our work on top of the platform it's kind of like Glide record of the UI which is absolutely amazing from my standpoint continuing on our react component needs an HTML element to render to and that's where the UX component definition come into play by using the same tag name in the tag field as we did in the UX source codes react Dom render call we ensure our component code has an actual HTML element to render into additionally the UX component definition exposes a number of other properties and even some related lists that resemble service portal widget like behaviors and just like in service portal we have to add those widgets to a page which in service portal world is a widget instance in the new UX framework however that role appears to be served by the UX page element one significant difference between a UX page element and a widget instance though is that the UX page element appears to be able to be added to other UX page elements not just to a page so the nesting of UX page elements is explicitly defined in the metadata as opposed to being hidden in the code like it is with widget instances and now we're in the homestretch the last thing that we have to do here is to go back to our UX page and update the root element to the element that we just created and then finally we need to head on over to our UX page registry and update from the UI builder page that we originally specified and instead set the page that we created custom for my component I do have one additional step and that is to go to the DB image table and upload the primary image from the create react app now that image is the little spiraling react symbol that you see and I do need to make sure to put that in the database as unlike to create react app we don't have direct access to a file system and with that last step completed we're now ready to jump over and view the URL that we exposed through the UX page registry and there we have it our component is rendered in the new UX framework if I click on load incidents the incidents panel comes up and I can scroll back to the bottom and click back to home now I'm gonna put our sweet animation on hold for a minute because I want to call attention to two specific things first of all the load incidents is in fact loading live data from the ServiceNow instance it's using a call to fetch in order to hit the ServiceNow REST API and pull the incidence in that way and it does include the user token in order to authenticate on the API the other thing that I want to bring attention to is the URL you'll notice that it follows a very specific structure and it's modeled similarly to the workspaces URL it starts with the application scope which in service nails case would just be now slash for us however it's X slash instead of underscore two seven zero three seven two or a four Glide fast for example it would be X slash GF n ll and the final part is the URL we specified in the UX page registry record and with success at hand let's go ahead and do a quick recap starting with the UX page registry that record routes a URL to a specific UX page and that UX page in turn defines a root element the root element can contain child elements and it also encapsulate sockem ponent and that component exposes attributes and specifies an HTML tag that the component will render to finally we have the source code which contains the actual source code of our component that we're rendering for those looking for more information be sure to check out Andrew pistol ins blog he's got a great image on there and has been a pioneer for modern web development on service now and of course ever ahead of the curve chase Benson back in October was predicting the end of service portal and replacement with a new framework and he also provided links for us to the knowledge 19 session where service Nell discussed the new framework and also the original presentation back during knowledge 18 where they were discussing agent workspace and covering some of the very beginnings of seismic and if you do go back and watch the knowledge 19 session in particular you will notice that there's a big difference between the code that they present in their vs code editor versus what it ends up in the compiled code in the UX source codes so there is definitely some sort of build tool that sits in between and I for one can't wait for us to get our hands on it in the meantime we'll just have to sit back relax and ponder the great questions like what is nathan Firth going to do with service portal IO