App Builder makes it really easy to work with dialogs in this video you're going
to see the built-in dialog functionality as well as how to create a custom dialog
here I am inside of App Builder and an empty view so I just created an empty project.
The first thing I am going to do is go to the toolbox and find a button I want to add a button
to the form and this button is actually going to trigger our dialog now for this button I want to
set a margin so it looks a little bit better on the screen so when I preview this app you can
see the button is a little off of the upper left let's go back to edit the other thing I
want to do is change the theme here why don't we do a Fluent Dark theme so we have a nice
dark background with the green button and I also want to change the content of this button to "Add
New Item" next we'll add a dialog instead of going to the tool box you'll learn a new trick here by
hitting CTRL+E and typing in “dialog” … so CTRL+E means “control everything” and this helper pops
up and then you can just type in what you want once you start getting used to the components
and just select what should go on the form so the way that dialogs work is they're actually
overlays on top of an existing form so you can see in the upper left here I’ve got my master view
and then I’ve got my overlay and then the overlay would have multiple things here if
you had multiple dialogues or snacks or toasts or whatever happened to be on your screen.
I’ll click dialog window and now I am in "edit mode" for dialog window
you could also go to the left hand DOM outline and select the area that you wanted to edit
as well so the dialog has several flavors if we go to the right hand pane where the properties are
you'll see we've got a confirmation which is the default an alert and a custom dialog if I go back
to confirmation you can see some of the properties that you can set like this is the header here
which will allow you to customize the text you can customize whatever message
so that will update as well as what the buttons say so here we'll just say "Yes/No"
and so I am basically customizing this dialog to how I want it to work
you can also check or uncheck options here for click outside to close or press escape to close
I’ll leave those just the way they are and then the other area that you can customize is
what happens on the click of these buttons so by default they're going to do the open close event
and they're targeting themselves but if you want to show or hide something or navigate somewhere
else and you had other screens or components on the form you can easily customize this in the
interactions pane so now if I click the Preview button you'll see that when I click add new item
nothing happens the reason for that is we didn't wire up the button to trigger the dialog so I
am going to select my button I am going to scroll down go to interactions I am going to "Open/Close"
and I am going to pick the dialog window component so now what that's going to do is exactly what it
says when I click this button it'll open and close the dialog so let's go ahead and click the button
and you can see I’ve got my dialog that I created and customized some of the
properties on let's go back to edit and let's go back to our dialog and what we want to do now
is change this to a custom content dialog and I want to get you familiar with what you can do here
so the body one basically a label it's a text input is a placeholder for whatever you want
to put here you can put text or you can delete it like I am going to do and you can see that
there is a default area for a placeholder here what I want to do is I want to add a column
layout to this dialog and then I am going to add components into the column layout
to set the size of the dialog you would go up here to the width and height property so I am going to
set this to 300 pixels wide and I want the height to be 400 pixels tall what this does is it changes
the size of the dialog so the dialog is going to be controlled by the child container since this
is an add new item dialog let's go ahead and add an input so we'll do an input group now the input
group has some properties of its own so what type of input group text numeric email password content
the label placeholder so I am going to change the label placeholder to say name of new item
and next I want to set the padding on this so when I add components underneath it they all are
spaced nicely so I am going to go to the spacing option and I am going to say give me a 20 pixel
spacing around this component and I am going to select this item and I am going to say the width
should be a hundred percent but when I do 100 you'll notice that it kind of
goes outside the bounds of the form what you can do is click the icon next to the spacing
margin options and then specify which margins you may want to change so in this case I want
to change the leftmost margin to zero so now everything is aligned perfectly
the next component I want to add is a text area and this is something that will allow
me to add additional text um besides one line so multi-line text box essentially we'll call
this description and I’ll do the same thing it's set at 20 pixel actually 20 pixel border
and let's change this guy to zero and we'll change his width to 100%
like so and next let's do a another cool control we'll do a combo box and we'll do
some data binding here so I got my combo and you guessed it we're going to change this to 20 pixels
we're going to go here change this to zero change the width to 100 percent
and you'll see we've got a default data binding here because we have
a data source here for north wind and I have a few other data sources as well but in this demo
what we're going to do is use the category name display property so let's go to name
and you can see here I’ve got my combo box and then finally let's add one more control
let's add a date picker and I am gonna do the same thing let's do our 20 pixel border
let's make it zero on the left and let's make this 100 percent now this component is interesting
because it does not have a placeholder so what I am going to do is go to control e again I am going
to find this text label input and I want to add that above my calendar and I am going to modify
the spacing the border of this guy so let's change the top spacing which I think is this one
here so we'll change this to maybe five pixels and I think that looks good yeah and it looks like my
column layout needs to be extended a little bit so how about 425 pixels high
so that tweaks it a little bit instead of body one here let's change this to expiration date
like so and for my combo box let's take the place over here for you know select category
there we go okay so looks like we got everything we need I’ve created a custom dialog with
components added some spacing to make it look good added a data bound field added a date picker let's
see how this looks we'll click Preview we'll click our add new item our dialog pops up say test item
and description just so you can see how this works with the text area I have some multi-line
text there I can resize this and you can see there's a bunch of text I pasted let's select
our category and let's pick our expiration date and then click our button for submit so let's go
ahead and modify that click edit again go back to our dialogue change button here to submit
and let's do an interaction on click
open close and we're going to open close our dialog window and that's it so now when I run this
new item click submit my dialog goes away so in a couple of minutes you can add a dialog to a screen
use any of the defaults that are shipped with the App Builder or create your own custom
form with actions. To get more great videos like this to learn how to use the App Builder and other
Infragistics tools click the Subscribe button to get a notification when we post new content.