Q4Widgets API Documentation

q4.sheets

The Q4 Sheets widget utilizes Google Sheet's API to pull table data into Q4 Websites.

Q4 Sheets Widget Features:

  • Instant Update - No need to go into the CMS for any quick updates within the table body. Will only need access to the source sheet.
  • Preview Mode - Ability to make updates on Google Sheet and only view it for the preview site.
  • Total Class - Automatically add total class for rows with a word Total.
  • Data row - Ability to differentiate header rows and table data.
  • Responsive - Create a separate template specifically for mobile views.
Script link
q4.sheets.2.0.3.min.js
Source file
q4.sheets.js, line 2

Examples

When creating a new google sheet, make sure to clone from the blank sheet. Blank sheet already has the sync script added
Blank sheet can be found in ID's drive.

<div class='module-sheet'>
     <div class='module-sheet_container'></div>
</div>

<script>
$('.module-sheet').sheets({
    container: '.module-sheet_container',
    apiKey: 'APIKEY',
    range: 'Example_Live!A:Z',
    previewRange: 'Example_Preview!A:Z',
    sheetId: 'SHEETID',
    totalClass: 'total',
    dataRow: 3,
    template: (
        '<table>' +
            '<thead>' +
                '<tr>' +
                    '<th></th>' +
                    '<th></th>' +
                    '<th colspan="3">Header1</th>' +
                    '<th colspan="3">Header2</th>' +
                    '<th colspan="3">Header3</th>' +
                    '<th colspan="3">Header4</th>' +
                '</tr>' +
                '<tr>' +
                    '{{#headers.1}} ' +
                        '<th>{{.}}</th> ' +
                    '{{/headers.1}}' +
                '</tr>' +
            '</thead>' +
            '<tbody>' +
                '{{#items}}' +
                    '<tr class="{{alt}} {{total}}"> ' +
                        '{{#row}}<td>{{.}}</td>{{/row}} ' +
                    '</tr> ' +
                '{{/items}} ' +
            '</tbody>' +
        '</table>'
    ),
    beforeRender: function(e, tplData) {},
    complete: function() {}
});
</script>

Options

api string
API End Point (Defaults to v4)
Default value
https://sheets.googleapis.com/v4/spreadsheets/
apiKey string
API Key (Required). Refer to Google Developer Console.
sheetId string
The Google Sheet's ID (Required) you wish to display.
range string
The range of data you wish to display from the sheet. If previewRange is undefined this sheet will be used for both preview and live. Make sure the naming convention of this sheet matches the previewRange's before the underscore.
Default value
Sheet_Live!A:Z
previewRange string
The range of data you wish to display from the sheet, only visible in preview site. Make sure the naming convention of this sheet matches the range's before the underscore.
Default value
Sheet_Preview!A:Z
totalClass string
The class for rows with the word total.
Default value
total
dataRow number
The row number where headers end and table data begins.
Default value
1
altClass string
The class for alternating table rows.
Default value
row-alt
container string
The class selector for the table's container (Required).
template string
A Mustache.js template to generate the table. The following tags are available: - '{{#headers}}' An array of header rows - '{{#items}}' An array of data items for the table body - '{{alt}}' A string for the alt class - '{{total}}' A string for the total class - '{{#row}}' An array of cell data - '{{.}}' Indicator for the value of an array
Example
'<table>' +
   '<thead>' +
       '<tr>' +
           '<td colspan="2">&nbsp;</td>' +
           '<td colspan="3">Proven</td>' +
           '<td colspan="3">Probable</td>' +
           '<td colspan="3">Proven & Probable</td> ' +
       '</tr>' +
       '<tr>' +
           '{{#headers.1}} ' +
               '<td>{{.}}</td> ' +
           '{{/headers.1}}' +
       '</tr>' +
   '</thead>' +
   '<tbody>' +
       '{{#items}}' +
           '<tr class="{{alt}} {{total}}""> ' +
               '{{#row}}<td>{{.}}</td>{{/row}} ' +
           '</tr> ' +
       '{{/items}} ' +
   '</tbody>' +
'</table>'
responsive boolean
A boolean to use responsive template which will be appended after the desktop template.
Default value
false
responsiveTemplate string
If `responsive` is set to true, this template will also rendered below the desktop template.
noItemsTemplate string
A Mustache.js template to generate the message if there are no items pulled.
beforeRender function
A callback that fires before the full widget is rendered.
Parameters
event Event
The event object.
templateData Object
The complete template data.
complete function
A callback that fires after the entire widget is rendered.
Parameters
event Event
The event object.