Learning XPages Part 14 : Applying OneUI To The Locations List
Tags : Lotus Domino XPages OneUI
Bookmark :
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.
Bookmark :
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.
