Xpages: ExtLib V12: Application Layout with Bootstrap Configuration. Collapsible left column

Question

I'm using the Application Layout Control with the bootstrapResponsiveConfiguration. The nsf is running on an 9.0.1FP2 server and i'm using the latest Extension Library version v12. The source looks like this:

...
<xe:applicationLayout id="applicationLayout1">
        <xp:callback
            facetName="facetMiddle"
            id="facetMiddle">
        </xp:callback>
        <xe:this.facets>
            <xp:callback
                facetName="facetLeft"
                id="facetLeft"
                xp:key="LeftColumn">
            </xp:callback>
            <xp:callback
                facetName="facetRight"
                id="facetRight"
                xp:key="RightColumn">
            </xp:callback>
        </xe:this.facets>
        <xe:this.configuration>
            <xe:bootstrapResponsiveConfiguration invertedNavbar="true"
                collapseLeftColumn="true" productLogoAlt="SelfService"
                placeBar="false" footer="false" legal="false" pageWidth="fluid"
                fixedNavbar="fixed-top">
...

The result is: if I resize the window on the desktop or view the page on a mobile device, the left column is hidden (as expected).

But unfortunately I do not get a handle to access to the Left Column. I expect a Menu button, or something similar.

Does anyone have any idea what I'm doing wrong? Thanks in advance

Answer 1

The 'collapsible left menu' feature will only work if you have a menu in the left column of your application layout that (in the generated HTML) contains a list of menu options using the <ul> tag (as is common in a Bootstrap layout). I just tried it with just this in my left column:

<ul>
  <li>Menu option 1</li>
  <li>Menu option 2</li>
</ul>

and it worked: it automatically created a button in my layout with the default label 'Menu' (can be changed using the collapseLeftMenuLabel property). The button is only visible on small screens and opens a popup menu showing the menu options you created.

You can create the menu by writing HTML in the XPages, or by adding an <xe:navigator> control to the left column: that will also create a <ul><li> structure in the generated HTML.