WEBVTT

00:00:07.200 --> 00:00:12.870
In this video are we going to learn how to use the equerry y to create dialogues.

00:00:12.900 --> 00:00:15.460
Dialogues can be used for several purposes.

00:00:15.720 --> 00:00:23.010
They can be used to show a simple alert message when the page loads.

00:00:23.040 --> 00:00:30.300
Also they can be used to confirm a certain action that we think is important or even destructive.

00:00:30.640 --> 00:00:36.000
I don't want to confirm that the user would like to proceed before the action is carried out.

00:00:36.450 --> 00:00:39.600
So this creates our first example.

00:00:40.230 --> 00:00:48.530
We need a div to contain the the message of our dialogue.

00:00:48.720 --> 00:00:59.190
So we're going to create a div after the Microsoft's Dave and let's give it an ID because it's my dialogue

00:00:59.200 --> 00:00:59.650
.

00:01:00.060 --> 00:01:01.860
OK.

00:01:01.900 --> 00:01:14.010
I'm also going to give it a title for example this is a title so the title is going to be used to give

00:01:14.310 --> 00:01:22.840
our dialog box a title at the top of the of the books series and it's next.

00:01:22.950 --> 00:01:31.640
We need a we're going to create a paragraph in the showing the content of our dialogue.

00:01:31.740 --> 00:01:36.660
So for example you would say welcome to our page.

00:01:37.400 --> 00:01:38.190
OK.

00:01:38.910 --> 00:01:43.020
So not to create the dialogue using magic where you will need a method.

00:01:43.020 --> 00:01:52.530
So first let's access the containing div using its ID which is my dialogue and the method we need to

00:01:52.530 --> 00:01:59.600
use here is dialogue going to be using any options or promises or other moments.

00:01:59.970 --> 00:02:03.840
OK so let's refresh the page and we can see our title there.

00:02:03.840 --> 00:02:05.150
So that's the title.

00:02:05.190 --> 00:02:11.270
So here is what we put in the title and that's the contents our paragraph OK.

00:02:11.640 --> 00:02:16.370
We can change the theme that we can use a different styling.

00:02:16.590 --> 00:02:18.030
OK.

00:02:18.710 --> 00:02:21.780
Let's keep this one for now.

00:02:22.460 --> 00:02:24.040
OK.

00:02:24.410 --> 00:02:33.330
Now let's say we don't want the dialog to show when the page loads.

00:02:33.330 --> 00:02:39.290
We want to create a button and only when we click on the button this dialog will show up.

00:02:39.660 --> 00:02:52.240
So this creates a button of a directive and call it open dialogue.

00:02:52.580 --> 00:02:57.160
Let's give us an ID open.

00:02:58.140 --> 00:03:00.630
OK.

00:03:02.480 --> 00:03:09.350
So first of all we don't want our dialog to show up when the page loads.

00:03:09.390 --> 00:03:12.690
So we need to set a certain property called

00:03:16.620 --> 00:03:19.700
out to open.

00:03:19.710 --> 00:03:27.630
So we need to set that to faults which means that the dialog will not show up automatically and then

00:03:28.950 --> 00:03:35.740
we're going to write another statements where we access the button and we.

00:03:36.350 --> 00:03:46.080
So the buzz is we can access it using its ID and then you know use the click method and we'll define

00:03:46.470 --> 00:03:48.480
what happens when we click on the person

00:03:52.140 --> 00:03:56.250
so we can access our dialogue.

00:03:56.530 --> 00:03:56.810
Dave

00:04:00.180 --> 00:04:02.170
using its Id like dialog

00:04:05.430 --> 00:04:07.310
and we want to open the dialogue.

00:04:07.320 --> 00:04:13.830
So first we need the dialogue method and this time we use a parameter.

00:04:13.830 --> 00:04:17.420
There is going to be a string and its saying open.

00:04:18.110 --> 00:04:25.250
OK so if your refresh the page you got the button that you click on the button we can see our dialog

00:04:25.270 --> 00:04:25.630
.

00:04:25.980 --> 00:04:33.900
Ok lets style the button using the button method as we have seen earlier when this sign all the buttons

00:04:34.160 --> 00:04:42.060
we access all the buttons like this and we're going to use the person with

00:04:45.910 --> 00:04:46.960
it looks better.

00:04:46.960 --> 00:04:51.800
So if you click on the box and you can see the dialogue on it.

00:04:52.780 --> 00:04:53.060
OK.

