30 minutes with Servoy part 2

Hi, welcome to today’s webinar. And today we have a pretty packed webinar with actually four topics. And today’s VIP today is a very important presenter. Is Shan Devlin? My name is Jan Elman, and I will be moderating this session. If you do have any questions during this webinar, then please post them in the questions channel where we will answer them directly or during the webinar. Ask me questions. I was a great way to learn more about Servoy and feel free to ask any type of question while this webinar is going. Also if you have suggestions for other topics, feel free to post them in this channel as well. We are reporting the session. So if things are going too fast, you will be able to slow play it from YouTube in a couple of days. I don’t know worries about that. Either today is 70 degrees, 20 Celsius in California. I think Shan Yaren California is all this week, isn’t it? Yeah, I am. That’s a nice break from the East Coast. Yeah, that is. It’s getting pretty cool, isn’t it? Yeah. I don’t miss it. All right, well, if a lot of cover or so, let’s go. Yeah, let’s go. Yeah, I’m pretty excited. So we announced this webinar. It was originally around one web component, but today we get to do more than that. But real quick, before I dive into that, just a reminder, this is a tech webinar series that we’re doing every two weeks. And so today we’re doing the web components update, and we have additional topics planned through the end of the year. I’ll show my email address at the end of the presentation, and you guys can also mail in any ideas that you have. So let’s get to it. As I said, we were originally just going to do the navigation component. But fortunately, we had some other projects that we were working on that were ready. So I’m happy to be able to cram four different components into this presentation. The site nav component is an all-purpose menuing component that docks to the left or right side of a form, and can slide in and out and is fully event-driven. Select too is a multi-select, like string tokenizer component based on a jQuery project. And we have an implementation of that with full data binding. We also have a Google Maps component with data binding, and a PDF viewer for viewing and interacting with PDF forms directly embedded on to a Servoy form. No more slides. We have a lot to cover, so let’s get to some demos. I’m going to switch to a sample solution. This is showing the example site nav component. You can see it here on the left side of my screen. You’ll notice that there are some menu items here as I mouse over. I get some hover action identifying that they’re clickable, clicking on one link here, and you can see that it navigates to my customers panel. And the menu item is highlighted, so there’s some styling going on to indicate which is the selected item. Similarly, if I can navigate through my orders and my employees, you’ll notice however that when I click on the products, it navigates to the products, but it also expands this menu item, and it’s showing some sub-manias that I’ve configured. And these are the categories of different products. This is all from the example database, the Northwinds database that ships with any build of Servoy. And so now you can see that it’s not just a navigation event that I’m handling here. I’m also filtering the records based on what the user has selected in terms of the product category. You’ll see that there’s some icon here to indicate that it’s expanded, but I can click it again and collapse that. I can click to my shippers menu item as well, and we get the same effect. However, this time when I clicked on it, it didn’t navigate. So I’ve set that one up to not navigate, but just expand. And you can see that I have the, this time it’s not a filter, but it’s the actual records because there’s only three shipper records in that sample. And as I click through them, it’s loading the different shippers. You notice that there is these icons here, showing the, well, these are the orders that were filled by that shipper. I’m going to click one of these icons to navigate to a particular order. And you can see that I’ve shown this form, and then also updated the component. The orders is now the selected highlighted node in the navigation menu. So anywhere where I have one of these, for example, the sales wrap, I can navigate. And again, you see that the employees becomes, becomes highlighted. So it’s not only capturing events on the component, but also capturing other events in your application, and using the API of the component to update the UI. Finally, you see this icon here to collapse and slide in and slide out the entire menu. Excuse me, this is optional. You can also make it a fully docked menu. And you can also configure it to be on the right side of your screen, and you can slide in and out from the right side as well. Okay, let’s dive in to serve way developer and take a look. Here’s my form for the navigation main form. And you can see the component right here. Off the bat, there are some properties that we can configure straight away, whether or not it animates, or it’s just instantaneous. All of the icons that you see are configurable. And this is using icon fonts, so font awesome. So you really only have to specify the style class or classes that you want. For example, when a menu item is expanded or collapsed or the entire menu is opened or closed. As I said, it can dock left to the right. So you can see the slide position, left right static, meaning that it doesn’t slide in and out at all. It’s fixed. The style class of the entire menu. And then here’s the on action or the different events. So if you use your expands or collapse a node or if they select an item, we can handle that. But let’s take a look at how I initialize the menu on the onload event of the form. I call this menu init nav. Or sorry, this method init nav. And so what I’m creating is an array of these menu items, which are simple objects that I can then pass in. So as I sort of scroll through my screen, you can see that each one has some text. Again, for the icons we’re using icon fonts, so you need only to specify a style class or style classes. To set that up. Additionally, you’ll see that there’s the data component, which is whatever you want. So this is some extra information that’s bound to the menu. So that when you handle a callback, for example, you can process that and decide what to do. You’ll also notice that I had set up some dividers, like some little lines that were between different sections of the menu. And so I pass in this array when I set the root menu items. But there’s other ways that you can add menu items because there’s an AP. You can see that I’ve called add menu item and added a next one that way as well. So I did that for another divider and for the settings menu. For the sub menus, what I’ve done is I grabbed a value list for my product categories and iterated over the items. So really the part that deals with the menu is right here. And in this situation, what I’m doing is for each category, I’m creating a sub menu. And so what I’ve done is I’m adding the menu item, but I’m also specifying the ID of the parent menu, which is products. So it’s as simple as that. I’m adding it as adding the mischildren of products. I do the same thing below for the shippers. But you’ll notice that I’m sort of passing in some extra data in this case that I can receive in the callback. I created a little filter object to set up a filter down here. I’m just creating a passing in the pk of the item that was shipped. So there’s nothing about the menu itself that was driving the navigation. It’s really just putting whatever data you want that’s bound to each menu item and then handling that in the callback. So let’s take a look at how the callback was handled. So, Sean, it’s a quick see when I highlight the menu. Sean, there’s a quick question here in between from month one and that could the menu be responsive? Yes. The menu is the menu can be responsive or absolute. In this example, it’s an absolute layout. Actually, the second question does the style class in web components work like ng class directive and Angular or just like the style directive and HTML? I’m sorry, what’s the question? Does the style class in web components work like the ng class directive and Angular or just like the style directive in HTML? It’s just like a regular style. So, I’ll show the CSS in a minute, but you can just provide your own style classes that are normally available in the solution and you can pick from those when you assign it. Okay. Excellent. Thanks. Okay. So, we’re showing what happens when the user actually clicks the menu and you can see on menu item selected. I’ve handled this in a method here. And what gets passed into that is the ID of the menu. You have an event object which has some additional information and a regular JS event object. I call it the API of the menu and then I’m basically checking what additional data I’ve passed in. So, this is this data object that I specified when I initialize the menu. And then I call a custom method that I wrote to navigate based on the form name which was assigned to the menu item as well as any filters that I might have or direct PK reference. I won’t get into the specifics of how I did the navigation because it really has nothing to do with the component. The sample solution is available on GitHub. So, if you’re curious about that, you can look for it. But the basic gist that I want you to take away is that you can attach whatever you want to the menu items and when they’re clicked or expanded or collapsed and with the callback and then you pool that information and do what you want with it, which is how I was able to navigate on some of the menu items, but the other menu items were setting a filter and yet other menu items were just navigating to a specific file. Maybe we should look a bit at the style class as well. You can see that there’s a bunch of style classes that are in the configuration. Additionally, when I was initializing my menu, I was specifying font pen style classes, which are part of the font awesome package that is in there by default. But you can see that the property of my solution, I have to click quickly here. I have a style sheet that is the style sheet that’s set for the solution and I have some style classes. There are some styles that are there by default on the menu component and you can override those or you can create your own styles and assign them. It’s up to you and you can just see that it’s very detailed. There’s a style for the menu itself for the menu item for certain levels of depth within the menu. You can see here there’s also a style class for when the menu item is selected for the divider itself and then you can of course you have any of the special selectors like hover. That’s how I was able to get the menu item to change color when I hover over them. So it’s really highly customizable. Every icon that you see on the menu is also coming from CSS. So you can really make it look however you want. I think that’s all that we need to show about this component and I’ll post the links about where you can get all this at the end. of the presentation. Before I move on to the next one, Yann, are there any more questions? Yes, there’s one question from Steve. Are there any plans to update and modernize the Servoy frameworks with these components? Yeah, we’re looking into that. We don’t have specific plans beyond, first of all, just updating the frameworks in general, but we’re definitely looking into that. Because the frameworks existed before Servoy aid in the ng client. So basically every part of the framework is subjective. Maybe be modernized, but we have no specific plans yet. Yes, as far as I know, the first step is being to make them run well in ng client. Another next step is to start to componentize all the different objects and modernize when necessary. Yeah, that’s correct. Okay, the next one on our list is the select to component. So I have another sample solution queued up here in serveway developer. I just have to change my active solution. And I’m going to give it a launch here. So the select to component, as I said, is a string tokenizer. So it allows you to enter in content and it will tokenize, separate strings into separate tokens, and also binds to a value list. So what I have here in this example is a form which is showing my products in a grid down here. And what I want to do is be able to quickly select some suppliers that supply those products and filter the products by all the suppliers that I’ve selected. So I have the tokenized input here and then I have the raw input which is just showing what is actually selected under the hood. So I go and click here and you can see that I got a drop down. I can start to type. You know, and I get that type ahead thing going on. I can also click back in here and I could select several at a time. And you can see that as I’m clicking the matching products of that is expanding. You can also see the raw input here. The supply IDs that I’ve selected, so 1627 and 29, it’s like the stored value of a value list versus the display value. You can see that I can click to remove one of the selections and I can also backspace to remove them. And after I’ve removed all of them, my list of products goes back to the all products list. You can also take a look at what the enabled and disabled version of the looks lock because that’s one of the runtime properties. So that’s pretty much it. We’ve had some requests for a component like this. It makes a lot of sense, especially in a web application nowadays. So let’s take a look at how it works. In my sample solution, I’ve placed this component on the form. By the way, when you have a web package loaded, I’m going to show this in a minute. All of the available components show up here in the palette. And these are grouped under. In this case, this is grouped under the SVA extra component. And there it is, the Select 2 tokenizer. Also the side nav that we just shown is right there. So I just dragged the component on the form. And you can see some of the design time properties over here. Some little customizations like do you close it on select or not? You’ll notice that I was able to make multiple entries and the menu stayed up. But that of course is configurable if you want it to close after each selection. You can do that. There’s text for when there’s no matches found, placeholder text, etc. Also, of course, you can apply a status. But two things to notice. One is the data mining. I’ve found it to form variable called supplier IDs. So there’s data mining there and data binding to a value list. So I have my suppliers value list, which is returning the list of all suppliers. The display name of the company and then the stored value of the ID. And then finally there’s some event binding here. So when the change happens, I go to my on data change event. So the data provider is really just a form variable in this case. And we can look at the code for the on data change. I call this method to apply a filter. The filter code, I think, is not relevant because it doesn’t have much to do with the component itself. But you can see that I’m just splitting the supplier IDs, which is a carriage return delimited string. I’m splitting that to create an array and then I’m just passing that into a found set filter parameter. Supplier IDs is just this variable up here. So it’s a string variable in this case. So you can see that in the client, every time I make a selection, it’s really storing this, this is the raw input, which is a string, which has the IDs separated by carriage returns. If you’ve used checkbox value list in Servoybefore it works the same way. So I just split that again array and I do that every time on data change, so it updates the filter. Pretty straightforward. Any questions on that? Y’all, before I go to the next one? Let me have a quick look. No, there’s no question to this point. Okay, then the next one that we’re happy to release is the first version of the Google Maps component. Let me go into my developer and switch my active solution again. Okay. So here we have a sort of a sales order view. We have our list of orders and order details over here and then a map of, oh, sorry, this is, yeah, this is orders. And then we have a map of where the ship, add, address, this, this. This is a fully functional Google Maps, so I can, you know, I can zoom in, I can zoom out, I can, you know, come over here and turn on terrain. I could switch to satellite view, all of that good stuff. There’s also a pin showing right where the address is and it’s a data bound component as well. So if I switch between customers, you can see that the map loads as I change, as I change my, my selected record also if I manually edit the address, and I don’t know, put this in, London and the UK, you can see that it updates the map on, on data change of the actual data providers. So again, it’s a component with data binding and it’s a fully functional Google Map. Let’s go to the developer and take a look. So it’s really on this order detail form and you can see that I’ve put the component here on the form. In this case, it’s in its own web path, like a page. So it’s, it’s right here, SVYG Maps. So you just click and drag that onto a form. There’s actually very few properties here, just what the latitude and longitude would be if you want to use that. Or the data provider that’s going to return the address. Also, this is pretty important. There’s an API key. So Google changed their usage policy a little while ago. It used to be kind of open-ended unless you were really using it a lot. But now, if you want to use this, you have to provide the API key every time. It’s free to use. You got to go and register to get an API key. And then you can just set it here. I have it bound to, I have it bound to, you know, a string variable on my, my form. So that’s important. It won’t run without that. Let’s take a look at the data provider. It’s actually a calculation that I set on my orders table. And it’s just sort of concatenating address, city, and country. And that’s pretty much all Google needs to locate it. And then this is a data bound component. So as I’m changing selected record, because it’s based on the data provider, it’s going to update. Also, when I edit any of the fields that change the calculation, then as soon as that we see that the calculations change the map automatically refreshes, there’s no other additional events you have to handle. So it’s really straightforward to use. This is a basic map component. Obviously, Google Maps is a pretty extensive API. So we’re looking at, at extensions of this. I think first on the list would be to make it showing a whole found set. So you could toggle between showing the select record versus a bunch of pins for all the records in the found set, you know, being able to zoom to a selection, this sort of spatial, so if you have ideas on how you would like to use Google Map components in your applications, go ahead and send those in because that helps drive on. If one more on the list, PDF viewer, we’ve had some requests before to be able to, say, run reports and look at the results directly in the browser, rather than the default way would be to just download it and open and reader or a new tab or something. So I switch over to my PDF example solution and run this. So this is it. You can see that there’s a viewer in the middle of my form. Here’s the URL of the document that I’m looking at. I pulled a sample PDF off of the Internet. The viewer has some basic PDF viewing functionality, so you can zoom in, zoom out, you can do a fit, fit page. Also up top here, you can see you can rotate the document. Print launches the browser printer. And of course, you can download and then it would prompt you where you want to save the document. So all of that is just in a component that you can put on the URL can be absolute. So in this case, it’s going out onto the Internet to find a document, probably commonly you would have your own. So if I just put in test PDF, I will resolve to the context of my web application, which in this case would be local host 8080 test PDF. I’ll file out on the web server. So if you wrote a file out onto your web server, you could you could serve it up this way. And again, you can see that I’m able to view it. I’m using my page down and page up or arrow down an arrow up buttons in this case on my keyboard. So it’s just like looking at Adobe Reader or something like that. It’s fully functional. Let’s go to the detail form where it has component placed. Like Google Maps sits in its own web package. It’s called PDF viewer. It drags onto your form. There’s pretty much no runtime property or design time properties other than what you normally get with the component, which anchors and location and size and name. However, if I look to my editor here, you can see that PDF viewer has one method, load document and you pass in the URL, and that could be a absolute URL or it could be a URL that’s relative to the current web application. So you can see that in the on-dated change handler or in the event of that button, I call this method load document. And I’m using the form variable called document URL. So all I do is call that one method and pass it in. So that’s it. There’s not much else to do it. You just pass in the URL that you want. And it’ll load the document. If you want to reload a document, you just call that method again because we’ve seen situations where people are writing reports to the server under the same name. And so it’ll cause it not to be cached. You just call it reload. You just call it document twice. So that’s pretty much it. There’s one other thing I wanted to show you guys in the developer, or just a general thing. You’ll notice in all of the, in all of the Servoyeight projects, there’s a web packages node here. And you can launch the web packages manager by right clicking it. And this will show a little browser tab in Servoyeight developer. And you can see a list of all of the components, not just components, but ng service is and layout managers. But in this case, we were just seeing some components that have been released. So these are fully released. All you have to do is click the plus button and it will install them into your solution. You pick the solution over here that you want to install it. So it’s really easy. And so we see here Google Maps PDF viewer. The Servoyextra components is where the svi nav, site nav, and the select two components that I showed you are located. Additionally, let’s go back to our slides here. There are some links here. I’ll leave these up at the end of the webinar. If you guys copy down also this will be recorded. Also this will be posted on the forum so you’ll get it. But these, these components all live as open source free to use GitHub projects on our GitHub site. And these are the links to the project home. There’s also a link to the home page for this webinar series. And my email address if you have ideas for topics or you have feedbacks about these kinds of presentation. Go ahead and send those to me. And also just a reminder that this is a biweekly event. And so right now we have for the next topic is December 7. And we’re going to talk about data broadcasting between applications that might use the same database. There can be some challenges there. And we have some tools to help with that. So we’re trying to keep the topics broad enough that they can apply to everyone. So today was a web component’s update. We understand that if you’re running the smart client, maybe it’s not applicable. So we’re trying to keep it relevant for everyone. So next week will be a topic that’s applicable to any client, any sort of client that you might use.

Close