Gravatar for jlynch@sonusnet.com

Question by Jim Lynch, Jun 15, 2016 10:08 AM

Creating table header outside a underscore template

I am processing results in an underscore-template. Each result represents several columns in a row in a table. I want to create the table header once, outside of the template, but don't know who invokes the template logic. I don't think I can use CoveoFieldTable since that only seems to support rows, not columns.

Thanks Jim

1 Reply
Gravatar for olamothe@coveo.com

Answer by olamothe, Jun 16, 2016 11:42 AM

Hi Jim,

I did a bit of experimentation and here's what I got. Granted it's a bit weird, but you should be able to do what you wish.

What I did is use css to display table / table row / table cell instead of using a "real table". I also used a variable to render the header only once.

// Put this somewhere so it's globally available in the page.
var loadedHeaderOnce = false;
// onQuerySuccess, reset loadedHeaderOnce to false...
[....]

// Add these styling rules to your page.
.CoveoResultList {
    display: table !important;
 }
 .table-row {
     display: table-row;
  }
  .table-header {
      display: table-header-group;
  }
  .table-cell {
      display: table-cell;
  }

And do this for your template :

<div class="CoveoResultList" >
      < script class="result-template" type="text/underscore" >
        <div>
          <% if(!loadedHeaderOnce) { loadedHeaderOnce=true; %>
            <div class="table-header">
              <div class="table-cell">FOO</div>
              <div class="table-cell">BAR</div>
              <div class="table-cell">BAZ</div>
            </div>
          <% } %>
          <div class="table-row">
            <div class="table-cell"><%= raw.title %></div>
            <div class="table-cell"><%= clickUri %></div>
            <div class="table-cell"><%= raw.date %></div>
          </div>
        </div>
      < /script >
    </div>

I'll think about adding an easier way to do this OOTB.

Hope this helps !

Gravatar for jlynch@sonusnet.com

Comment by Jim Lynch, Jun 16, 2016 4:28 PM

Hello,

That works well….except when I page back and forth at which time I lose the header. I need to set the loadedHeaderOnce to false each time i leave the page. Thoughts ?

Thanks Jim

Gravatar for jlynch@sonusnet.com

Comment by Jim Lynch, Jun 17, 2016 10:21 AM

Hello,

To recap, I am seeing two problems. The first is that the header only appears on the first page. I tried to add some logic to set the loadedHeaderOnce back to false but it didn't work. The second issue is the spacing between rows.

Here is what I have based upon your suggestion:

<script id="Cases_Results_Template" type="text/x-underscore-template">
<!-- <div> -->
    <% if(!loadedHeaderOnce) { loadedHeaderOnce=true; %>
        <div class="table-header">
            <div class="table-cell" style="width:100px;">Case</div>
            <div class="table-cell" style="width:200px;">Contact</div>
            <div class="table-cell" style="width:350px;">Subject</div>
            <div class="table-cell" style="width:150px;">Status</div>
            <div class="table-cell" style="width:100px;">Priority</div>
            <div class="table-cell" style="width:150px;">Last Modified</div>
        </div>
    <% } %>
        <div class="table-row">
            <div class="table-cell" style="width:100px;"><%= raw.sfcasenumber %></div>
            <div class="table-cell" style="width:200px;"><%= raw.sfcontactname%></div>
            <div class="table-cell" style="width:350px;"><a target="_blank" class="CoveoResultLink" style="white-space:normal !important;" data-open-quickview="false"><%=title?highlight(title, titleHighlights):clickUri%></a></div>
            <div class="table-cell" style="width:150px;"><%= raw.sfcasestatus%></div>
            <div class="table-cell" style="width:100px;"><%= raw.sfcasepriority%></div>
            <div class="table-cell" style="width:150px;"><%= dateTime(raw.sflastmodifieddate + (1000 * 60 * 60 * 24), {predefinedFormat:'MMM dd, yyyy'}) %></div>
        </div>
<!-- </div> -->
</script>

I commented out the opening and closing 'div' tag so that I don't have spacing between each row but then I see: alt text

If I don't comment out the 'div's, I get the following: alt text

Also, with the divs, it groups the header and first row together. Here is what I see in the debugger: alt text

Thanks for your help, Jiim

Gravatar for jlynch@sonusnet.com

Comment by Jim Lynch, Jun 17, 2016 10:26 AM

In my previous post, the template got chopped at the top. Here it is:

alt text

Gravatar for olamothe@coveo.com

Comment by olamothe, Jun 17, 2016 10:50 AM

Couple of issues here :

First, using <!-- --> in a script tag should not be be done. It's reserved for HTML comments, not javascript.

Secondly, all templates needs to have a single "root" element (the enclosing div). If you do not wish to have any spacing between each results, you should use css. For example :

  .CoveoResult {
      margin:0;
      padding:0;
   }

But keep the enclosing div. This is mandatory.

Also, for the width, you are trying to set, I would instead add :

   .CoveoResultList {
         width : 100%
    }
    .table-column-one {
        width : XX%;
    }
    .table-column-two {
        width : XX%
     }
     etc...

Set the .table-column-one on the first column (header and table content)

I would also add this on .table-cell

    .table-cell {
        word-break: break-all;
    }

This will allow stuff to be more aligned by breaking on all char instead of word

For your problem with paging, you can bind an event when the page changes, and reset the variable there also :

var loadedHeaderOnce = false;
var search = $('#search');
search.on('querySuccess state:change:first', function() {
  loadedHeaderOnce = false;
})
Gravatar for jlynch@sonusnet.com

Comment by Jim Lynch, Jun 17, 2016 11:07 AM

Thanks much. However, for the paging logic, this issue is when I select the next page of results, the URL is not reloaded that 'search' logic does not get executed as I page through the results. It just gets executed upon initial page load.

Gravatar for jlynch@sonusnet.com

Comment by Jim Lynch, Jun 17, 2016 12:39 PM

I thnk I have resolved the last issue by moving the 'search.on' just before the CoveoResultList div where the templates are loaded. Works great !

Thanks much Jim

Ask a question