Jump to content
  • 0

Display field results in a header



Hi, I wanted to display the field results into my header, but as I try display it, it is only showing 1 record,  but I need all the record that matches in my search field. So I have this Report DataPage that a search field for Roles. and on the results Page it is displaying a list of Names. What I wanted is that I should display all the Names in the header of the DataPage. but I can't seem to know how to do it.

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

Hi haxx0r,  This can be achieved within Caspio, it requires custom programming to display all the Names in to the header. You may apply this simple JavaScript code into your DataPage and see if it works on your workflow. First, Add this code inside your header, please do not forget to disable the html editor:

<div id="names"> </div>
var array = [];
This script basically creates a <div> where all the Names will be display, and also created an array where all the names will be stored.

Second, add a new HTML Block and use this code:
This script will store the Name values in to the array that you just created.

And lastly, Add this code into your footer:
var name_from_table= '';
array.forEach(function(name) {
    name_from_table += name + "<br/>";
document.getElementById("names").innerHTML = "<p>" + name_from_table + "</p>"

This code will now get all the values from the array that you created, and it will display the values in to the <div> that you've created in the header section.

I hope this works in your workflow.

Link to comment
Share on other sites

  • 0

Hi @haxx0r,

Here is what you can do to achieve your desired output:
(1) Add Calculated field and paste this Formula:
STUFF((SELECT ', ' + CAST (Name AS nvarchar) FROM TABLE WHERE Family_ID = target.[@field:Family_ID] FOR XML PATH ('')), 1, 2, '')

Note: Please change "TABLE" to the correct table name and Family_ID to the correct field name.

(2) Display the result of the Calculated Field in the Header. Please refer to the attached screenshot.


(3) Hide the Calculated Field. On the Header, click on the Source button first or disable HTML Editor in the Advanced Tab:
#target table:nth-of-type(1) td:nth-of-type(6) {display: none;}
#target table:nth-of-type(1) th:nth-of-type(6) {display: none;}


<div id="target">

Note: The number in td:nth-of-type(6) shows which column you want to hide. Please refer to this forum post for reference:

Then, paste it in the Footer:


Hope this helps.

Link to comment
Share on other sites

  • 0

Hi @AllMight and @LittleMsGinger

I am trying to do something similar to this only with the values from the search fields in a pivot table to be displayed in the header, unfortunately in pivot tables you can't use HTML blocks so are restricted to using the Header/Footer for any code.

I want to do this so when a PDF of the results table is printed using the Caspio download options it gives some context to the results for the user e.g. Name of person searched for, date range searched etc, etc as currently you can only use Authetication Fields, APP and System parameters in the PDF generator headers & Footers and can't display any  of the search field criteria such as below;

Datapage view;


PDF Generator result;



Have tried variations of getelementbyID such as;


<p id="d1"></p>

function check() {
  var x = document.getElementById("Value6_1").value;
  document.getElementById("d1").innerHTML = x;  


With "Value6_1" being the ID of the Date field "from" in a date search from/to criteria but without success and any help or suggestions that point me in the right direction would be appreciated!

Kind regards,




Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...