In this lesson we are going
to implement an Ajax popup.
This could be pretty useful
to edit records from lists
without losing the context of that page.
Again this implementation
might be tricky in some steps.
So I advise that you watch the whole video
and then try to do it on your own
and come back to the video for references.
So what we are going to do is implement
the popup and again this is going
to be done using the widget
from the rich widgets library.
The widget that we're talking
about will be the popup, the popup editor.
And as you can see here again we are going
to use a webblock and some actions
to implement the logic for this widget.
So this is, this is the widget
that we are going to do,
to use and what we will do
is replace to, well not replace.
What we are going to is instead of opening
the issue edit page as a stand along page,
we want to open it as a popup.
And as you can see here
the link to this page
is present in the issue description webblock.
This is where we are going to use,
the popup editor webblock
and let me just drop it here
right after the link
and tell you what it does.
that will open a modal window,
will open a modal window in our page
and it will request the page
that this link points to.
So this issue edit page is going
to be requested by this,
by this widget and it will be rendered
inside the modal window.
So actually the first attribute we need
to set here is this links runtime ID.
And you know already
to have a runtime ID
to be able to reference
this runtime ID here,
we need to set a name to this link.
So that is the first thing we will do,
which is to give a name to this link here.
Now we can,
we can reference the link here.
So let's go ahead
and select here the runtime ID.
And the other thing that we need
to implement here, to set here
So again this webblock
uses the notify widget
and we need to implement the handler
to deal with this notification.
To do something
when this notification accurs.
So let's, for now create
the screen action for this one
and we'll implement it later.
There's one more attribute that
I would like to set here,
which is the title for the popup.
This is not a mandatory field,
but I want my popup to say which,
which issue I am editing.
So we're going to say
that this is edit issues or issue number
and I will complement this
with an issue ID.
Okay, so we are all set for this webblock.
All these other attributes,
I will leave them with the default values.
They are not mandatory to fill in.
And not we need to implement this
notification, so we add it here on notify.
And what we want to do, what
we want to do when this issue is added.
Remember that we are inside a webblock.
We want to notify the parent
that it needs to do something.
So this is again a place
for us to use the notify widget,
the notify widget built in action.
Okay, so we are all done for this,
for this issue description webblock
and we have a couple of variables
that we'll need to deal,
but first of all
before we go to the errors,
let me go back here
to the main flow.
So that we have a link now,
we have a link here to the issue edit
and a widget that will popup
this page on a modal window.
And if you recall
this page has the normal layout.
So it has the other, the menu,
the main content area,
a footer as well and we don't want
to have all these in our popup.
We only want to have this, this,
this edit record to edit the issue.
So what we're going to do
is to as we did for the dashboard.
Let me go into the preview...
To the tree, we are going
to change this, this layout normal to use.
In this case to use the layout here.
Okay and since the layout popup
doesn't have these place holders,
we'll need to remove this content
from this page.
We don't need it,
we don't want the menu
and we don't want the page side.
We already added the title to our popup.
So let's just remove this content
and here it is.
This is our popup.
And, and we'll need to...
We'll need to change also, also the logic
that we have for these actions.
If you recall our save action.
Let's see it.
Our save action we added a switch to
redirect this page to several other pages,
but now we are editing this issue on
a popup, so we don't need this redirects.
We don't need this. So let's remove it
here and let's add an end node here.
We don't want this,
but we need to tell the parents.
We need to tell the parent of
the popup widget that it needs to refresh
and to do that we are going
to use here an action.
One of those two actions
that we saw earlier. Those popup actions.
We need to use this popup notify.
So this is action that triggers the
notification to the handlers that will,
we will implement later on.
So we need to put here this notification
and again this is very similar
to the notify widget.
We have an argument that we need to
fill in this case it is a text argument.
We don't want to send
a particular message.
In this case we will use
an empty strain here.
And after save, after we save the issue
on the popup, we actually want to close
the popup and this is where
we are going to use that second action.
So let's add here the other popup action.
The popup editor close.
to close the modal window that was open
by the widget and here it is.
So the save action is all done and, but we
also need to fix here the cancel action.
Remember that we added also here
in this condition.
So let's remove this again.
Add an end node to the flow
and we need in the cancel action
is actually to close the popup.
So we need to execute
this popup editor close.
So this is all done for our issue edit
page and now we need to fix these errors.
And these errors are here because,
we added in the issue description,
we added here the notify widget.
So this means that all the pages and all
the webblocks that use these descriptions
as webblock, we'll need
to implement the onnotify handler.
So that's set here to use
in use screen action
and what we want to do here
on the dashboard page,
what we want to do when we edit
an issue here is actually to refresh
both of these lists because if
we say that we edit a high priority issue
and say that it is a low priority,
it will need to appear on this side
and the same happens if we edit
a low priority issue.
So we actually need to on this onnotify,
we need to refresh.
Let me close this. We need to refresh the,
both of the lists that we have on the page
We need to refresh, we need to refresh
the queries. So let's go ahead and refresh
both of the screens that we have on the
preparation here and the low priorities.
And now that we have the new data
to be shown on the page,
we need to refresh the table records
or the list records in this case.
Which is what we have on the page.
The high priorities issues list
and the low priorities issues list.
And there is one other thing
that we need to do.
Remember that we need to update the menu.
Since we are editing the issues,
the issues may change from high to low
and this changes the counting
on the issues that we have on the menu.
So we need here also to refresh the menu.
And again we don't have the menu here
because we didn't give it a name.
So let's go back to the page
and set a name for the menu.
And now we can use it here.
And here we have it.
Okay, so again now we are refreshing
everything. All the lists on the page.
Both the high and the low.
Not the low, because we need to bind,
we need to bind here the onnotify
to our uonnotify screen action.
So now we are refreshing everything.
The high and low priority
and the menu on this page.
We still have some errors here. Let's see
what it is. We have some warnings.
First of all let's see
what are these warnings.
Okay, remember that we added,
we added destinations on the issue edit,
which we removed. So,
we no longer need these connectors here.
So we can remove them.
We have here an option to do that.
Let's delete these three connectors
and just remove these warnings
and we still have this error
and this error is on the issues webblock.
So again we are using here the issues
description and as we are using this
and we have the notify widget.
We need to implement here
the handler for the notification
and in this case we are going to point
this handler to our refresh issue table
action that we have here,
because this already refreshes the query
and refreshes the the table records.
There's only one thing missing there,
which is we need to refresh
the menu as well and again
to refresh the menu,
we will need to do the same thing we
did for these two buttons, if you recall.
They are bound to this set
issue priority action
and what we did here
was after updating an issue
we used the notify widget action again.
So this means that here we will need
to use the notify widget action.
We don't need to use it all the time, so
let's see where this action is being used.
We are using this action
when we sort the table.
And when we sort the issues,
we are not actually changing anything
in the data base, we are just sorting
the issues on the table
and same happens here for the pagination.
We're not changing anything on the table.
We're just changing the issues that are
shown here on the table records.
So for us to condition this, this,
the use of this action, notify widget
To condition this we're going
to need some parameter on this action.
So let's add here, lets add here
the parameter that says notify parent.
And when this boolean is true,
so when this boolean is true
we will use the notify widget action
there and otherwise we just end
the request there.
And now we have again some errors
and a lot of them,
because we need to set this,
this parameter on the webblock.
We don't need to fill in this parameter
all the time,
so we don't need it to be mandatory.
It could be optional and by default
we don't, we don't notify the parent.
So this means that when we sort using
these widgets and when we change page
using this other widget,
we don't need to notify the parent.
All we need to do is here in this,
in this webblock, when we deal
with this notification.
In this case we do need
to notify the parents,
so let's set this as true.
And this is everything, so let's,
let's try to see our popup in action.
Let's publish our application.
Let me just close this.
Let's publish our application
and see our popup in action.
Okay, so this is the first place where we
can edit the issues on the dashboard.
So let's try to edit issue number 40
and now as you can see
instead of opening a page,
we have a modal window in our page.
We can move it along the page
and we can't do anything on our page.
But we still have the context
and we can edit this issue
and say that this is a low priority issue
So we will see number 40 moving.
From this list to this list and we will
see these counters being updated.
So we will no longer have seven;
we will have six high priority issues
and nine low priority issues.
So let's do it.
And here we have it.
So number 40 is here,
the counters got updated
and we have our feedback message.
Let's, let's do the opposite,
so let's move again number 40 to
a high priority. Now from this side there.
So it all seems to work here.
Let's, let's try to edit
an issue now on one of these lists.
For instance on the unclassified,
So let's say for instance that
this number 53 is now a high priority,
but instead of using these buttons,
I will edit this issue on the popup.
Here it is and let's say
that this is a high priority issue.
So we will save this issue.
It will disappear from this list
because it is now classified
and we will have our counters updated.
We will have 22 unclassified issues,
8 high priority issues,
and 8 low priority issues.
And here we have it,
our feedback message
saying that we updated issue number 53
and we have now 8 priority issues,
8 high priority issue
and 8 low priority issues. And that's it.