Using dialogs in Servoy

Welcome to today’s webinar, where again with a great topic, Sean Devlin is going to be presenting. And we’re going back to an original series, the best practices, which I always get very high ratings. My name is Jan Aneman. I will be moderating today’s session. So if you do have any questions, I’ll feel free to post them at any point in time in the questions channel. And we will make sure to answer all those questions before we end the webinar. As usual, the webinar is recorded and will be posted on our website. We were a little bit late with the previous recording about authentication and octa. It is up on the website now. So if you want to watch it after this, then you can do that. We’re going to be back with a ton of our way. Sean, welcome. Thank you, Jan. Yeah, as you can see the past few webinars in this series, the topics here and those are all recorded. So if you need to catch up, there’s some good ones in there. Today we’ll be talking about kind of how to do dialogues and different design patterns. And we got some good feedback about the best practices of series. This webinar series. We try to mix in best practices with updates because there’s lots of product updates. We have to manage and sort of integrations and things we see customers doing. But when we can, we try to mix in just some regular old how to stuff. And those are generally quite popular. And so this one comes directly from a brand new Servoyuser who had sent me a mail asking how to do some things. And I thought, yeah, we haven’t done a webinar about that. So really, we listen to your feedback and so keep it coming because that’s where these come from. Today we’re going to talk about dialogues. As usual, we try to do demos first and then sort of do an overview of what you’ve seen. And I’ve organized a few demos here around different design patterns for dialogues, including models and non-modals, multi-windowing and simple user feedback dialogues. Also, I’ll try to show a pop-up example, which is different from the modal and non-modal dialogues as well. So let’s get right to it. I am going into the IDE and launching a solution. So here you see I have a list of customers. And what I want to have happen is when I double click on one of these customers, I want to show the detail in a dialog and edit it. So here we go. You know what? I was testing and I went to the last example. Let me. Comment that one out. Comment this one in. That’s the pop-up one. We’ll get to that in a second. All right, rewind. So I’m going to double click this customer. You can see that I have a modal dialog. What this means is that I cannot interact with the screen below. I’m clicking around on the list and nothing’s happening. Also what this means is that any code execution after the dialog is shown is blocked and then resumed when the dialog is closed. So let’s say I’m doing something like changing the sales rep to a different employee. You can see in the background that the data was broadcast into the screen below. But I can’t interact with that. If I were to. To. X out this dialogue. I’m going to get another. Question dialogue if I want to continue editing or discard the changes. I’ll click discard the changes. You can see that the sales rep was rolled back. We could do this again. This time I want to keep the changes. I’ll click down down here. So a common design pattern is just using modal dialogs to sort of lock the user into a certain workflow and you don’t really let them out until they’ve completed the workflow one way or another. Now dialogs are used in a non-modal design pattern too. So I’m going to come into the IDE and uncomment this and. Sorry, comment this and uncomment the. The non-modal approach and save it. You might notice that it’s quite nice when you’re working with Servoy. You can make code changes without having to recompile redeploy and even relaunch the client and you can get right back into testing what you’ve just changed. So now what I’d like to do is show a non-modal dialogue. So double clicking again on a customer. And you can see that this one is not blocking the screen below. And if I were to select a different customer, you can see that the record up here changes. So as I’m clicking around, I can interact with both windows. Now I’ve seen a requirement for a different design pattern where we get into sort of multi window or multi instances. Let’s say that my use cases that I want to look at two different orders at the same time or maybe five different orders. If I have a big monitor. So what I’m going to do here is comment this one out and I have another method here called open instance. And now I will double click this. You can see that I have one order. I’m going to kind of slide it over here. I’m going to go to the first record and double click that. And now you can see that I’ve opened up the dialogues in two different windows and I can do this until the cows come home if I really want to. But these are two different instances of the same form. I can edit them independently so I could say change a record up here, save it, etc. do it over here. Save it and close them. So in this case when I double clicked I get two different forms. Another way that we could show a form is to show it in a pop up pop up is different than a dialogue. That’s because when I when I show this it’s an undecorated sort of window there and I can interact with the screen below but as soon as I click off of it it’s dismissed. So rather than having to physically close the window it’s dismissed. Typically these are for quick little pick lists like maybe you want to show a list with some check box options and you show it and you check some things off and then you dismiss it just by clicking out. So the use case is a little bit different. Another use case for dialogues and in sort of the modal example I’m going to open up a record again. And we can do it right here in the pop up and I’m going to look for a customer. Pop up doesn’t really work. Let me I meant to do this in the. One of the other ones. Just do the this one here. So I’m going to search for a customer here and now I get another modal dialogue and the reason I want to show this is I want to show how you can handle the. So the action after the dialogue closes so first we want to search for a customer let’s say we’re looking in the USA. I don’t know maybe we’re looking for something in Portland. Okay, so we found the one we want. And we selected and you can see that it writes it back in here this is sort of like a customer picker and it writes it there and then I’m done. So I’m going to jump into the code here and I did some work to just kind of select the data that was passed in because we’re going to open it whatever record we passed in, but really just pay attention to these couple of lines here. And it’s pretty much two lines application dot create window you give it a unique name in this case I’m sort of implicitly naming it the same as this form. You might even notice here that this is done in a base form I don’t want to get to into the topic of inheritance, but I can use this functionality anywhere not just on the particular form that I’m showing. picking a type and the type is modal dialogue there’s a couple of constants there. When I opened it in a non modal dialogue where I was able to interact with the screen below, I call this method here and it looks almost identical except for the constant here is dialogue instead of modal dialogue. A key difference is is that when I’m in the modal dialogue the next line of code wouldn’t execute either in this in this method or in the calling methods it totally blocks it. Let’s take a look at the multi multi instance or multi window example you remember that I showed the same order detail form twice well I didn’t have to design my order detail screen two times I’m just reusing it. And so I’m using a different method here called create new form instance now I I didn’t show you something important which would be say I’m doing the multi instance example. And I have these two forms open but let’s say I go back to this record here and I try to double click it again. And so it doesn’t open it again because it’s already open and that’s that’s important we could if we wanted to open up multiple instances of the same record so we make that distinction ourselves. So what I did here is I first create a unique name and it’s sort of the name of the form plus the primary key so you know order detail underscore you know 100 or whatever the order number is. So I have a unique name then I created new form instance and I give it the design form name and then the new instance name. So that that name is important because it should be unique. So I just call this is I open the form and I just call the open method again which goes to our open and non modal dialog so I’m reusing that method here so really the only thing up to pay attention to any instance one is this. Create new form instance and also just the check here to say well does it exist already or not. If it doesn’t if it already exists I’m just going to open it I’m not going to create the new form instance or the new window. The other example we showed was the pop up version and this is just a one line or to the window plug in so plugins that window dot show form pop up and really what you pass in is there’s a lot of options there but what you pass in is the name of the form or the form object itself and so I’m passing in this meaning you know implicitly the form that we’re working on. So I have some mechanism for doing a callback and setting a data provider. That’s a pretty strict use case and that’s where these other arguments come from but it’s really the second argument that matters in this case. We showed you another example where we did a modal dialogue in the form of a pick list when I was selecting that customer. So I have a form called pick list base. And in the code for that form. I had just a public method called open. And so that method was called and again it’s just showing. the window and showing it and remember that when we show a modal dialogue after we call this window dot show all of this code is blocked until the window closes. So what I’m doing is I’m sort of checking to see if the user pick something and then I’m returning directly out of this method. So when I think I have a method called select customer. So when I called this when I push the button this method is called it’s encapsulated in a way that’s really simple. I just call my customer pick list dot open and it returns a record. I don’t have to worry about when the code starts and when it stops and showing and hiding the window I put that in the form itself. So it’s a good design pattern when you want to have a form that you’re showing in a dialogue and it returns a value somehow. It’s just encapsulate that all inside that form and just you know in this open method it declares that it returns a record. And then if that’s if I pick something I’m just going to assign that that customer ID from it. Finally, there is I didn’t want to get to into the topic of the dialogs plugging because that’s for really simple dialogs, but if you’re just getting started it’s pretty useful to know. You might have noticed that when I was closing the the order detail dialogue I handled a form event called on hide. So I’m going to jump into that you can see the event handler here. If I jump into that I’m allowed to return a boolean out of this to block it so that if I try to x out the dialogue without saving changes I get a pop up that says you know what do you want to do. So what I do is I handle that on hide method and I call this little inner method to see if what the user wants to do and really just focus on this this line right here where I call plugins dot dialogs show warning dialogue and it asks, ask the user what to do and if the input is that they want to discard changes then we’re returning true and we allow it to close. keep in mind that in this on hide is is called after the dialogue closes and here’s where we revert edited records so that’s how the changes were canceled on I’m closing the dialogue so it’s a bit of a sort of a disjointed workflow but all the events are there for you to work with and it’s pretty easy. let’s go ahead and come back to some slides here to review this. So again the first pattern we showed was the non-modal pattern that’s where the user can interact. Sorry the first pattern we showed was the modal pattern that’s where the user can interact with areas outside of the dialogue. And the code execution is blocked until the dialogue is closed and that’s really useful there’s nothing extra you have to program you just show modal dialogue and the next line of code is executed when the dialogue closes. A code example of this is really just the two lines of code where you create the window and make sure you use that constant and then and then you show it and then after that code is blocked. In the non-modal pattern the user can interact outside of the window and the dialogs do not block anything so it allows you to sort of click around and have more than one window open and the user can do what they want and nothing’s blocked. And again it’s the same it looks the code looks the same except for the constant that uses dialogue and not modal dialogue. In the third example was a bit more complex because we opened up multiple dialogs at one time from the windowing point of view it’s just calling that you know create window again with a non-modal option however we use something called a form instance. And it’s really important that the names are unique if you want to have those multiple windows when we when we when we created the those windows we first created the form instance so there’s a couple of calls here. One is to create that new form instance and the second is to create that window in general I use the same name for the form instance and the window because it’s easy to keep track of. And you’ll notice at the beginning I sort of checked hey does the form already existed we already created and show it because I don’t want to try to create the same form twice if the user selected the record already it’s already it’s already there so we might as well reuse it. Which is just want to keep that name unique. Finally, on the really simple example there are these one liners to show if a you know show some info to a user and I did a show question dialogue. Which presents in a certain way and returns the button that they clicked on. This is really easy to use that’s always one line it’s always blocking so you don’t nothing else executes and it returns a value. There are other options here just real quickly in the IDE. I’ll bring up my command console. And if you don’t know about this it’s it’s pretty handy you open up the command console and you can with a running client you can just execute code. And there are some other other kinds of dialogues like show select dialogue. If I run this and I go right into the running example you can see that the options that I passed in are there. And when I click OK you can see that it was it was what it was returned there’s also. The dialogues plugin even get code complete in the command console show input dialogue. And again you do the title the message. Sorry for my loud keyboard and then if you want you can do an initial value. And that’s it and again that’s blocking. I did something. Oh I think there’s no code behind title. Yeah OK yeah. Real time code correction. Yeah exactly. Thank you, Jan. But we’ll just put in whatever we want here. Option one. Did I get all my quotes. Yes. So you can see now it shows the title the message and then the default value but I could change this make it option two. and you can see that option two was returned by the dialogue after it was unblocked. There’s also a number of flavors you can see I highlighted the dialogues plugin here there’s info errors and warnings. They all work and question they all work the same as just the style on the dialogue is a little bit different. All of them return the value of what was pushed on the button and they allow you to pass in whatever you want for for those buttons. So most advanced users or medium users know about that but if you’re just getting started you want to show something quick to the user it’s one liner it’s pretty easy it’s good to know. Okay, I think that’s that covers everything that we. That we were showing.

Close