Popup Dialog Box

Description
Part 5 – Create a Popup Window with a Dialog Box

Continuing on from the FactoryTalk Optix Object Oriented HMI concept tutorials, this video shows how to use a Dialog Box in FactoryTalk Optix Studio to create a “popup” display.

Now that the pump faceplate widget has been built, we can create a dialog box to make that widget popup on demand. Add an alias to the dialog box to allow the pump UDT parameters to pass into the popup.

Then use a mouse click event on a pushbutton to open the dialog box, and send the chosen pump’s parameters into the popup display.

• This video tutorial demonstrates creating a popup window using a dialog box in FactoryTalk Optix Studio for reusable graphics.
• It builds upon previous tutorials using the “pump” widget or faceplate and alias for graphics reuse.
• The process involves creating a dialog box and then adding an alias to the dialog box.
• Add a pushbutton with a mouse click event to open the dialog box.
• The dialog box is linked to specific instances of the graphics, allowing for dynamic data display.

Transcript
(00:01) okay this video I want to kind of continue from some some of the previous ones that I did around the Alias um in creating like a widget or a face plate and using an alias to to um have reusable Graphics so in this case um what we have not shown before is how to do a popup popup window or as it’s kind of called an Optics a dialogue box so we’re going to do a create a dialog box and then we’ll we’ll pop it up when we push a button or something to to make it uh pop up um so just a refresh from what we had done before I had created a know
(00:42) somewhat of a I called it a face plate and we were able to reuse it so you know here’s pump one instance here’s pump 2’s instance here’s pump 3’s instance right so and I had shown some various ways to um to to go about doing this so again what we did not show how to do a popup so let me go go and close the emulator down and to do this um let me first refresh a little bit on what we had done before we had created a what we called a pump face plate and this face plate was tied to an alias that I called pump Alias into a
(01:22) kind which was the pump UDT and if I come over here to my com drivers and if I come to my uh underneath my my ra ethernet IP and my logic’s echo I had types and variable types and here was my pump UD UDT type and this was actually coming from a logic’s controller so I had Studio 5000 I created a a UDT called pump UDT and I created three instances pumps 1 two and three and there were basically three tags in each uh you know for for the uh each instance label running and speed and then just to show that we were
(02:05) actually you know pulling this information from a from a real controller um I’m using logic’s echo in the background so real but emulated controller so Optics is really grabbing these tags um from from the logic controller even though it’s emulated so it’s all I had to do before was I had to create a um I had to create this pump face plate I had to create Alias for it and then basically anytime I used this face plate I just linked it to the right instance of the pump UDT so back down here underneath my controller
(02:43) tags I had pump one pump two pump three so I just basically linked it to either pump one two or three instance and all the tags basically um label running spe just passed right in to the face plate so that’s what I did in the previous videos but again what we did not show was how to do a popup so let’s go let’s go about doing that so to create a popup what we’re going to do is we need to create what’s called a dialogue box so underneath my panels folder I have a folder here called panels which is nothing more than a place for me to
(03:18) store um you know some additional panels that I create I’m going to rightclick on panels folder and say new and I’m going to go con uh containers sorry and I’m going to say dialogue box and this creates a dialog box one and of a type so I’m going to go ahead and uh rename this and I’ll call it pump popup okay um and then we’ll double click on pump popup so basically it’s a blank canvas right now um I’m going to go ahead and stretch it a little bit bigger maybe make it a little bit wider uh just to give myself enough room to uh
(04:04) to to add the pump face plate widget into here but before I do that there’s a couple things I need to do to just kind of set this up to work in the manner that we want it to be first we need to create an alias um for this uh pump popup so when I I have it highlighted I have it clicked I have the properties for the pump popup I’m going to go ahead and press the add new and I’m going to say Alias and it puts a name Alias one I’m going to go ahead and call it U pump popup Alias so just to kind of make it unique and make it stand out and then under
(04:52) kind I’m going to do kind of like I did in the previous video I’m going to link the kind down to the type UDT type underneath my uh logic’s com driver so I’m going to go to types types folder I’m going to go to variable types and I’m just going to highlight and click on this pump UDT type in parentheses so the so that that just links it to to that uh to the kind it links it to that that type that UDT type uh that I’m going to you know call on each time um that’s kind of it for properties with the exception of um right now
(05:34) anytime it pops up it will be centered both horizontally and vertically so if you want to change that particular um setting for where you know the layout um you know one way one way I could do this I could just say hey let’s just align it to bottom right perhaps for for just this this application so next thing I want to do is I want to go ahead and I also want to add a push button here here in the upper corner perhaps to close the popup so I’m going to um come here to pump popup type right click say new base controls and
(06:12) I’m going to add a button and we’ll seetch this button out a little bit just to kind of make it a little bit bigger I’m going to change its name to close and under uh so the only thing I need to do is basically get it uh an event so when I click on it an event so I’m going to use uh Mouse click event I’m going to hit the add new method and underneath here I see that I have my pump pop up and I have close so it actually has um the method close already kind of opened up here in the list I’m just going to click on close and say
(06:53) select so now when I click that button it will close it so next step will basically take my my face plate or my pump widget that I’ve created before and just bring it into the dialogue box so uh back here at pump popup I can rightclick say new go to panels I’m sorry uh go to face plates and say uh pump face plate and then there’s my pump widget or face plate now in the previous videos that I’ve did around this anytime I added this um pump widget or face plate I had to link it to the um you know to the Alias I had to link it to the node um
(07:45) you know so it was a pump one pump two pump three we’re not going to do that okay we’ve already kind of we’ve already kind of created an alas for the dialogue box itself so what I’m going to do now is I’m going to take this face plate widget and the Alias pump Alias is shown up here but I’m going to actually tie this back to the Alias I created for the popup itself so this is the pump popup Alias right uh expand this and then here’s the pump UDT so I’m just going to take the uh kind of the root level here pump
(08:22) UDT and say select okay so basically you know whatever parameter get passed into the to the dialogue box the pump popup will then get passed into this basically pump face plate or widget okay all right so that’s all I got to do um for this part so now to actually make it pop up I’m going to come back to the main window so I’m going to add a push button to the main window and we’ll just uh we’ll add a button and just kind of put that about there and I’m going to go ahead and call this pump one so when I click this button it’ll
(09:16) open up that pump one popup so only thing I do now is I need to do the uh a mouse click event so I’m going to go ahead and kind of expand this up a little bit and what we’ll do is we’ll do on a mouse click event I want to do a command I want to do a UI command I want to open a dialog window so when I do that now we have some input arguments we have the dialogue and we have the Alias node so the dialogue is basically going to be uh what is the the the dialogue box we’re going to open up and we’re going to open
(09:54) up the got to go find it under uh panels pump popup and then for the Alias node well that’s going to link it back to the instance of the pump that we want to display the data for so under com drivers and my ra ethernet IP and then logic Echo uh tags controller tags we’re going to link it this to pump one and that’s basically what we did when we did the the widget in the previous video Link at the pump one um so we’re doing the exact same thing just we put on a dialogue box so that’s that’s basically the that’s the way how we make it into a
(10:40) popup all right so I’m going to go ahead and uh right click I want to right click this say copy and I will paste and I will paste it again and we’ll basically create one for pumps two and three so just change the name here to pump two and I’m going to change the Alias node to pump two and if I go to uh click on this one we’ll change this to pump three and I will change the Alias node to pump 3 and that’s it so I’m going to go ahead and save that and I’m going to go ahead and start the emulator emulator open up the other window so
(11:35) basically we can see we got pump one pump two information pump three information okay so if I pump click on the pump three face plate uh pop up well there it is it popped up in the bottom right corner uh it’s showing the exact same data as uh is pump three over here if I change this to pump two we can see that uh this this changed but this did not change right I can close this we can open up Pump two right so here’s pump 2011b showing the information if I change it here it changed there right um and then close this and then
(12:17) pump one here’s pump one’s data right pump 101a so pump two is showing here pump one is showing here right so I can kind of come back and click on this too so just basically showing that you know we’re we’re using the same widget uh in the same you know we’re using in different ways but they all you know work the same basically so close this as well so that’s all we got to do we got to create a dialog box we got to add an alias to the dialogue box and then we link that Alias um to the uh you know to the to the UDT that I created basically
(12:57) and then we we added our our pump widget or whatever widget or face plate you need on your popup can go in there too of course the dialog box doesn’t have to use um a widget you can basically create a you know a unique face play each time and just use the dialogue box you know anytime you click a button to um the mouse event would be to open up that dialogue box basically so that’s all there is to it um hope this was helpful

Tutorial List

• Linking pushbuttons to a Logix tag
• Dynamic Link Key-Value Converter
• Create reusable graphics
• Object model alias
• Alias with Logix a UDT
• Dynamic alias index with Logix UDT
• Popup Dialog Box
• Build a faceplate
• Create Variables with Structured Data Types
• Rockwell Automation Device Libraries for Optix
• Optix Presentation Engines
• New Windows for Web Presentation Engine
• Changing Languages for Localization
• ComboBox to Change PLC Tag
• Custom Made Buttons