Building listviews in Servoy

back in the new year after a small break for Christmas and new year and getting the year started. So welcome everybody again with Sean Develin presenting a fresh and new topic and I think it’s actually one topic we forgot with the 8.4 launch, Sean. Is that right? Well, I don’t know if we forgot it but we just didn’t have time to squeeze it in. So. Oh, okay. All righty. Excellent. So today we’re going to talk about building and list use and did some new ways of doing that in server 8.4. If you do have any questions, don’t feel free to post them in the questions channel. We will be keeping a close eye on that. So feel free to do that. And as usual, you can find an archive of all the recordings on the tech webinar section on our website. So if you would like to see more webinars feel free to go there. Or if you’re a frequent user of a YouTube, you can also subscribe to the Servoy. YouTube channel simply by Googling for a Servoy YouTube and then you’ll get there pretty quickly. With it out of our way, Sean, welcome to the stage. Thanks, Sean. Yeah, today’s topic is, as you said, kind of a leftover from what you can see from the past webinars. We did a three part series to kick off the eight dot four release back before the new year. And there was one one feature in there that was a bit too big to squeeze in with one of the other webinars. It’s a bit small for a webinar on its own, but so today might be a little bit short, but that’s okay. Let everyone get back to work or we’ll leave plenty of room for questions. So let’s get into it. I’m going to do a demo of a new, a new component that was released with eight four called a list view form component. I’ll show a small demo and then we’ll do a conceptual overview about the component and give you guys a chance to understand sort of how to use it and what it’s for. With that said, I will jump into a brief demo. So on my browser screen, you can see a basic form that I built this morning. And I’d like to focus your attention on the left side of the screen where we see this sort of repeating body list view going on here. This is showing one sort of card for each record. And this is the component that we’re going to be going over today. This is a list view which is data bound. So you can see that it is in sync with the found set that I have to the right. So every time I select a new card, you can see that the items and the shipping address and stuff are updated on the right hand side. So it is a data bound component like any other component. You can also see that if I were to search up here, I live in the US and I love coffee. So that’s why I put that in. You can see that it is in sync with the found set of the form. You’ll also notice that this particular card is interactive. I’ve put some hyperlinks in here. You could link those to certain actions. You could also put in buttons or font icons. So here let’s say I want to mark this item as my favorite. And now it becomes highlighted if I were to, I don’t know, go somewhere else. Look at German orders for coffee and mark two of those as my favorite and then go back. That it’s, you can see that it is data bound. So the point that I wanted to show there is that you can take action on these forms. You can edit data on them. They’re fully functional, repeating sort of UI components. I could also say archive this record. I don’t want to look at it anymore. That sort of thing. So that’s kind of the gist of what I want to show you. The next part would be to take a look under the hood and see how does one build a list view. in Servoy8.4 for the ng client. So first of all, I want to show you an area of the solution explorer right here called form components. Now we introduced form components in Servoy8.3. And basically what they allow you to do is to design a form that you can then reuse in other places like any other component that you would add to a screen. So it really gives you the power to do sort of customization and reusability through your application. And you can see here that I created a form component called orders list. And when I open that over here in the form editor, it looks like any other form that I’m designing. The only thing that it does not have is a scripting scope. So a traditional form always has a JavaScript file associated with it. And you can scope your variables and methods within that form. Because this is a meant to be reusable and sort of instances, it doesn’t make sense that it would have its own scripting scope. However, it can bind to entity, the entity scopes and top level scopes. It can also adapt to the scripting scope of the form in which it’s placed. So again, I just placed some elements on this form, which are data bound. You can see I used a lot of merge text. So that data-driven text. And every time this small sort of real estate is rendered once for each record, all of the dynamic stuff in the form is evaluated per each record. And that’s how I’m able to get the different values. So I don’t have to write any code to do that. That’s sort of baked into the component. I did make some of these items clickable, for example, when I click on the heart, I have an on-action handler. And you’ll notice that if I was setting up my list to you component, and I wanted to run some business logic, when I open this up, you’ll notice that form is disabled. That’s because again, there is no scripting scope for form components. The method toggle favorite here, I do want to point out something else here, because the type of component that I placed on this form is for this particular heart icon. So something called an on-render label. And you can find it in the servo-exure components library, and you drag those on the screen. And the reason they’re called on-render label, and what they’re useful for is that they have this thing called a style class expression. Meaning there’s an expression that gets evaluated again once per record, and it allows you to dynamically style that component for the given context that it’s showing. So when I come back here and you see that I go back to one that has more records, you can see that this one was rendered with the pink heart, and the other ones get the gray heart, and less the state of the record changes. So looking at that method, I implemented it in entity scope, which is kind of like a scripting scope for just for that record or that found set. It’s disconnected from the UI, and I toggle the favorite. So if it’s not marked as a favorite, I set it to it by an area flag one or zero. And it switches. There is the style class data provider for that, which if you look at the next one, or this one up here, this is a, you can bind this to a calculation. I have to move my go to meeting tool to get to it. This is a calculation that I’ve implemented, and for those of you new to serve white calculations are like dynamic columns that are evaluated every time you request it. So this is evaluated once for every row in the, or every repeating body section in the list view, and it’s saying basically if, if this records marked as favorite, then return the style class favorite, otherwise return the style class. So the final piece of the puzzle is well, what is the style class favorite? If we look at the CSS for this application, I have a style class year called favorite and the colors that lovely pink that highlights the heart when it’s marked favorite. So just to sort of summarize it here, this is being styled by an expression that returns the name of the style class and all the styling information can be in there. It’s not just background colors, you can do borders and whatever you can do in CSS. So the reason I showed you that is because when you’re doing something that has a repeating body, especially, you will probably take advantage of these on render labels, which is another component right here in the in the serve way extra library. Now, so far I’ve shown you how we designed the form. Now how do we use this somewhere else? So again, I went to form components, not the forms and I did create new form component and then I got the form designer and everything else about this is the same minus the scripting scope. I have another form here called orders and you can see that makes some more room here for you so that you can actually see. You can see that on this form, I included the list view component and then some other stuff like the details of the order and the shipping information in the map. So this whole item here is the list view form component. Now the way that I placed that on the form is I came down to my serve way extra component library and I grabbed list view form component and you can see that my form shows up there, my form component rather shows up there and I drag it onto the screen and drop it there and then that’s how it’s added. You’ll also notice that in the default section there’s also a form component container and I could also add it that way but that would not be the repeating body list view. So this has been here since serve way a three and again you can use this to make reusable sort of subsets of UI, you know make your own component essentially as a form and you can use this but it will not repeat if you use the list view form component from the serve way extra library that one will repeat once per record and you’ll notice that this component if I inspect its properties has its own properties it has a contained form and then also the bounce the found set to which is bound. So by default it binds to the same found set as the form on which is being placed but I could use a related found set or a name found set or a global relation something like that if I wanted to. So it’s entirely possible to bind this to something else it’s own separate found set. In this case it’s sharing with the form. So once once I’ve placed the form component on my form everything else kind of works after that for the view that you saw but I do want to point out that it although it’s like a template these things can be replicated or an extended so for example I can take the. The order total label here and this is not no longer the blueprint on the order list this is the sort of the instance and if I wanted to change that text. Then I could come in here let’s say I’m just going to call it total and not order total. I click OK you can see that it renders now as total but if I were to come back to the blueprint it still shows order total so I’ve sort of overwritten that property. And you can see the namespace of the form component as well if I were to show the outline view so the window show view. Outline. Maybe we’ll drag that. On this view here that’s nice so so now you can see that there’s a sort of namespace I have elements dot list view form component and then I can actually have the properties of each component they are each named component on that. Form component so I can go in and inspect say this order total and see the change that I made if I wanted to revert that I could right click. and click restore default value it won’t put it back to blank little put it back to what was on the original blueprint on the original form component. So in that way there’s a sort of inheritance although it’s not an inheritance of code it’s just inheritance of of you I properties that are going on here which allows you to sort of. Make little blueprints and then go and change them all throughout your application. That’s it and we’ll see you guys in two weeks and four weeks will be doing an another quarterly release as well and we’ll do a webinar for every quarterly release.

Close