Widgets and Demo Portal from our K18 Service Portal Sessions
hey guys is Nathan Firth so first up I just wanted to say thank you to anyone that attended any one of the sessions we did at knowledge 18 and it was so good to meet many of you in this video I just really want to really quickly just wanted to go over the demo portal that we showed during some of our talks so the first talk that we did was during creator con developer theater and we talked about gamification for service portal so in this one we showed some examples of how you can implement gamification and use it for driving user adoption one of the examples that we covered was using a guided tour to walk the user through the portal and then rewarding them for some points for doing that so I wanted to show that here real quick so we can present the user with some different steps here and then when they are complete you'll see down here in the bottom left that we've been rewarded with 300 points for doing so now with this application that we wrote this is a scoped application and it is also built using a script include that can be called from anywhere in the platform so it's not just limited to doing a guided tour we also did an example where we integrated with social Q&A so if someone had submitted a question and you submitted an answer and that was marked as correct you could also be awarded points that way and we put a quick little button here to kind of demonstrate how to do this also from triggering an event so this has already been released on service portal do so feel free to check out that code and if you have any questions you know definitely reach out and let us know the second talk that we did was on unlocking service portal widgets so I wanted to go through these here real quick so in this first one we talked about good coding practices and this was primarily around not manipulating the Dom directly and using data bindings and events to communicate between widgets so if you take a look at this example we're also releasing this code but real quickly this green button here is triggering an angular event this is one widget this is a second widget up here and when we trigger this event we get the animation here's another version of this that does the exact same behavior but it is in fact using Dom manipulation and grabbing the element through jQuery and directly manipulating it one of the reasons why this is a bad practice is because you have no separation of concerns and this widget is directly manipulating this widget in the second one we talked about you creating maintainable widgets and with this one we talked about using an angular directive using assigning instance options to your widgets to make them more configurable also using CSS variables so that you can very quickly being able to change the look and feel and depending on where the widget is being used also being able to bring in ng templates so that you can have different looks and feels that you can simply choose from so for example here with this widget we have a template picker here so I can drop down to debug it's saved and this is just rendering the exact same widget but just pulling from a different template which in this case I have displaying Jason and then all of that logic that is actually responsible for producing this data is actually coming from a script included so just some different examples of how you can create more maintainable widgets then we talked about creating a synchronous widgets now the primary reason for having a synchronous widget is if it's going to be loading lots of data and it could potentially take a long time to load normally if it's not a synchronous it's going to delay the loading of the page but when you mark it as a synchronous you are able to load the widget and fetch the data after the initial page load we in our example we also cover an example on how to do that using a REST API and then the last one is using streamlined queries so there's many different ways of writing queries and fetching data so in this first example we're going through the knowledge base and we are grabbing all of the categories and building up the entire tree using a recursive function what this ultimately is doing is kicking off a separate glide record to fetch every level and you'll notice here it kicked off thirty-one separate queries at execution time of 47 milliseconds now this may not seem like much but now imagine this with thousands of users and you know potentially this could be a problem now here we're doing the exact same thing except we're fetching all of the data at once using a single glide record query and then we're sorting through and building out the array in JavaScript now you'll notice this is only four milliseconds so much faster and the real point here is just be very aware of the number of glide record queries that is happening behind the scenes when you are writing your server script and finally the last session that we did at knowledge was building a better service portal lessons learned from the field now during that session we covered quite a few topics but the one I wanted to quickly highlight was how one some different ways you could lay out your Service Catalog so in this example we broke it down by order hardware software you know you kind of typical categories but by displaying some of the subcategories to some of the items within those categories were able to provide a little bit more context so I wanted to show this this is fully responsive also as gestures enabled so you can swipe left and right from your mobile device and I wanted to show what this looks like responsive Leon mold looks I thought that was kind of cool so you can see here if we click the search button we kind of dim the rest of the screen and we provide the search box we have access to the whole left-hand menu here from the hamburger menu and we can swipe left and right and you'll notice if we jump in here to one of these categories in this case laptops we're also bringing in some relevant knowledge articles and if we go up one to the order Hardware category you'll notice we now bring these in as subcategories so you can filter your results so again Service Catalog can be structured in you know probably a thousand different ways but this was just a quick example that we used during our demo at knowledge but anyway thanks so much for attending our session and for watching this video if you have any questions you know feel free to post in the comments and thanks again
https://www.youtube.com/watch?v=n52r7a1r9UM