Adding headers and footers to custom queries

[aware_support]

Let's say you want to represent the content of a custom query as an HTML <table> element. You want the body of the table to be represented by the body of the query template. So the body of the template you will enter into your custom query will look something like this:

<tr>
<td>{Name}</td>
</tr>

But how do you the <table> tag at the beginning and </table> at the end of the HTML? You cannot add it to the template because then it will be repeated for each row.

You can achieve this by adding this simple script to the initialization script of the query:

var oldHandler = config.dataBound;
config.dataBound = function (e)
{
oldHandler (e);
var widgetElem = $("#" + parser.m_widgetInfo.markupId)[0];
widgetElem.innerHTML = "<table>" + widgetElem.innerHTML + "</table>";
}

[Jaymer]

That’s awesome.
I had that question and problem three years ago, with no solution. So I gave up on custom queries for a long time. Thanks

PS. How many more these goodies can you dig up?

[himanshu]

PS. How many more these goodies can you dig up?

+1

[Jhstephenson]

That’s awesome.
I had that question and problem three years ago, with no solution. So I gave up on custom queries for a long time. Thanks

PS. How many more these goodies can you dig up?

Jaymer, have you had any luck with this?

I tried it and just get repeating headers on each line still.

Here is what I have for my HTML:

Code: Select all

	
<thead>
		<tr>
			<th>Client Name</th>
			<th>Case ID</th>
			<th>Case Type</th>
			<th>Date Filed</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>{ClientName}</td>
			<td>{CaseID}</td>
			<td>{CaseTypeDescription}</td>
			<td>{DateFiled}</td>
		</tr>
	</tbody>

And here is the script I put in:

Code: Select all

var oldHandler = config.dataBound;
config.dataBound = function (e)
{
oldHandler (e);
var widgetElem = $("#" + parser.m_widgetInfo.markupId)[0];
widgetElem.innerHTML = "<table class="blueTable">	++ widgetElem.innerHTML + "</table>";
}

[johntalbott]

That’s awesome.
I had that question and problem three years ago, with no solution. So I gave up on custom queries for a long time. Thanks

PS. How many more these goodies can you dig up?

Jaymer, have you had any luck with this?

I tried it and just get repeating headers on each line still.

Here is what I have for my HTML:

Code: Select all

	
<thead>
		<tr>
			<th>Client Name</th>
			<th>Case ID</th>
			<th>Case Type</th>
			<th>Date Filed</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>{ClientName}</td>
			<td>{CaseID}</td>
			<td>{CaseTypeDescription}</td>
			<td>{DateFiled}</td>
		</tr>
	</tbody>

And here is the script I put in:

Code: Select all

var oldHandler = config.dataBound;
config.dataBound = function (e)
{
oldHandler (e);
var widgetElem = $("#" + parser.m_widgetInfo.markupId)[0];
widgetElem.innerHTML = "<table class="blueTable">	++ widgetElem.innerHTML + "</table>";
}

The header HTML needs be prepended to the widgetElem.innerHTML in the script code, meaning before the ++ in the line below.

widgetElem.innerHTML = "<table class="blueTable"> ++ widgetElem.innerHTML + "</table>";

EDIT -
This should have been ..

widgetElem.innerHTML = "<table class='blueTable'>" + widgetElem.innerHTML + "</table>";

[Jhstephenson]

johntalbot,

We actually tried that and had the script set to:

Code: Select all

var oldHandler = config.dataBound;
config.dataBound = function (e)
{
oldHandler (e);
var widgetElem = $("#" + parser.m_widgetInfo.markupId)[0];
widgetElem.innerHTML = "<table class="blueTable">	
	<thead>
		<tr>
			<th>Client Name</th>
			<th>Case ID</th>
			<th>Case Type</th>
			<th>Date Filed</th>
		</tr>
	</thead>
++ widgetElem.innerHTML + "</table>";
}

But it got data but no headings.

[johntalbott]

johntalbot,

We actually tried that and had the script set to:

Code: Select all

var oldHandler = config.dataBound;
config.dataBound = function (e)
{
oldHandler (e);
var widgetElem = $("#" + parser.m_widgetInfo.markupId)[0];
widgetElem.innerHTML = "<table class="blueTable">	
	<thead>
		<tr>
			<th>Client Name</th>
			<th>Case ID</th>
			<th>Case Type</th>
			<th>Date Filed</th>
		</tr>
	</thead>
++ widgetElem.innerHTML + "</table>";
}

But it got data but no headings.

In your script code if you break the HTML into separate lines you need to wrap each fragment in quotes and concatenate with a +. To make it easier to follow, you might want to set a variable to the header string and then concatenate it to the widgetElem.innerHTML. Something like ...

Code: Select all

var headerHTML =  "<table class = 'blueTable'> " +	
	"<thead>" +
		"<tr>" +
			"<th>Client Name</th>" +
			"<th>Case ID</th>" +
			"<th>Case Type</th>" +
			"<th>Date Filed</th>" +
		"</tr>" +
	"</thead>" 

widgetElem.innerHTML = headerHTML + widgetElem.innerHTML + "</table>"

To properly concatenate the full HTML string, note the double quotes around each fragment, but single quotes for the class='blueTable' portion.

Also it should be + versus ++ in the concatenation with widgetElem.innerHTML.

[hpl123]

Support,
How about adding this functionality back into the config tool instead (to work as it did in previous versions where we had this in the config tool)?

Thanks

[Jhstephenson]

Thanks johntalbot that works.