00:04:53.110 --> 00:04:56.700
Now let's move to confirmation dialogs.

00:04:56.860 --> 00:04:57.640
So we're going to create

00:05:00.430 --> 00:05:08.620
a confirmation dialog which will just ask the user to confirm they want to proceed before a session

00:05:08.890 --> 00:05:11.070
action is carried out.

00:05:11.470 --> 00:05:19.370
So what we're going to do we going to create a button saying go to our previous page and when the when

00:05:19.370 --> 00:05:28.720
the user clicks on the button will just show a confirmation box where the user is given a couple of

00:05:28.720 --> 00:05:36.550
choices so they can be a console or they can just proceed with the action and goes to the previous page

00:05:36.550 --> 00:05:37.530
.

00:05:37.540 --> 00:05:38.150
So let's go for that.

00:05:38.150 --> 00:05:42.450
So first of all we're going to create our dialog.

00:05:42.870 --> 00:05:44.920
Dave.

00:05:45.520 --> 00:05:46.530
OK.

00:05:47.140 --> 00:05:50.930
So we're going to give it an ID.

00:05:51.070 --> 00:05:53.110
So it's going to be confirmation.

00:05:53.990 --> 00:05:58.520
And also we're going to give it a title.

00:05:58.600 --> 00:06:02.400
I was going to say leave the page.

00:06:03.470 --> 00:06:03.970
OK.

00:06:04.060 --> 00:06:09.950
So he confirming that the user would like to leave the page or not.

00:06:10.010 --> 00:06:10.460
OK.

00:06:10.630 --> 00:06:15.540
And let's put some content there.

00:06:16.460 --> 00:06:16.720
Let's

00:06:19.900 --> 00:06:30.080
put some text so you will lose all the unsaved work.

00:06:30.080 --> 00:06:31.700
Are you sure.

00:06:32.800 --> 00:06:35.610
OK.

00:06:37.360 --> 00:06:38.140
We can.

00:06:38.290 --> 00:06:45.230
And I can just before the text so let's put the icon inside a span.

00:06:45.880 --> 00:06:50.470
You're going to need a class.

00:06:51.320 --> 00:06:56.150
OK let's let's go for a fourth alert.

00:06:56.320 --> 00:06:56.830
I can't

00:06:59.890 --> 00:07:01.250
really go for this one.

00:07:01.720 --> 00:07:04.860
So it's your boy like on alert.

00:07:04.870 --> 00:07:06.230
OK.

00:07:07.650 --> 00:07:11.010
So first we need two sets.

00:07:11.110 --> 00:07:20.770
We need to use the icon gloves first and then we need the name of the icon which is yoy icon.

00:07:21.390 --> 00:07:29.890
It is refresh the page you see icon the text.

00:07:30.370 --> 00:07:30.570
OK.

00:07:30.580 --> 00:07:37.660
Now we're going to create the dialogue the same way we have done for the previous one.

00:07:37.660 --> 00:07:40.850
So.

00:07:44.360 --> 00:07:51.460
So you going to access the containing div using its ID which is confirmation and then are we're going

00:07:51.460 --> 00:07:54.850
to use the the dialogue

00:07:58.330 --> 00:08:00.530
method.

00:08:01.910 --> 00:08:06.250
OK so if we do if we do this it's going to be a simple dialogue so it's not going to be a confirmation

00:08:06.250 --> 00:08:07.500
dialog.

00:08:07.500 --> 00:08:12.460
You can see that our title there our content.

00:08:12.680 --> 00:08:20.460
OK but would like to see the data when we click on the second button.

00:08:20.470 --> 00:08:27.780
So we need to create a Ableson that the person is going to be going to give us an I.D..

00:08:28.430 --> 00:08:32.750
It's a close page and

00:08:35.730 --> 00:08:40.960
or let's say go to a previous page with a previous page

00:08:43.690 --> 00:08:50.060
and there's some text to go to previous page.

00:08:50.320 --> 00:08:50.590
OK

00:08:51.130 --> 00:08:55.960
.

00:08:55.960 --> 00:08:57.430
Just refresh.

00:08:58.330 --> 00:08:58.830
OK.

00:08:58.960 --> 00:09:00.830
You can see two boxes there.

00:09:00.970 --> 00:09:07.430
Now let's write some code to say that when we click on this button we show the dialog.

00:09:07.660 --> 00:09:09.830
So.

00:09:11.000 --> 00:09:14.470
So first we need to access the button.

