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
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.
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.
Dec's Dom Blog 