How to conditionally change width of left column in xe:applicationLayout?

Question

My xe:applicationLayout is in my demoLayout.xsp CC. The left column width is set in the .lotusColLeft class to 220px by default. I can manually override this setting by adding the following CC to any XPage that needs a 300px wide Left column:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<style>
    .lotusColLeft { width:300px }
    .hugeWidth { width:2000px }
    .lotusContent { overflow-x: scroll; }
</style>
</xp:view>

This works nicely, but I actually need a 400 and 500 pixel wide Left column for some xpages. Yes, could do this with 3 CCs like the one above, but was hoping for a better approach where I can simply set the desired width in a custom property at the time I add my demoLayout.xsp CC control to my xpage.

Any ideas?

Answer 1

Rather than putting the style tag directly on the Custom Control, how about using a Computed Field control with escape="false" (i.e. output as HTML). Then, in the value property, you can computed the width of the left column. Something like this works for me:

<xp:text escape="false"><xp:this.value><![CDATA[
<style>
   .lotusColLeft {width:#{compositeData.passedWidth};}
</style>]]>
</xp:this.value></xp:text>

You can then add a passedWidth property on the Custom Control and pass the relevant width in. You could get more sophisticated and set the loaded property of the Computed Field so it only shows if the passedWidth property has been set.

Answer 2

I like Paul's suggestion, but another approach would be to define two conditionally rendered stylesheet resources on your layout custom control (or just one, with a computed href). The control could have a property of leftColumnWidth that accepts values of "small", "medium", or "large". If small, no additional stylesheets are rendered. Otherwise it renders one of the two. This way if you ever need to change the exact width associated with either (as well as other elements that might make sense to tweak to suit the adjusted layout), you can just change it in the stylesheet without having to touch each page.