Hiding a html block in the first and last record of a tabular report

[Hamish]

I have a link in a html block of each record on a table in a tabular report.

However, I need to hide the a href link, or the whole html block, for the first and last record in the record set.

Is there any way of doing this?

 

[futurist]

Hi @Hamish,

I was able to come up with a solution for this one but it would require some JavaScript and some configurations on your table and DataPage setup.

The first thing you need to have is an Autonumber field on your data source. If you already have an Autonumber field on your table, you can use that. But say you are using a Random ID or a GUID as IDs for your table records, we would not be able to determine which one is the first and last record because sorting them in an alphabetical order won't exactly return the actual first and last record (however, if you do have a Date_Added field that stores the date and time each record is added, you can also use that, but I digress. For this example, I used the Autonumber field to determine which are the first and last record).

Now, go to your DataPage and go to the Edit view, and go to the Configure Results Page Fields screen. The next thing that we need to do is to grab the first and last record of your table, because we will use these for the code that is going to hide the link for those records. For us to do that, we need two Calculated fields, one for the first record, and one for the last. These are going to grab the Autonumber value of those records.

 

For the first record, use this formula:
SELECT TOP 1 Autonumber_field FROM Forum_Table_1 ORDER BY Autonumber_field  ASC

 

For the last record:
SELECT TOP 1 Autonumber_field FROM Forum_Table_1 ORDER BY Autonumber_field  DESC

Wherein "Autonumber_field" is the name of the Autonumber field, and "Forum_Table_1" is the name of my data source. Make sure to change these to match your data. I suggest placing these Calculated Fields at the very end of your fields. (Make sure to also include the Autonumber field on the Configure Results Page fields -  go back to Select Results Page Fields and bring that field over. I suggest placing that at the top of your fields so it's the first one. Make sure that you do this step because this is important to the script)

At this point, you'll notice that these fields translate to columns on your Tabular Report. No worries as we will also hide them later on. We just need to utilize the calc field to grab the first and last records. (we'll also hide the Autonumber field, unless you want them displayed)

Next, add a Header and Footer. Select your Footer, disable the HTML editor (by going to the Advanced tab and unchecking the checkbox) and going back to the Standard tab, use the following script:

 

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {

var header = document.querySelector("table tr th:nth-child(7)");
var header2 = document.querySelector("table tr th:nth-child(8)");

var cells = document.querySelectorAll("table tr td:nth-child(7)");
var cells2 = document.querySelectorAll("table tr td:nth-child(8)");

header.style.display = "none";
header2.style.display = "none";

[].forEach.call(cells, function(cell, i) {

cell.style.display = "none";

});

[].forEach.call(cells2, function(cell, i) {

cell.style.display = "none";

});

var ids = document.querySelectorAll("table tr td:nth-child(1)");
[].forEach.call(ids , function(cell, i) {

if(cell.innerHTML == [@calcfield:1#] || cell.innerHTML == [@calcfield:2#]  ){
document.querySelector("tr:nth-child(" + (i + 1) + ") td:nth-child(6)").style.display = "none";
}

});

var autonumberheader = document.querySelector("table tr th:nth-child(1)");
var autonumberheadercells = document.querySelectorAll("table tr td:nth-child(1)");

autonumberheader.style.display = "none";

[].forEach.call(autonumberheadercells, function(cell, i) {

cell.style.display = "none";

});

});
</script>

 

Few things here that you need to change:

1.
var header = document.querySelector("table tr th:nth-child(7)");
var header2 = document.querySelector("table tr th:nth-child(8)");

var cells = document.querySelectorAll("table tr td:nth-child(7)");
var cells2 = document.querySelectorAll("table tr td:nth-child(8)");

 

Wherein the 7 and 8 refers to the order at which the two Calculated Fields came in. So basically, they are the 7th and 8th column on my Tabular Report. Make sure to change these with the corresponding number at which the Calculated Fields came in in YOUR Tabular Report. Make sure to change only the 7 and 8!

 

2.

document.querySelector("tr:nth-child(" + (i + 1) + ") td:nth-child(6)").style.display = "none";

Wherein 6 refers to the order at which the HTML block that contains the link came in. In my tabular report, it's the 6th column, so make sure to change the 6 to the corresponding number on your tabular report. 

 

And that's it! Save changes and you are good to go. You may also see the DataPage I made: https://c1hch576.caspio.com/dp/db26a00060c511c9f8e94f69946e