Q4Widgets API Documentation

q4.financials

Fetches and displays financial reports from the Q4 private API.
Below is an example of a quarterly financials accordion widget.
- It uses date and time, which requires the yearSelect and yearTemplate to render a dropdown list of years.
- The year list will reload the itemTemplate when the selection is changed, and will then only show items from the selected year.
- This widget uses the itemsComplete to call the Q4 App plugin to create an accordion out of the content, each time the widget items are loaded.
- This widget should be loaded in an embed module within Q4 Footer to ensure it's script loads after q4App on the live site, otherwise it may cause an error.
Script link
q4.api.1.13.6.min.js
Source file
q4.api.js, line 1875

This widget extends the q4.api widget. It has all the options and methods of the parent widget, in addition to those below. See the parent widget's documentation for details.

Examples

<div class="module_options">
    <label class="module_options-label sr-only" for="module-financial-quarter_select">Select a year:</label>
    <select class="dropdown module_options-select" id="module-financial-quarter_select"></select>
</div>
<div class="module_container module_container--content"></div>
<script>
$('.module-financial-quarter .module_container--inner').financials({
    reportTypes: ["First Quarter", "Second Quarter", "Third Quarter", "Fourth Quarter"],
    yearSelect: '.module_options-select',
    yearContainer: '.module_options-select',
    yearTemplate: '<option value="{{value}}">{{year}}</option>',
    loadingMessage: '<div class="text-center"><p class="module_loader"><i class="q4-icon_spinner"></i><span class="sr-only">Loading financial reports...</span></p></div>',
    itemContainer: '.module_container--content',
    itemLoadingMessage: '<div class="text-center"><p class="module_loader"><i class="q4-icon_spinner"></i><span class="sr-only">Loading financial reports for the selected year...</span></p></div>',
    itemTemplate: (
        '<div class="module_item">' +
            '<h3 class="module-financial_year-text">{{shortType}} Earnings</h3>' +
            '<div class="module_links module_q4-icon-links">' +
            '{{#docs}}' +
                '<div><a href="{{docUrl}}" class="module_link module_link-{{docCategory}}">' +
                    '<span class="module_link-text">{{docTitle}}</span>' +
                    '{{#blank}}<span class="sr-only">(opens in new window)</span>{{/blank}}' +
                '</a></div>' +
            '{{/docs}}' +
            '</div>' +
        '</div>'
    ),
    itemsComplete: function() {
        q4App.toggle( $('.module-financial-quarter .module_container--content'),'.module_item','h3','.module_links',false,false,true );
    }
});
</script>

Options

reportTypes Array.<string>
A list of report subtypes to display, or an empty list to display all. Valid values are:
  • Annual Report
  • Supplemental Report
  • First Quarter
  • Second Quarter
  • Third Quarter
  • Fourth Quarter
Default value
[]
shortTypes Object
When an event has a related financial report, this option will allow you to define an alternative name for each report quarter. This alternative name can be accessed by using {{shortType}} in the widget template.
Default value
{ 'Annual Report': 'AR', 'Supplemental Report': 'SR', 'First Quarter': 'Q1', 'Second Quarter': 'Q2', 'Third Quarter': 'Q3', 'Fourth Quarter': 'Q4' }
docCategories Array.<string>
A list of document categories to display. Use an empty list to display all.
Default value
[]
Example
["Financial Report", "MD&A", "Earnings Press Release"]
template string
  • All the notes documented in the q4.api parent widget are applicable here.
  • This widget supports template, itemTemplate and yearTemplate options.
The template or itemTemplate may contain the following mustache variables:
  • {{title}} - The title (i.e. report subtype and year) of the financial report.
  • {{year}} - The fiscal year of the financial report.
  • {{date}} - The filing date of the financial report.
  • {{type}} - The subtype of the report (e.g. First Quarter, Annual Report).
  • {{shortType}} - A shortened name for the financial report's subtype. These can be customized with the shortTypes option.
  • {{coverUrl}} - The URL of the document's thumbnail image.
  • {{#docs}} - An array of attached documents. Inner variables for each document are:
    • {{docTitle}} - The title of the document
    • {{docUrl}} - The URL of the document
    • {{docCategory}} - The type/category of document (ex. Online, Proxy, Webcast)
    • {{docType}} - The file type for the document (ex. PDF). If online document category, value will be null
    • {{docSize}} - The file size. If online document category, value will be null
    • {{docThumb}} - The document thumbnail URL
    • {{docIcon}} - The document icon URL
  • {{#tags}} - An array of tags for this financial report container.
    • {{.}} - Tag word