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

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

Jhstephenson

Jaymer wrote
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:

	
<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:

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

Jhstephenson wrote

Jaymer wrote
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:

	
<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:

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:

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

Jhstephenson wrote

johntalbot,

We actually tried that and had the script set to:

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 ...

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.