Workshop Webclient to TiNG – Sanneke Aleman, Pettrie de Bondt

So we want to make this a nice interactive session. We were a bit worried with bit anxious because well we only have two hours and want to tell everybody so much and I’m known to talk too much so see how it goes and we only create three slides because we did some really really nice animations on the big grant I hope you noticed with a lot of effort in this I don’t know if you’re skating. Ah so let’s get this started. If you want to follow the work show you have to have a Sarah Voie 2023 O6 or later otherwise it’s a bit hard because you have to work with things so if you don’t have it you can start downloading. You’re prepared. We’ll have some introduction talks and then we will go to the code. What are we going to talk today? Just an introduction about ourselves, about companies, then at background or solution which created or something, created for an out of lecture. Some challenges we came along and we overcome most of them table conversions and some life demoing and typing along and interactive building of a demo form and then I’m going to do some talks about CSS and less and show you how we can create a nice looking form with some simple series. Yeah I’m going to introduce Sanna Cat, always lovely Sanna Cat. We know her already for a lot of years it’s really known in the community so really glad we have her in our team. And I’m going to introduce Petri. He is running a software code leader, makes a software for the automotive industry. He has like 1600 live clients so we have some challenges. Yeah a lot of challenges about it. We’re going to talk it in a next session together with a colleague of mine, we’re going to manage all those clients and all those sessions. Yeah just some boring slides thing. I’m over this name I don’t know. Titanium next generation so at least to keep it to thing we internally just call a thing and we’ve got to forget this one and it’s really great. But it really is. I really am glad that I put a lot of effort in it from the circle of your guys to build things because we were a bit behind but they’re going to talk about it later. Ah the slides. Does it already will switch see how that works? Yesterday we had some questions in the audience. Is it going to switch? Yeah one two three. Yeah yeah if you could scan the code like yesterday with the presentation of Ron and I heard it was already asked yesterday but then we can see and we want to know your biggest main solution. Where is it built in? Whether you’re using now? And then an apple and then a lot of the work client. Oh no, and G. Yes. And then we try to put in brackets how old it is or when it was created. Is it a little bit corrected? Yeah. The launch was 20 years ago. 20 years ago. Good one. Oh 20 years ago. Again we see how many votes? 22. Yeah. Encounting. Yeah. Launch mark lines in a sub. No funny work lines. Yeah. Oh no. One question or at a time. Yeah if I do I know. No. Yeah. Thank you thank you for all your votes. The photo. No. I made so many smart clients then Angie was expecting that we were still on red client because we did I think a standard and a couple of the colors in college started with red with the smart clients and then red client was introduced so we switched to that I think about 10 years ago and nine years ago. Yeah. Yeah. And Angie. That’s still a lot of it. Yeah. Thanks. That’s thank you. Thank you. Are you moving to planning to move to team? Soon if we have enough developers this year maybe. And this year is most of the time it’s February March next year everybody knows that. So after a young stop supporting it then you think oh okay we don’t get any big fixes anymore. Don’t know yet. This year okay okay promising. I want your folks. Ah yeah of course yeah. We hope so we hope so now it’s it’s going to take some time with the we think there are a lot of possibilities so yeah it’s really nice. Are we there yet before the deadline okay okay still a lot of people think just to make sure that we have the correct features in the in the smart client apparently and then maybe maybe after quite a few after you know. And then if you there are enough of big clients who are needed then I think you’ll unwell just put in an extra year or something. He’s not here I think so too bad too bad. Doesn’t anybody create a less CSS also or do you think let somebody else do it? It’s so simple I just do it in my dreams. I really really love CSS just the styling just the the extra cherry and the cake. All right CSS now it’s not important we’re creating business applications we have to put the volume into the grids and nice forms and a lot of strange looking buttons. Oh oh oh. Okay. It’s simple. Yeah yeah it’s really simple everybody does it’s it’s also not really coding just tinkering along sometimes it’s really easy and sometimes it’s a bit of a pain to support all the different browsers and brain stuff it is happening on mobile and iPads. Thank you all for participating I’ll make sure to share all the results. Later. Something like this. I did prepare a lot of other questions but it’s the the three-year version of Slido only allows three questions. Some some background already I said that I character did most of the starting of in the smart client just tried some things out and then we went I think to whip clients. Yeah I really sure. Yeah then we did smart clients. Really? And then we went with the abstract program so we got a really nice start with FinCents and a lot of other guys and then I think when we were you starting without the flex. Seven years ago. Also really long time ago and we did some own styling and own layout we got some way to do this the for us we didn’t do this with pin pin did create the layout of out of flex the the color scheme and website but for the layout of the application we got somebody else. What is out of flex? I’m going to really really fast on this one because it’s a little bit boring now we’re really proud to be making the software for the garages in the Netherlands we’re only doing it for the Netherlands right now we have in total more than 1900 customers but there are still some out of flex nine which has also created most of it and it’s in visual fox fox problem. So yeah big round of applause for and our sales and consultants are a daily busy to move them over to out of flex ten that is what we have currently now in in servoite and sometimes it’s really smooth and sometimes they keep complaining because we put the patterns in a different place and they show you to windows desktop and they can do a lot of things with printers and stuff like that so there are some challenges and I think we have about 1600 customers currently on servoite and we’ll talk in the next session about it how we’re managing it it’s one large database all multi-tenant we don’t have really sensitive information and we’re selling it to a lot of smaller MCAB customers small businesses from one person shops to I think about 50 years or biggest clients so we put it in a one big environment we’re using the API with the philosophy of course really glad with that and yeah that’s about it so go to yeah I go to show how it’s currently looking we’ve got client oh yeah if I think it’s capable otherwise it’s yeah yeah okay that’s not here this is on the front end yeah you’re sure you want to show it on development they keep rebooting it and we have a library mood so let’s show the work writers so this menu for example is all made by labels because we didn’t have all the options in the web client and you see it’s a bit lagging and stuff like that so that’s what we have been trying to fix in the thing a default table there they are yeah this is all yes you’re still correct this moment run yeah so one of things for example are we gonna fix you see is not simple yeah in the order lines within the if you are there I know oh yeah we can upload so yeah good preparation now you can open up the other here so this is all right you can go to a go to go to go to go to go to go to go to go to go to go to go you see we have a lot of links that you can move from one program to another and we all made them with the app script so that’s a bit of a challenge in the thing because you’re not allowed to do you have script endings anymore we have pictures here so that’s good so pictures are quite important because they want to sell the car so they want to push this to a website to sell and they also need to reorder so in the web client we did a lot of coding and yeah the script in the browser to get this that can drag and drop and it’s still kind of ugly and not working too well so that’s one thing we want to fix what else should we show yeah our grids are no sort but we could make them shortable but we didn’t so that’s another thing we really wanted to fix that we can sort all the grids yeah we want to make it faster and have a lot more interaction in the tables and sorting of course we do want to keep it simple because that’s one of our key features that everything looks really simple so a lot of logic behind it but the basic interface is really simple but it’s on top you’ve one large grid and then what you saw the details are just steps and the first one is the general one and the last one are the most details so it’s really a logic flow in every form we have let’s go back to the page so that’s what we had what we have today and my optimistic timeline is that we will be ready in December so we can get here it says no no no my December is somewhere February much goodbye yes the Y yes thank you I gave it already told a little bit about it really really love all the things you can do with our gateway to the sorting the grouping the parent child hierarchy I also want to do some some drag and drop which we’re still internally discussing about how we go to do that better theming better responsiveness for afterloading so a lot of plus us to use really the argue grid but if you’re using ng you can already use it I think but they’re using their client what you said hierarchy in styles because now we have a really really really large style sheet and it’s it’s a method really difficult to change something and make sure that it doesn’t break in some other way or an other form and naming convention is not that there can be a lot of cleanup and we just postponed it it said okay we’re just adding one line of extra CSS we’ll we’ll see about three factoring it later and you can view of course use variables in the CSS with less really powerful really strong just to make sure that you have a consistent look and feel and also just to make sure that if you want to change some color for some style you can do it really fast or show that later and in the in the future we also want to support a responsive screens you don’t focus on it too much right now because otherwise you get a lot of scope creep when you’re when you’re moving from where client to team and a bit a big project you think ah we can make this better we can this make this nice we can add a few features here and then the project gets a little bit too big so try to just move to think and then expand on all the new possibilities and we want to have some survey support because we’re really with anxious to see that the support is ending and there are sometimes some annoying works and we want to make sure that we get the full support of seroy and some continuation the problems yeah that’s the only part of people that are in the web client that know what this is if you have dialogues that you have to start a continuation and it breaks and you want to debug it it’s even worse so we want to get rid of that this were the challenges we particularly have we have a lot of tables we have to convert we use a lot of JavaScript links that don’t work anymore so we had to come up with something else because all the navigating we just did by links because we had one script that could create a link for everything you just had to give some parameters and you got a link so we had to change that we used a lot of web client details to make nice had HTML stuff so we had to get that out so if you if you have just simple forms they are mostly just going over but if you do extra stuff you have problems we had fake tapinals to make them nicer and we want to stop doing it so we had like a HTML buffed the tapinals to control the taps and now you can see as if them so good we don’t we didn’t want to do that anymore we had a really nice notification system I think a lot of people did this in the main form put the extra creepy tap that comes up sometimes so we want to get rid of that with a component you already saw the weird dragon drop we made we want to have a normal dragon drop and this CSS we want to rewrite that so that’s what we had the general challenges so the table unless you the smart and web all have to convert that and if you are in smart you have the print of course you can use your local devices and your local drives later today in the lightning talks you as well tell a bit about how you can connect again in the electron to your local drives and devices and print again so you’re interested yeah if you need that for your solutions we move everything to PDF and then said well just make sure that you can print your PDFs in a really easy and simple way but yeah it would be nice to in the future also I have some electron client to support that proof of concept yes yes we we had a proof of well battery said nothing is going to work so we can never go we have so many forms now we’re going to look to other solutions don’t you certify anymore it’s a something really mad at me said no no no no thing is the future so let me show this to you and like the detailed forms most of it just works without doing anything so when I showed him that I got a bit of a face on that we will show some detailed forms we didn’t do anything to show you later in the demo yeah we do do have to do any work on that yeah so and also how to start with thing if you don’t know that yet we’re moved to demo again all right so if you want to move to if you are on smart or web you have to say that your solution is now an NG client so change your solution type get everybody your seed is okay and also in the preferences there is something yeah it stays NG but in the preferences of surfway you can say that your your NG is now thing so that’s this checkbox and also that your designer is now a titanium so if you want you can also design in the old designer might work a bit better but it is leave it on here everybody wants to see words okay so yeah those two checkboxes you can also switch quite easy between the two the the NG and the thing because it’s one letter difference in URL and you can run both of them yeah run the random side with your idea yeah done all right so this is yeah I’m going to show a form that we did not want to work too far so I think you can start it yeah we did have to get used to get the forms need to be built in in English or sometimes it takes a while but when it’s running it’s really fast um all right so I think this one for example so this one we did because it’s a grid but then if you go to the details like this we didn’t do yeah we did CSS but we didn’t do anything to the fields or anything and it just works like it did work before so that’s a lot of things you don’t have to change anything too and here there are links they probably don’t work because of the average grid problem to give you an idea the biggest problem in our case was just all the navigation because we created a lot of own logic behind it and which you said a lot of links behind it so that was the main part we just had to fix first before we could do the rest um so you see this is a screen that’s already done this screen is not done so this is what it could do if you just go from what lines to NT and you think like this is never going to work but later we’ll let you see how easy it is to convert that first the back to our slideshow yeah so I know a lot of you guys are using the paid version of font also and the package that you own is sending with the client is not the paid version but free version so you have to do a bit of work to get paid version working so that’s how you do it you first go to the component and you download the free component so um in the new thing you have a server package manager now and if you right click on it you get this screen and here you can download all kinds of extra components and services and layouts etc and one of the things is the it’s the font awesome so you can download by hitting the plus button and then you get the free version and then no sorry and then if you want to have the paid version you go to your font awesome website and you download the files that it has yeah we have to login and then you get the set set set for the download with the pro version you download those and then you import those files into your media so I’ll show it to it so for you so in our media here modules and then in the core because we want to use it anyway we have a seat and then we have font awesome and then we have just all those files of font awesome in here so you do just pick up the whole folder and you drop it in here also the license and then you need to do one more action and that’s in your style sheet you reference your file so you put this part you can just only do the link so who one says it’s even easier you can also just link to the latest version and then you don’t have it on your own server but you link directly to a font awesome server so that’s also an option yeah we did that before with the five point but then we had to release some performance issues because the site or the download site of font awesome was really slow and sometimes using even in the bugging so we decided to move it on our own servers because then the rest of a solution doesn’t work on that we can work or otherwise it does always work so that’s why we move to that and we also just wanted to make sure but sometimes they do some really strange breaking changes in five day rename some icons so then we got the wrong icons everywhere so then we decided okay we’re going to put it in the solution we know it’s working it’s working on all all our environments and we always have to accept same version so that’s why we move it into the solution so the other problem with downloading the directory is they impose download limits so if you have a huge number of clients every time someone starts it downloads it and then you’ll hit you download it they didn’t have a limit on that before but they do have it now that’s correct you you see it if then you log in on the probe page you see okay you already have so many gigs of your allowed download so that again also be effective to have it on your own the server yeah yeah thank you good so that is to get font awesome pro version working then the converting of the table in the list forms because if you’re from smart or web you all have to do this there is a script from server to convert I think you’re made it or maybe someone else but there is a website that explains it a bit how it works and how you can set it up so it’s you will get this PowerPoint so you can copy yeah yeah we’ll make sure that you get the PowerPoint yet and then the solution itself is on GitHub so they made a few forms and a few functions that you can use and well this is of course just general but maybe you have that in the if you click on the first field of a grade you go to a certain details screen or something you have some personal stuff so my tip is to make it your personal before you start comforting so it’s perfectly for you yeah we did it also you’re seeing the work done that in acting to make it really perfect and then we started converting if you have questions just ask your question so we’ll give a short demo on how to do that how it really works so I have this form time sheets this is the form it’s a table a lock table form and I’ll copy the name and we have seen that before it didn’t look good it’s also a tip don’t look at the form before you convert it because there’s something with the memory then so you start the fresh clients yes we just made a bit in here so it’s easier to exit so like you’ve seen here we see all the fields and stuff and now if I enter this here and I say convert so this is all available on the link of I think you will it converts form it will show it to you doesn’t look that good but it will look good so I go back here and I see here now that it’s become a grid without me doing anything so easy yeah now this really saves a lot of time but what’s not already tell just seeing it did create some custom code for us because we have some special links and you have some other details and you just do this over and over again until you have it perfect and then you convert a lot of those things at once so every field that had an on action on it it also looks at that and it will because fields don’t have on actions anymore in the grid but you have one function on click of the whole grid and you will just get which field is clicked so it works a bit different and then the script will just look for each field and see what on action was connected to it and make it like this and what we did is we made one general function that we always call default and in here we have navigation like to our order store invoice to our contracts because we have that all over the program so we don’t want to recreate that code so that’s also a tip to have a parent function do we need to tell more about this I’m thinking but you want to tell oh yeah there’s one more thing we did well mostly you’re seeing that is that we made also a all sort this is not default that goes to a super on-site and because we really want to start having good sorts I will show you one more thing I have a title header here and the design is not totally nice so I move that to a normal header are you doing it really quick you know every kind of body can follow this yeah but this is just this is not really something people might need to do with the coming so if I look at it now you see if I have data that it looks good like a grid again and the normal columns also start sorting again but like what is the calculation I think this is a calculation that sort does not really work you see that and then we made something that it prints out like this is a calculated field and then we have to implement our shelf a sort because we can of course let it sort on a different column so then I would go in here and I would tell if you come into this field please sort it on and I think we have a sort field for that felt this is a string inside which is like this some life going in action yeah it’s boring and oh I was correct so it didn’t need to do that okay so now I fixed this sort should be sorting or nice so that’s how you can make it your own make that quite faster so here you also see we have a lot of links and those links well they can display nicely that’s not the problem if I go here and I say this order fields which one of this one? why not this is now HTML it will display correct not refresh not refresh you’re still taking a lot of thinking what? yeah I think I probably missed it’s sometimes swapping between two tabs and that’s not good so I really have to close it um this one data you see it looks good but because this is you have script it will just go to error so that we have to fix them that’s about moving the tables um yes here you can download a sample we set up where we’re going a real work with so after a break we’re going to work with the visty sample so please download it I also have you also put the link in the description of the session so if you go to the you can copy it from there you can use the QR code but then you download it on your on your file so I don’t know how handy that is with the visty is the nice gaming and then I think it’s break time yeah we have a 50 minute break and then we uh continue we’ll be back before so everyone back everybody’s still still awake it’s time what did yes yeah welcome well yeah just throw them back if you’re if you’re annoyed with just throw them back welcome welcome I do hope you had a good first hour everybody’s still awake everybody have some some coffee we’re going to build something in team so I hope everybody could download the solution no questions about it okay really great um like like there was a session yesterday from from young a video also a lot of drawing and we use a sketch and with the sonic a show uh we had a nice photo viewer for the the selling of the cars so I did some drawing and said okay we going to make it a lot nicer and a lot cleaner and more interactive so I drew this as a mock up and this is what we’re going to build today uh because there are kind of a lot of things we can touch them the dragon drop uh it worked with components um control l I don’t know if everyone knows this function is there a way really hit it so really powerful um HTML and uh choose us so let’s start yeah we’ll show we’ll show you do know right okay um well the control might be nicer to let me see in the big solution yeah then we’ll see then we’ll show a high uh really sure so yeah if you have a really big solution with a lot of forms you could be a bit confused of how your form was called again so um yeah how can you get this form your developer so you can just click in any element and then use control l or apple l yeah now also control yeah and then you go to your developer and it’s opened so you don’t have to search for it yeah it really helps because uh if your team is a little bit bigger or an older solution it’s back in the other thing yeah so that’s really good oh now move to the solution that you all could have in your developers now yeah can everybody see the screen screen the resolution correct and you read it so uh we have this empty form pictures and we’re going to use some nice components i don’t know if everyone has this already or that you have you might have to go to the package manager to install um yeah wait components uh the extra components and the advanced renderers you might have them if you see them here like this oh it’s commonly used probably don’t have that so we’ll first uh drop the crucial and top so this is where we will show a kind of big picture of the item you upload and then we’ll drop a custom list below that’s where we have some navigation through our pictures and where we also will do a drag and drop it to control the order so put that here and then we’ll take another one that’s the file upload so we can upload files and put that here so something like this uh can everyone follow that a bit or is it too fast i think you can put in the grid sizes and stuff this one yeah i didn’t try that but if it doesn’t work my case for yeah but that stuff that you all wants to know yeah we’re sure one so make a case you don’t have the packages then you need to show sure i think they are installed as quickly right yeah yeah they should be installed with the solution yeah yeah yeah no okay so the renderers we need straight uh the extra not totally sure about bootstrap extra but take it anyway should be in the solution i think and then yeah and then it’s sure you need to yeah yeah yeah yeah yeah yeah yeah yeah yeah yeah yeah yeah yeah yeah yeah yeah okay so that’s the problem yeah checking it falling i can use the question from the audience it takes some time to install titanium in the chicks and now i don’t think there’s a solution sometimes takes quite a time yeah yeah yeah yeah yeah but but we still have one issue out with uh only there’s one time right it should do but it doesn’t exactly yes theoretically now we’ll be each of times you touch a component and run again yeah each time you launch develop eventually it doesn’t also get uh not all the time wait so it’s not all the time yeah yeah yeah yeah it seems to do it a bit too often yeah yeah so make cases we also already complain a bit so if everyone starts complaining okay oh okay oh okay oh okay yeah i’m quite a few yeah i’m going to hit it back so he’s just he’s hiding yeah so everyone has this and also put up those oh yeah are you not going to? okay yeah maybe it maybe it’s too fast to then you can just watch at the end you will get the working example so don’t tell it don’t tell it but if you want you can follow follow follow all right because otherwise we won’t have anything done uh the end all right so um the the file upload i already made because otherwise it was too much so we just have to connect it to the on file upload method uh then we have this one we will make an on click method so every time somebody clicks on one of the items um we will fire that and the on sort end is also already made because it’s kind of a bit of code so those three and then this one and then here we also have on side clicks and i think that already exists too yeah so there is a really nice new component called custom list and it will you can give it a found set or a data set and it will render for each item and you can give it your own HTML so you can make whatever you want basically and that’s what we’re going to do it’s really powerful for a lot of a lot of use cases to create your own HTML style at yourself all right um so first we’ll go in control shift jets to move to the code and we’ll make a function called um yeah first the one that will give the data function sets images data so we want to provide all the data the component needs to show all the images that we have uploaded in our system so it will work with array of data so make an array and oh sorry and we’ll go through our found set and found set it size it record and then we’ll make an entry and what we put in here will get in our HTML to make something nice of it so if you want nice names in your HTML you give it nice names here like we want the ID you might need that we want a name we want to index and the image of course because we’re going to show our images so the ID is just records dots picture ID the name be the sorry records dots picture name what did I call it phone name and then the index is just the index here so I know I have the same index as the found set if I do something with it and then the image URL is a bit complicated because we’re gonna create a base image data image and g and and I think this right base 64 comma I hope I do this right not in life coding we should show scamp utils I made some camp utils and code and then the image records dots picture media so are you controlling that I don’t do it yeah sure all right so here we give all the information we want to use in the component and entry entry entry and then of course we have to give it to the component this is the component I will just call it the list and this one just so I’ll say elements custom list I still the old name say first custom list what is it set entries and then those are my entries that’s the array oh so I have to push it here of course entries dot push and I’ll push the entry so that’s to set my data if you have simple data you can also use the so this is the custom list you also have a fancy place where you can just choose fields but because I want to do something advanced with the picture I need to use the custom one where you can control all of it and then we’ll start on our renderer so this is the HTML part where we’ll make something of it yeah the audience getting older I do I see the name control plus I thought but when is it plus oh no I don’t want that one yeah yes okay but she needs work how do we make the phone bigger yeah yeah well preferences uh and then text somewhere some general incorrect yeah but edits so we’re all Ted now sixty 18? 18. Oh. Otherwise it’s not workable is it? Oh, what does it say? Not made of work. Why do I say that? Yeah, really? Yeah, it didn’t work, me. I think I also used it before. Oh, yeah. Thank you, thank you. Thanks. Yeah. Okay, better. And now the next time I start, I’m very proud of it. All right. So then we start on the render. Render. Entry. That’s to be precise because I already refer it in a few of the other functions. So we will get the entry. And we know how the entry looks like because we defined it as self. So that’s really nice. And then we make a template. And this is just HTML so you can do whatever you like there. Yeah. It’s probably a lot with star classes. We have some star classes at least. Item. It’s going to take too long. Yeah. I will have somewhere to code. Yeah, but also the solution. The final code we will supply it in. Render entry. This is it. So we just will have a container with the tooltip. And then header just for the style. We’ll have an icon to grip it because we want to do drag and drop. And we’ll have an icon to delete a picture. And we will show the picture. Oh, now everyone has to type over. It’s a nice. Maybe you can do this part and then the rest you will get lazy. I don’t have this code. I do have this code. I’ll try to do that at any time. Yes. Everyone on this code. Nope. Do you know how to get on it? What group it is? It’s enough. I can start my discord. I can start my discord. If you’re nice to meet on the tooltip, do it. I’ll show the input. This code. Now we have the server way. The bar coding questions. You see it’s very serious. No, no, no. No, no, no. No, no, no. No, no, no. There, one we just did this one. Oh, right. a They’re nice. You dealing with something you White Thank everybody here. Yes, question. Is this a page of the building in the light box? Yeah. Oh, we’re using light box also. A part of that, a part of being able to write a project. What other thoughts are in doing it? Yeah, we want to display it in our own way. We want to have a nice delete and also in an other part between the don’t show here. We want to favorite things. We want to have the short order and we also use the skills pictures which we do when the user met loud. We normally scale the picture in three formats. So we show the small picture and the larger picture on top and then you really click on it. So not a good one. So then we show the original or the downsized one. So you have a lot more flexibility in doing those things if you build it. Yeah. Yeah. I think this. We are using the light box. We had come from a lot of pictures. Yeah. Yeah. I don’t know if everybody can follow but why did we build our own solution for this? Because we want to have a lot more flexibility and a lot of styling. And also we didn’t like some of some items but individuals show shortly. And we also do our own resizing normally. We didn’t put this in this demo but when the user uploads the files, we resize them. Otherwise they get really slow if you want to show them in the grid or in other places. All right. So this is nice the entry and this is how to set the data. But also important is the function in all show to give this render function to the custom list. And this code is coming from a sample of server itself. I just put it in here. It does something like making the function ready for the renderer. And you have to set the renderer also of course on the component. So I have to go ahead and look at this in. Do I? Let’s say OK, probably. So that part is also important. I think something will already work now. So I have pictures. I will drop. Let me delete pictures I have. So we have a clean sample like you have. Yeah. Used a nice SQL plugin. I don’t know if people know this. Do I have SQL plugin in my server? So I can’t look at this. We’re also. Yeah, it’s just delete. From pictures, not delete stars, always start. Run all the pictures are gone. So I have the same situation as you guys have. The drop window and the other things are not really seen. And then I have some pictures of course. Good question. Where did I put them? So I can. So I have some nice pictures. And I can just drop them in here. This is a nice component of SharePoint. And they will be uploaded. And you see this part in the bottom is still really big. I wanted to make it nice and styled. But I didn’t do any styling yet. So that’s. Did not happen. Did you want to have that build all the files? Ah, so it’s just one file. That’s an option. So if you go back to this nice component, there is an option. Multiple files. Multiple file uploads. I didn’t put it on that. So it will just do like one file. So this code can just be ready for one file, not for multiple. And it will just call that code for each file. So that’s quite nice. You don’t have to really take care of the multi files. So I’ll try it again. Now I already have one. All right, don’t. So we’ll drop them again. And now I have a lot of pictures. But this is not really workable. But you already see the rest of the HTML. You see the icons I put in. And this one is also not working because I did not say that it should just look at the found set. So here you can say what is the component working with and can just be the form found set. Then you open that and then you choose the image. You can also choose a caption, but I don’t really like design yet. I’ll just not use it. And then we have our pictures also up here. And I think, yeah, we also have this one. If you click on it, this is the light box. So we have all kinds of components. And I think we can move to this CSS now. Now we have to do one more thing. So we made the empty on click method. And I’m going to tell something about the data targets. So in the, in the thing, you can give something like a data target. And there you can send some information with. So now we only have one button, but it could be that you have 10 buttons. And then you don’t know where the user has clicked. So you give it a data target and then you know where he clicked. And in the on click, you will get the data target. So if we say here if this data target is the delete button, then we want to delete the data record. And here again, we get the whole entry. So we know we don’t have to send any information because we already have all the information in the entry. So we can say the found set index, let’s select index, should be the index of the entry. So we know we’re going to delete the right record. And then I think I have a function for the delete, delete picture. And this will just say nicely, do you want to delete? So that’s how you can work the data target. I can already show that, but it will be nicer if we have some CSS with it. So here if I click it, we’ll get this, yes, and then we’ll remove it. That’s one thing I didn’t mention, but in my delete picture, I also have a function that sets the data again. So I’m sure I’m looking at the latest data. All right. Let’s move back to the point. Yeah. Yeah, for not only short break. Yeah, I think we can, yeah, we have. I think maybe 10. Yeah, maybe 10 minutes or worse for a bit. I’ll be talking too long. Yeah, 10 minutes and then after that, we’ll start making it nice with the CSS. And then show the total solution which you can download also. All right. In sir, we can use less instant extension or a framework around CSS. And with that, you can do a lot of nice things. So you don’t have to repeat all your CSS code, have some variables like a real coding. And they’re always starting to be in that. And it’s, oh, why? Thanks for 10 a month. Yeah. Better? Yeah. So you can do a lot of nice things in less. Go to the website. You have some explanation of some really nice features like the nested coding. So don’t have to repeat yourself and create some nice looking CSS variables. And the object start with the add sign. So you can use the main color. You can specify it at one place. And also support that a nice interface. And then use it throughout your application. So you have the same consistent look and feel. You can use this for college, which you can use it for spacing and sizes. You can use it for a lot of other things. And you can, of course, easily import other CSS styles or less styles like the bootstrap one. This is the theme. I really recommend to use it. And you can also extend it, but it’s not fisibly shown here really nice. So that’s one thing we have on the request for. So you can really extend it because we want to have some extra colors or some other sizing. But I’ll show this live in a second. And then you have, of course, all the less codes. So here you have the servo it’s seen. And I don’t know if you can. I’ll show where it’s hidden. You can specify and alter all the defaults. You see here with the blue color. I’ve changed that one from the default. And then you can see all the sections. And there are a lot of already a lot of in here. And all over it and once you can see here, you can see only the ones you changed. And then you can check it and see what the default was. And what the changed color was. So that’s really handy to see if you’re doing a nice consistent CSS. And then you can expand it just by adding the enter share. Yes, do you have a question? What did you apply? What did you open the little x5? I will look. Yeah. I always have trouble finding it. So I always search for meaning color. And then you can… Yeah, you can… Yes, this one. Starn is… Starn is… Starn is… Yeah. You’ll tell to your right. Yeah, what’s helping you control the word… I know that you can click somewhere and open. Yeah, it’s just in the media on the file. So in the media you see the files and then you can just click there. Here. You can just click there. You can just share with… Oh yeah. Oh yeah. The general other word. And this one. Then we’re open also this file. So in the media they are saved and you can just click on the file. Yeah, so what’s that? So our step. And here… Yeah, we just show it. So it’s… Yeah, we did… Look at that. Yeah. But it’s all everywhere. Yeah, that’s right. That’s right. Yeah. This one. Yeah. Here I already show it. It is the source one. And if you edit the… You’ll have them. And they’ll add some ones. They show you. Yeah, one is here. Yeah. Yeah. Yeah. Yeah. That’s right. Yeah. Yeah. Yeah. No, this will be four, that’s right. Yeah. That’s right. That’s right. That’s right. That’s right. I mean, all you want. Okay, great. Yeah. Most of the things I changed are in the first section, the general properties. And then a lot of here in the brand color properties, specify all the out of flex colors and things like that. And really use that one a lot. But you can see you can just specify a simple value. But these ones are also really powerful. Just have your brand primary and then set dark and or light and it. If you want to highlight some things in the AG Crit, also just do it for the selections or the highlights. Just do a dark and off the color you already have. And then when you change the main color, it just stays consistent. So that’s really powerful and handy. Oh, the question. The difference between Angie and Angie, two less. Yeah. So if you want to run both, you can have both the style sheets. But the titanium client will pick up the two less style sheet. Yeah. You can see it. I don’t know if you can see it here. It has a little bit of different underscore Angie two and that’s what the one for for the thing. And I think the other one is just Angie. Yeah. So that’s a good question. Another question. Yeah. Speaking of age you can I find that when you work this. And now not here in the theme editor. And we didn’t put in this demo, but I did a lot of custom styling for the AG Crit to look nicer and have a little bit of different spacing because the default Alpine I think theme is really large and big. So I get a lot of different styling to make it a little bit compact. You’re making notes? Because I mean, I’m a great product. But that’s the modern look at the original. Yeah. I also know any of why. No, I removed a lot of the workspace related. I made it a lot more title because we have a business application and you just want to see a lot of data. Yeah. Yeah. But we can share. And that’s a really nice thing when we are here. We want to share a lot of these things. We’re coming from we don’t mind sharing. We don’t mind sharing some parts because not all of our code, but some parts about so trying to do a little session later on maybe get together a little bit more often. So learn from you guys and see what you all made because I think everybody made some really, really nice samples, some really creative solutions for problems so we can all learn from that. So. We won’t do any of the same stuff. Yeah. Yeah. Yeah. Exactly. Then we have an MTCSS and I don’t know how much time we still have not that much. So a bit quicker. Yeah. So. I’ll just copy and paste a lot of stuff and then I’ll try to explain some of some things we talked about before. Importing like the default theme. So that’s really easy. And then you everybody knows this. I think most people just simple classes you specify with a dog and then change all the the part around it. I’ll explain the other ones later on and here you see the nesting. So we made a catalog gallery with her to show and also we’re going to show him’s gallery, but they share a lot of the code. So this is the share code also nested. So you have here the base class and then the list item and then in there the header and some other nice stuff. But then there were some specific so I specified them before this one. So they will get references of the operation. So how does it look when I say this and go to your browser and see. I think you should start again from so far. Yeah, you think. Yeah. So Petri is not a cell point. You found a person. No, no. So. But you didn’t think we are going to make nice uses. So you want to control that. Really make sure. So you already see a lot of difference. Ah, we didn’t put the class on. This is still yeah. Yeah. Yeah. So we have to go back to a picture and I think on here we have a class. Yeah. Right. Yeah. Do you know the class? I think it’s called bit one. Each gallery. Yeah. Yeah. Oh, you’re here. You see here. Yeah. I’ll just say it and you see how it’s coming along. Yeah, there’s also another one active on the American Village. Yeah. Yeah. So why it isn’t check if it’s already on there. Sometimes you need to refresh. Sometimes you need to restart. So it’s not on there yet. Let’s restart it again. Yeah, but also you need to select your class active. Where was it? Yeah. There. Yeah. Yeah. And that’s the way we try to put some better CSS, just the page one be specified what it is. And then the rest of the elements we try to just say what kind this is. This is not image gallery active because it’s already in the hierarchy like this. So we see it started. If it’s now picking up all the CSS. Yeah. And it already looks a lot different. You see it’s a normally we resize this before and we want to keep the demo a little bit short. So you have a nice gallery here. When you hover over it, you see all the extra information instead of all the information at once. So when you have it like this, it’s really nice and clean. We also did a lot of different styling over here because the nice lightbox has really, really nice and clean styling. And we also want to have the same styling over here. But I don’t know if you remember the arrows and the does really different. So I didn’t have the same look and feel. And we really find it important in our application. So all the logic has to be the same, but also all the styling has to be the same. So we did some over eyes for that. And those are here on top, which I should keep earlier. And this is for the carousel and to make sure the carousel has the same arrows. So the same look and feel. And we did just an inline image. And it looks really, really fast. If it’s our small images like the arrows we had in the gallery. And I just got the arrows out of the lightbox and everything here. So it really looks the same. And we did the same thing for the does. So instead of the small squares, these are now like dots like more like an application on your phone. So it has a nice look and feel. And especially just to emphasize that it has the same look and feel as this one. So it’s pretty easy to do, but also makes it a lot more like one solution. We also use for the box for the styling here. You see we use the flex. Not going to explain everything about flex, but that’s a really newer way of styling it in the use dips. And then specify a lot of parameters for that. It flex styling is a lot more easier to use and as it will involve more power. So it gets more. Yeah, because normally a list only goes down of course, but we want it to go. Yeah, sorry. So that’s why we use flex. Yeah, thank you, thank you. I think the sorting we didn’t. Oh, yeah. And we have to enable it still. Ah, I thought about it. Yeah, so in here there is a property enable sorting. Yeah. And dragging. Yeah, and then another thing. Oh. Yeah. Yeah. And I’m not really a server developer, but this really and knowledge of my just a feature request, because I sometimes want to just look at the parameters and click the ROMLE and then the tool becomes false. It’s really annoying. Just make it to drop down or something like that. Don’t I just looking at this? No, that’s not funny. We have to get if we make something that’s just you get that. That’s totally good night. And especially the renderer, sometimes. I have to restart it. Yeah, you have to restart it, because if you change some things for the renderer, it doesn’t pick it up. So this is a very in-drop work now? Yes. So you see this is a lot nicer as we had, because you see it moving right away. I think you can say that you already see it where it is. Yeah. One of the properties. Yeah, that’s also really nice. See what is it? OK, so what properties? OK. I’m a few folks, but what’s there? Oh. Yeah. Maybe we just show the complete one. OK. OK. OK. OK. What is this? Bill Habiner. OK. OK. OK. OK. OK. OK. OK. Yeah, that’s really cool. Yeah, you see it already in the new place, so that makes it a lot easier for our clients to see how to put the picture from the right place. And you see it real loud, so all the different components when you click on it, it doesn’t have, we didn’t add that also. Normally, when you click on this, it goes extra. Yeah. That’s, you know, where it was. And the off-click. Yeah, on the on-click, and it was already there. Yeah, but not the photo. It’s already the lead. It is. Oh, yeah, you can put it there. Yeah. It’s the right. So I think this should fix it. Oh, it is already refreshed. Yeah, it was? Yeah, you don’t need to know. And it doesn’t work, I think, because there’s also a property on this thing that you say followed the found set, or something. Where is it? Yeah. Yeah. Yeah, it’s too down. It’s too down. Yeah, yeah, yeah. Yeah. I think that one is needed. And then you probably need to start. Yeah. Yeah. Yeah. It’s not working. Yeah. Yeah. Yeah. Yeah. We’ll sort it out. Otherwise, we’ll running out of time. Also, we added this nice delete button. Sonica already shouted right now. We always show it when you move or over it. And at least the last one, I want to do a show. It’s over here. Well, it’s CSF for a delete. Yeah. Yeah. Yeah. Yeah. So when you move over this, the color on Hoover, and then if you put an impression in front of it, it is on the same level as the one on top. So the Hoover is on the list item, and then we check if it’s on the track or the delete bar, there’s another function out in the favorite. And then we just display it instead of don’t display it. So that’s the way we do this. And also, what I talked about before, if you want to have the background color slightly different color as the main color. And we had it on white. And then you see when you move it, you get a lot of different colors. And you could, of course, do some extra styling here for the header. Make sure it keeps it within the same thing. We also added a little icon here, drag icon. So you can do a lot of nice things with the styling too. Make it more user-friendly. And I like to just show it as basic as possible and only show a lot of buttons when you really Hoover over it and see what you can do. Also change the cursor. So a lot of nice touches you can do with the CSS. We also want in the grids that you only see the buttons when you Hoover, but we are still happy. You have future requests. Yes. But then… Custom seller and the rest. In our grids, also the delete and the ad that will only appear if you Hoover row. It’s cleaner and you can just look at the data if you want to see the data. Yeah. So I wanted to tell a lot more about CSS, but we’re running a little bit out of time. So you can see it all in. So what I said before, we were not thinking we could fill to our… But easily. So that was… So we also had some bonus content, but just a conclusion to make sure that we’re finishing this presentation. Cleaner and less code, because when we are revisiting all the forms in the grids and all the code. We just also optimised a little bit and saw that we had some duplicate code. So that’s also a benefit, but also can be difficult because you have some scope creeping in trade, a lot of new other things. And the same especially applies to an or solution with the CSS. It was really large. A lot of different people worked on it, so the name was not consistent. A lot of duplicate code there because some people are… We don’t have this yet. A lot of strange naming conventions because normally, unless you separate the words with the minus. So we try to use that. And of course, the variables are really, really powerful. So we don’t use it everywhere yet. But for the spacing, you can use it for the colors, for the font size. You can use it for a lot of things to make it consistent in all your forms. Yes, Robert. You’re in luck. You still have 30 minutes. You’re still sorry, minutes. Oh, okay. I thought it was up to 12. Oh, okay. Okay. And we can show you a little bit more. Sorry, sorry. I was so focused on the 12 o’clock. And of course, 80 quits, then we can show a little bit what we did about the styling for 80 quits to make it for our case nicer. Custom regular. You showed a lot already. But that’s really, really handy to use a phone phone. Awesome. Really, you want to move the phone. Awesome. We didn’t do that yet. I don’t know what the difficulties are with that. Or we didn’t have time yet. No, the problem might be that I can swipe right because you have a new name. Yeah. That’s going to be a problem. Yeah. A lot of things like the times that the square, they now call it X something. So we have to change that. And also what we saw now, the client seems a lot faster, especially if the grease, the 80 creating is a lot more efficient. And a lot of stuff now happens on the client side. So that helps a lot with the solution. And that’s also with the next bullet point. So we have the complete solution where everything is in all the code. It’s in there. Everything is working. You can download it here. And then I’ll put it onto the discord. So you can download it. Yeah. Yeah. Yeah. Yeah. How are you? How are you? How are you? How are you? Not on the phone. Awesome. That’s it. Because what we told you a little bit, we make sure it’s on our own server. You’re like, that’s the phone. I’m having a few questions. You’re just going to tell me. Yeah. You’re going to. Yeah. So that’s the nine version then. Yeah. But it’s 2,000, 23 nine version. Because we are on six. And that’s I think on five still. Yeah. I think if you look here at front, oh, sir. Oh, no. No. Sorry. Sorry. No. OK. The media. Those are not to do with the data. OK. Yes. Yeah. Yeah. I don’t think here. Or maybe I’m going to go out to share that. I just might. Oh, just found awesome. It’s just in. It’s awesome. It’s not like default score. Yeah. I don’t know if everybody can follow. I’m ready. I think it’s important to do a little shift for something. Yeah. But we’re using the pro version. So we have our own files. Yeah. And what we talked about before, we want to make sure that the font awesome is always available. Because we had some problems in the past when the font awesome websites were down, or they were at a limit or on a string scene. And then all our buttons were just blue or red. Are you going to go to front and do a long time? They’re talking at the time. So they need to update a kind of get to their… No. No. We put the license file on some like a shout-out. So the rest already here in the nose, it’s just the earlier. Yeah. Two things with the phone call. Some you definitely don’t need to install the servo package manager. Yeah, that’s for NG. It’s a piece. Oh, OK. And secondly, if you want to move to six, there are some health profiles that will allow you to use the names from the phone call. The only old names will still work. Thank you. Thank you. This really handy to know because we have a… We’re looking at a rotation on every class. Yeah. Yeah. You’ve got the wrong run. Google for those in six backwards compatible. We’re going to tell you about the health of our files. So if you want to move from the last one, five to six, to the next one, you can see the status of the phone. There are some extra packages, so you can still use the names that are working in five in the six version. OK. Yeah. Really handy. You know, put it on this card. Yeah. Yeah. Of course. It’s called the… And the… It’s called the… Sorry, I didn’t press enter or what… I don’t know. I showed desk calls like when it walked on the bike. Right. Was it blocks or what… It’s red here, I don’t know. Why? I’m going to say, it’s just coming up blocked. Sorry? It has not been sent. It has not been sent. I’ll try to try to get it. Yeah, something like that. I’ll try it again. So I think we have another… Why is it blocking it? Oh, boy. Sorry. Sorry, you have to be locked. Why is that? I’ll have too much here else. That’s strange. Ah, right. Yeah, that’s why it’s blocking. I also have the long link over here, so maybe it’s blocking. See, if there’s working… Missy, maybe you’re still not left. Oh, I’m a little channelist now. Ah, you’re totally blocked. Yeah, yeah. I’ll try not to be asked too bad. Everybody doesn’t surround it on their phone. We can make sure that it’s… Oh, you can put it up, that’s worse. Yeah, also, but I’ll put it into the… Ah, right, alright. But I’ll make sure I did have the server camp chat here. Yeah, yeah. So we can… And then add a description. You can have the custom machine. Alright, so we have some extra time. We could do two things. One is look at styling of the HE grid. A bit more. And the other thing is make a custom list like we know in the smart client that you have multiple rows. And you really make a form that repeats itself. By show of hands, we want to do the first thing, the HE grid. One, two, three, four, five, six, and the second thing. Oh, oh, oh, oh, oh, oh, oh, oh, oh, oh, oh. More and more hands. So 15 minutes each. Okay, where do we start? You start? Okay. Should we switch places? So how to make a list form like we could before? It’s a bit different now. Not going to make a really nice one because I didn’t prepare this. But just the idea. So what you have now is form components. And you can start a new one. It’s basically the same as a form, but without scripting. So let’s call it components pictures, maybe. Because we have the table. Here you can choose. Well, there is UI. So the first one is not the one. And there you have CSS positioning. I’m never trying to sponsor for components. I’m not going to do it now. So the size here will be really the size of each record in the list. So let’s make it a bit like this maybe. And then we can drop our fields. Yeah, maybe like here. So we could pick up the naive name and maybe the image. Maybe even a sort order. Just data. We’ll put it nicely here. Nothing wrong with this editor. Just me. I didn’t know I didn’t want to go. I’ll just show you. No, it’s usually just to choose its skin. No? No. I’ll just select the whole layer. Yeah, I think there’s some. Yeah. Yeah. Oh boy. Oh, it’s really true. Thanks. Oh, it’s not. Keep on the shift. No. And then it shoots the whole. No, it’s easier. I don’t know what happened to the video. Okay. I’ll start again. It doesn’t work to shake it. It’s really strange. Yeah. It doesn’t. Almost over yet. Three, five, four. So I start again. I clicked first here so they come up there. Set trick. Media, file name, sort of. Okay. Yeah. Oh, I can even. Oh, that was just work. So let’s say we make the image a bit bigger. And we put it here. And then the rest can be there. Beat. Yeah. There could be a slept grid. I’m not sure. So we make something like this. It’s not very advanced. And it’s not. Yeah. Something like this. And then we go and make another form. Or the first form because this was important, of course. So we say we want to picture this. And then, then this part. And then in the side we have form component container. And we want to list. So we choose the list one. And we drop it. And because there is only one form that will comply to this, we only see that one. So we choose that one. Oh, it’s been hard. Ah, it’s been a step again. All right. And now we can make this a bit bigger. And this is a bit bigger so we can see the whole thing. And this part will be repeating. So we put it here. Maybe a bit like this. And then let’s go to the form. I will just make it the first form because I don’t have navigation here. It starts the client. And you see it’s like a list you’d repeat itself. Yeah. Woo! That’s it from there. I’m going to make it as well as you want, of course. All right. You want to move to the Alt-Elex again? Yeah. Yeah. But it’s a problem. And just on the list form container, if you’re using a client to 2036, it’s a huge component. And in 2036, it’s got an internal and it’s got six. You’re going to do it. You have to repeat it. So what Steve is saying is prior to diversion in 2036. That’s six. It’s a page component. And after that, it’s scrolling. And there is also an option to make it a part few. So where? I don’t know where it is. Yeah, it’s a part few. Okay. But now it doesn’t really have to size. So if this was a little more this size, it would also put them next to each other. But yeah, it depends on which put in it. Before 2023, you’ve got six. And it is a page view. It’s a very ugly page view. Oh, the best of the CSIS. But nobody needs to go there when they move. So let’s not do that. Let’s see. Outflakes. Cloud. Yes. I don’t know. I’m not here. Yeah. We’ll switch places again. Let’s see. Let’s see. Let’s stop loading. Then we also have to wait for the building again. Sometimes. Sometimes. We’ll see. This is quite nice today. I think. Yeah. And now, do you think I’m making sure that the it’s open and nice for my most good calls. The orders. My orders. Yeah. Yeah. I think something like it. Our calls order. Something like this one. So this is what Sunika already showed. This is a converted form with the nice 80 grid on it. And then I’ll just go to the media. It’s in the core. Maybe your search actually. Yeah. I’ll do the search. There’s so much easier. Any already. This is the wrong one. That is important. Yeah. And on top, we have a lot more information about the alpine team, which is the current vehicle scene for the AG grid. And then I specified some things in the theme to make it a little bit with compact and with different colors. And like here, like the Hoover, which I told you before, it was a light in 20% of the main color. And you need some hidden stuff. I’ll show you get it in a minute. And a lot of things to make with the borders disappear, the width and the padding. So there’s also one important thing with the roles and the roles in the columns. And then we had some default HTML used to make sure for things like the currency, the reverse direction, make the text go from right to left instead of the other way around. And of course, things with links just add an extra class. I’ll show it right now. We just added a class, I think. Yeah. And then you have the header, the class here. And we say it’s a link. So it connects to the AG grid cell link. And we specified some other colors and some decorative decoration for that. And sometimes you also did, like I think it’s in here for the, something for the currency. It’s also a link. Now you see here, the different style classes just to make sure every column has a nice blue and feel. And see if you can show some things. And then on the orders, you have here the underlined and you see the headers. I still am not sure if you want to do it like this, but I made the text size a lot smaller in here because otherwise all the columns and all the descriptions there are gone. And we did create some really nice, really nice, just some nice things over here. We grouped the icon sub this, they stay in the front and some styling broken, but you see it’s now light because you’re in remote and you go in edit mode. It changes the highlight like all buttons do here. So it has the same look and feel and users know that they can click on it. And then they get some extra functionality and when they are in a read mode, it’s just a lighter gray so they can only view it. You can see here this is a column with a link on it. And we also have here like things like the currency, just some simple styling, but just make sure that you have to correct classes on it. And you can do a lot of stuff. And also a lot of documentation on age grading and a lot of sample, which are samples which you can use. And what we want to achieve is ordering enter. We have to have one, if it is already work. You don’t have to go to edit. But that’s also what I want to have someone with some data in it. It makes it. No one with data. It’s this one. This is a hard. This is a grab sample data. Like you see here we want to do not show too many buttons. There are already too many buttons there. And when you go in edit mode you want to show the buttons like this, which you need the custom cell render for that. So you can see that the same type of sample on age you could. It can work right now. So there is a new feature for you. Only in a few weeks. Yeah, well, be there. Because this is the same how most of the clients are working and especially like Gmail. They only show you the buttons when you hover over stuff. So I really like that. And then we want to add some buttons here, which also now are the same like the buttons on top. Like the other ones on top here, the add and the view and the delete. We want to put those buttons in here as well. So this can become quite long. So you can see the actions directly under your cursor. So that’s really nice. And now we did some testing with it. When you hover over, we don’t display the image. This was just some testing. You can do a lot of nice things with the CSS. Like the hover which I’ve told you before. And like the icons, I can see the settings. And then I think something like this is one one. Here we have always two same columns like locked in our guide. And we just over written some styles here. It’s checkbox and then you override it and make sure that you specify the font. Awesome prompt. It’s not font. Awesome pro font. So it looks like a nice lock if you have some archives. Yeah, some block, some archives, the items. No archives, and block the items or some archives items. You always see a nice icon here instead of a checkbox. So we think that it’s more clear for the user. So that are some things we’re doing with the styling in AGE. We’re creating to make it more the data specific and a lot more compact. Yeah. I think it’s always a bit hard to find. So you have print options, search press, column filters. And then you have a filter. So you have a filter. Okay. What all you have for you. Yeah. You don’t want to do that. Yeah. That’s correct. I mean, you have a paper time. That’s true. That’s true. Two panel called take remove the paper. The one. This one. Yeah. All right. So. Yeah. Yeah. All right. Really nice. Yeah. I think we, oh, you did a custom. Yeah. Yeah. Because he wants to do it for some users. Yeah. Should be there for some children. Yeah. Yeah. I think we’re going to get this to go to a first show as basic as possible. So they’ll confuse the user. And then the power users get the option to share with them. Yeah. And to make some custom sorting and some nice grouping and things like that. Yeah. Yeah. Can you let us have that? That’s the real policy. Yeah. Yeah. No problem. Yeah. I’ll put it in either Discord or somewhere else. I think the Discord maybe going to work later on. Yeah. Yeah. Yeah. Going to put all the age and grid styling which we created in the Discord. Yeah. No problem. Yeah. I think it’s good. You found a way to use white space because you might have to use it. You might have to use it. But it’s always drawn out of space. And then it’s white. See, trunking, bar. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. That’s true. Well, which little bit of fiddling with the correct CSS classes, which is that I do like that there’s a lot of documentation from the AG grid, not especially for this. But for styling, they do show some really nice samples and they have these online tools you can fill around it. And then just I don’t know where it is exactly right now. I did some styling things. I did some removing of some padding. I did some changes in the flex box, a way they handle things. So a lot of small tweaks used to make sure that it’s more compact. You can show more data. It seems like it. Yeah. Yeah. It sounds good right. So I’ll share all this. There’s no problem. It’s an interesting thing like this, like the Pedding Left and Right in the header because I do think especially the header is way too big and we want to have descriptive column names and they don’t get lost. So it’s really annoying. So a lot of nice things in there. So I think it’s shown everything we wanted. Yeah. If there are other questions. So. No other questions are asked. If you have other questions, please cast a Richter-14 header or a Ria Sheen. They also, especially a scene that a lot of work is to convert into a thing or a son. But it did most of the work. So thank you all for your attention and thank you. Have a good lunch. Yes. This makes me. Yeah.

Close