NOWCommunity Live Stream - Code Decoded - Service Portal widgets part 1

[Music] [Music] good morning good afternoon good evening wherever you are and whenever you are welcome to the community live stream my name is chuck tomasi senior developer evangelist for servicenow this is august 13 2020 and our topic today is building a basic service portal widget i want to give you the skills to get started there's a lot of material so i don't i won't be able to cover everything there is to know about service portal widgets right off the right today so we're going to break this out into other other episodes but today is just the basics so if you've got a question about that i hope i can help answer it today let's continue on we are doing this live on youtube every monday and thursday at 2 p.m utc i hope you can join me for that there's a number of people who have they are signing in fast and furious and welcome good morning to many familiar names and many new names it's great to see you here as always i always look forward to monday and thursday mornings when i can bring this to you go ahead and subscribe and like and share and you know what to do turn on those notifications and if your device is configured like mine you will get a notification that says hey guess what it's live you might want to go over there in fact if you turn on the little bell notification it will tell you 30 minutes ahead of time that it's coming up so i noticed a number of people i think we had about nine people in here an hour and a half ago waiting for this to start thank you very much for joining and being so eager and signing up it's widget time and uh i don't claim to be a 100 expert in this i learned it through bits and pieces along the way so i'm going to share with you what i know if there's some other uh hints that are on the live you know that you can contribute in the chat please do so i look forward to that this is a a learning sharing thing it's a live community stream that's why i call it community live stream so we are part of the community and thank you for joining me as a backup plan we've always got this recorded on twitch and it'll be there for a couple of weeks but the long term one will be on youtube so you're welcome to watch in either place i do keep an eye on the youtube chat i don't have the bandwidth to watch two chats at once if i had a facilitator maybe they could help with that okay thank you carolyn for the kind words i want to remind you if you've got questions that go beyond what we're covering today and we are covering basic service portal widget construction if you've got something about scripted rest apis which we'll be covering on monday there's a spoiler alert if you've got questions about grc or performance analytics and reporting please go over to the community and post it there there are hundreds of thousands of people in this community that are active that are involved that are eager and willing to help you get your questions and inquiries and exploration done community.servicenow.com is where you can find that the other thing that i invite you to do is go over to developer.servicenow.com this is a wonderful place to go and experiment because much of what we do today will be something you may want to experiment with try it with your own tables try it with your own css try it with your build your own widget and get that idea of hey i always wanted to build one of these or see how this goes this is a great place to do it because if you mess it up it's not on your organization's instance it's on your personal developer instance where you can go and reset that and wipe it and do all that other stuff there's also all of the apis over there and great examples in the share page if you go up to connect there's a share page and lots of code snippets there so lots and lots of great stuff i invite you to go sign up for the developer program over at developer.servicenow.com and on that connect page is also a bunch of meetups we've added webinars we've added podcasts that are coming up so if you want to know what's coming up in the breakpoint podcast or this series you can go to connect up at the top of the page and click on events so these are events that we will have so i gave you a spoiler alert for next monday i've got about four or five of these planned out i hope to lengthen the pipeline as we go the other thing that you will find on that page is meetups which are available over at meetup.com actually you can find the meetups there but if you want to sign up or see where the chapters are or get involved with some other meetups meetup.com pro servicenow dev program these are meetups for you for the developers if you want to know more about service portal widgets or you want to a lot of these are being held in fact i think all of them are being held virtually right now so it's very easy to get involved and i know from attending a number of these in the last couple of months they say what else would you like to talk about this is a great time to bring your questions to other developers and get their opinion it could be on how do you like flow designer it could be on i've got a question about service portal widgets or i'm trying to normalize data throw it out there there's a lot of people this is a fun way to interact live with people yeah it's it's live as as live as zoom will get you but it is live and a little more interactive than in the community because you don't have to wait minutes hours days for an answer all right we've got everybody checking in i think there's more people live right now than watched some of my early first episodes and thank you thank you very much quick reminder if you've written some applications we want to know about them and we will contribute fifty dollars to the un coven uh response and recovery team or fund for that go to the url up to five applications and we'll get up contribute up to 250 per application let us know what you've built we're very excited and eager to hear what you've built on the now platform i also want to remind you oop i skipped over a slide let's go back one go back one can't go past the new podcast break point i'm going to stick in a special episode it is every other wednesday we had one on the fifth with brad tilton how to get started being a servicenow developer we will come out with another one on the 19th where i talk to dave slusher about the paris platform features this is an audio podcast so you can subscribe get your wherever you get your podcast apple google that sort of thing i have a special one coming out on the 26th and then again on the second so we've got three consecutive wednesdays in a row where you'll be receiving a podcast from this feed if you are subscribed you get it automatically that's the beauty of it so encourage you to go over there great conversations with these people i also had an idea was it yesterday tuesday i can't remember the days are just getting a big blur i had another idea of some content i'd love to throw in there so if i get my way we may have more than bi-weekly content but you can count on it at least every other wednesday all right i snuck it up there if you didn't catch it real quick next tuesday on the 18th we will be today as service portal widgets tuesday is going to be now experience components very similar in construct but one is the next generation of our ui you could still keep building these service portal widgets i'll get to that in a little bit but go over there and register wolfgang is one of our senior staff senior software engineers and brilliant guy really smart and he's he's got a lot to share with us and i look forward to learning from him as well i know less about now components and now experienced components than i do about service portal i'd like to sort of level that out a little bit uh any code that i write which i will be doing i've got the orange shirt on that means we're going to be writing some code today it's a code decoded day i'll put that over in the github repo that you see there there will be a folder with today's date 2020-08 desert-1-3 it's the 13th of august 2020. you'll find that code there so if you want to take these service portal widget components the client script the html the server script the css and twist it around and take it make it break it do it that's what you can do with that over there i invite you to take a look at that if you are not comfortable with javascript hey why not get started on the free web series that i put out last year called learn javascript on the now platform you can find the link down there sn learn js goes through step by step from the very basics to some more sophisticated stuff as a preparation to taking the servicenow scripting course for example that you would want to become a certified application developer that would be fun all right we've got people here saying they are ready to party well in that case let's get this party started i'm going to start at my dev personal developer instance that i got over at developer.servicenow.com for free yeah got to throw in the bell and i want to make sure i don't forget anything because i jotted down some notes of what i want to do all right quick refresher service portal we're all familiar with that i hope if not i am going to go to my developer instance and put a slash sp which is the default out of the box standard service portal that we ship and you are free to configure it you've probably all seen this before i would like to ignore that message for now you know we've got different pieces on here the for example this one that you see here is request something that's what we call a widget these are the basic building blocks that we put on a page and they can be configured they don't have to be single function this one says uh what would you like to link to what would you like the icon to look like and there's another one right next to it a different instance of that widget and there's another one right here so all four of these are the same widget with different configuration parameters to them if i continue to navigate around and say let's go to myopen incidents this is a list widget down here we'll make a simple list widget today just want to show you how to build one of these widgets out and then you can take it with your imagination and go even further the place to get started is under service portal we have this service portal configuration menu option right here and before i get it i don't want to miss anything i was just glancing at my notes i talked about the now experience that's our next generation of user interface we adopted service portal as a next generation about 2016 i think it was we came out with service portal up until then all of our user interface was built on a framework called jelly that was part of the apache project worked great for standard lists and forms that you see today however jelly is a rather interesting skill set kind of rare that people can walk into an organization and say yes i know jelly and it was a combination of jelly jackson and javascript say that three times real fast and well i do have a a three-part series in the tech now webinar series to learn jelly it was it was getting a little long in the tooth well google came out with angularjs and we adopted that it said there now that's a little more standards-based we can build our own environment around that shortly thereafter google abandoned it so now we're left with a technology that no one's supporting anymore and we said well we can't have that fool me once shame on you fool me twice shame on me we said we're going to build a web based a web web component based architecture that allows developers to build these components independent of the underlying technology and we'll have more of this discussion with wolfe on both tech now and breakpoint so if you're not watching for those please do we are not getting rid of jelly we are not getting rid of angular we are not getting rid of service portal they will continue to be there just like we're not getting rid of the legacy workflow if you've built content on there it will still maintain it would be disastrous for us to say hey move all your portals to the now experience by 2023 or die it's still there it will still work anything you've built today and i've built a number of things over the last four years and i'll go great they'll still work i can use them directly or indirectly for that okay so i am showing you something that's been around for a while and it will continue to be around if you've got to maintain something this will help you understand what that is okay this is the service portal configuration page a number of things here you may have seen if you've gone through the service portal course branding editor if we want to change the colors the designer if we want to change the way that the pages are laid out the page editor to change the page configuration i'm going to be focusing on the widget editor this is and the neat thing about service portal aside from the logo still being out of date yes it is built on service portal everything you see here is widgets it's kind of a as fred letty put it our founder self-eating watermelon i've never heard that till he started describing uh service portal so in our example i've got a number of them that i can take a look at i want to also make sure that i am in the right scope i'm in trivia i don't want to be in trivia for example let's pick oh my good old cls 323 because like many other things in the platform once i create a widget it's in that scope it's stuck with that scope and i can't edit a widget from somebody else's scope i can look at it but i can't edit it if i'm not in the right scope and unfortunately there's no scope picker in here so i've got to make sure that i get the right scope for the right portal the right pages the right widgets as i work on that so pay attention to the scope very important let's go ahead and create a new widget it says hey let's make a new widget what do you want to call it i'm going to call this one some simple list i think i've already taken before let's call this cls and it gives it a prefix i would like to create a test page you don't have to if you plan to put this widget on another page automatically and say it's going to be part of this page i will test it i typically do because as i develop these i test them both in service portal and on their own dedicated page sometimes the rendering comes up a little bit different if you do this watch out for lots of random single purpose single widget pages because you can get quite a collection of these if you're building lots of widgets and you have dedicated test pages to each of them just be careful of that so the page by default has the same name when you see the url and it says slash sp question mark id equals that's the page id you can't test a widget just on itself you have to have a widget on a page and the page on a portal okay that's kind of how it goes i'm not going to go through the whole service portal thing but that's the basic hierarchy and the architecture i will submit that hopefully it will do something for me and it comes up with the editor normally i believe it looks more like that with three panes i must have been doing some work and turned off html okay i've got html on the left i've got a client script code on in the middle and i've got server code now if you are familiar with angularjs all the better to you there are some time saving features in here around creating directives and some stuff that is is hidden behind the scenes that makes it actually a little faster for you to develop this and i kind of like that let's start with something very basic like most people i'm going to start with a hello world so i'm over here in my html template and i will put in hello world hooray we've written our first widget i didn't do anything with any other code save this and i can test it in a couple of ways i can test it right here in service portal if i turn on my options and say enable preview right here in the menu check that and a preview window comes up and runs my widget for me terrific ain't that fancy i won't get into the other options today so we'll put that away and i can turn the preview window on and off here ta-da all right so there's my hello world and every time i save it will run that if i save it it will refresh watch the little dancing dots up here it saves it refreshes it's good so i've made a widget not terribly functional but maybe you just want a welcome message let's do something a little more inter interactive with the system for example over here in my server script i know that i have a method from the glide system if you don't remember you can always let's get it from developer developer.servicenow.com has all of our wonderful scripting apis we can do glide system i would like to get the username let's say hello chuck tomasi under reference i've got glide system and i believe there's one called get username but just because i'm getting old and forgetful i'll look it up and glide system has lots of stuff in here under the gets get user display name and get username i suspect one is going to say chuck.tamaseen what is going to say username which brings up an interesting thing let's start talking about debugging how we can start seeing what is going to happen well in this case let's do a gs.get user display name where do we want to save that that's going to return a value but i need to save it somewhere if i put simply var you name it's going to be in a variable that's only known to the server script not terribly useful i would love to have it used over here i'm going to blow that up just a little bit more makes the formatting a little weird but hopefully you can see that a little bit better we'll put client away for now we're not using that instead look here in the comments it says populate the data object for example data.table put something in there this is a wonderful mechanism and it is the mechanism for making widget public variables that's as good as i can say it and i'm going to say data dot username i'll do camelcase in this case no pun intended put that into data.username and now when i want to reference that i do this double curly brace thing get rid of the exclamation point that is well now we'll leave it there and in there i can reference it in a number of ways you may have seen a colon cullen thing there's there's different ways that have different meanings i am going to stick with the simplest it is c dot data dot username okay put the c in front of it and what you get is let's save it the server script runs when the widget loads okay so it picks this up and saves it in data username then the client script starts well there's nothing really in our client script we can see that it just goes yeah okay i have a variable called c array and then the template renders it so i've got the advantage of referencing that same data through all of these objects through all through server script through client script and through html aha that leads me to wonder uh we got a question can we change the default approval state options for and ask for approval sounds like a great floating designer question we're not talking flow designer today if you've got that do as i recommended earlier in the video go over to community.servicenow.com put that in there and uh i'm sure somebody will be happy to answer that for you so remember questions about service portal today thanks the uh let's take a little bit of example i was going to say we're going to bill at the beginning i said we're going to build a simple list widget so i can still leave my hello in there it's always nice to have a greeting right let's go get some other data so for example in this application i have what was it courses sure we'll list out our courses we have nine of them in fact let's get just the active courses i'll do a standard server-side script query so var course gr equals new glide record and i wonder i've got a constancy in here it's in this let's find out if this works normally i'd put in the full table name but i've got a script include that defines that for me of course gr dot add query active true shouldn't be any surprise here basic glide record scripting maybe i should do a script a a quick video on basic cloud record query i did some of that in the javascript video series so if you watch that course gr dot let's order by name all right let's get these by ascending name so it would look more like this that way we'll know it's working like i designed it and course gr dot query that doesn't belong there let's get rid of that finally well course gr.next for each record that we find we want to put this into the data object now i like to define that object i have a i have a standard that i do when i'm creating tables that the table has a sub property of list that has the array of objects that way table could have another attribute called length i could have data.table we'll define that up here and say data that table is an object i don't like to put the entire list of things in my data.table so data.table is not an array data.table is an object because i often have tables that have multiple things a start an end a page number you make up your own mind so i abstract the list part of the table down a level and that would look something more like this list let's put that in here is an empty array that i could have other things if i want learned that by doing a lot of tables in service portal widgets i said boy i don't want to say table underscore length table underscore list so it's all part of the table right and if i don't have a table i don't have a table we need access to the scope which is c and there is an object there called data and in there is the username property oh what if we only use username and the double curly braces instead of c.data.username wanna find out like that let's make sure we don't have any syntax errors in here that it's going to blow up on we just get hello the angular doesn't know so as we do this let's get the name so i like to declare a local object and say obj.name equals course gr dot get value name get value people this is very important listen closely use get value and get display value very liberally use it all over the place in your service portal widgets avoid the dotted notation at all costs with service portal it will take you literally this may work fine in a gs info or if you're setting another field on a value this will screw up your widget in fact i should probably do this to show you what happens name is an object it's a glide element object it's the properties all it's the methods all of that information about a field called name this will not work because it's going to store all the stuff it can out of this name into all the stuff it can out of this name all we want is the name value so get value name if you want to have fun with that go try it the other way it's a bad time obj.order equals same thing course gr dot get value order you may have to do a two string if you're not walking down something that's fine too some way to get just the value or display value of of the variable you're looking for now once we've got those in my little temporary object inside the loop can i boost that up so you can see a little bit better i'll try maybe i can blow it out there zoom in zoom in i could say data.table.list.push which is an array function i'm going to pop push not pop push that onto the array all right before i go any further i always like to do a quick sanity check to make sure i've got the data that i expect so let's before i render it on the screen because inevitably you think you have all the data you want and it doesn't work let's do a little bit of debugging just to throw a gs.info into the log file and i will put data dot table dot list let's just see what data.table.list consists of save that when i save it it runs when i run i get a log entry and in my system logs i can see object object object object object which is fine table is an object and it has lots of little objects inside it the way that i introspect what's in there is with json.stringify put that away for just a second now let's now put it away match up my curly braces so that everybody's happy in fact i'm going to format it a little nicer with this null 4. that just says i'm going to put some spacing in there to make it look pretty i saved it it ran again i refresh and i get look it's an array here's an object lower order 200 object object object object excellent i have data that the widget can now consume great put that away it's a good thing let's go through and render this this would be fun in order to render it i want to make it someplace to display it so let's get my hands on the right home keys we'll make a table which automatically matches that we'll do a tr and for each row i iterate over that object and say ng repeat equals um i can call it row i can call it item this is up to you row in c dot data dot table dot list it's going to take one of those row objects out and pull it and use it for me somebody said you can use console.log you can use console.log except when i turn on my console here which i believe is that key it makes service portal a bit of a mess okay it's it gets really squishy i know i'm zoomed in pretty high here works better when you have that dedicated page which may be a good transition for us right now to go over to that page let's turn that off remember i said i had a test page for this well i can get to it by going to my instance slash sp or whatever your favorite portal is i call it cls list id equals cls list and there's my hello world now a console would be a little bit better okay makes a little more sense here and i can also test with a mobile view service portal is responsive i can say which mobile i want okay that gets a little small for you to see on the web screen at home so let's continue on i don't need the system log i want to go back to my widget editor and since we're using a preview page we don't need the preview pane anymore hooray i've got my data we're going to iterate over it with ng repeat and for every row that it finds i'm going to do this i'm going to put in a couple of cells in my table and in cell 1 i'm going to put row dot name and in cell 2 i'm going to put row.order because those are the properties that i put into each object save that now this time it won't reload for me automatically where'd my page go there it is let's put the page next to the editor i find that a lot easier refresh this you do a lot more refreshing this way and lookie here i've got a nice table with my data i've extracted it in the server script and passed it to the html very easy to do steve says if you need to dot walk in your gr then you have to do two string yes yes you do or if your field on the other end has a get display value you could do that too depends whether you want the value or the display value but definitely you've got to have some string if you start seeing weird things like object in fact let's do that just for fun let's say i was a naive programmer okay in fact i'm going to not bother typing that again i will copy paste and comment one of them out there and i'm a naive programmer i forgot what chuck said and i put object.name equals course gr.name because i've done this when setting field values in a ui action or something else what happens well you get crazy things like this see the curly braces up here that means you goofed okay not so happy and you go well what happened let's do this console.log obj.name what's wrong with my con what's wrong with my name variable and when i do that it spits out well here's some stuff but oh it's it's it's an object it's not you know if i can expand and collapse it it means it's got something else going on in here so that's a bad day if i change that back to the way it was and comment that one i'm not in the way there too much am i nope save that run it again good idea we're doing some debugging oh still expands and collapse interesting okay but i get this working so console.log here's here's something important when you're debugging console.log in a server script is only valid in a service portal widget you can't put a console.log in a business rule a ui action or something else okay so this is only valid for widget server code that's why i often do use gs info it's just something i do the other way that i often debug is very handy if i didn't quite get what was in my object maybe my table is not displaying properly i can do something like c.data.table and pipe it through make that bigger for you json this is pretty cool it takes this it stringifies it it displays it and even better i like to put mine inside of a pre-tag wow i totally messed that up let's put this all inside my free tag and if you watch closely the alignment is a little off here select all shift tab so control a command a whatever it is and it will realign things for you this one doesn't because it's inside a pre and it goes i don't care so if your alignment starts getting a little bit off and you're one of these people who loves to have their indentation just right select all shift tab okay this will print out my table object at the bottom of the page save refresh and hooray i now have sort of a visual log obviously you don't want to leave that on your widget all the time so i'll show you in a future episode how you could put in a little flag to say turn my debugging on i want to debug this widget right now and have visual cues on the screen only when you say so kind of handy all right let's comment that out for now i'll leave that in because it was very handy commenting in html is like that and ends with that they got to be different right can you provide an example of how you might bind a td attribute to a property in your row object that contains html would it look like this using inner html going a little bit beyond what our simple widget is here mike i'll leave that for the community or a future episode but i will keep that in mind as i go forward for potential content okay i forget you use something on html json this is this is pretty fun stuff okay we've got our basic row i'm just going to check and make sure i didn't miss anything oh we want to get the client involved we've got our server script got our client involved excuse me we've got our html rendering it but what if we want to click one of these rows and possibly pass a value through let's just have some fun and do another cell that says put a button out there button um name equals because it's always nice to have a name is i don't know order button the important part here is ng-click anytime you see ng it means next generation this is where you're starting to get the angular directives involved so ng-click says when i click this very similar to a standard html on submit or on click or something like that only takes care of a few more advanced things for us i'm going to call a function call show order it's not going to do anything special but i do want to interact with the client script i give it a function name and say order let's see what it looks like it's not going to do anything yet it might even bark at me that it doesn't have something interesting going on i have a whole bunch of these buttons over here and if you are doing atf you may want to put an id on there at some point too there are some other um attributes you can get out of ng repeat like what row am i on one two three four five there is a built-in iterator a counter you can determine if you're on the last row the first row kind of neat so i'm not going to get into all of that today i can also class this up a bit class equals button button success you can use some bootstrap parameters on here i'm getting a little bit ahead of myself on the css but let's make that a little prettier i didn't put any other css you can see the spacing is kind of weird and if i click that nothing happens okay nothing happens i thought i commented out my uh console.log i did not comment.console.log i don't like extra log messages once things are working nicely so next step is let's put the server script away and bring out the client script we need to create a function called show order in here and this is done don't forget this part i always do you have to go up to the top of your client script and see these parentheses whenever you use something new and we are going to use something new called dollar scope dot order button i think that's what i called it i can't remember things for very long i'm getting old let's see what did i call it i called it show order very good so let's get this from behind my head show order not odor order equals function and any parameters that i pass now i could pass it the order row.order it will know what row.order is and for this i'm just going to call it num like let's pass a parameter to this i may be telling it what object i want i might be telling it a sys id of a record to go do something on the server lots of different ways you could slice and dice this but i'm passing information from a live form to the client script without hitting a submit button and in here console.log i like to add show order num equals pretty much standard javascript stuff there now the part that i said don't forget it's going to yell at me and go what is scope you have to put that up there there's lots of different services and dependencies and things that you can use timeout location window if you're doing a rest request dollar http you need these things defined so that the client script goes i need all these parts before i load up the client i'll go get them for you now it knows what scope is always forget that one and if i want to reference any of the data object i can do that here as well so i can reference it as c.data.table.list.some sub element let's save that uh you just forgot to pass in scope again yep i got it might be a little bit of latency on there that's the angular part i saved it i run it and click that and it says yay there's my first console message show order num 300 i don't think i can zoom in on that part can i nope i can zoom in on anything over here but i can't zoom in on interesting okay anyway clear this out 100 that corresponds to this number next to the order button that i had let's do a 600 great i can now pass information from the widget to the client what if i want to say update a record on the server aha well that gets a little more interesting let's i'm not going to actually do the updating part because i can't think of anything at the moment to update but if i want my button function to interact with the server i do a c dot server dot update that effectively re-runs the server script remember i said it ran once at load well it's going to run again and i may in fact want to or not want to rerun this whole glide record query for now let's leave it as as is what i get when i submit this cd.server.update is an input object it's a copy of data but it's it's modified in fact let's do something different here let's say uh c dot answer c dot data dot answer excuse me i'm going to start out i always like to initialize these things data.answer equals nothing okay and c dot data.answer equals the number so now data has been updated by the client script that answer attribute has been updated so let's say we're asking what course would you like to sign up for and they click one of these buttons and i give them some identification back to the client script the client script is going to tell the server here's what's happening and it passes that information through an input object now how do you know if the server script is running first time or on one of these updates well if there's no input object then you won't be able to then it then it's running the first time so i can say look if there's an input object this is come from a form submission or a button submission okay running from a c dot server dot update it's going to run this code it's up to you whether or not you want to put in the else to say run this or this or run this and this i'm going to leave it as an and so in here let's put another console.log and say server script answer equals and this is going to respond with input dot answer so input is a copy of data with its modified values i still have the original data.answer which is nothing maybe i could even put zero i'll leave it as a string because i think it's a string all throughout i would convert it anything to a number this allows me to tell the server hey you've got something now watch the first time it's run let's refresh this the first time it's run i don't have that server message because there's no input object if i click one of these it now knows oh there it is server answer equals 600 it's coming from the servers console.log which is why it's yellow this one came from the client script i've now got a way to move information from the server script to the client to the html and have the client react to the html and tell the server about it that's a pretty full cycle and there is one thing that i just thought of this part obviously this scope dot show order is triggered by the click action on one of those buttons think of this part up above it as your onload function whenever it's loaded so i could say console.log client started there are things that i do in here to initialize variables say client scripts running you got to go do what you got to go do run it once when the widget's loaded and everybody's happy let's run that again i see there's my client started if i click something it doesn't say client started any more times so i've got the ability to run something once i've got the ability to run something on an event like a button click quick checking is it best practice to always start a table when doing iterations of items in a portal you've got to have the ng repeat in some kind of tag it's often in like a table row or a div tag those are the most common ones so it's got to be in a tag i wouldn't put it in a row i i put mine in a row because i wanted a row to repeat if you put it in a table it's going to repeat and create a new table for each element in that array so i hope that makes sense right a little bit of css just to show we aren't savages we'll clean this up i'm going to put in here uh class equals i think it's table stripe striped stripe head and that is another bootstrap directive so i don't have to go crazy with that makes my table a little prettier i don't have any headings on this thing but you could see very lightly there's a light gray there's a white it stripes it for me around all of that i could put my css over here to say anything that is a table i believe it's just table my css is really rusty and that's why i always save it for the last part because 80 of my service portal widget work is css padding uh 10 px padding or cell padding that's when i have to go look let's see what happens here does it get any prettier no i think it's cell padding someone on the chat could probably contribute here who's better at css than i am and nope still not working it might be the tds that i need i thought it was just padding because you could do left padding right padding it is this thing's smart enough to go uh you know it's if it's if it's black then it's there we go okay thank you we have a little bit of niceness to this table again i still don't have a header on there but you could easily put that on by putting something out here right outside this table directive it's a th uh name and th order getting exciting now oh i missed oh no i didn't and then i could have a button i thought this was the column was in the wrong place so i have three columns but only two headers that looks a little goofy thank you everybody this has been an introduction to building a service portal widget and how to communicate between the server code and the client and the html and back again let me just check real quickly i didn't miss anything that i wanted to cover you could build very powerful ways to visualize your data if all you wanted was a number uh great go count the records pass that in your data object and everybody's got access to that in future episodes i will be covering things like how to interact with the server data you know submit a form do an entire format once uh we did a little bit of that with c.server.update i'll be getting into another way with maybe a scripted rest api there's there's advantages both ways that i want to cover with you live data changes so if something on the server changes maybe we get this table updated automatically for us boom so you know you could you could have say a status console that's displaying this stuff how to interact with the url parameters when i showed you that debug i would like to turn that on and off with the url saying debugging was true and then in my server code it says well debug is true then i better set this flag so the html knows to display that block of stuff and even communicating between widgets you could have one widget trigger a signal that another widget behaves to when you when you're updating something and it may take a second or two how about putting some sort of spinner widget on there that goes hey i'm busy right now rather than the user going is it working i hit the submit button maybe i better hit it again and again and again now you don't want them doing that and i'll even get into some localization right now when you saw me put these things in the widget i was hard coding name and order and hello boy if i've got a multilingual organization i probably better have a widget that responds better to whatever the language is that the the people are talking so look for those in upcoming episodes speaking of upcoming episodes i mentioned that you can find those on the developer portal underneath share events but i'll tell you right now next monday i will be getting into scripted rest apis one of my favorite i don't know why one of my favorite features of the entire platform because it gives me full control over what's passed in what's passed out how it's processed and i look forward to sharing that with you on monday the 17th of august if everything goes right technically in health and family and vacation i hope things are well with you wherever you are please stay safe be kind and i look forward to talking to you again on monday until then hey why not participate in the community again community.servicenow.com that's why we're here to build that developer community right if you aren't already for now i'm chuck tomasi senior developer evangelist at servicenow wishing you to have a wonderful day thanks again share something be helpful and take care bye [Music] you you

Channel: ServiceNow - Now Community

Views: 10,500

Rating: 4.9699249 out of 5

Keywords:

Id: Jav32aDEz1I

Length: 55min 3sec (3303 seconds)

Published: Thu Aug 13 2020