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?

Paul Stephen Withers Paul Stephen Withers · Accepted Answer · 2012-08-24T21:01:17

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.

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

2 Answers