Hide columns in a ViewPanel

Question

I'm using a standard viewPanel to display view data in an XPage. The application is using the Bootstrap3.2.0.

To make the rendered table responsive, I added some bootstrap classes to both header and column.

<xp:viewColumn columnName="StatusDescription"
    id="viewColumn4" styleClass="hidden-xs hidden-sm">
        <xp:viewColumnHeader value="Status"
            id="viewColumnHeader4" styleClass="hidden-xs hidden-sm">
        </xp:viewColumnHeader>
</xp:viewColumn>

When I resize my browser window, the column is hidden correctly, but the header remains. Apparantly, the styleClasses are not added to the th tag, but to tags inside the th.

<th role="columnheader" scope="col">
    <div class="hidden-xs hidden-sm">
        <span>
            <span 
    id="view:_id1:_id2:facetMiddle:pnlViewPanl:viewColumn4:__internal_header_title_id" 
            class="hidden-xs hidden-sm">Status
            </span>
        </span>
    </div>
</th>

The result is that the table header is out of sync with the displayed data.

Does anybody know how I get the style class in the th tag?

shillem shillem · Accepted Answer · 2018-05-24T12:38:13

It looks to me that either the view class renderer or the view column definition properties, or both, are messed up.

You would expect that <xp:viewColumnHeader styleClass="hidden-xs hidden-sm"> controlled the th style class but as you have seen it doesn't.

In order to achieve what you are trying to do you could try to extend the renderer class for the viewPanel that is DataTableRendererEx. But the approach might appear outlandish to you and, personally, way overkill considered that IBM has many of the class' methods declared as private and that would force you to rewrite the greater part of the class' code just to get your hands on the bit you need to change.

There would be some hope, in the sense that the code actually looks for the presence of a headerClass property for the xp:viewColumn. But, lo and behold, the property is not explicitly defined for the component and, in fact, you don't see it among the other properties of the viewColumn from Designer. Even if you were to explicitly write it through the xsp source code perspective Designer would not let you do it, it would not compile. You could ask IBM to fix the property definition file for the viewColumn component but frankly I don't know how feasible that is: XPages is in disrepair.

So what I can offer you is a workaround. There's a way to sneak in properties via theme definition (I wrote a bit about it in this blog article). So, in order to use this workaround, you have to use a theme. If you already have it you can simply add this rule:

<control>
    <name>Column.View.Hidden</name>
    <property>
        <name>headerClass</name>
        <value>hidden-xs hidden-sm</value>
    </property>
    <property>
        <name>styleClass</name>
        <value>hidden-xs hidden-sm</value>
    </property>
</control>

The control name is arbitrary. Generally I use the original name of the control family -Column.View - and append the name of the variation - .Hidden in this case. If it were just Column.View the rule would apply to all the viewColumns everywhere. With Column.View.Hidden I have a rule I can apply on a per case basis. At this point I just have to specify a different theme Id (themeId property) for the column I want to behave differently.

<xp:viewColumn columnName="columnName" id="viewColumn1" themeId="Column.View.Hidden">
    <xp:viewColumnHeader value="columnHeaderName" id="viewColumnHeader1" />
</xp:viewColumn>

Hide columns in a ViewPanel

1 Answers