30 minutes with Servoy: #8 web components update
30 minutes with Servoy: #8 web components update
All right, good morning everybody and good evening and good afternoon wherever you are I am Stephen Portonoy Yawn is traveling so I’ll be your moderator today today’s topic is web components update and With that I will hand it over to Sean and there you go Okay, Steve. Can you hear me? Okay? Yes, okay? All righty, and I failed to mention that if you have questions go ahead and type them into the the question panel and We’ll answer those as we come on Okay, thanks for that. You can see my screen as well. Yes. Yeah, okay good. Yeah, so We do the number eight. I believe in our tech webinar series going strong every two weeks rain or shine floods or snow so we had originally planned to do a An interesting thing we’ve been working on Sample get an online sample gallery. That’s what we had announced two weeks ago It’s not quite ready yet and we don’t want to release it and announce it until it until it is so At the same time we had a bunch of new developments on the web components front and since we’ve been doing web component updates Every other webinar we decided to keep with that theme because there’s lots of cool new stuff to show So we thought that that was important to get out. So that’s what we’re planning for today We have two to demos are items in our agenda one is an update on a new Repository that we’ve set up for extra bootstrap components So if you’ve worked with Servoise Angie client already, you know that there’s the basic bootstrap components are already available in addition to all the servoied default components So this this one introduces some extra more nuanced components and then the the second demo is a separate repository, which is for An enhanced tab panel component. So we’ll be taking a look at that Real quickly just an overview of what is in the bootstrap component’s repository So far we have breadcrumbs input groups a navigation bar to which you can add various kinds of Nav menu items basic badges button grouping and Ratings, you know like stars or hearts or likes that kind of thing as well as the image carer cell So that’s what we have today In addition to that we also are announcing a an enhanced tab panel component Basically so far it allows you to To close tabs by clicking an icon And there’s some API’s to make that also convenient to do programmatically But that’s the first release of this component there are plans to add more enhancements based on some customer feedback that we already have So we’re starting small with that one right now. It’s the same thing as a servoied tab panel but with closeable tabs Let’s start the the demo and I’m going to go fairly quickly because as you see we have a lot of Stuff to cover The demo and we try to keep these to about 25 minutes and leave room for questions So I’m going to switch over to To my NG client that I have running with with the bootstrap example So you can see I have the different examples across in those tabs there. So we’ll start with with breadcrumbs The breadcrumbs sample is fairly straightforward You have clickable breadcrumbs with the callback event And it shows of course disabled where you currently are So this could be set up for some navigation or something like that You can remove the breadcrumbs And then programmatically you can create breadcrumbs So you could and then you could add a few more to it say the sixth one and the seventh one There is an option to to auto remove when a breadcrumb is clicked as well So you could take them out of the list So we’ll take a closer look at that in a minute Just want to show you everything that we have so far If we look at input groups this is An input field surrounded on left or right side with additional items So you can see that we have Something to the left of a field With a Data provider in there everything’s data bound so you can see everything else updated We have something to the right we have something to the left and the right Etc. We can have different sizes. We can also include in our our grouping. We can include buttons as well. So I have me change my browser scaling here to show you What’s down at the bottom is also one with with multiple buttons and Left and right add on so you can really add as much as you want to the input group including Addons and and buttons Of course, whatever you can do at design time you can do programmatically So here I have a basic input and I can programmatically attach Some stuff to it including buttons and and add-ons So we’ll take a look under the hood at that as well This is the nav bar example And this is Basically a place where you can dock nav menu items And there are different kinds of items. There are There are basic links There are our buttons and you can see that there’s a callback happening as I click these There is a drop-down With sub items and that goes one level deep You can have an input group as well. So here we have a field with a value list So I can I can have some some type of head going on here In my value list with a button Again with the callback you can have plain text And here’s another menu Drop down which is docked to the right so these are docked right and these are docked left Also, you can have a branding logo and text as well You can inverse the menu which will reverse the the background color And of course everything that you can do at design time you can do programmatically so you can programmatically create menus items remove stuff As an icon menu here So I think you can do a design time you could do it run time as well through the API Badges are pretty simple. It’s a way of showing a numeric value And This is just showing those really two types. There’s plain text As well as And both of these are clickable and and you can receive a callback and handle that as well Button groups is similar to To the input group except it’s just for buttons only and there’s two modes a radio mode and a checkbox and just like radio buttons and checkboxes a radio is only one option is selected at a time and The checkbox option is that you can you know check multiple and uncheck Multiple and you can see that these are date about as well as I as I check one the other ones Also highlights so they’re connected to a data provider They’re all connected to the same data provider in this case and you can see that there’s different options for For styling the values themselves come from a value list. So It’s just like any other basic selector From other defaults or voice components you you connect it to a data provider You can connect it to a value list you can set the mode to be radio or or check and then And then away you go and you can also style it with CSS of course The next one I want to show you is the rating And this is fairly straightforward again It’s a data bound component so you connect it to a data provider Which gives you which gives you the value and stores the value of the of the rating so it would be a integer value So you can see that I can programmatic or manually type in a value and and you can see that that it’s updated Additionally one thing that I’ve said at design time is the is the min and max value So this this rating goes to 10, but I could easily just set it to five um Here you can see that there’s a percentage on mouse overs. So that’s a setting that you can toggle And then here we’re really just showing different different CSS that’s applied for For sizing and font icons you can see that That this one is showing you know the mouse over as well. So when you hover And then when you change value It applies to everything This is the disabled look and you can also see that there’s a down here finally. It’s showing The last event that was received so you get the On on hover and on leave events for the value that was That was Mouse to over if you will Okay, and finally we look at the carousel And this one says carousel no found said because there’s really two modes to the carousel Component there’s data binding To a found set And then there’s also sort of the manual mode where you could just pass in and array of of images or an array of slides Do it so slide is really an image plus a caption So By the way, I want to give credit for building all these samples to my colleague Patrick Ruseert who Also spent a lot of time over the weekend to make sure that this was all ready to release both Both these nice demos, but also really helpful wiki documentation on the project site, which I’ll show you the link to in a minute And in this demo of the carousel he set up a random image generator So I’ll use that here and just just sort of Set some slides it starts off with five random images and and starts transitioning through them You can see that The cycle interval is the number of milliseconds. So if I wanted to speed this up, you know, I could Set it down to a thousand, which would be every second and now it’s going to start flipping faster In addition, I could I could disable the transitions and now it’s just flipping through without that slide look I User can can manually Click back and forth of course Also down here where the little anchor is You can remove slides programmatically so now I transition down to To three slides. Let me make this a bit longer Here I transitioned down to three. I can remove them. I can programmatically add them So again, this is this is working with a manual feed of slides. We just specify an image URL and a caption There’s also the capability to do this Bound directly to data. So if you had for example a products table and you had images of the product and whenever the user came to the product You know detail form or something you could then have a carer cell of the product images going So very easily you can you can do this with data binding so both modes are supported I thought maybe we could take a little look under the hood as I said There’s really good comprehensive wiki documentation, but it’s also nice to know kind of you know how it works a little bit So let’s jump into The first one we had set up here, which was the breadcrumbs And this is fairly straightforward Here’s the breadcrumb component you can see the Once I’ve included the bootstrap extra components which you can do from the package manager you can just Install this and and then you get the components and you can drag them on to a form And so this is the the breadcrumb component and you can see the The component properties here Some of the things that you had seen like the auto auto remove one clicked option What’s nice about the breadcrumb is that there are style classes for For the last visited crumb and the crumb itself and then the actual Outer bar as well, so there’s there’s multiple levels of styling The breadcrumb objects you can set up at design time so you can see That they just have an ID and a display name And then there’s the event when the breadcrumb was clicked and you can just go ahead and find this to your own Your own handler and then it passes you with a js event plus the The crumb object which is nice because you get Nice code complete here on And something’s happening in my IDE but It passes this object which it has the ID and the display name and You can go ahead and handle that as well as the index which is passed Also worth looking at the API so we had Over here you can see There are the add and remove methods and And You can see that those are called on the buttons here so if I wanted to for example add a crumb This one adds a bunch of crumbs This is pretty much it. This is the display name. You have the optional ID you can pass as well So if you have stuff that where you really need it to be unique But you want to display something else So pretty much you just pass in that array of objects and that sets it up for you and then you can handle the events Really easy Let’s go to the next example which was input group And so there’s um There’s quite some examples here but they all basically follow the same pattern so If you if you look at one of these You can see that there’s really two kinds of Objects that you can add to the group one is a button and one is an add-on button the other one is just a plain add-on So this one just has an add-on and you can see that that add-on is A text value and then a position so this one is position default which is left And then you can also have one which is positioned to the right This one has multiple add-ons left and right Another one to the left You can also see the data binding on the on the group itself so this is these are all bound to the same Variable but it’s a form variable as well some as the some of the properties that you can set on the entire group Down here you can see an example of One which has an add-on As well as an add-on button so they add-on buttons are a little bit more complex because There are image style classes so We’re getting using font icons And then you can also handle the click events so there’s right-click double-click Regular click etc and of course there’s the position option as well And then you can style the button individually So You can see this one down here had quite some add-on buttons as well as add-on text Again everything has a PI so if I highlight this plain one here and link with editor over here You can see The methods to add an add-on to add an add-on button and it’s also clear Which is exactly what was called when I clicked this button here So doing what we did at the time but doing it programmatically And you can see here that first everything is cleared off that component and then We create the add-on and then we create the add-on buttons And then we set the add-on buttons So pretty pretty straightforward to set up and then you can go ahead and handle the callbacks All right moving right along to nav bar So Here’s the nav bar component As I pointed out in the demo there’s the branding You can set up the logo and and the text and even the style class for the logo and then The there was the inverse option The items themselves are Are this subtype called menu items and you can see that for the the five ones that were there by default We have We have this menu item object and there’s quite some options there It can be bound to a data provider The display type is Going to be a regular plain text or a button Or an input or an input group as you saw and then You can also have it be Menu item You can see that there was sub items in In the Leave it was this one Yeah, this one had that drop down with some sub items so So this one we had set up for Four menu items there and you can see that You can specify again style style class for an icon and I Think one of these is a divider Yeah, this one the third one is a divider so all of this you can do it design time And then for the component itself you have a single method to handle the click event For the callbacks there’s also an an action event for individual Individual items too you can see that The on action handler so you can you can attach a handler at each item or on the component as a whole in this case It’s just attached to the component and you can see that it was printing out Some info about the the item text and the item ID But there’s also quite some Stuff that gets passed if you look at code complete On menu item You can see every every option that’s on there so if you want to infer some other things you can Finally, there’s everything that I’ve done Everything that is done here at design time can also be done programmatically so you can see By link with editor the API to add menu items and set some of the properties remove menu items etc And this is exactly what was done on these these buttons here, so For example when we made the icon menu This was just Getting a random icon is a little utility method Font also my icon and then adding that to to the menu Some of the other Add items here was just getting a You know a plain text one so It’s pretty pretty straightforward This comb this component is a little more complex than some of the other ones because there are different display types and you can do sub menus and etc, but all in all it only takes a few minutes to pick up and there’s great documentation on it Let’s move on to the the next sample Which was Come on my ID is slow from the go to meeting The badge example is really simple. We’ll just spend a minute on that So there’s again, there’s two types. There’s the text type Display type is label and then here display type is button The style class you can see here is button primary this one is button danger And these are just how they look when they’re disabled so you can see that there’s the enabled property which is set to false So that’s that’s really straightforward. It’s has a really simple Set of properties and API and of course, there’s the on action which you can handle On these guys also the click and the double clicks moving on to Button groups This is this to straightforward. This works just like any other Any other selection component and serve way like a checkbox or a radio radio button You can see here that the input type is radio for this one The input type is checkbox for this one There’s data binding to a data provider in this case. It’s a form variable But that could of course be a database a table column You can do some styling so we have the primary here. We have the warning style here So whatever CSS you want to write you can apply Tooltips and then of course the value list that’s important. That’s where we’re getting this left middle right It’s just a custom value list here But of course that value list could be data driven just like any value list in Servoy For the events you can see that we have the on data change event Which you can just bind to Your own handler from the API side. It’s There’s not really much to talk about it’s just programmatically setting the properties So again, this is a really simple component to set up and use takes just a minute to learn All right trying to get in everything before we get to that 1130 mark let’s jump to the rating again rating is a lot like the badges and the And the button groups because it’s just a data provider What’s nice about the rating is Is the style class you get You get a few style classes here for like where you know the state on and the state off So if I get three out of ten the first three stars are the state on style class the the next seven are the state off So you have total control over that And of course the the which Which icon you use font icon you use can be passed in there And then there’s the events the on hover and on leave and that just passes in the value that was hovered on the one one other thing to point out is the The show percentage on hover and this was set to true here So you noticed on that first band of stars. It was actually showing the percentage on the mouse over Let’s jump now to the carousel So In this example, we were just programmatically passing slide data You can see that you could set At design time you can set the slide so you don’t even have to programmatically do it Or you could set a found set binding so In the if you download this example, I didn’t show up, but if you download this example There’s also the the data bound version as well that you can look at So you could select a found set and then You know like if I picked my products table and then from there it lets me Choose if I’m loading all data providers and then I can pick the data provider for both the caption and the actual the actual image So that setting that up is quite easy But in our case, we’re doing the manual one and not doing it a design time. We’re doing it programmatically So you could see if I highlight this and link with editor The API here for adding slides or moving slides etc. So if you look at some of the Some of the buttons here that they called that Adding an image here, so this is where Patrick had set up the random image generator And Begins adding images to to the slide and all of this is add slide and a slide is again just A caption and a URL and that’s it So it’s pretty pretty easy to work with We have one other sample to announce and this one is also very simple. Let me just switch My solution here for the tab panel extra And Well, this is loading again. This is a This is really just a fork from the default tab panel in in Servoy And and it adds a little bit of enhancement. So let me run this Back here, so Basically we want to add tabs to a tab panel, but also some of them could be removable So I’m just gonna pretend this is my navigation for my large ERP or whatever it may be and I start selecting tabs that I want to add Add a few here and then As I’m using my application, I decide that yeah, I maybe want to move this remove this one. I’m not using it anymore I can Remove all Programmatically add all that sort of thing, but really it’s this close button and then the also the API to do it programmatically that We’re talking about So I can take you to the To the sample solution So again, there’s um, there’s the tab panel here That I just drag on to the form and this works just like the default tab panel here where I can then drag a tab on there So here I drag on a tab And then I can set the contains form ID and maybe set it to I don’t know a customer And then the text customer And then of course the option to to close the To close the tab, which is this show close icon if I said that to true. It’s now closeable Also, you’ll notice that the tab itself Has a property for the icon style class. So that little x is not hardcoded into the component you could you could put your own Icon style classes in there You could there’s also the style sheet you can override classes for what to do on hover and stuff like that So it’s quite flexible So you can see now that if I switch back to my example There’s my customers and it this one is closeable But the welcome one is not closeable and it’s just because of that that one boolean switch Last thing to show is that when you looked at the when you look at the add all method And it was calling this this add tab method It’s the same as the add tab on the regular servoit tab panel, but there’s there’s one There’s one option at the very end, which is that Slow getting the code compared the tool tip. We’ll go to meetings running but there’s the The last parameter which is the close icon and the default is false, but if you set it to true then it will show It will show the tab is closeable So that’s it for demos real quickly I want to point out the Project home here There’s the on github a project home for both of these as I said my colleague Patrick um Really did a great job adding wiki documentation for for all of this stuff So you know if you want to see how badges work you just come here if you want to see how that complicated nav bar works It’s all right here great documentation The samples are downloadable from from the release page of the project Same here for the tab panel component. There’s wiki doc It’s only documenting what’s different from this component and the default tab panel because everything else is the same What’s next for for these two Repositories, we’re going to continue to enhance them. There’s already some plans based on customer feedback and requirements But we also need this to be community driven like everything else. So please send us your use cases I encourage you to create a github account if you haven’t already Where you can actually file issues that you have or enhancement enhancements requests Can’t talk So here’s to those useful links. I’ll leave these up here While I ask my colleague Stephen do we have any questions? Yes, we do Chris asks the badges don’t have a data property to show the count of a found set or such I knew this question was going to come up. I noticed that myself Chris I challenge you to create a github account and file an issue on that repository for that enhancement I think it’s a make sense to me that you would want the badge to be data bound for the numeric value You can bind the text to a data provider, but the the value itself was Was just the number you could set it programmatically, but you’d have to do it You know on record selection or something like that. So it makes much more sense that it’d be bound directly to a data provider. I agree Please follow the case on github and Kim remarks that They like the faster pace of this webinar webinar Well, it’s fast because we had to cover a lot. We did we and I will try to I will try to drink coffee before every webinar and be fast Great well, great job Sean and Patrick One last question from Kim can images be allowed on the radio and checkbox objects Um I don’t think it’s Exposed although I I could see that it wouldn’t be too hard to do. I think so if you’re interested in that, please again Go to the repository and file a request And let us know We will be posting a link to the recording of this webinar as well as the links that are there for useful links so We thank you all for your attendance Thank you. The L Sean nope. Bye everyone. All right. See you in two weeks