More UI Patterns with OutSystems Widgets
Edit a Record in a Pop-up
This lesson is part of the Developer Online Class for OutSystems 9 course.
LEARN MORE

Transcript
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.
And lets search for it.
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.
This webblock has some javascript 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.
Issue link.
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
is the notification.
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.
The layout popup.
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.
So this again gives us some javascript 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
that I will add here.
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 it is a boolean.
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 for instance.
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, unclassified list.
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.
Let's see if this is so.
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.