Adding headers and footers to custom queries

Contains tips for configurators working with Aware IM
Post Reply
aware_support
Posts: 7523
Joined: Sun Apr 24, 2005 12:36 am
Contact:

Adding headers and footers to custom queries

Post by 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>";
}
Aware IM Support Team
Jaymer
Posts: 2430
Joined: Tue Jan 13, 2015 10:58 am
Location: Tampa, FL
Contact:

Re: Adding headers and footers to custom queries

Post by 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?
Click Here to see a collection of my tips & hacks on this forum. Or search for "JaymerTip" in the search bar at the top.

Jaymer
Aware Programming & Consulting - Tampa FL
himanshu
Posts: 722
Joined: Thu Jun 19, 2008 6:24 am
Location: India
Contact:

Re: Adding headers and footers to custom queries

Post by himanshu »

Jaymer wrote:PS. How many more these goodies can you dig up?
+1
From,
Himanshu Jain


AwareIM Consultant (since version 4.0)
OS: Windows 10.0, Mac
DB: MYSQL, MSSQL
Jhstephenson
Posts: 297
Joined: Wed Apr 22, 2015 11:44 pm

Re: Adding headers and footers to custom queries

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

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
Posts: 619
Joined: Wed Jun 17, 2015 11:16 pm
Location: Omaha, Nebraska
Contact:

Re: Adding headers and footers to custom queries

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

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>";
Last edited by johntalbott on Thu Nov 29, 2018 5:27 am, edited 1 time in total.
VocalDay Solutions - Agility - Predictability - Quality

We specialize in enabling business through the innovative use of technology.

AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
Jhstephenson
Posts: 297
Joined: Wed Apr 22, 2015 11:44 pm

Re: Adding headers and footers to custom queries

Post by 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
Posts: 619
Joined: Wed Jun 17, 2015 11:16 pm
Location: Omaha, Nebraska
Contact:

Re: Adding headers and footers to custom queries

Post by johntalbott »

Jhstephenson wrote: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.
VocalDay Solutions - Agility - Predictability - Quality

We specialize in enabling business through the innovative use of technology.

AwareIM app with beautiful UI/UX - https://screencast-o-matic.com/watch/crfUrrVeB3t
hpl123
Posts: 2579
Joined: Fri Feb 01, 2013 1:13 pm
Location: Scandinavia

Re: Adding headers and footers to custom queries

Post by 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
Henrik (V8 Developer Ed. - Windows)
Jhstephenson
Posts: 297
Joined: Wed Apr 22, 2015 11:44 pm

Re: Adding headers and footers to custom queries

Post by Jhstephenson »

Thanks johntalbot that works.
Post Reply