[Music] all right so this is uh part four of the salary survey analysis tool build we have completed all of the calculations and the back end logic that i should need i may need to add a couple other things as we go um nothing sarah is joining us as well until so next up we are going to begin the ui build we're going to actually start building out some components and um hopefully adding to this page over here which up until now has been very hello world hello world all right so one of the first things i have to do is go to chart js because this is the library we well i have decided to use i really didn't include anybody in that decision um all right so let's see first i need to figure out how to pull this thing in apparently there's a cdn uh content delivery network i think is uh basically it hosts static files and it hosts them in a geographically dispersed way so that you know it's more likely that there's a server like a short yeah down the street that that i'm pulling from as opposed to having to hit uh the original site gotcha um but so they hosted out they host their stuff out here and so i can pull them down so this is the distribution code for it now i could i think because i think this is what we're going to do i think i'm going to do try to do an import on it so let's do this let's create a new component file and we'll call this one histogram js and import well i don't know if that's an es6 let's see i don't know if that's actually an es6 module chart js es6 module let's see um import the example below how to load chart and different systems i don't know if this is going to work or not from and my app import uh histogram from slash components welcome welcome dot slash component slash histogram.js i don't know if this is going to work or not i don't know if that one's actually set let's find out the requested module does not provide an export named default all right so that didn't fly um cannot load common modules i'm not sure which one i need here installation let's see trying to figure out how to install this guy bundle let's try this one oh yeah nope still no go all right i don't want to sit here and spend all my time playing around on figuring out the es6 standalone build bundled build all right i'm just going to add a library and we'll do chart.js and we'll go back to our cdn we'll grab the minified version and i'm just going to copy it down i'll just keep a copy of it locally and let's see non es6 module now not in the webpack uh let's see import statement strict mode the import module bindings imported are called live bindings function like dynamic import which does not require all right so [Music] looks like i'm just going to have to live with this one being a little bit different than what i had hoped that's all right script source equal to dot slash lib slash chart.js there we go and no longer needs an import because we're not actually using there we go all right so since we're not actually using the es6 version of chart js um since i'm having a bit of trouble figuring that one out right now we're just going to use the global version so with that in mind let's see let's go ahead and create our es6 web components and i just need a basic template to get started and where are you web components this one there we go that's the so this is kind of the basic start of a of a web component so we're going to call this one histogram and for those who aren't familiar web components are a fairly new standard in javascript that allows you to create custom elements in vanilla html so like for example on this one um i believe there is a requirement that they use a dash for custom elements so we will call this one salary histogram and so including this including this custom element including this file in in our html document will let us do something like create an element like this in our html and it will be controlled by this javascript here now of course we actually have to spell it right all right there we go salary histogram so for example you can see that it's got hello world here if i jump back out here to let's go to this guy and let's do salary histogram and let's just kind of see what this gets us you can see it outputs the hello world so that is coming from this inner html the connected callback is called automatically uh by the framework so now we've got a basic web component set up and we can start to build this out a little more um now web components have some different life cycle hooks life cycle hooks so i'm going to pull these up because i honestly don't remember these off the top of my head if you've spent any time watching any of my videos you'll know that i spend most of my time googling like anybody else uh so let's see here yep yep yep yep uh where's the uh ah not safe life cycle life cycle callbacks [Music] here we go connected callback is invoked when it's appended adopted and attribute changed so these are the four four main life cycle hooks i thought there was another one i could have swore there was another one oh well uh we'll stick with the connected callback um so first of all for the inner html if i go back to my chart js they would like a canvas so what i'm going to do is use a canvas as my primary element i'm going to make my id dynamic welcome back yes i'm back so you got it installed um yeah i decided to install it globally rather than locally because i couldn't figure out how to do the i couldn't figure out where they kept their es6 module set up so i just installed it globally as a regular javascript library and now i am creating the histogram web component so going off of this documentation here you have to provide a canvas element the canvas needs to have an id in order to draw well maybe not let's see any of the following formats may be used my chart now all i have to do is provide a context so i think all it needs is an element i don't think i actually need the id because i'm using a web component and we're going to try that we're going to see how this works so first i'm going to set the inner html uh second why are you spaces oh because i copied it from somebody else i felt like there was some disdain when you said that i don't like double spaces i'm a tavern i'm a tavern all right so now let's see so i'm going to do this dot chart so that's going to create a property on this web component that is the chart and we're going to say new chart no not this dot chart don't auto complete me i know what i'm doing in theory um all right so var ctx or context is going to be um get elements by let's see uh dom get child element let's see if there's a way for us to or actually hold on ah what happened web components get child element am i down google server ip address could not be found well that was where and now it's back okay good old stack overflow uh document.queryselector let's see mutation observer document.queryselector enter adjacent html or insert adjacent html uh i don't think that answered my question um query selector all i want is to get a child element and i can't remember how to do it i've been doing angularjs for so long i can't remember basic dom manipulation um this dot shadow dot query selector let's try the query selector all right so here's what i'm going to do i'm going to comment this out first we're going to say this dot query selector canvas and let's log out the ctx and see what that gives us because i'm honestly not sure offhand oh that looks maybe no that's not what i expected that's a completely different thing oh here it is canvas with oh perfect that that gave us the canvas element that's what i was hoping to get a hold of so hopefully we can take the next step so it looks like by accessing the web component using this it looks like this class here may actually be the element um let me do some formatting because i've got to fix those spaces okay so now we want to pass that element as the context per our chart js documentation and then we need to pass the configuration object so this is where we need and sarah disappeared again which kind of sucks because she really wanted to see this part we'll catch her up when she gets back you're too late it's already over you missed it uh i'm so mean so we're gonna do type bar uh let's go find here we go type bar data let's look at how this one's actually set up in for real life all right so we've got type bar data is an [Music] object in this case and it has labels let's just call it let's just call it salary for now we'll deal with the fallout later [Music] good morning druv how's it going and then data sets okay so data sets in chart js is basically our data series so oh wait a second i messed up on something we'll go back and correct it so this one is actually going to be salary so this is the label of our series the labels up here is in fact the x-axis labels so for now i'm just going to plunk 30 uh 30 to 35. festival season's about to begin so what what all does uh that entail i'm not i'm not particularly familiar with festival season and data so this is the values and right now i've got three columns so we'll just do 25 30 35 and let's see what this gets us a whole lot of nothing hmm not what i was looking for that's what we got let's see am i missing something uh chart let's see salary histogram has a canvas its width and height we're set to nothing that's weird um you didn't miss much basically what i did was i uh used this.query selector in order to get the canvas element that i'm creating with inner html how do you know to do this dot query selector is that part of the chart that's a no query selector is a uh is part of the dom it's it's part of javascript's native dom not that kind of dom no the i think it's called the document object model i think is what the acronyms for basically it's how you manipulate elements through javascript okay so this is just one of those contexts vanilla javascript right this is this is just vanilla javascript series the new chart that you see here this is actually part of the chart js and it accepts an element as context and it accepts a configuration object which is the configuration of the chart you want to build so bar chart here's the data x-axis labels and y-axis series and series name series values and you can see each data point lines up with an x-axis category so that's all there is to setting up a chart.js chart what i have to do now is wire in my data for so that it maps my data into the chart but i'm having trouble getting it to actually show on the web page right now it doesn't like me what does the html look like for this what do you what do you put in that makes that javascript that makes this go boom yes okay so this last line uses the custom elements api it's another vanilla api in javascript uh just available in almost any browser ie 11 is kind of flunky about it there are some ways of getting around it but truth be told ie 11 doesn't even support uh the es6 classes i don't think so in order for this to work in ie 11 i would have to transpile it into es5 script using a build tool which is what i'm doing because i don't care um it's my tool and it only has to work in chrome um but no if i if i was trying to do something similar to this in a way that supported all browsers then i would transpile and if you look at servicenails new ux framework uh it is using uh i believe babel and possibly even webpack um i think from my reverse engineering of it i think i saw webpack hooks in there um but it is transpiling it into es5 so that it can be so so that it has better cross-browser compatibility um and also because jsx isn't a browser-supported language so it has to be compiled into something else anyway but this custom elements you are defining a custom element with this tag name all right i think we're back i think i dropped off there for a second i was doing some had to all right i think i'm back i think we're back um click here to reload chat let's see i let me jump over to slack here so apparently we're having some network issues there for a second we seem to be back i'm going to give this another shot this evening and if it doesn't work then i guess we'll try again tomorrow [Laughter] okay so let's try to get stuff caught back up here um so we're building out the histogram yes uh we were discussing yeah so you see this salary histogram okay all right so basically what we were discussing was this this histogram custom component we're discussing how this works with the html so this is using the custom elements api it's creating a custom tag name called salary dash histogram and it's passing this histogram class which defines how it's used callback is a special function called a life cycle hook basically the browser calls this okay and this is where you set up all of the uh different things that you want it to do when it loads up so you can kind of compare this to anything that you put inside the client controller that isn't inside a function but just sits in the client controller function itself that's kind of what the connected callback is in a roundabout way and if i jump back to the index.html you'll see i have this salary-histogram element yeah that is what is actually binding that to the html so now this element is being controlled by this histogram class and how it all looks and everything is controlled in the chart js is controlled so the first thing that i do when the element loads okay so first i'll have my element the first thing i do is i set inner html to this canvas which is going to create this canvas element here in the actual rendered page then i get then i use the the dom manipulation to get that element and i pass it to my chart js in order to render that particular chart and the chart js library takes over from there now the problem i'm having is that it is doing something but not what i hoped uh so i need to go back to chart js i'm missing something something's not wiring up correctly so vertical bar chart um let's see if i can look at the script okay uh bar chart data okay new chart so it's putting it in a window dot on load i don't think i should need that though um oh wait a second maybe that's the issue so let's so what i'm seeing here is that ctx is actually a canvas context it's not the canvas itself so i think i need to do a get context 2d save it no that wasn't mine i saw a chart and i was like got all excited um nothing still not getting what i need out of it ctx okay if i go to console let's see mhz says seems like you're adding the salary histo into the histogram but we can't see where you're telling the histogram to actually display yeah so i'm trying to buy i i'm trying to pass the histogram or sorry the um this histogram i am trying to pass it to the canvas element context that i'm building there um so you can see that console.log i just added is getting the canvas rendering context 2d um but my canvas is still showing as width zero height zero i don't know why uh reload let's see so canvas width 400 height 400 so it is drawing my canvas um so then i'm supposed to pass that 2d context let's see if we can go back and find a simpler oops not that one get started um usage any of the following formats may be used once you have the element or context you're ready to instantiate a predefined chart type or create your own the following example instantiates a bar chart showing the number of votes so ctx document.getelementbyid new chart all right let me try something let's see about just giving it an id nothing um church a s web component let's see if there's not something i'm missing um where's your get link uh is there one of those actually on a page somewhere that you can view source to compare how the elements are rendering yeah so that's kind of what i'm trying to take a look at is i'm trying to find some source uh this one's type script is this just supposed to like work and it's because you're doing it a certain way or so my my running theory right now um my running theory right now is that it's related to my using a web component that something about this connected callback for whatever reason stuff isn't ready um maybe uh okay so let's try i'm going to try something let's try doing this after document.onload and i don't i don't expect this to make a difference but let's see nope did all right curiosity satisfied all right let's go back to this web component here so the way he does it is in a first updated render update completed update chart um now you're using lid element that doesn't let's see well let me try something simple let's do this let's comment this guy out let's comment the web component out for now and let's just try my favorite way of fixing problems in javascript comment it out the problem goes away all right so let's grab this and let's just try directly embedding a script in the page i don't know why that's being so clutchy okay so this dot chart we need to get rid of that and go var chart let's just see if i can do it the simple way now all right so [Music] let's try and take their exact example and i think this is what mhmhd was telling me to do was take a known working example uh okay let's take this guy oh i forgot i forgot my context so let's document.getelementbyid id is chart save it load it okay so we have a chart at this point just not using the web component get element by id chart and then we pass it to context all right so i kind of want to get this working in the web component if i can uh if this proves too too complicated and it's taking me too long then i'll abandon it and go with a more es5 vanilla way of handling things your ability to stick with something is so much better than mine i would have been like heck with this a long time ago well i want to understand why it's not working in the histogram it's not important it's just not working that's well so if you see here if i drop it straight in and i have a canvas with an id of chart and then i have a script tag where i do document get element by id chart and chart stuff almost everything's the same let's just eliminate the last element okay so it's not that issue either but if you see here i'm using getelementbyid i'm getting the canvas by id i'm doing everything the same page well yeah and that's that's what we just did is i took yeah i i took this kind of known good setup here and i rendered it using a more traditional method and it worked fine it's you just want to know why your way is not working yes i just want to know why my way is not working i want it i want it to work in the web component i'm being stubborn about it like we are so different in how we do this like no there's a point you know if you're going for a certain architecture or something like that to set yourself up for uh laying out the rest of your application later that's one thing um let's see i want to say this is the one i've used before [Music] constructor an instance the element is created or upgraded useful for initializing state setting event listeners creating shadow dom for restrictions on what you can do in the constructor called every time the element is inserted into the dom removed from the dom i agree what better to know why if you have the time oh absolutely i'm just patient and i'm willing to be impatient because i'm not actually the one coding i'm just watching right now so y'all can ignore me on that note let me try moving it to the constructor just to see if that makes a difference well that blew up now let's make sure we call super okay so that did nothing to help it what's interesting to me is the way it keeps changing the width and height to zero i was not doing nothing let's see package chart.js web components let's see how they do it in lightning components rendered callback template query selector get context new window.chart style height 100 style width 100 percent let's say um parent node style not sure on this one they're basically doing everything more or less the same way so i'm going to switch back to what i had before because i don't think it's any of those this query selector get context that sample page had is js initialized let's see yeah go back let's see let's see if they do anything to initial see they don't do anything to initialize here so i think that the initializing in this script is because they are using a promise to load chart js so they are using javascript to load uh that particular file and then they're marking it as initialized um let's see chart js won't draw in a web component um data fruit maps nope inside the canvas element with the options you have the ability to turn them off so no legend and no chart of the framework is shown doesn't fit the data structure required by chart js that's not the case for ours what's really killing me is the fact that there's not a single error related to this that's the kicker of the whole thing maybe i need options let's see well when i did it this way it didn't require options um [Music] would being in a custom element change that let's see custom element i'm gonna try so this is one cool thing in es6 is that these little back ticks are um multi-line style slash style i don't know if this is going to work or not host display block i don't know if that's going to make a difference or not but we'll try it nope um well i actually think host pertains to shadow dumb so that probably wouldn't work anyway salary histogram oh there we go solved it what was the issue so the problem was that the salary histogram element when you define custom elements those custom elements don't start as display block um i'm honestly not sure what they start inline okay so they they apparently start as inline by default and for whatever reason um embedding a canvas and having the chart.js library draw to it it has to be block so you know my knowledge on this kind of stuff is just like non-existent but it crossed my mind i bet you that the display because i thought it's not displayed none but i thought i bet you it's something with the display in the css that's what i would have checked because css is what i know um but i figured no it's got to be something else well see i was saying i should have said something earlier i i i was kind of hoping that it was drawing it but not showing it because the display was off but it turns out that i guess however it draws the chart won't even draw it properly if it's not display block from the start so that was that was interesting i that was unexpected um now that i think about it though i really should have banked on that because um uh leaflet js which is the the mapping the the mapping toolkit that we used at map anything is the exact same way you have to you have to have a block level or a display block element uh that is has some appropriate size to it or it won't render properly that initial render will just go to pot uh so that's actually pretty cool so now i got this initially working now how do i want to go about this right so i need to be able to pass data and i need to be able to pass all right so we need to be able to change the labels and we need to be able to change the data those are the two important aspects that we need to be able to change here so uh custom elements web components allow you to pass this stuff through attributes which will probably feel familiar to directives in angularjs so we can do the same thing in these custom components um oh i love this website this website is amazing for everything my favorite out of all the different sites that offer information on css classes because it lays it out and it gives you examples of it in use and a lot of the other ones just don't okay so we have properties and attributes i don't particularly care about the properties right now what i really want is the attributes and that comes down to this attribute changed callback which name old value new value which feels very servicenowy all right so you can listen to attribute changes all right so the first thing i want to do is i want to see if these attribute changes i can't remember if it fires on initial load or not so we're going to find out so basically what this does is it reads the element attributes so if i create this data attribute reload negative so it does not do so on load all right let's see where can we go from here um all right at this point i kind of want to now we're not going to take the cheater method and just import it excuse me all right so ultimately i'm going to need to pass the data and the labels and those got to come from somewhere and that somewhere should probably be a higher level component so normally when you're working with react.js when you're working with angularjs you know most of these frameworks have some sort of root element to it they have some application element that wraps all the others so uh i'm just going to follow suit and create an app.js component and what we'll do is i'm going to grab we'll just grab the whole deck on thing and we'll call this one the salary app and salary app html element i do want the this dot inner html but the rest of it can go away and what i want is a uh was it salary histogram all right so what i'm going to do here is save this guy and we're going to come back to my app.js and we will also import as app from dot slash components slash up not histogram dot js yeah so what i am doing is i'm creating a tree of components so instead of salary histogram we're going to change this one to salary app this becomes the root element for the application correct so now we reload everything seems to be okay yup see so this is the net result so i have a salary app which contains a salary histogram which has all the other stuff in it okay okay so um the reason i want to do this is because we're going to need something that accepts actually technically i may not need that because what i can do is i can pull my store in and yeah let's do it that way now we'll keep going down this road i'll pull the store into the app level so import where is my store um sitting over here in appjs and i'm just taking a look at it real quick all right here's what we're going to do i'm going to yank this out we're going to get rid of this one and i'm going to pull this into this particular component or into this particular file we're going to delete this one and we're just going to use this we'll get rid of that guy and so right now i'm just moving some stuff around that's what i figured okay save reload still works okay so what i did was i moved my um my app component out of the components folder and i moved it up to my root app file and the reason for that is because i want access to the store uh this store variable and i didn't feel like doing a bunch of well frankly that would have been a circular import if i had imported the store from here so um now i have access to the store variable from within this particular html element and as i've said in previous episodes this code is not clean uh if i was a little more concerned with architecture and structure i'd probably go about this whole thing a little bit differently just in terms of where i put the code the code itself would be pretty much identical but organization would be a little bit better yes i am writing dirty in the rest of our lives you like inundate me with your horrible puns but this is like my revenge moment right here i'm trying to be professional dang it [Laughter] i apologize marty this model is not the scale [Laughter] alright so next i need to be able to wire up some of these events and such so basically what i want is for store.subscribe to actually reside in my root element so what this is going to create um and if i i haven't mentioned the what's this oh i actually need this in the connected so um for those who who haven't been following from the very beginning uh the store is kind of like a redux store so essentially i am going to dispatch actions to the store and then i can subscribe to those changes in the store so this gives me a dispatch subscribe a pub sub sort of model and so basically what i'm saying here is i will be able to pass the store down to other components so that they can dispatch events um events will be emitted up towards the store and dispatch to it and then the subscribe can then pass information can pump information back down so what we're going to do here is i'm going to create a method on this called render and it'll accept a state and what we're going to do is this dot inner html is equal to and we're going to keep this at a very poor man's render right now not using lit element or any of the big fancies to draw this stuff out um all right so we're going to move that to there and so if my store bindings work correctly what i should be able to do is for now we'll just do this dot render and we'll pass state to it save and nothing dang it um are the dispatch okay here we go here's some errors cannot read property render of null um es6 class methods maybe i have the syntax wrong let's see constructor constructor now return this dot calc area ooh i think i know the problem is var self is equal to this i bet you i'm losing the context of self when i'm calling this function i believe i'm past yeah so the store is is calling this function in a null context so there is no this so i'm going to use a closure to wrap this and inject it in that way there we go okay so like you lost me after you installed it okay so something you're probably not as familiar with is uh is that this have you used the word the keyword this in javascript much yeah no but i know in the client script it says variable c c equals this correct so from a portal standpoint when you're in the client script it says var c is equal to this this is a special keyword in uh javascript that basically passes a context um so in this case this refers to the instance of this class of the class i'm going to try not to use the word in the definition so this refers to the um so this class that guy okay okay that's what this is referring to this has a connected callback this has a render method why'd they call it this like that is a very bad vernacular decision this object right here but what about that object over there there is no that keyword there is no spoon there is no spoon it's just this keyword so this refers to the current object essentially um right and mhc points out that you see this a lot in script includes as well and you can create properties and methods inside the class and you call them with this so if i were to create multiple salary app tags there would be let's say that i had three different salary apps embedded in here okay then there would be three instances of the class and three different this is so when i say this dot when i say this dot render i'm saying the render that belongs to the current object but in my subscribe function i am explicitly calling this function with no this context at all what too much this is in that i'm calling this i'm calling this function with no this at all well then you're not calling this function you're just calling function i'm sorry i see what you're saying so the anonymous function here has no knowledge of this but because of javascript um scopes i can say var self i could just as easily say var c is equal to this and c dot render but i'm going with self just because it's a convention i've used forever oh thank you she is a she is a phenomenal sidekick i love having her in these eventually she's going to start doing her own streams and i'm going to get to try to be a sidekick [Laughter] all right so we are now rendering again but what i want to do is i want to change the properties that i'm injecting in so this is where stuff starts to get kind of cool with web components because i can do this [Laughter] you all should see look i'm kidding i don't like you incorporate videos i don't like you i'll like you that was funny and you know it was not funny and you were a mean and terrible person this only applies to the things that are in networking okay yeah yes yes but if you were talking about you had like if you had like three instances of that in your html how would this know which which one it was referring to uh like independently so yeah yeah so so so if you want to think about it this way and for each item in the sequence you had this it was this so this specifically works thanks to the new keyword var c is equal to new salary app okay so html doesn't do anything okay html has to have logic code that does stuff to it or with it so in the browser the browser sees this custom element yes and what it's going to do is it's going to say i need a new salary app for that element okay okay if i were to do that two additional times a b and c all have different this is so if i were to call a dot render okay then when i say this dot inner html is equal to something i'm saying a's enter html a's this or b is this or c is this so all of the this variables become tied to this to dang it to one specific instance of that object each room right right mhz's point each room has its own this and each of these objects is its own room does that help yes okay that does make sense he gave a non-code physical example and that was really all right so i went back to inner html being in the connected callback because i decided that in the render function what i'm going to do is i'm going to manipulate attributes so what i'm going to do is say this now uh i do need to get the the histogram is equal to this dot query selector salary histogram all right so now in my render function i can access the uh dot set attribute okay so what i want to do is say this dot histogram dot set attribute two and i'm going to do this real crude like and this is going to get messy actually don't write messy code i don't have to do this messy because i can skip the attributes because of how i'm going about this i'm going to do it as a property because properties are more sensible really taxes on the properties that's where we're going i'm sorry it's there i can't help it like doing this at night brings out my inner travis with all of its punny glory oh what just you and your puns these are the puns you deserve all right so store has a state my data is going to be i need my selectors that's what i need that's what i'm missing um so let's do our histogram data is equal to get histograms and we're going to pass the state to it all right so this is using the the get histograms selector function that we built last time and this is going to give me this object here which is my data element that i need so please don't suggest that to service now that is a new pay model tax on your properties oh oh no man we already got the the the charge charge per tables and per field no first 50 custom fields free you can have the first five widget properties free after that it's a charge per widget property man then they'll do that to like instance options and i'll cry [Laughter] oh my goodness we love you servicenow we just don't like your pricing but let's be honest it really doesn't matter how you price it we're gonna whine about it we're probably gonna whine about it anyway we should make it free no way we like her that would be counterproductive um this dot histogram data is equal to histogram data dot i'm almost there i'm almost there i'm almost there okay would you say you're going to take it about this far yes i'm going to take it about this far boy they all right i need the no not that one uh from app data responses did i not import responses in here from anywhere important app data responses i guess not i guess let's see app data responses has my bins and i need my bins let's put it on the state where's my state reducer um create store here's my big reducer bins well i guess it doesn't matter because i'm gonna have to import it into this one anyway well fine be that way all right i need those bins so import bins from dot slash data slash responses dot js all right so the bins contains my histogram bins so we're going to say this dot bins equal to bins or sorry this dot histogram dot bins all right could probably do a better job of all this but all right so then we're ditching this one and we're going to say get not gfc not gfc all right so this dot histogram data okay so get data set data i guess i don't really need a get data i think i can get away with just set data so usually usually when it comes to attributes and properties you see a lot uh they they tend to recommend that you use an attribute and a property and it leads to stuff like this where you create a property called value so that you can get the attribute value and then you set a property value so that you can set the attribute value that seems like extra work it is extra work and if you're making very generic um supposed to be used by anybody type web components it's pro it's probably a good practice to follow this is a little more specific i don't care as much i'm just trying to get it working just here so i don't get fined um this dot data is equal to new value and then we need to update the chart so i want to say that chart js has an update method uh chart js update updating charts okay so i can say this dot chart dot data data sets zero dot data is equal to new value and then this dot chart dot update all right okay so and i will explain all this in a minute you're good i don't know if that's gonna do anything but we're gonna find out yeah i didn't think so uh maximum call stack exceeded uh yeah that would do it wouldn't it that would that would cause that issue okay so we do need a getter for this one data return this data that'll do okay there we go all right so nothing seems to have happened all right so isn't this involved to implement this in service now not quite because servicenow is using a more robust framework and so a lot of the boilerplate is removed so that you can focus on the behaviors okay so i want to do this in one of our apps that i've built the portal out for for glide fast and i also have a few other uses in mind for it render all right so we are calling render a couple times good um but my chart is not updating the way i would expect so this dot histogram dot data this dot histogram.bins okay so see what my new value is right oops i want these store.dispatches i don't want this additional console log that is like the first thing one of those things i do when troubleshooting and i can actually get pretty far in troubleshooting with that then if i can't figure it out i just like comment out the entire server script and see if it's that okay let's try maybe i'm missing maybe i need to do the getter and setter for bins as well maybe it's because the property getter center doesn't exist this dot bins return set pins value this pins the stop bins is equal to new value let's move the update function because we don't want to rebuild that chart more than we have to so let's create a method i should probably could have done it in there too in all reality um this dot chart update so now what i need is to set that set that this dot histogram render um did i not set oh because i didn't set the chart this dot chart dot data that sounds important come to think of it i don't even need this this this guy here i'm just going to return this guy and likewise on bins what i need is not that guy what i need is this chart dot data dot labels is equal to new value dot map and if you remember correctly each bin has a low and a high yeah so what i need to do is i need to convert that object to a string uh so that's going to be bin dot low plus that guy plus bin dot hi and this.chart.labels boom there we go nice there it is all right so what i did here was i've got my store okay whenever i dispatch which you can see by my event queue over here yeah okay every time i dispatch an event the result is that it will call any subscribers okay so when when i dispatch these it calls subscribe which calls self.render self.render gets my histogram states gets the this or and then it sets the properties this dot histogram data this dot bins and then calls render on the histogram child element okay now if you're using something like react lit element stuff like that a lot of times you don't have to do this style of calls on render because i'm using vanilla web components i don't have a framework that is piggybacking the templates you know there's nothing doing the heavy lifting so i have to do the dom manipulation myself now that said all things considered i feel like there are a lot of cases like the one i'm currently in where a framework would probably be a lot of unnecessary stuff for this um so you'd basically be adding 10 000 lines of code for like 20 that you actually you'd be pulling in a whole a whole data kit that you're now dependent on when you could have just written a small vanilla component to do what you needed um you know and that was part of my experiment here was to see how far i could get on vanilla components especially when you're using a redux style store um right and realistically i could technically make every single component a listener on the store like i could um instead of inheriting from a you know you see this extends html element i could technically create a base element which is all lit element polymer and all the others do they create they expose a base element i could create my own base element that made every element listen directly to the store and i could have a fully event driven dispatch and listen for certain events and that's honestly kind of how servicenow's ux system works there's a central redux store event uh actions get dispatched and then there's a couple other hard wirings in there for the servicenow components so it's really not that hard when you get that when you get down to it but so what happens here is when render is called it sets the histogram data property uh set data okay it's going to call this setter which is going to manipulate my chart.js object then it does the same thing to bins it sets the bins to the new bins set bins sets the new bins and then it and then it calls the render function on that histogram element which calls the update function on chart so with this i can now create a couple of additional histograms now this is going to require a little more schmancy footwork because what i'm gonna have to do here is instead of doing just one i'm gonna have to do a four each for the children so what we're going to end up with is um i'm going to have to iterate through each of the do i still have it now i commented it out let's reload no it wasn't that one new it's gone forever this get histograms function returns that object that has parent and children now i have to iterate through the children and basically create a salary histogram for each of those um so let's let's see if i can whip that out real quick um because we're using the same histogram component for each of them we're just passing different properties so first of all i'm going to add in addition to our all right so we're going to add a salary histogram i'm going to add a div around this so now you're starting to see the template coming into play here my inner html is basically my template and again um i want to say that servicenails uses a render function like this and you actually put your template in the render function that all um service portal widget is is really all in a javascript and javascript like parses out different parts of it your h all the parts yes yes your html your css your javascript controller it's all in a single component file um very similar to this there are differences uh obviously but then we're going to say div class is equal to and we'll do slash div uh children histograms all right now when i call that render function i'm going to need this dot histograms is equal to this dot query selector children histograms all right here goes nothing histogram data dot children dot four each all right so uh this will actually be our histogram data so for each of our children we're going to hit the histogram data and we kind of have to do something very similar here um yep we correct we've got to all right so here's what we're going to do so for each one all right so first we're going to have to clear the this dot children histograms dot inner html i'm going to blow it off i'm going to eliminate it completely then we're going to let's see append html maybe append i need to write down manipulation for this what am i looking for dom append string can i just append it as a string or do i have to go through all the insert adjacent html div before end all right well let's take a look at this particular function insert are you t-l-a-r position perfect relative to the element all right so let's try that all right so here's what we need this dot children histograms dot insert adjacent html before end and i'm going to insert a salary histogram tag does it return anything doesn't seem to return anything not necessarily just kind of hoping it would would save me some trouble salary histogram i find it crazy that you type so many variable element names instead of copy pasting them and you get them correct that's that's an anomaly i am well known for my uh yeah glider record god half the reason i i once created an api called glider and the reason was because every time i tried to type glide record i would get glider record and it got so bad that for a little while um my editor was like auto completing it for me it was auto completing it the wrong way you know i'll make fun of you for your uh yes exactly for the record i've seen this in like out of box service now code where they have misspelled an element or something like that and then carried it throughout the entire widget code and i'm like guys what are you doing template literally lets me insert directly into it that's what i was looking for okay um does that help me yes it does so what i want is histogram and then i can use my template literals to post and index i do need to make it a temp an actual template literal though there we go so this is one cool thing you know how a lot of times you have to do string plus something plus string template literals are an es6 utility that lets you use backtext this guy up here up in the top left corner and you can use this little dollar sign syntax in order to inject variables without having to concatenate with the plus oh that's fancy but you got it you got it so and the reason why i did this little id is so that i can do what the the little thing i've done a lot of reading on es6 because i read a lot on es6 [Laughter] histogram dash and i need to backtick that one again brackets ix okay so that should get me uh actually wait a second i need hashtag okay var i've not used it in slack what does it do now i need to know factic comes from using slack a lot let's find out i don't know i don't know what's the backtick do in slack formats the text as code what all right that's cool do it well not right now i'm trying to i'm trying to wrap this up yeah you are you know i was tired all right so here's what [Music] here's what i'm doing i'm inserting a new salary histogram element with a specific id i am then getting that id or getting the element with that id then i am doing histogram dot data is equal to histogram data which is coming from here actually i don't think object dot values children that children was an object and yeah it's a long string and normally i would break it up and clean it up but again your wife's tired you don't care exactly so basically what this is going to do is it's going to iterate through the values of that child object of the children object which should be a series of arrays so this here uh object this guy right here should give me an array of arrays this gives me the array of data because i'm doing for each so for each of those inner arrays set it to data histogram dot bins is equal to bins histogram dot render and that should do it hey andrew that's right we're going to be wrapping up soon anyway uh cannot read property children histograms of undefined children histograms uh query selector this.children histograms equal to all right let's just see if it was the css it's always a css man uh cannot read property children histograms of undefined in array for each oh wait a second i betcha now i'm wondering if it's the i'm wondering if it's the this context again not passing so it should be self dot children histograms and self children.histograms and problem solved so now i've got the parent child one child two child three we need to put some color on them things that's killing me yeah we'll get there so this is taking that get histograms object what's that if you like it then you should make a var of it [Laughter] now i'm going to want to try and come up with a song if you like it yeah um man that would make a great t-shirt you'll have to add it to your stack of ideas oh my gosh i've got so many ideas i need to make us some cool shirts servicenow developers do not have near enough cool shirts so i do have a few things left that i want to do for the histograms i'm not going to do it tonight but obviously each of these histograms needs a title we haven't passed title to it yet um if we take a look at if we take a look at this guy let's pull this out and put it back down here where it was so if i reload this inspect so this object here nope oh state is not defined uh store dot get state is defined though do it again there we go all right so this is the get histograms object here so basically the parent is going to be our there we go the parent is going to be our selected node so it's going to be the distribution of whatever our current filter is so in this case this is the whole data set the second chart here is going to be child number one which is overcast this one is child number two which is rainy and this one is child number three which is sunny so we're going to have to provide those names in order to provide some context but what we have here should work regardless of what i select so for example uh you know that gives that one gave me three but let's look at our responses uh let's select uh wendy [Music] let's select uh wendy instead because wendy only has two children so if i come in here and i say where did i need to go for this one app.js so if i select all right filter added filter removed property selected if i select windy instead of outlook and reload one two three charts so now i've got three charts instead of four parent true and false okay see so now when i'm clicking clicking on something which doesn't exist yet but when i click on a property it's going to dispatch this selected oh so you'll be able to click into oh that's fancy so i will have a tree of properties off to the left hand side and when i click it will dispatch the property that i clicked which will automatically re-render these inner nodes so you can like dive down into whatever you want to look at yep so for example um let's create a global level function real quick and all it's going to do is do a dispatch and it's going to switch it to windy and i don't know if this is going to work or not so this should be fun so basically what's going to happen here and you'll see if i open this guy up i've got a salary histogram and three children and if i run the click it function it dispatches and now i have a salary histogram and two children so that's basically what's going to happen once i have the tree of properties set up is it's going to execute that function executing that function will dispatch the action to my store my app component is listening to the store through subscription and it will then render those histograms that's badass and so they'll automatically re-render and re-update as i build this stuff as i build this stuff out and from what i saw on the front end there like little animations as it loads and everything very cool nice job you guys are you guys are good dev teams he's keeping you sharp making you talk it through which helps you think about it more clearly oh yeah i i've told her uh every time we do this that that she joins me uh i tell her it's much better to have her here because she asks questions that i don't really think of and it makes me stop and think about it which makes me explain it and if i don't understand it it makes me learn it um which is just better for all of us it's better for me it's better for you guys that are that are watching because you guys get to see more stuff and get to hear more and and you know go go through the whole process with us so learn more about this yes learn more about this uh that this word is going to kill me but yeah so i mean you you can see the visuals starting to come together now um in fact oh god i have to what are you gonna do i have to one more thing one more one more thing one more you know what no no no no it's styling yeah okay get stuck you're gonna like it you're going to like it i'm not doing that children histograms needs to be flexbox yay flexbox if you don't know about flexbox i have got a gospel word for you flex direction bro automatically row that's fine i like specifying it anyway yeah i do too but there you go so now you've got the parent and you've got the children side by side so now when i throw the titles in there we'll be able to clean if only there's a front end designer handy if only so and then of course when i do the click it which i think i still have in there ready right yep boom what that's cool so now once i add the component that gives me the list of properties and their variances i'll be able to add a click behavior that dispatches the event to the store and i don't even have to touch this stuff anymore this is now built i can be done with this for the most part you know i've got to add the titles we got you'll yell at me about fonts and a couple other things um but you know functionality wise the histograms are there if i replace this data with survey dates uh salary survey data it'll update um [Laughter] um that's a good point i should make a copy of this if only there was a version control system out there that would make it easy for me to commit updates to something so that i could roll back if i made mistakes i i wish somebody would build that sort of thing dude like even my like uneducated posterior knows about git why are you not doing it cause you're lazy and you haven't made the time for it i just it doesn't even take long i just have there are no excuses i just haven't done it i have a get repository with my one little update set in it that's there for people to look at okay you can do this but not now because we're going to bed because i'm tired do i need to put a post-it note on your screen or something man i am being chastised by somebody that i taught [Laughter] you didn't teach me everything though no i did not i did not got one class in web design man you've you've learned a lot since i taught you you've you've come a long way over the last couple years you've gotten daggone sharp on on your own right in this stuff do not sell yourself short i still hate javascript but i'll probably hate that forever oh you gonna get to like it in the new ux framework oh no no that's gonna be a love hate religion that's going to be an arranged marriage where yeah yeah yeah and andrew andrews got it tortoise svn that that's it that's that's that uh version control system [Laughter] she just died inside um but yeah so next time i will be able to create a new component which will be the list of properties which will have the click on click it'll call this little dispatch is all it has to do all it has to do is dispatch that i selected that property i'll add some capability to change the filters through clicks and my histograms already listened to the store so they will automatically get the updates required and refresh based on the new data oh my goodness i can make the most amazing dashboard for fast gov with this for those of you don't know i'm working my background's in government administration and i am working with our teams at glide fast and fair code to build out a uh offering for state and local governments to provide digital services and i love the idea of using this for like a dashboard for mayors and department directors and all that oh yeah cause like the reports are there in service now but this is sexy and sex sells but i digress one thing i will say from my research on the new ux framework for what it's worth and also from within angularjs so uh you can technically still use web components web components are built into the browser so you could kind of use them in either place in fact if you were to build uh if you were to build what you wanted as a web component in service portal and the ux framework decided to make a portal competitor say a year from now like you do hypothetically yeah um then you would be able to take that web component pull it out of service portal put it in the new ux framework and it would work just have to cuss about whatever and still ingrained css they put in there i have to fight with so and that's one of the beauties of web components and one of the things that i've come to absolutely love about them aside from that whole ie 11 that whole ie quirk that go on ie it just won't go away um andrew says more like six months oh yeah that would be six months i'm counting i'm counting from the wrong part of the year yeah you're right we're like six months we got to go out and leave our caves and be people i'm thinking about from when i wrote the the articles when i was actually looking into the ux framework my mind went back from that time and it was one year from that time it is six months from the current time but those those articles are still accurate so far yeah it kills me because um it was shortly after that that i did my um design presentation and someone asked me was service portal going to go away anytime soon and i'm like nah i mean it's coming but we're all right and now i'm like oh for me my my big question my jace welcome jace um for uh charts and graphs yeah yeah we we managed to figure it out we got the components uh wired up and uh it is it is now working um you figured it out and i made puns but um one thing going back to what we were talking about on the new ux framework one thing that i am really curious on is if this hypothetical uh release in about six months that may or may not include a um portal competitor uh built on the new ux framework what i'm curious to see is will this release be the uh what was it geneva service portal release i think it was geneva was the rough start and helsinki was when it really took over yeah um i want to say that's how it went and i i'm curious to see if the new ux frameworks replacement has a geneva release or not because with workspaces already leveraging it they may actually be able to take off running in the next release where they hypothetically may or may not be including it um [Laughter] oh yeah jace i agree i i think the new ux stuff is really slick um i've i've really enjoyed what i've i've been looking into uh i'm just whining because i have to learn something different hypothetically yeah andrew exactly the new ui builder allows you to build pages for the um um for the agent workspaces but they're supposed to be coming out with a new portal canvas as opposed to the agent uh workspace canvas ui builder will still be running the show and you'll be able to drag and drop your components onto it um so i mean in theory everything's already built and everything's already there and all it's going to take is well the only question remaining is does the market share drive to it or does the market share sit on service portal for a little while longer and i'm curious to see how the market responds to it um because i mean initially i thought that they would have that rough period and if you go back to the articles uh i was writing on this one uh in response to jace's um uh you know calling these shots step for step um that was one of the things i was speculating on back then as well was would there be a rough start and at this point it doesn't look like there's going to be because they've had such a warm rolling start on the agent workspace side so they've had a lot of time to work the bugs out they've had a lot of time to experiment and expose and build um and i think that's really kind of a testament to how servicenow has been refining some of their releases as they've gone they've uh the ux framework existed in servicenow and it existed in agent workspace before we ever had access to it or really even knew it was there um there wasn't much we could do with it originally and they just slowly exposed new stuff and you know by the time you know unless you're diving into it and pulling it apart or paying attention to uh the right uh knowledge sessions at the right time you'd completely miss this stuff um sent you a private dm on slack check it out later i definitely will um yeah i think that uh this is just my personal opinion you probably know better than i do because i've been in this doing this what two years now um i think that the speed at which you see the market transition from service portal to the new hotness is going to be dependent on a couple of things one um it's going to be dependent on how much you can customize things in the new framework um because they want custom as you've seen with some of the methods got thrown my way and then i think it's going to depend on how painful the transition is for people that already have service portals set up who already have custom functionality in those portals set up how painful is it going to be to transition yeah and that's that's really going to be what's what's interesting to see is how the market responds to it i'm real curious to see how that goes um oh i have not got to look at any of that i've i've seen some of the components i haven't seen as many as i would like to see but it's uh [Music] there i know that there's a lot of folks that have really dug into it and i just haven't been one of them i i just haven't i i've still been on service portal for everything well i mean it's it's been one of those things where between the client work and the hurricane and the baby and the everything else yeah salary survey salary survey you just there's so much see in the hacktoberfest community we don't do hacktoberfest we do inktober we draw every day i don't draw i suck at drawing but uh but yeah i mean that's that's kind of all the talk right now is that the the portal one is coming um i mean we've been discussing this one since jace has been discussing it since like last year i jumped into the conversation around the start of this year um i have made a j says that he hasn't made any components i have made a dummy component just to say that i did just to try it out um and it's i i don't i don't know i yeah exactly i have plans but stuff yeah i have plans but stuff so basically jay says he just brings up rumors so what i'm hearing is that you are our town gossip so i oh one of the things i saw in the knowledge thing in some of the knowledge sessions where they were talking about all this stuff was as they were building a component there was like a preview off to the right hand side and i haven't i haven't done that yet um does does the preview like do we have access to the preview capability so i've i i've seen a lot more uh mhd says that uh they weren't ready with the components for the longest time there were so many barriers until recently yeah they they've really come a long way uh with their support for the components from what i've seen like i said the one thing i'm still uh i still haven't gotten to was the the uh so when you build a component it makes it local right yeah so you have to download to make a component you have to download the npm the node.js toolkit okay so if you're developing a component you'll see it on a web page locally on localhost as you develop it okay so i don't think i had done that yet i built one and then i deployed it up and then i viewed it and it worked which was great because if it didn't it would have been much harder to troubleshoot because you have to like push it up as a scoped app every component is built within a scoped app basically or all the components have a scope that they go away so by default it's one per scoped app it's one component per scoped app but you can technically by messing with the settings in the npm toolkit you can technically add from what i've seen anyway i haven't experimented with this yet but i think you can add multiple components and you can define multiple components um in a single scoped app so uh in a in a lot of ways it works similar to what i've been doing um with the um what's it called uh the vs code plugin where you download the scoped app and you work on it locally and then you push it up yeah it works similarly to that but it's a different toolkit specific to to the components we ought to do a live stream where i sit in the driver's seat and i okay jay says you can make a component and sub components part of a scoped thing so i guess i guess we can't do multiple scopes or sorry multiple top level components in the same scope okay that's interesting oh man sorry to hear that andrew hope she feels better all right we've been talking about going to bed for the past 45 minutes and then we got talking about the new ux framework and got excited and it just went from there jace jason andrew joined in that that's what it was jason andrew joined in and the whole stream lit up and oh man oh sorry to hear that andrew really hope she starts feeling better man i've been trying to get folks to do things i don't want to do i'd say you're being successful there like i said we should do a live stream where i sit down and i try to figure out how to do a component oh that'll be fun i'll sit behind you and laugh at me and i won't tell you anything that i figured out along the way and i'll just laugh you know what if you want to do that because then when i do figure it out i can be like look i figured it out i'm going to shorten this video into a how-to and then you go from there all right it is time it is time so we're gonna call it for tonight next time i'm going to add the left hand bar with the properties and start hooking up the filter actions and the selection actions so that the charts dynamically update and i can actually and that really should wrap it up so that i can start analyzing data next time on code creative live next time on code creative live i need to finish your branding um yeah right after everything else we gotta do right now uh all right guys so that's what we're gonna look at doing next time i think i've got one maybe two more sessions before we have this tool ready for use and i can start analyzing data i'll probably have to analyze the data behind the scenes though just because yeah you want to be safe right i i don't want to select something and have the histogram show one person or i i don't want people to be able to use my filtering the data as a way to reverse engineer the data yeah yeah exactly so for the record y'all even i don't get to see this data he's not letting even me see it i've never seen any of it i haven't even shown her i haven't shown anybody he did have to confirm for me that i didn't take in fact take the survey because the survey closed and i was like i don't think i took it i don't remember so jace asked when is next time so usually when we do it we try to do it starting around starting between eight and nine usually um pm central time um yeah for andrew it's a completely different time um so yeah we do try to start between eight and nine central uh basically after the kiddos have gone to bed um it's it's not every day because stuff happens and um but given the fact that we're trying to wrap this up this week so i can start analyzing um we probably will be doing it tomorrow sometime between eight and nine starting out and then we usually go to we usually go till about 10 10 15 but uh you know some nights we get distracted not pointing any fingers in in any particular directions or anything that's fine same bat time same back channel yeah no you'll uh don't don't worry jace even if you did ask for a schedule you wouldn't actually get one because it is just it is whenever whenever life isn't getting in the way our 10 year old is the most structured and organized person in this house so yeah yeah our 10 year old is the structured one neither one of us are so the way to make sure jason knows about it is to blog everyone looks to him for blogs now yeah jace has like the the uh compilation of everything that matters so all right guys we are going to wrap it up and pack it in so thank you guys for joining in and making uh this session a another enjoyable one lots of interaction lots of discussions and uh we will see you guys next time have a good one