Show custom controls on webpage in other order than layed out in DDE - Xpages

Question

I have a number of custom controls layed out on an xpage. I want these controls to be displayed in the order of a setting in a notes document

So my xpage might look like this in DDE

CustomControl1
CustomControl2
CustomControl3
CustomControl4

but when the custom control is displyed on the webpage the custom controls should be displayed in the following order (based on the setting document)

CustomControl4
CustomControl1
CustomControl2
CustomControl3

anyone have any ideas how to accomplish this (server side)

Answer 1

You can use the xp:switchFacet in combination with a xp:repeat to calculate the order at runtime like this:

<xp:repeat
    id="repeat1"
    rows="30"
    var="rowEntry">
    <xp:this.value><![CDATA[#{javascript:var arr = ["Control1","Control3","Control2"];return arr;}]]></xp:this.value>
    <xe:switchFacet
        id="switchFacet1"
        selectedFacet="#{javascript:rowEntry}">
        <xp:this.facets>
            <xp:panel xp:key="Control1">Control1</xp:panel>
            <xp:panel xp:key="Control2">Control2</xp:panel>
            <xp:panel xp:key="Control3">Control3</xp:panel>
        </xp:this.facets>
    </xe:switchFacet>
</xp:repeat>

Instead of the Array arr you can use data based on a document or xsp.propertie. The Output of this code is Control1 Control3 Control2 and in your Designer you have your controls inside switchFacet in following order: Control1 Control2 Control3.

Answer 2

Without knowing the real pain of your project I can only assume that the individual position needs to be defined at runtime, or something like that.

In general: controlling a page's layout is a pure CSS job. On the resulting page almost anything can be positioned almost anywhere within the page's range, and it doesn't matter where it was placed at design time. So, if you enclose your custom controls within their own containers (panels / divs) then you should be all set. You might define positioning classes in CSS and then have some SSJS code decide which class is assigned to what div.

If for example you have a custom control for each day of the week, and you always want to have the current day at the top-most position, then you could define 7 css classes as in ".today", ".todayPlus1", ".todayPlus2" ... ".todayPlus6". Write your positioning rules for each class. And finally compute each panel's styleClass property based on the current week day.