Show and hide fields within Form Table OR reduce space between form tables

Question

I am creating a form using the extension library Form Table control. I was able to create a hide-when like function with help recently in this post: firing dojo onchange based on value selected in combobox

I am finding, however, that this code does not work within the form table element. I can put my show/hide div around the entire table and that works. Finding that, I thought I could just create multiple form tables and show or hide them as needed, but that looks bad because there is a lot of space rendered between form tables and I don't know how to get rid of it.

Any tips on removing the space between form tables, or on an alternative way to execute a "show/hide" within a form table control?

Thanks for any assistance.

Nate

Answer 1

It doesn't help if you hide the content of the table cells. A table row is still visible even if all cell contents are hidden. That is different to Notes client table. In browser you have to hide the whole table row <tr> ... </tr>.

Server side table row show/hide

You can put your hide code into <tr> tag:

<xp:table>
    <xp:tr rendered="#{....}">

Then the whole table row will be invisible if code returns false.

Client side table row show/hide

For client side show/hide you would give the <tr> tag an id:

<xp:table>
    <xp:tr id="row1">

Then you can address the table row with the id and hide the row with e.g.

dojo.style(dojo.byId("#{id:row1}"), "display", "none")

and show it again with

dojo.style(dojo.byId("#{id:row1}"), "display", "")

Client side table row show/hide for Extension Library Form Table control

Unfortunately, we can't use the id of xe:formRow because it gets lost during rendering. That means, the id is not available for client side settings.

But we can specify a styleClass.

<xe:formTable
    id="formTable1">
    <xe:formRow
        id="formRow1"
        styleClass="classRow1">

This class name "survives" the rendering and we can use it to get all ids which have this class and hide the table row

dojo.query(".classRow1").forEach(function(node, index, nodelist){
    dojo.style(node, "display", "none")
});

and show it again

dojo.query(".classRow1").forEach(function(node, index, nodelist){
    dojo.style(node, "display", "")
});

Answer 2

There's a property on the event for "Do not validate or update data". If you use that, it won't run the validation for your partial refresh, so will update the visibility. It will still run data conversion, so if you put a non-numeric value in a number field, it will still fail.

As a pointer for the future, if you have the same rendered property on multiple elements, a dataContext will perform a bit better. Placing the dataContext in a Panel performs better than bound to the XPage or Custom Control itself.