Customize the Look using CSS
Customize the Application Menu
This lesson is part of the Developer Online Class for OutSystems 9 course.

until now you have probably been wondering
how does the menu work in this lesson
we will customize the application's menu and change its appearance
first of all let me show you here let me go and open the widget tree
and show you where we'll find the menu and pretty much like the header
the menu is simply a web block that is placed inside
the menu placeholder it is added to this placeholder
every time you create a new screen
so let's open the menu web block
and you'll notice that this
web block also includes here at container
that has a set of
other web blocks which are each one
of the menu options that you have and if we expand this
you'll notice that we have two other placeholders one for
the menu option itself so sorry the menu option itself here
dashboard this one there and
another placeholder for submenu items
and one other thing that I like to show you is that
if you notice here this expression and let me open here the expression editor
this is actually using here this
get menu item function so let me just right-click
let me just right-clik and go to this function
and you'll notice that this is actually
this is actually the entity action for
the menu item static entity and in this case
we are using this action to retrieve the dashboard
record there and then we are showing its caption
okay let me a show you this if I select here the dashboard
and if I change here the caption so my dashboard for instance
you'll notice that this immediately reflects here on the
on the web block okay so
let me just reverted this back to dashboard and
what I want to do here on the menu the change that I want to introduce in the
is that for each one of these three lost options
I want to add the number of issues that
are on these condition so the issues that are
unclassified that are high priority and that are
low priority and to do this I will create a user action
so let me just go ahead and do this I will create a user action
that will count the issues
by priority and
to do this I'll need also to add an input parameter
which will be the priority priorityId in this case
okay now to get the issues with this priority
we'll need to add here a query
get issues
and I want to filter this query by
this input parameter so again you've seen this before
I'll just use this trick here this tip to add
this PriorityId to the query and there you have it
now we have the query filtered by the PriorityId
and I want to return I want to return something out of this action
so I need an output parameter and in this case
I want to return the number of issues not
the issue list not the list of issues
I want to return the number of issues so I'll name this
count and I will need to assign
to this output to this
output parameter the count let me just add here the assign node
I'll need to assign to this output parameter
count the result
of the query in this case not
not the list I want to return the count
the number on the issues okay so
we're pretty much set and done for creating this
action now we need to use this action
in our web block here
on the menu and to use the action on the menu we'll actually need to
add here a preparation
and let's go ahead and use the action so
this one so first issues that we're going to count will be the
high priority ones so let me just rename here so that we know what this is
high and now we want to count
the low priority issues there
and set this to low
and finally just rename this sorry
low and finally let me add here some space
I want to count the unclassified issues
unclassified issues are the issues that don't have a priority
so for this parameter here I will use NullIdentifier
okay now we have
the actions let's use them here on the web block
let me open here the widget tree and show you
we're going to add inside this link
and before that expression that he have there we're going to add a new
to display the value that we just
got from the action so add an expression here
and the value will be in this case this is the unclassified so the value will be
the output
I forgot to rename this we should rename this to unclassified the output
of this here
and let me just set here an Example so 5
for instance and let's do the same for the other ones
set the value so this is the high
that one and set an example
and finally do the same for the low
and set here the value
this one low okay
set an examples as well so 2 for instance
now we don't have any spacing in between these
elements and I'm going to fix that
by adding a new style definition
so let me open here the CSS editor and you'll notice that
in this case this first tab
is not the web screen this is actually the web block
that we are on okay this is the menu web block and again this is for
the more specific styles that we are only going to use
inside this web block so let me paste here
let me paste here from the clipboard the style that I want to define its this one
again you will find is in video lesson resources
let me just close this and I will apply that style to
these expressions that I added to the links so
this one notification
there you see that this fixes the spacing and
it renders this value in a different way and also
for the other ones
and finally
this one okay so we're all done here for this
for this web block let's see how this is looking in the page
for instance the dashboard and
I want to fix this color as well
so I will again add a new style definition let me just
open up here the style sheet editor
and I will add this style definition here to
the customer support because this is something I want to have
throughout the application and let me
let me just paste it here from the clipboard
okay and you see it immediately reflects there the change
in that color for the highlighted menu
let's just publish and see this in the browser
okay so here we have our issues list with
the menu reflecting the number of unclassified issues the number of high
priority so it's 2
there the number of low priority
and with the different colors in the menu
and that's it!