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
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.