00:09:15.910 --> 00:09:16.710
OK.

00:09:16.960 --> 00:09:18.780
Using its ID.

00:09:18.880 --> 00:09:30.160
So the idea is go to previous page and the event is click when two sets define the function we need

00:09:30.160 --> 00:09:34.280
to execute so function.

00:09:36.170 --> 00:09:44.970
Ok so this time we need to open the confirmation dialog so as we did for the first one.

00:09:44.980 --> 00:09:51.640
So we're just going to be accessing the containing diffusing ID and then use the dialog method with

00:09:51.640 --> 00:09:53.110
the open barometer.

00:09:53.110 --> 00:09:56.110
So our div is

00:09:59.830 --> 00:10:02.980
confirmation and then

00:10:15.620 --> 00:10:23.670
all rates is OK.

00:10:25.600 --> 00:10:31.790
So now we going to start using some thermometers inside our dialogue method.

00:10:32.110 --> 00:10:39.620
So first one is going to be the O2 open as we need to set to False.

00:10:40.860 --> 00:10:50.520
OK the next one we're going to use the model property that we need to set to true.

00:10:50.530 --> 00:10:53.930
So we need this for the confirmation dialogs.

00:10:54.280 --> 00:10:55.360
Okay.

00:10:56.050 --> 00:11:07.120
And then we get to define buttons we going to have inside our confirmation dialog so to do that we need

00:11:07.120 --> 00:11:15.650
the buttons option and we need curly brackets for the dozens.

00:11:15.970 --> 00:11:24.850
So every button we are going to add we're just going to put a text that is going to go inside the button

00:11:25.090 --> 00:11:30.870
followed by a function to execute when we click on the button.

00:11:31.390 --> 00:11:32.530
OK.

00:11:32.530 --> 00:11:40.630
So are you going to have a couple of buttons so the first one is going to be saying go to previous page

00:11:40.750 --> 00:11:42.010
.

00:11:43.670 --> 00:11:46.300
OK we will define the function in there.

00:11:46.510 --> 00:11:50.320
And the second one you need the comma.

00:11:50.380 --> 00:11:52.180
Second one is going to be a con..

00:11:52.330 --> 00:11:55.460
So we just need to use counsil just like these.

00:11:55.780 --> 00:11:59.140
And also we need to define the function to execute.

00:11:59.350 --> 00:12:01.290
OK let's leave it empty for now.

00:12:01.730 --> 00:12:03.870
Let's make sure that it is working so far.

00:12:03.880 --> 00:12:09.320
So if you click on the button we can see our confirmation box.

00:12:09.370 --> 00:12:14.600
We can see our alert icon so we can do some styling for that.

00:12:15.010 --> 00:12:20.250
So this style our span using some inline.

00:12:20.350 --> 00:12:20.680
Yes.

00:12:20.680 --> 00:12:28.390
So style equals let's just make it float lifts.

00:12:28.470 --> 00:12:29.480
That's better.

00:12:29.980 --> 00:12:32.050
OK.

00:12:32.050 --> 00:12:36.150
So now we're going to define what happens when we click on each of these persons.

00:12:36.160 --> 00:12:40.230
So the first one is go to previous page.

00:12:40.420 --> 00:12:50.920
So the statesman's we need to put inside the function is going to be window history and the method is

00:12:50.920 --> 00:12:51.800
back.

00:12:52.490 --> 00:12:54.030
OK.

00:12:54.190 --> 00:13:05.810
And if we counsel all we do we we need to close the dialogue so we need to access this.

00:13:06.390 --> 00:13:12.710
And we may use again the dialogue method and this time the promiser is not open it's close to close

00:13:12.710 --> 00:13:13.670
the dialogue.

00:13:14.170 --> 00:13:17.720
OK so let's try that.

00:13:19.070 --> 00:13:20.790
If you refresh the page.

00:13:20.890 --> 00:13:23.570
Now if we click on the button.

00:13:23.740 --> 00:13:30.490
So if the council is closed if we click again and if we want to go to the previous page click the.

00:13:30.700 --> 00:13:32.790
It takes us to the previous page.

00:13:33.360 --> 00:13:35.210
OK.

00:13:37.390 --> 00:13:37.780
OK.

00:13:37.780 --> 00:13:41.910
So that's how dialogs work in the query.

00:13:42.280 --> 00:13:46.320
Even next video will look at menus

00:13:46.320 --> 00:13:53.470
.