More UI Patterns with OutSystems Widgets
Provide Feedback to the User
This lesson is part of the Developer Online Class for OutSystems 9 course.
LEARN MORE

Transcript
In this lesson we are going to talk about sending feedback to your end users,
and we will see the basic concept that will help to tackle
more complex applications.
We want to send feedback to our users every time they do something
on the application.
For instance, when they edit an issue.
When they save data back to the server, we want to provide them
with some feedback, and we will do that by executing an action
after we update the issue on the database.
This action that we're searching for is the feedback.
It's the feedback message that you'll find here.
But if you pay close attention, you will see that this feedback message
you found under the References folder,
and this is the basic concept that we were talking about.
So you can reuse elements developed in other application modules
as if they were created here.
The only restriction is that you cannot change them here.
You will use them as they are, and this feedback message belongs to
the 'Rich Widgets' module.
The 'Rich Widgets', is an outsystems espace module,
that is available by default as a reference to all the espace modules created
in Service Studio.
Recall that when we created this application we already had it here,
the 'Rich Widgets.'
In the same way, the same principle applies
to the Charts and to the Users modules.
They also are modules that have elements that you can reuse and then that you are
reusing in some way in this application.
Let's go ahead and use this feedback message.
This action has two parameters that we need to set.
The first one is the text that we want to show to our users.
Let's create here a message to the users.
So we want to say that the issue that they were saving
so let's have here the issue ID and issue subject.
The issue, this one,
and now the subject there,
and we are going to say that was successfully updated.
Okay, so this is the message that we want to show.
There's one other parameter that need to set which is the message type.
If you select the drop down, you'll see that there are four possible values
and they have this icon here that tell you what type of message
will be shown to the user.
If we choose "success" here, which is obviously what we want,
we will show a success message to the users.
If we chose "error" then we will show a red text balloon with an error message.
So for this one, let's select here a "success" and as you can see,
this feedback message is actually what we were already using here
in this exception flow, and if you select it here,
you will see that for this case, we're showing an error message, okay?
This is pretty much what we want to do, so we want to send this message
through this action.
What we need to figure out is how is this message going to be shown to the users.
This leads to another element that comes from the 'Rich Widgets.'
If we expand here the 'Rich Widgets,' you'll see that we have a lot
of elements here and one of these elements is this feedback,
and this feedback message here this is not the action that we are using at the flow.
This actually is a webblock.
So we are using this webblock, let's see where.
Let's use here this option to find the usages.
We are using this webblock in our layout webblocks.
So this means that every page that we have, that is built upon these two layouts
we'll have this webblock there and when we set this message here,
this webblock, this is actually the UI element,
will render this message according to this message type.
Okay, so there's one other place where the users do something in the application,
do some action, which is when they set the issues as high
and low priority, and this is done on the issue's webblock, if you recall.
So these two buttons, they also change something in a database
and we want to give back a feedback message to the users.
So here in this action, we will also add a feedback message
after we update issue in the database.
Again, we'll find our feedback message and compose our text.
So we'll say that the issue,
and let's again find
the ID of the issue.
Here, the issue with this ID. Sorry for missing the '+' sign here.
Now, at the subject
was set with... and now we want to add here the priority that we'll set.
So in this case, to get the priority, we are going to use this attribute,
this input parameter that we received on the action.
And to use it, we are going here to our static entity
and we are going to use this built-in function, the Get Priority,
and this receives an attribute, as you see here, which is the Priority Identifier.
So we are going to use this new priority here to get the priority.
Now, we want to show the label.
The issue with this ID was set with, and this will be high or low,
which are the labels. Let me show you here,
which are the labels that we have for the priorities.
So here, high as the high level and low is low.
So high or low, and priority at the end.
Okay. So we're set for the message.
Let's set again the message type and this will also be a success message.
We're pretty much all done. Let's publish and see our feedback messages.
Okay, so let's edit one of these issues. Let's edit #40 for instance,
and say that this was Elizabeth M. Lincoln that sent this feedback,
and let's save.
Here it is, our feedback message.
So the issue #40, 'problem in the garage door', was successfully updated.
So we missed something here?
We are missing the single quote, closing the subject.
We'll go back to Service Studio and fix that.
Let's see the feedback when we set the priority.
So on the unclassified issues, if we set #53 as a low-priority,
there we have it again. So the issue #53, "help mounting camera,"
was set with a low priority. Again, here I forgot the single quote.
So let's go back to Service Studio and add those quotes.
So here, I am missing a single quote here,
and on the issue edit, on the save,
also here on the feedback message, the single quote.
Let's publish and see.
Okay, let's revert back this issue #40 and remove here this "M." that we added.
So again, if we save, here we have the message.
We set the message with the feedback action
and the feedback webblock is the UI element responsible
for rendering this message. That's it!