Hide elements if detail table is empty

OL Connect Professional Designer
1

Hi,

I could use some help to build a simple conditional script to hide the table (and other elements) every time a detail table has no records.

Following conditional script returns “cannot read property ‘length’ from undefined" for these records that have zero detail lines in table3 (and probably this makes sense as no table is defined if there are no records)

    if (record.tables.table3.length == 0) {
    results.attr("data-conditional", "");
    results.hide();
    } else {
    results.show();
    }

thank you!
Akis

2

Hi Akis,

No scripting is needed, there is in option in the Attributes panel to achieve this. Select the table element via breadcrumbs bar at the top the editor or via the Outline view and select the “Hide when empty”-option in the Attributes panel.

See the screendump below.

Erik

table-hide-when-empty
table-hide-when-empty1436×519 157 KB

3

Hi Erik,

I don’t get this option, not sure why (see screenshot)
I have this option in the lest page of the insert dynamic table wizard, though.
However (a) it doesn’t hide the headers and (b) I would like to hide the .svg lines too, that you can see above each table on the screenshot.

Many thanks!

37
372934×1718 812 KB

4

Hi @Erik,
I just noticed that the hide when empty attribute doesn’t show only when in preview.
Still, it is checked but doesn’t apply to headers and I also need to hide another element along with the table when the table is empty.

thanks
Akis

5

Which version are you using?

6

I’m using Designer 2020.2.1.67630

7

I mocked something, could you try the following script. It tests two scenarios, first the existence of the detail table and subsequently it’s length.

var theTables = Object.keys( record.tables );
var myTable = "table3";

if( ! theTables.includes( myTable ) || record.tables[ myTable ].length == 0 ) {
	results.hide();
}
8

It still returns the same error when there is no lines.
I tried with checking only the existence, no errors, but didn’t work

9

Would you be able to share your template? (no data needed).

10

The following should do the trick:

var myTable = “table3”;
if( false == myTable in record.tables || record.tables[ myTable ].length == 0 ) {
results.hide();
}

11

Also suggest to remove the <br> (break) elements between the <img> and <table> elements and add the following to your css.

.qquanttable1 {
margin-top: 1rem;
margin-top: 2rem;
}
12

Hi @Erik, I just tested both your suggestions and work great!
Thank you so much.

cheers
Akis

1 Like
13

Hi,

I use a way next to your, testing the availlability of the table and not his content. With simple tables (not using PPC wizard classes like table–minimalist) , just like this :

if (record.tables.table3) {… your code here}


Hope it will help someone.