Learning XPages Part 14 : Applying OneUI To The Locations List

In the last part of the series me managed
to get the data from a view to appear in our sidebar menu by using a repeat.
It didn’t look great so we now need to style it with the OneUI css to make
it look nice for the end user.

After reviewing the OneUI CSS I found
that there were a couple of different ways that I could do this.  I
could create my menu as an unordered list by adding in the <ul> and
<li> tags in the correct places in the XPages source like this

A picture named M2

Notice how the <UL> tags are outside
the repeat and the <li> tags are inside the repeat. This is a great
example of how you can use a repeat with multiple components or controls
inside of it. While the unordered list format might be ideal I decided
to go with a different OneUI look that I found in the defaulttheme.css
file. and that is the <h3> tag. This produces a nice large menu option
that the user can select. So in the code above, remove those <ul>
tags and change the <li> tags to <h3> and save and refresh.

A picture named M3

Looks much nicer now.

We are going to leave the sidebar menu
for the moment and come back to it in a later part once we have created
something for it to link to. In the next part we are going to add some
data to the main contents area.

Tagged with: , , ,
Posted in None
%d bloggers like this: