How to make sections in Xpages look like this

Question

I am puzzled. The oneUI 3 page has a nice section. It looks like this:

I create a new db and set the theme 3.0.2 and put the code below and it doesn’t look like what I'm trying to create.

How can I use the OneUI documentation to reproduce what I see there?

<?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex"> <xp:section id="section1" header="Header" headerStyle="lotusSectionHeader2"> </xp:section> </xp:view> 

Good point. It looks like this:

Answer 1

Note: the Widget Container control (xe: widgetContainer) in the XPages extension library is roughly equivalent to the OneUI control. You can see that in the Extension Library Demo App: XPagesExt.nsf / OneUI_WidgetContainer.xsp It might be better to customize the page using this control rather than the xp: control.

In addition, the OneUI 3 document that you are linking to, to the right of the page, 25% down the page, has a Subject drop-down list where you select "default" or "gen2". The behavior you are asking for is similar to the behavior of "gen2" (similar to OneUI 2), while your screenshot of how it looks is closer to the "default" behavior (OneUI 3). You can learn how to enable the appearance of gen2.

Answer 2

If you paste this code from the documentation, does it work? If this happens, you need to move the standard html elements to the xpage elements.

  <!-- section is an HTML5 element. Use div if you are using HTML4. --> <section class="lotusSection2"> <!-- header is an HTML5 element. Use div if you are using HTML4. --> <header class="lotusSectionHeader"><div class="lotusInner"><a class="lotusArrow" role="button" aria-expanded="true" aria-controls="sectionBodyID" href="javascript:;" title="Collapse section"><img class="lotusTwistyOpen" src="../../css/images/blank.gif" alt="" aria-label="Collapse section" /><span class="lotusAltText">&#x25bc;</span></a><h2 class="lotusHeading"><a href="javascript:;">Section Header</a></h2><a class="lotusIcon lotusActionIcon" href="javascript:;" role="button" aria-haspopup="true" aria-owns="[menuID]"><img src="../../css/images/blank.gif" alt="" /><span class="lotusAltText">Actions</span></a></div></header> <div id="sectionBodyID" class="lotusSectionBody"> <div class="lotusChunk">Data goes here....</div> <header class="lotusSubheader"><a class="lotusArrow" role="button" aria-expanded="true" aria-controls="subsectionID" href="javascript:;" title="Collapse section"><img class="lotusTwistyOpen" src="../../css/images/blank.gif" alt="" aria-label="Collapse section" /><span class="lotusAltText">&#x25bc;</span></a><h3 class="lotusHeading2"><a href="javascript:;">Subsection</a></h3></header> <div id="subsectionID" class="lotusSubsection"> More data goes here.... </div> </div></section><!--end section--> 

Answer 3

As Mayr points out, managing a Widget container does what you want using the following code:

 <xe:widgetContainer id="widgetContainer1" titleBarText="Section Header" collapsible="true" style="width: 300px;"> <xe:this.dropDownNodes> <xe:basicLeafNode label="test1"></xe:basicLeafNode> <xe:basicLeafNode label="test2"></xe:basicLeafNode> <xe:basicLeafNode label="test3"></xe:basicLeafNode> </xe:this.dropDownNodes> More data here... </xe:widgetContainer> 

But, as she points out, the look and feel you posted is for the Gen2 theme, which is not implemented in XPages. So what you get is: