Contains tips for configurators working with Aware IM
#48893 by aware_support
Thu Oct 04, 2018 11:47 pm
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>";
}
#48895 by Jaymer
Fri Oct 05, 2018 5:15 pm
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?
#49486 by Jhstephenson
Tue Nov 27, 2018 10:31 pm
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 allvar oldHandler = config.dataBound;
config.dataBound = function (e)
{
oldHandler (e);
var widgetElem = $("#" + parser.m_widgetInfo.markupId)[0];
widgetElem.innerHTML = "<table class="blueTable">   ++ widgetElem.innerHTML + "</table>";
}
#49488 by johntalbott
Wed Nov 28, 2018 2:08 am
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 allvar 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.
#49497 by Jhstephenson
Wed Nov 28, 2018 11:11 pm
johntalbot,

We actually tried that and had the script set to:
Code: Select allvar 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.
#49504 by johntalbott
Thu Nov 29, 2018 5:17 am
Jhstephenson wrote:johntalbot,

We actually tried that and had the script set to:
Code: Select allvar 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 allvar 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.
#49508 by hpl123
Thu Nov 29, 2018 8:58 am
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

Who is online

Users browsing this forum: No registered users and 4 guests