Servoy UI / Style Tips & Tricks

Today we’re going to talk about UI style tips and tricks. The reason I selected this topic is two weeks ago. We do this webinar every two weeks if we can. And two weeks ago we did a little mini-series to announce the Servoy version 2020-06 launch. And there were some changes in what we ship. A few things were deprecated or moved. And after that I got a few emails and questions. And yeah, so there was I think a little bit of leftover stuff to cover. So this is a bit of a follow up on that. But also just a general update on some tips and tricks in the UI that I get questions about often or that things that people struggle with. So that’s what we’re going to cover today. You can ask a question any time. And at the end I’ll do the Q&A. And so just remember to type those into your chat panel. This webinar is recorded so you’ll be able to watch it in the archives. And I will share the example solution on the forum with you guys for what I’m showing. Not much in the way of slides today. This is meant to be just kind of a fun demo of some things that I see people struggle with or they have questions or they didn’t even know you could do. So let’s get right to it. I’m looking at an example solution here in my browser. And the first thing I want to talk about are font icons. Font icons are really common in applications built in Servoy. And one thing that happened in the last release of Servoy is we had a component in the Servoy extra package called font icon or font awesome label, I think it was called. And basically it was a little convenience component which had a property for the font style class. It was totally redundant. And as we were refactoring and deprecating the legacy components out of the view, that one sort of stuck out as being really redundant and kind of pointless. We were trying to consolidate so there were a bit fewer of components and a bit clearer what they can do. So now we have in the main bootstrap, which is usually available in every project by default, the main bootstrap package is the label and the data label. And those have a property for the font style class. And I’m going to show what that is. So I’m going to look at this form here, example font icons in the form editor. And these are all just labels. So if you look at buttons in text and you drag label onto the form and then you see here they have this image style class, which is a text property where you can begin to put in font icons. So if you have an application that uses the component which was deprecated, don’t worry. It’s still there and it will still render and work. It’s just that we’re not going to enhance that anymore. And I thought there was much to do with it. It will still work. It will still show up in your solution. You will get a warning that, in fact, I have one on a screen that I’m not showing. And so I’ll show you what the warning looks like. So you can actually know what’s there and go to fix it. You can see a Servoy extra font, awesome web component is deprecated. So use bootstrap component label instead, set the image style class property. So it’s very clear of the message, what to do. But all you have to do is there’s even a quick fix for it, which migrates it. But you might just want to go through and manually do that as well. So that’s kind of if you’re coming from, if you’re updating and you have that, that’s how you go forward. If you’re new to Servoy or you’re evaluating Servoy and you just want to get started in general with font icons, it’s really easy. When you create a new project, it will include the font awesome libraries for you. And essentially, you put a label on the form. You can start to set, as I said, this image style class. Now, if you want to know, what the heck can I do there? Remember, this is a third party library. So the best thing to do is to go to, I would say, the font awesome website, which I just had up. And they have a gallery of icons. So if you just go to fontawesome.com. And then you can start to search. So I have, you see, I have an eyeball icon there. You can pick these out. And the way these work is, they render as a font, not as an image itself. So you get to, it’s really just pure CSS. You can mix it with other style classes. And that’s what I’m about to show you. So in the example solution here, the basic icons are really just setting that style class. And what I want to show you is how you can do some interesting things with them. And this first row of basic icons, if I go back to the IDE, you can see that I set the image style class. And it’s actually more than one. Almost all of them will begin with F.A. or F.A. or F.A.B. and then the name of the actual icon. In this case, it’s F.A. arrow left. And then you can add stuff to it. And I added a modifier to change the size. And I’ll get to that in a minute. In addition to that, whatever other style classes are applied, we’ll stick. So you may notice one thing that I want to point out is positioning. If I just drag a label on here and say, OK, I’m going to make this F.A.S. and then F.A.I. I think it is. Yeah. And get rid of my text. Suppose I just want a label. And I may make that square. I may get 30 by 30. You may notice that the icon doesn’t really center in quite right. So one of the things you can do is you can come in here to the style class and do text center and text center vertical. And that’ll put it right in the middle. Now you can see, doesn’t matter what size it is. It’ll place that image right in the middle of the container. That it’s in. So that’s one thing that’s good to know about positioning it. Now if you actually are placing it with a label, I would go ahead and restore default value to default align. It’ll put it in the middle and left. And then if you put some text in, then you can see that it’s still sits nicely there. So for positioning, you want to use CSS, both to control the position of the component, the label component, but also the icon within there, and you can use those text center and text center vertical. Those are selectors that come with the theme roller, which is built in to the solution by default. And so you get a lot of code complete there for different selectors that you can apply. Another thing you may notice for these is that I applied the primary color from the theme. This also goes to that theme roller. So you can see that for under the style class, I have one here called icon. And I added that to my solution here. So this is my less file, which is like a CSS parser. And I created some selectors here for doing interesting stuff with icons. The first one I did was called dot icon. And I said that the color is going to be main color. So that goes to the theme roller, which we’ve covered in other webinars. And you can see that in this solution, we have this main color which shows up in the banner and over here for the selected menu item, and then also here on some of the icons. If I were to re-skin this, and I could do that by editing my built-in theme. So if I go to media and I go to the custom theme properties, this is actually a reserved less file. It’s just a less file. You can look at it in its raw form. But these are the variables that you can change. And I could easily change the main color to say a purplish kind of one. And if I save that and I come back to UI here, you can see that it updates everything. So by using that additional style class, I can change the color of the icons. But I recommend you guys do themeing and not hard-coded colors necessarily so that you can change, make one change, and then globally everything can change. And you can do that in your own less file as well. You don’t have to use the one of the variables from the built-in, but this makes it quite easy. This is also versioned. We did a webinar on this quite a while back. So I recommend you go back to the archives and check out the one about CSS and themeing. I’m gonna put this back to the darker blue color either on the eyes and save that. The next thing that I wanted to show you here is how I can kind of play with the icons and change their appearance. In this case, I might want a inverted kind of view of the icons. And so what I did is created an icons out class called, or a CSS selector called icon inverted. And in this case, I’m setting the background color as the main color. And then the foreground color is the main color inverse. Again, these are all variables from the theme. So if I re-skin this, it’ll apply to all my icons that use this selector. And also I’m applying a border radius to 50%, which is around shape. It’ll put it round in a circle inside a square. So now that’s what’s making these show up with a circle around them. Some of the font icons haven’t, usually have an alternate where it’s already inside a circle, but not all of them. So it’s kind of inconsistent. If you wanna have all of your icons be inside a circle or have a border with rounded edges or whatever it is, I recommend you do that yourself with CSS. The next thing I wanted to show was the clickable icons. And you can see this row across here. Again, I added my own selector, but to show you what that looks like, I wanted to be, well, let me show you what it looks like in the client. You can see that when I hover over them, I get the pointer, really tells the user that it’s clickable. And you can see that the foreground and the background change also noticed that there’s a little bit of a fade in fade out effect. That’s a really nice way to signal the user that this is actionable and that they could click on it and something would happen. So I recommend you change your icons that are clickable. They should really be, when you go and hover over them instinctively, you know that it does something. And that’s really easy to do. In the selector I have here icon clickable. First thing I said is that cursor to pointer, that just changed the cursor when you hover over it. The other thing that I do, well, first of all, I made those gray and that’s another variable from the selector text tertiary, which is that kind of lighter gray color. So that just changed the color, but then I used the hover selector for the same style selector here and I changed the color to the back to the main color when you hover. I also changed the background color to, and this one is a custom variable I made right up here, called icon highlight, which is just that lighter gray. So I get that light gray background, but the main color in the foreground. The last thing I would point out is that I used the CSS transition property here and I set it to half a second. Now that’s applying to all properties that change, but you could actually make this half second and make it just on background color. Like something like that, if I could type. And then it would only apply to background colors, but other things would wouldn’t have that transition, but I’m just doing it on everything because I’m only changing the background and the foreground color and I want to apply to both. So three things there, I changed the pointer, I changed the background foreground color and I also have that nice fade in fade out. The next row is kind of a combination of these two. I made the inverted version of these and these show up real nice and let the user know that they’re also actionable. And again, I made one more style selector called inverted clickable and it’s basically the same thing except that I sort of combine these. I have the inverted colors and also the border radius and then the hover selector, which switches the background color. I leave the foreground color to be that inverse, which is just white. So that’s what gives me the changing background color. So this is the background colors changing and here both background and foreground are changing. Another thing that’s handy is changing the size of your icon. Remember that these are font icons, so their size is actually controlled by the font size. And so you could come in and I could have, add to my style class here, I could have icon large and then I could actually come in and do a font size and that will grow and shrink the icon. And so if you wanna get real specific, then you can use a font size in a style class that’s applied your icon. But there are some convenience selectors that ship with font awesome and you may have noticed them here on my form, but if I go down to this gradation here, you can see that I have the image style class here with the eye and then the next one over is f a to x and then I had three x and four x, et cetera. So those are some modifiers that are built into the font awesome library. And so if you just wanna convenient and quick way to change the size of your icon, that’s one way to do it. Again, you can always do it with the font size itself that you apply to that label. There are some other things built into font awesome, for those modifiers. One is to flip horizontal. The other is to flip vertical and the other one is to rotate. You can rotate by a certain number of degrees. I think it’s limited to 90 degree increments. And if you look at what I’ve applied across here, the left one is unmodified. It’s just that battery where there’s a quarter left. And then I take the same one. I take the same one here and I apply. Let me make a little bit more room so you guys can see. I apply this f a flip horizontal and that just flips around horizontal. Same thing with this bug icon. This is the plain version and this is the flipped vertical f a flip vertical. So really all you have to do is, you can see that you just plug in that style class and it’ll even in the format of the little change how it renders and flip it vertically. And the last one is rotate. Suppose I want to turn this one on its side. I rotated 90 here and this one I rotate 270. So those are just some nice convenience classes you can apply to kind of manage how your icons appear and you don’t have to get into doing the CSS yourself. One thing I wanted to say about adding the icons to your project and then deploying them. As I said, when you make a new project, you can see that under Servoy packages, font awesome is included by default. And what that really is is the font awesome service package which just kind of injects the library into your client. You can get any, if you click add components here or you right click this and download with Servoy package manager, you get the package manager if you don’t have it already. And if you go to, it’s not really in components. It used to be in that Servoy extra which was deprecated. But now it’s just in services and you just add font awesome and you can see that I have it already added. That will inject it into your project. Now, you may run into an issue when you’re deploying because you have to pick which packages to deploy. And when you’re doing a war export in the manual export, it’ll suggest what packages based on what it finds references to. And if I were to go through a manual award appointment here. And I walk through this. It’s gonna get to components. And you can see that if I’ve placed, I have this legacy component that’s pointing the font awesome that I told you about. So it’s picking that up because I have that on a form that I’m not showing. But also for services, you can see that the font awesome lib is not selected by default because it doesn’t really know that I have any references to it. It’s just kind of there. So there is, and this is kind of been there for a while but there is a one method in the font awesome plugin there. It doesn’t do anything except you do load. So on solution open, if you do load and I’ll add it to my own solution open here. So I’m highlighting the solution, going to the on open event. And if I put in plugins.faunt awesome lib. Load. Now it sees a hard reference to that service. And if I go through the exporter again now, it should pick it up. And that’s just convenience. You of course could manually include it. You don’t have to do that. But if you do that then, you won’t forget about it because get through all these useless jar files. There we go. Now you can see the font awesome lib is over there under exported services because it detected a hard reference to that. So again, if you just put that in your on solution open, you won’t forget about it. If you are a customer that uses a Servoy cloud automated pipeline, then this will also ensure that when the war gets generated, that it gets picked up. There was before there was some confusion because it was in the component and there’s much nicer now. So that’s what I wanted to say about deploying font icons. I want to move on to another subject. Already 1125, man. That’s supposed to be short. Another subject is dynamic CSS, but I’m going to stick with icons for a second because they’re basically created with CSS to show you some fun stuff. I suppose that I have a refresh button on a form that I don’t know, calls a web service and loads new data or something. And when I click it, I do some loading and I want to show that it’s loading by spinning the icon. In this case, I also disabled it a bit too. It’s not clickable. And then it’s back again. Another example could be, you know, I have some toggle and when it’s true, I want it to be green like this and I can untoggle it by clicking and it goes back. So a little bit of data driven or dynamic CSS. Because I get to ask this question a lot. So I’m going to go to this other form here, which is dynamic styles. And give you some more room here. So on this first one, again, this is just that label with image style class and I used my little handy icon clickable selector so that I get that nice mouseover effect. And to it, I added this on action, then handler. And in this case, I disabled the component and I’m adding a style class called FA spin. That is not one of my style classes. That is again one of those convenience modifiers in the font awesome library. If you just apply a style class either manually or in this case dynamically, programmatically, if you apply that FA spin selector, it will animate your icon so that it spins. One thing is I think you do have to call application update UI here because it’s not automatically sending to the client because you did this or rather the thread is still running because I sleep it. And so it just needs to be updated. So if you call application update UI, that will set the client straight. The icon will start spinning. And in this case, I’m just calling application sleep. I let the thread sleep for three seconds to simulate some activity that could take a little while. When it’s done, I remove the style class and I re-enable the component at the bottom. So that’s just to sort of fake something that takes a while, but while it’s busy, I might want to spin that. It doesn’t have to be when you’re all inside one thread. You can imagine that I might have a scheduled task which periodically is checking the availability of something, right? I know in our UI we’ve used for our automated pipeline when a project is building and you go there, it’ll be kind of like a blinking icon. And then when it’s done building, it will stop. That is not a synchronized thing. It’s just asynchronously checking. And so you could add a remove these style classes in different threads. It doesn’t have to all happen in one thread. But that’s just an example. The other one was the on check. It’s the same setup with this icon to toggle between those. However, I set a Boolean form variable here, which just is our state. We just pretend that some status or something. And it’s false by default and then I invert it. So I make it the opposite of what it was. And then if it’s checked, I’m adding the style class icon success. And if not, I’m removing the style class icon success. In this case, I made that myself, if you look at my less file, I have somewhere down here there, icon success, where I set the color to brand success, which is again, another one of those team colors. The reason I made it, I didn’t just add brand success is, there’s a bit of an issue about which one of these selectors wins on the background color or on the foreground color. So I made my own and I added that CSS important. So it’s a little hack to make sure that it’s going to show the green one and not a different one. So just add and remove that and that’s what turns it, it changes the color. So that’s all I want to say about font icons, but a bit more about dynamic styling. If you didn’t gather that last example, you can add and remove style classes programmatically. But there’s some other ways you can do it without really writing code as well. And in this case, I have a data-driven style class we’re looking at a particular order from the example database. And you can see that it’s showing up, that the status is late and that’s because it was, it was ordered in 1996, but it hasn’t yet shipped, okay. And it was required, it was required shortly thereafter. I’m going to update these to something modern. Well, first of all, I’m going to delete the required date. So now it’s just planned or pending. There’s no required date. So this is all data-driven. I’ll put this something more modern. Let’s do it. That it was ordered last week, it was ordered July 8th. If it was planned to ship yesterday, you can see that it’s late, it’s planned to ship tomorrow. Now we’re back in 1996. Now I should probably just type this in 2020. 2007. 16. That’s not working. So now it’s planned. If it had already shipped, then you can see the status goes to complete. Anyway, the point is that this updates based on the data. So let’s show you how that works. If I go into this form, which is dynamic styles, you can see that I have, these are just fields that are data-bound, but I have this label that I dragged on there. The data provider is status. Status is a calculation on the order table. It’s very simple. If there’s a ship date, it’s complete. If it was required, but it was required before today, it’s late and otherwise it’s just pending or planned. So that’s very simple. It’s just a text thing. So that’s what’s driving the text that you see there. However, if I go back to the form, there’s also a style class expression. And I set that to another calculation. I want to stop here for a minute and just talk about the 2020-06 release. Again, because there was a component, again, in the Servoy extra package, which was deprecated, I think it was called on-render label. And it was basically again a convenience label that you could put on a form and it had the style class expression property, which I’ll show you in a minute how you do the dynamic style. And so it was kind of weird. We had regular labels and we had a label if you wanted to have the dynamic styling. Why not just let any label have dynamic styling and get rid of the little on-render label? If you’ve been with Servoy for a long time, you may remember the on-render event in some of the legacy clients. Those were deprecated when we went to the HTML5 client. But it’s the same concept is that you get to dynamically choose how it renders. So in this case, for the any label or any data label, you place on a form, we’ll have the style class expression. And if we look at it, in this case, it’s connected to a calculation. It could be a form variable, like you could programmatically change the value of a form variable or scope variable. But what this needs to point to is a data provider that is a string that has one or more CSS classes that you can apply and it can be dynamic. So in this case, if the status is complete, I’m returning this selector, success, late, I’m turning danger, otherwise I’m turning info. These selectors themselves are coming from the theme. So if you wanted to use these directly, you can just use them. They’re built in with that theme roller. And they use the brand colors. And again, that’s all skinna bullish. You change one of those variables I showed you in that theme editor. So that’s how I get the dynamic effect here going based on data. So there’s no code that runs when I change these. That’s the really nice thing. It’s not like I’m doing a non-data change to handle that. So that’s data-driven style classes here in a regular form view. I want to then finally do a few things that come up in grid views. And I get questions about this from time to time, too. The few things that I want to show are the dynamic styling on a grid cell, the dynamic styling on a grid row, how to do icons in grids. Clickable icons and then hyperlinks. So I’ll start with the status since we just did that. This is now a table view of the same data, the orders. And you can see I have a status column here on the right. And you can see that orders which have, you know, which have shipped are complete orders which have not shipped. And it’s past due, they come in as late. And so if I were to, I can edit these right in the grid here. And you can see that it’s the same thing in the grid. If I got rid of that ship date, this one goes to late. So this is, if I put this to some time in the past, this one goes to late, etc. So it’s all about data binding. I don’t have to run any code. This is just happening because of the style class expressions. I want to show you how that works. For this, I’m going to go into my third form. Example grid. And bring that up in the form editor. It doesn’t, it’s because I’m in a calculation. It doesn’t want to do it. Try this again. Okay. So I’m going to make some room. Over to the right, I have that status. So this is the column on that grid. And you can see that data provider is again that status calculation which shows the text. And just like we have on the sort of the detail view on grid cells, there is, or you can think of columns, there is the style class data provider. And this goes to that status style class we already showed. So I’m just reusing both of those calculations to get the text of the status and then the style of the status. And that’s how those show up in the, in the grid. And so it’s going to be dynamic for every row in that cell. There’s also, you can do, do this on the cell or on the row level. So if I click the grid component itself, you can see that there’s a property called row, style class data provider. And you’ll notice that the moment that this one went to late, the background turned that kind of light pink color. So how I did that was if we look at this row style class again, best way to do these are in calculations. So there’s a calculation on the orders table. If the status is late, I’m returning row bg danger and row bg danger is something I made custom for this little webinar. And it’s down here and I did something neat that you can do with last. I lightened the brand danger color because if I just did like a red background, it looks really too intense. So I wanted a light version of that and I played around and came up 38% which looked nice. But that that’s nice because if you were to change the original danger color, when you’re skinning this, say you made it orange instead of red, you’ll get a light orange background again going with the seaming. That’s the kind of the best practice there. So that’s why I picked that and I lightened it. And again, there’s a lot of selectors competing for the background color like the selection or the even odd that you get in the grid. So in this case, I put a little important thing so that no matter what if it’s even odd, I didn’t do zebra stripes here or if it’s selected, it comes in pink, you can see the other ones, someone just like that they come in gray. So that important tag in CSS makes it take precedence. And so these will always show up with the pink background if they’re late. The moment that the moment that it goes back to normal, you can see that both this complete button here show up and then the background color goes back. So cell and row level, you can style. The other example I wanted to show you is the hyperlinks. Get this question sometimes or sometimes I show people because it’s a good, you know, it’s a good UX I think that if you have a grid, you know, you can pack a lot of information in a grid, but you want to make the information actionable. So in this case, I have, I might just be looking at orders and I have a customer related record and a sales rep related record. Suppose that I want to make it so that I can click on those and then navigate to that record and navigate back. I didn’t set up navigation for this example. We have lots about navigation in prior webinars, but in this case, I made these hyperlinkable. And if you click on them, you can do some, run some code. In this case, it says pretend to navigate to that particular customer or if I click on the sales rep, the same thing. Oh, I didn’t handle the, I think I messed it up in the key. I ran them in the same one, not if it was on this one. Anyway, I’ll show you the code and you’ll see the mistake, but you’ll get the idea. So how, first of all, how do I get the hyperlink to show up? Because this is a nice little UX pattern to make grids really users know right away when they see that hyperlink text that they can do something. They also know that it takes you somewhere. So that’s a really good way to communicate navigation, right? So if I go back to my grid form and I look at those first two columns, if we look at the data provider, I have something here called link to customer and you guessed it, calculation. And this is a cool thing you can do in a lot of stuff in Servoyis wherever you can show text, you can show a markup. And in this case, I put an anchor tag with a h ref that really goes nowhere. And then I put in the related company name for that order inside that anchor tag. So that’s what gets me the hyperlink. So just go straight for the anchor tag and that works. The next thing is to how to handle the click event. Well, I don’t really handle that in the hyperlink. I actually just handle it in the cell click event. So if we highlight the grid here, you can see that there is an event on, there’s a lot of events on the grid. But on cell click is one of them. And if I look at my handler for that, it passes in, yeah, this is my mistake, link to customer. This should be linked to employee. But remember that that passes in the column index. Now, the user, it’s the first column, but the user can reorder the column. So it’s a bit safer to go with the actual column. So I get the actual column at that index and I check the data provider. If that data provider is that link to customer data provider, then I call my show customer pretend to navigate. In this case, I just show a dialogue that the customer was clicked. I do the same thing with link to employee. If we go back to the calculations, you can see the link to employee calculations almost identical. That’s the data provider that I use also in the grid for that second column. And I fixed the codes. And now I should be able to click on the employee and yeah, you can say pretend to navigate to hand-odds worth. Okay. So that’s how we do hyperlinks and that’s how you can action them. I recommend when you have grids and you want to use your grids to navigate, this is a really intuitive way to present it to your users. Last thing to show in the grid and for this webinar for over time here is the buttons over here. So the moment that an order is late, suppose that this is a task list for the user and he or she should know right away that they must call that customer. So I put a nice icon here. Again, it’s actionable. If I mouse over it, you can see I get the pointer and it changed color. So again, I’m letting the user know, hey, there’s information. This is late, but I also give them a way to act on it. You can inject icons or buttons right into the grid. So I didn’t actually handle the click event here, but you would handle it in the same way. So let’s suppose that that’s what we want to do. How did we get it into the grid? Wrong form, Sean. Okay. That one sits just to the left of the status. And so for this one, I don’t actually have a data provider because it’s not really data driven. In this case, all I’m doing is attaching that style class data provider. And again, this is a calculation which returns one or more style classes. So if the status is late, then I want the action to be the font awesome phone icon. And I use my handy selector for icon clickable. And that’s how I get that nice mouse over effect. Now this could be, I could return different icons depending on the status with different actions. So it’s really up to you, but here I just say if it’s late, show the phone, otherwise, don’t show it. I could also make some action happen if back in my event handler here, if the column data provider was, well, I guess it would be none. You can also get the ID. That’s really probably the best way to do it. If the ID was that action one, then I could look at the status and do the action, but you could just handle that all in the on sale click event. Anyway, the point is to show you different ways to style the grids. So that is my demo. Thank you for watching. Let’s, I’m a bit over time, but let’s get to the chats and the Q&A here. Forgive me if I’m a bit slow with this, I usually have one of my colleagues helping. There was one question in the chat panel that says, how do you stack font awesome icons in Servoy? There is a way to do that with the stacking modifier. I’ve actually never done it in Servoy, but I think Google Font Awesome stack. You can get some, you can get some examples of how to do stacked icons. Bit tricky because we’re doing this in one label. If you did a label on top of a label, not quite sure you could do it with transparent background. So we’ll have to look into that to do that. So I’m not sure if the stack modifier in font awesome will work. Here’s the documentation for the other modifiers that I showed you by the way. You can see these are the nice spinning ones here with the FHSPN modifier. You can show them and listen things, but some of these aren’t really applicable. They’re more for web pages because Servoy already has containers that do that stuff. Take some other questions here. Yeah, there’s a questions and a chat panel. So ideally you guys should put these in the questions panel. The quick fix for the Servoy font awesome component doesn’t automatically carry over all the font awesome style classes. This is going to be fixed. What it carries over is the free ones from the version that it loads. And so if you are looking for, as I showed you, if you go into the if you just go to the font awesome gallery and you’re searching for an icon and you find something like this acorn, well these are pro. If you click the filter here for free, this is what will ship. And then if you suppose I find this icon here and then I put it in Servoy and it doesn’t show up, it’s probably been added since the version that we loaded. And the last version that we loaded is available. You don’t really see it on, well it’s named for, I shouldn’t say you don’t see it because you do see it. If you look at the package manager and you look at the font awesome service, it shows 5.72. This version will always line up with the version of font awesome that it loads. Now font awesome is on 5.12 or 13 I forget and there have been some icons added since then. So that’s why you don’t get all the font awesome icons. You also don’t get the pro icons because those cost money. If you want the pro icons you can buy them and it’s pretty easy to inject them into your project as well. But the ones that ship for free are the ones that we ship. And we will, the next Servoy release will update to the latest font awesome. I believe 6 is like a major version bump that they have coming out soon. So maybe by the time we do the next quarterly release will, though 6 will be available and that will be a big jump. Although we could probably update to the latest before then, not have to wait for September. There’s another comment that if you do the quick fix on the deprecated one, you’ll see the problem it converts the component but it doesn’t keep the icon class. It also there’s another problem with that Steve, the guy who noticed this and I filed a case for that. The quick fix has an issue. It does convert the component but also when you try to edit it there’s an issue. So we’ll take a look at the manual way to do that is to place the component with the label. Excuse me, so there is an issue with the quick fix. Okay, I’m not seeing any more questions. So this was pretty long. This was meant to be a short webinar but I hope you guys found it useful for some tips and tricks styling with icons and CSS and grids and things. In two weeks we’ll be back with another webinar and we’ll be announcing the topic for that shortly. You can get the recorded version of this when we post it probably later today. If you want to rewatch anything, again if you have any feedback, questions, comments, abuse, you can post those to the forum thread where we are always announcing these or you can email me at fdevlandatserveway.com and thanks for watching. Bye bye.

Close