Infragistics Live Stream

okay welcome everybody i think we're live yep there we go they look a little blurry microphone is on and hey brian if you happen to be on i'm going to ping you on teams just to make sure things are a-okay and then we will fire this up this over here okay so here's what we're gonna do today this is pretty cool um we are going to kind of review some of the things that we did last week which was around data and uh the goal is to create or recreate this this app where we are doing like a master detail oh a master detail app so we're gonna do the data connections all right cool brian says he sees me excellent um we're gonna do the data connections like we did last week and then um uh we're going to add some code and brian is on as well he's going to be um my debugger if i run into any problems because the chances are i will um so anyway thank you brian for joining and thank you everyone else for joining let's go ahead and kick this off so the first thing we're going to do is we're going to jump into app builder and what i want to do is start from scratch on a very simple layout and from that simple layout we are going to add a couple data grids and you'll just kind of get a feel for you know adding a grid and doing a couple other things to make sure they resize correctly so i'm going to do a new app and i am going to do a header and left nav layout with this um i actually uh have this app already done and on github uh so i will send that i'll paste that into the um into the chat here so let me go ahead and find it i think it's called that's customer's orders demo so let me paste this in to the chat in youtube and if you want you can go ahead and grab this it's all functional and working so what we're going to do is this is a basic layout there's nothing in these views i'm on view one i'm going to go ahead and delete this and i want to add uh row layouts and then in those row layouts i'm going to add the grid so let's go ahead and do that if you remember if you hit control e it brings up the tool box so here i'm going to add a row layout there's one row layout i'm going to do control e again i'm going to add another row layout so now there's two row layouts now what i want with these row layouts is i want them to be um you know the width of the screen and then i want them to be on top of each other so over here on the right you've got all these properties and the width is unset so i'm going to say i want this one to be 100 percent and you see the drop down here you just select percent and now that guy's a hundred percent and now i want this guy to be a hundred percent so let's make his width a hundred percent so now they're kind of stuck next to each other and i want them to be the height of a hundred percent as well but the first thing is i wanted to get them on top of each other so if you go back up to the main view like this canvas uh you can see that the row layouts are unselected but the canvas isn't the direction of this is row i want it to be column so now i've got two guys sitting on top of each other and when i set the column i want them to be aligned to the left like so and then each one of these individual ones i want to grow and i want them to shrink so now you can see i'm starting to pull together a layout that i want now inside these layouts i want the grids inside of them but before i do that i want to set the height of this guy to 100 so now he's at a hundred how about this guy let's make him a hundred and there we go so now they're both basically kind of fighting for the same space and they should resize with like resize correctly now but we'll we'll see so let's do control e again and we're going to add a grid control and it's the same deal with the grid what i want to do with the grid is i want this thing to be a hundred percent wide the defaults 500 pixels so i'm going to make this 100 percent and make the height 100 percent and i'm no expert at the web layout here so um you know i muck through this and essentially i learned to experiment and set properties like height width grow shrink like this and this and you will get a responsive layout so it'll actually behave correctly you see how it says position relative so if i go to this grid position static if i did absolute positioning that's sort of like designing in in windows forms where wherever you put it it's going to stay there and it's never going to move and then you can like align things to the right and left but that's not really how the web works so we are just going to continue throughout all of these sessions to sort of learn um how to do layout a little bit better and it'll get richer and richer as we go along so this is pretty basic and this is a typical layout master detail and now if i go when i click preview we should see here we've got our our two grids we had some data bound to them and now let's make sure this is maximized on the screen and let's minimize it actually and now when i resize it you notice that this the scroll bars of the grid are in the right spot so everything is right where it's supposed to be and then this guy can disappear and reappear just like you would expect so we're kind of off to a good start um but i don't have the data that i want so what i want to use is um of course the tool that brian created so let's go over to excel to json.io and earlier today i browsed my computer files i did this northwind excel data dump and it uploaded my excel file to the cloud and then out of that i got all of my json files um for me so what i did is i did orders i'm sorry customers in orders so i ended up with um two urls two files essentially two urls and then what i did is i'm not going to repeat that whole process because i already did it and the files are up on the server i went ahead to the data tab here i clicked new rest api i gave it a name and i added the url and i just pasted in that url from excel to json and then what i ended up with is you'll see here if i minimize these guys let me collapse this is i have a data source called full north wind customers in full north wind orders now here's the reason i did that and this is a little tip and trick just so you guys are aware when you start using the data sources we ship a mock data source with this called the northwind and it's it's like i'll call it almost north wind or not quite north wind because what we did is we made it relational and we changed the casing of the fields and we kind of um eliminated a bunch of the data so it would uh we wouldn't ship all the northwind data with with the product but anyway i ran into a problem when brian and i were doing this last week and he's like hey there's no orders anywhere and the reason is because the orders table is huge and we just kind of cut it into a quarter and so we didn't ship all the orders field so when you clicked on someone you wouldn't get any orders so that's why this full xl north wind which i'll i'll post as well i'll put it on the github it's easier actually just to stick it up there uh has all the data so when you do a master detail it's actually going to work perfectly so uh what we're going to work with is full northwind customers for northwind orders again this is so simple i am going to go to my data full northwind customers and i'm going to bang in customers i'm going to go to orders and i'm going to go to full north wind orders so there we go um i now if i click preview have my north wind customers and my north wind orders and it's awesome right but the only problem is there's no master detail right so i click on these so this is a feature coming to app builder sometime maybe in december um george if you're on the the call right now or brian you know uh you can type in the chat when we're gonna ship this i don't think it's gonna get here uh until uh that time frame maybe january but we're gonna allow you right through this um data uh configurator here to actually link to child uh primary key and secondary keys and data so we'll wire it up for you right now you gotta write a little bit of code so what we're going to do is go ahead and generate this app because this is the only app we're going to build today and i'm going to call this customers youtube live and we'll stick this up in github create repository and we will publish all right so now this is doing all the sync with github of course i've already logged into github so it kind of knows that i'm already there oh yeah bms 365 blazer shipping uh november first or second week in november then you'll get blazer um so uh no worries it's coming so let's go ahead and look at this guy so we've got customers youtube live oh you know what this is gonna be horrible i think let me go to app view one well i guess it's okay so we're here we'll see i just don't like this uh this name but i guess that's just in the text so i'm going to go ahead and click code i'm going to copy the uh the url to this git repo and i'm going to open up and i'm going to do command shift p and i'm going to do a git clone and i'm gonna paste this in for git and uh we will select my uh dev2 folder here there's my repo and we're gonna open this guy and boom we've got our product ready to go let's go to our terminal new terminal let's do an mpm install and this will install all of the [Music] dependencies for angular and the whole app and we'll real quickly uh we'll run the app too just so you can see what it looks like but again if you haven't used app builder yet i wouldn't start with this i would go new app and pick one of the templates that we've already shipped and they're beautiful they're completely styled they're a great way to learn and i think you'll be really happy with like kind of seeing what you can actually do with the product so yes we'll use a different port so i have of course because i'm ready for this demo i've got a working version already running in case all all hell breaks loose here but i think we'll be okay it's so simple to do this the only reason it's not going to go well for you is a typo but what i did is i typed out all the instructions and i'm going to update the readme on that github repo so you can step by step do this in your own application it's it's very easy and there's two ways that you can actually do this one is with the the data that kind of gets ingested into app builder and then the other one is just straight up using the url that you created from um from excel to json.io so i'm gonna i'm gonna show you both of those but let's wait for this guy to run and then we'll just go in and i've got um got some things just to kind of copy paste so you can see how it will all come together and this is what i love about angular you know is compiling uh so there we go thank you angular all right so here's our app um and you can see here it's the same thing we had earlier um but although this is the actual live code you can see fastest uh angular data grid on the planet here everything looks great and i've got my flyout so exactly what was in the app builder is now in a running angular app so we'll just kind of leave it sitting right there actually we'll close it and we'll we'll kill this so let's go ahead and make some changes to this so the first thing that we want to do is if you remember view one is where we had all of our grid um stuff so you can see here there's the igx grid that it created the data source is full northwind customers and what this actually does by default is if you look in your services folder is it creates services for the data and then it creates a another class which you call to do things like get data and that is is where you can modify to change it to a remote data source or modify the data source or kind of do whatever you want what we're going to do is we're going to go back to our html and one of the first things we need to do in order to sort of trigger the master detail is add a a row selection event to the grid so what i'm going to do is just kind of copy paste from the instructions these will all be on github but there's a row selection event in the igx grid and so what you can see here is i'm setting the row selection to single so that means i click i can't do multi-row select it's a single select so every time i click it's going to be a single select hide row selectors equals true so that little gutter on the left hand side of row selectors is going to be gone and then when a row is actually selected i want to fire the row selected event with the selection so it's going to then pass off to the code behind um the fields from this grid and then i can grab whatever field i want and then do whatever i want with it so that's very simple and that's how the row selection event works so in the code behind let's go ahead and add our row selected so you've got your view one component and then the code behind i call it the code behind is view one component.ts let's add a couple spaces here we'll paste this in so you can see here we've got row selected and we're going to say the customer id equals the selected row customer id now what i did here is this code and this will just kind of show you how some of this stuff is wired up this code is pasted from a previous version that i did you'll see we got some red squigglies here it says this dot north wind orders if i scroll up you'll see that there is no north wind orders it's called the north wind orders service so this is what i want to pull in so i'm going to say this the north wind orders actually the north wind orders orders so northwind orders orders here this guy is going to equal the northwind service that is going to go pull all this data so the other thing you can do is the nice thing is this also has intellisense so if i type in this i've got the actually full northwind orders customer service dot and then what do i want to do i want to get data and then what do i want to pass to this and the the tool tip's kind of in the way but i'm going to pass in customer id so i'm going to pass in the customer id and then we'll hit the uh semicolon and that's all we need to do here so we can just comment this guy out or we could delete it whatever so that's all you need to do to set up this to do a master detail clicking on a grid but clicking on a grid to update another grid but what needs to happen next is that we need to update the default function that came over to uh call this um this get data to update this get data so we got northwind orders order so this is the data that's gonna be bound to the grid so if we go here um and i'm going to go back here i've got full northwind customers service so let's scroll down into services and i've got my northwind orders which is my data than my northwind orders service so here i need to actually go ahead and add a function for um get orders uh brian says get orders not get data get orders that didn't come up in my intellisense oh because we didn't add it yet duh thank you brian um so get data is the default we're going to add a get order so now we want to do is add our get orders code which again is pretty simple now the other difference is when i did this the first time and i was like brian how come none of my um how come none of my uh uh data's showing up it's because going back to app builder that thing that i showed you let me bring uh up back up app builder here is make sure that if you're using the mock data the casing of the fields is different than the actual northwind database so this is just a little gotcha that it's kind of annoying but you know you'll you'll be able to understand it now that you kind of know the trick so what i want to do is i want to return northwind orders equals orders and then here i'm going to filter order uh on customer id equals the customer id that i passed in so you can see here i'm passing customer id in from my code behind calling the get orders function and it's going to filter out the customer id and it's going to grab the customer id so now let's go to file save all npm start and we are in good shape here so brian thank you you're right there with remote uh remote technical support i really appreciate that and we'll go ahead and let this do its compiling again we'll kind of um kind of watch that for a second and this entire process uh to to do the data binding should take you about 10 minutes um if you're someone who's super skilled at angular uh like brian it'll take like six minutes but um it's very very easy because we provide all of the the the glue or the guts and then you just add the glue and the glue is two function calls get orders and then the get orders function and then call and get orders from the code behind on the grid so it's super simple looks like we've got a little bit of an error here so let's see what this says get orders northwind service property get orders does not exist on the type so that's in our view one component so let's go back to here and you're right because what is this called it's called north wind order service so here we need to change this to oh north wind not customer service it's orders and we want to change this to that and that should be it right northwind order service northwind order service dot north wind order service equals this dot northwind order service all right brian what are we doing here you're using the wrong service you're using the wrong service but northwind orders orders equals northwind orders service northwind orders northwind orders service lowercase n on this guy boom thank you why ah well i don't know why oh there it is northwind order service sorry about that all right so let's go ahead and refresh this bad boy and um we will actually see everything working and will it refresh customer orders demo where are we at hold on let's get to the right i didn't see the um 56-24 there we go so now if i move this guy over you can see let's close this up i got my grids i got all my data now as i select these guys oh what's going on why aren't we getting our code behind i mean our uh our um master detail so i must have another problem somewhere so not to be um out foxed let's go here full north wind get orders customer id let's copy this and see where i made my typo there must be a typo here somewhere get orders customer id full northwind orders order full north wind orders that's the name of the um that is the name of the table order customer id equals customer id what component ts so let's go to view component ts customer id is northwind orders northwind orders orders equals this northwind order service get orders go to my view one component yeah see it's full north wind orders that's where i made my mistake because it was called north wind orders before but it's actually full north wind orders so i'm using the wrong um the wrong thing here but why what full northwind order service did i drag you know what i think i used the um i used the wrong data source is what i did i think i dragged the wrong data source yeah so anyway let's go here because what i think i did wrong was i did not drag full northwind order service into my child grid which will screw everything up so you can see here uh on the other one i had north wind order service not full northwind order service but the service was called full northwind order service so i really screwed that up i'm sorry but anyway um this is what it's supposed to be full north wind order service because in my app builder um that's the data source that i pulled in so i've got full north wind order service full north wind order service and that's in my view one now in my full north wind order service i'm filling my full north wind orders with orders and i'm just filtering on the customer id so this guy here is on localhost 61347. let's view him and let's slide him over so now we click this guy and here we have our master detail so my error was um back in the app builder based on my directions code so i apologize for that of course it's a live demo these things happen but anyway here's the problem with this setup is that with this setup we're using the json file from excel to json and the way that app builder works which is we're probably going to change this in the future um we're doing a bunch of work on data right now which we're going to ship in the october november time frame um so like i mentioned last week you'll have swagger import and a bunch of different things if you're using an asp.net core app but if we go back to this code you're going to see that in my orders i don't have the url i'm actually looking at here the uh the entire json object so we pull that in and then we use that to populate these arrays now why did we do that we did that because it's easier for you to work with your own data if it's like on your uh you know your local machine or your github or wherever we didn't want to muck with it but we've kind of changed our tune there and we are going to modify that um in the future so what what we have now is a third demo and this demo again is using the same um concept as before we have the uh html with two grids a customer grid and an orders grid we've got the customer orders component but the difference is here we have modified the service again so the service is going to subscribe to the north wind orders the north wind service is going to we're going to make a subscription to get orders on the northwind service so when i select a row it's going to update now the difference is if we go now to the northwind service so let's go to our services this code is further modified so the prior code was a little bit simpler and i left it here and this is actually that github repo that i pasted in we had our get orders and all get orders did was was just basically do um a filter on the existing data set so that made it super simple a couple lines of code and and you're off to the races this is a few more lines of code but it's actually using live data so you can see here instead of pointing to the northwind.ts which has all my data i'm actually going to get data from excel to json at this url so now if i go to this url copy this guy and we will bring a new browser window over here let me paste this in hit enter bring it over this is all of the um this is the order data i believe oh no this is the customer data let's get orders so that's the order data so we got order id who made it this customer what employee made it etc and then here if we um if we look at this guy and open him up these are actual customers so this is up on the xl2 json server and this is what's great about that product or that app is that you can have live data on the server at real urls and then use that in your apps so the difference we did here is get customers is going to get the actual data off the server and i'm going to load that into my customers object my northwind customers object and populate the grid and then the same thing's going to happen on my code behind when you click the grid so it's the same thing here scroll to the right on row selected let's do uh pass the customer id and here in the code behind you've got you know you're getting the customer id from that row selection we're subscribed to uh get orders and it's just going to automatically work so now if we look at now the only caveat with this one as well is that it will um there's one thing i'm going to show you because it's another another thing i kind of messed up here now i got to find oh i think this is actually already at localhost 4200 let's try that i think this was the first one that i did yep so here we go so this is localhost 4200 and this this app actually has a little bit of different theming for it but this is actually going off to the server um getting data and it's doing a master detail so this is how you would build a real app like you know you may want to do something a little bit fancier but you don't need to um the way the web works is through rest so you have a client you're making calls to a server you're getting json back your controls are binding to that json which is what all of the um our angular controls are doing here um and you know with what eight or twelve lines of code you're doing a live master detail uh with app builder and by the way in a couple months we'll wire all this up for you but to get started today you want to start using your own data um and when you're using your own data or your own schema with fake data whatever it doesn't really matter um you can have this good master detail uh experience so with that let's see uh blah blah blah gave me a lot tough time debugging app genie thank you um mutemwa yeah we got cool gooey stuff and you know what you're really gonna like here is if you go back if i go back to um app builder so again i'll go to infogistics.com i'll go here app builder i'll sign in now i'm logged in i'll do a new app let's go ahead and take one of the sample apps like team collaboration and like wow look at this thing it's beautiful it has multiple screens if i run this guy it's got you know it's all real pixel perfect i can go here go here go to code view i can see all the code for this and this is how easy it is to get started if i go back to edit let's generate app and let's call this you know another youtube live and we'll create this repo i'm going to delete these when i'm done i'll leave the one up there that i pasted and i'll also paste in the uh the the step-by-step instructions but let's upload this repo and this this this uh mutemwa shows you how this works and by the way uh we are creating a course on this it is in the works um i have i meant to set up a meeting with brian uh and andy uh this week i haven't yet but i started working on the outline last night and within the next month it'll all be up on youtube we're going to have all kinds of stuff there so let's do command shift p let's do a git clone paste in another youtube live i'll put this here in my temporary folder i'm going to open it i'm going to do an npm install all right while this is installing let me go back to this one um or was it this one here because uh what i want to show you i think it was in um app module so the only thing to make it work when you're using http is make sure that you add the http client module and that you import the hp client module so i didn't do that earlier and none of my data was showing up uh and so of course i went to my remote technical support and he said hey did you uh did you go ahead and add that hp module hp client and i said no i added that everything worked perfectly all right so let's use a different port here yes so check this out oh yeah we already have some videos we're just going to expand on them thanks for that brian um we we have some videos and their uh how to's on like um you know getting started going over some of the apps i think there's one on linking into data uh there's one on theming um so yeah they're all under five minutes they're all very easy consumable [Music] all right let's wait for this guy to compile come on angular let's see any more questions here well while we're doing that oh there we go now it's going to pop up so let's move this over to here and you can see it's pixel perfect it's exactly what you saw in the um in the app builder everything is perfect uh so yeah i mean this tool can save you so much time on the ui it's unbelievable and what we're gonna do in these um youtube live sessions and uh you know next time i won't spend five minutes debugging with brian um because of my my my error but we're gonna just kind of incrementally go through things like you know let's do a layout here and then when you do the layout that's responsive um what does the css look like now we're not going to do anything about the css but we can look at how the css changes based on changes in the app builder and the nice thing is let's say for example i go back to app builder and maybe this was the one we were working on and let's say i i changed um i changed this from a column layout to a row layout so now it's side by side and then i go over here to preview and i really don't feel like publishing this and i don't want to whatever muck around with it you can just go to the css and just copy whatever you want here this is the monaco source code editor which is open source from microsoft just copy it and then go back to whatever app you're working on this guy here view one component and actually let's go to the one that um that worked and we can go to our app view one scss we can paste this in hit save and then all the app will just look differently it'll just kind of happen magically um it'll it'll be side by side but anyway that's a super simple way to do it um app builder allows you to do copy it allows you to generate an app in a zip file so if i didn't want to do all of this um in a in a github repo if i go back to app builder and i go back to edit this little down arrow i can just download a zip locally so if i let's say i'm using tfs or something and we don't have that connector yet just download the zip and auto generates everything it's the same exact code that you'd have gotten for um you know putting it up to github so now if i go over to github this was um customer orders demo what i'm gonna do here is this is all of the uh step by step to actually do this so this has things like import hp client module import the northwind service blah blah blah so all of this i'm going to put up here in the in the readme here and we will um you know you can just kind of review it so that way after this webinar is over you can look at all this yourself there you go and we're done so with that um if you guys want to uh if you have any questions um punch them into the i think brian was answering all the questions already but if you have any questions go ahead and ask them you know how much time out of the day yeah exactly uh great so we're gonna keep doing this um come back next week uh or in two weeks well actually next week we have a pretty exciting webinar if you haven't signed up for the webinar yet we're going to show a new feature in app builder which is our data grid configurator which will allow you to do a bunch of different stuff with the grid uh in real time uh so for example in this demo if i wanted to add any features to the grid i would have to actually go to the code behind and just add these attributes you know to the grid um like you know uh group by i would add allow group i on the columns or i would add a uh a toolbar with export to excel equals true and then i would add the excel service or i would add excel style filtering and column hiding and all this other stuff well all that is interactive now we're shipping it next i think at the end of next week so the 29th but the webinar next week is going to be a little bit earlier than that so next tuesday make sure you attend the webinar and we're going to go over that the webinar is at i think 11 a.m on tuesday and then the following youtube live session we'll do the same demo here we'll do it in like five minutes and then we'll configure all the grids and we'll do some theming so then you can have like a more beautiful looking app with more full-featured stuff like adding how do i add export to excel to this it's only a few lines of code but we'll go into those things step by step um all right with that i want to thank everyone i appreciate your patience today and please check out indigo design for the next webinar let's go to here indigo.design and i think we go to learn and support if we go to webinars yep september 28th is is the next one uh now if you want to see something really cool and um fabian's on the uh uh the call here we are also doing a webinar let's see if it's up here on reveal webinars all right this webinar is going to be cool and this webinar is next uh next week as well on the 29th what we're going to do is we are going to take this team collaboration app here which i start an app builder in this area here we're actually going to integrate in um the reveal bi sdk so you'll have self-service bi right within this angular app it's like so simple it's so simple but the nice thing is app builder lets you create these beautiful stunning applications and then you can integrate any other sdk or whatever because it's low code you just go ahead and add whatever code you want afterwards so we're going to continue to show how these things are related but this webinar here and i'll paste this in i i would definitely attend this if you're even remotely interested in data visualization more app builder real world scenarios and kind of just integrating in with angular and then of course we have so many people asking about blazer we are shipping blazer in november um it's probably going to be some sort of a beta like we just don't have enough time to test it all but we want to ship it so uh you'll you'll be able to get code generation there might be a couple wonky things but by the end of the year it'll be perfect so when we ship blazer we're gonna spend a lot more time on blazer we have so many people asking about blazer um but you know that's coming so it's literally right around the corner like you know six weeks away um so with that thank you everyone i really appreciate it i am going to end the stream and we'll see you all next week

Channel: Infragistics

Views: 266

Keywords:

Id: J8t-D2tX6wE

Length: 45min 0sec (2700 seconds)

Published: Thu Sep 23 2021