Script link

q4.studioApi.4.0.0.min.js

Source file

q4.studioApi.js, line 9624

This widget extends the q4.highlights 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

<script type="text/javascript">
    $('.highlights-widget').highlightsIndex({
        studioApi: 'fb.studio.q4api.com',
        ticker: 'XNAS.FB',
        templateId: 1
    });
</script>

Options

highlightsTableSelector string

A selector for where the highlights details will be rendered

Default value

#irwFinlHighlightsContent table

template string

This is the default template which all other templates will be added to. It is not suggested to make changes to this for S&P clients

'<div class="row">' +
    '<div class="col-xs-12 irwFinlHighlights">' +
        '<div class="irwBoxWrapper irwFinlTitleBox">' +
            '<div class="irwBoxHeader bg-primary irwFinlBoxTrigger">' +
                '<div class="pull-left irwBoxLabel">' +
                    '<h5>Financial Highlights</h5>' +
                '</div>' +
                '<div class="pull-right">' +
                    '<a class="showCustomPeriods" style="cursor:pointer;">Custom Periods <i class="fa fa-edit"></i></a>' +
                '</div>' +
            '</div>' +
            '<div id="irwFinlCustomPeriods" class="irwBoxBody bg-default hidden"></div>' +
        '</div>' +
        '<div id="irwFinlHighlightsContent">' +
            '<p class="module_loader">Loading ...</p>' +
            '<table class="table table-hover irwResponsiveTable default"></table>' +
        '</div>' +
    '</div>' +
'</div>'

tableHeaderTpl string

The template for the table header

'<thead>' +
    '<tr>' +
        '<th class="Tbl-th-FirstCol irwFinlHighlightsyear">' +
            '<div class="text-primary firstSpan">' +
                '<strong><a id="firstColumnHeaderLink">Period Ended</a></strong>' +
            '</div>' +
            '<div class="text-muted helpblock AsReportHide"></div>' +
        '</th>' +
        '{{#.}}' +
        '<th class="irwFinlHighlightsyear">' +
            '<div class="text-primary text-right firstSpan">{{label}}' +
                '<div class="text-muted text-right helpblock">{{date}}</div>' +
            '</div>' +
        '</th>' +
        '{{/.}}' +
    '</tr>' +
'</thead>'

tableBodyTpl string

The template for the table body

'<tbody>' +
    '{{#data}}' +
        '<tr>' +
            '<td class="text-left bg-primary header" colspan="{{count}}">' +
                '<h5 class="irwFinlHighlightsSectionHead">{{subtemplateName}} {{#subtemplateMagnitude}}({{subtemplateMagnitude}}){{/subtemplateMagnitude}}</h5>' +
            '</td>' +
        '</tr>' +
        '{{#dataItems}}' +
            '<tr class="hover">' +
                '<td class="text-left text-primary fsformindent_1" style="padding-left: 20px;">' +
                    '<a rel="showDefinitionLink" style="cursor:pointer;" data-definition="{{dataItemDefinition}}">{{dataItemName}}</a>' +
                '</td>' +
                '{{#values}}' +
                    '<td class="text-muted text-top" rel="dataItem">' +
                        '{{^isNegative}}{{dataItemValue}}{{/isNegative}}' +
                        '{{#isNegative}}{{dataItemValue}}{{/isNegative}}' +
                    '</td>' +
                '{{/values}}' +
            '</tr>' +
        '{{/dataItems}}' +
    '{{/data}}' +
'</tbody>'

customPeriodsSelector string

A selector for the container where the custom periods data will be rendered

Default value

#irwFinlCustomPeriods

presetPeriodSelector string

A selector for the unordered list of custom period presets

Default value

.irwFinlPrePeriods

periodTypeSelector string

A selector for the period type dropdown in the custom period section

Default value

#irwSelectedPeriod

availablePeriodsSelector string

A selector for the available periods select box in the custom period section

Default value

.irwPeriodLists

chosenPeriodsSelector string

A selector for the chosen periods select box in the custom period section

Default value

#irwSelectedCustomPeriods

quarterBoxSelector string

A selector for the quarter select box in the custom period section

Default value

#irwQ

yearBoxSelector string

A selector for the year select box in the custom period section

Default value

#irwY

ytdBoxSelector string

A selector for the YTD select box in the custom period section

Default value

#irwYTD

ltmBoxSelector string

A selector for the LTM select box in the custom period section

Default value

#irwLTM

halfYearBoxSelector string

A selector for the half-year select box in the custom period section

Default value

#irwH

customPeriodsTpl string

The base template for Custom Periods.

'<div class="row">' +
    '<div class="col-xs-12 col-sm-3">' +
        '<h5 class="irwSubHeads text-primary">Select Period <i class="fa fa-caret-down"></i></h5>' +
        '<ul class="irwFinlPrePeriods"></ul>' +
    '</div>' +
    '<div class="col-xs-12 col-sm-6">' +
        '<h5 class="irwSubHeads text-primary">Custom Period <i class="fa fa-caret-down"></i></h5>' +
        '<div class="row">' +
            '<div class="col-xs-12 col-sm-4" style="margin-bottom: 15px;">' +
                '<select id="irwSelectedPeriod" name="irwSelectedPeriod" class="form-control"></select>' +
            '</div>' +
            '<div class="col-xs-12 col-sm-8">' +
                '<div class="form-group">' +
                    '<div class="bootstrap-duallistbox-container">' +
                        '<table class="table irwasreportmultilist">' +
                            '<tbody>' +
                                '<tr>' +
                                    '<td class="half-width">' +
                                        '<div class="box1">' +
                                            '<select id="irwQ" multiple="multiple" class="form-control irwPeriodLists"></select>' +
                                        '</div>' +
                                    '</td>' +
                                    '<td>' +
                                        '<div class="box1 text-center "><i class="move fa fa-caret-right" style="display:none;"></i></div>' +
                                        '<div class="box2 text-center"><i class="remove fa fa-caret-left"></i></div>' +
                                    '</td>' +
                                    '<td class="half-width">' +
                                        '<div class="box2">' +
                                            '<select id="irwSelectedCustomPeriods" name="irwSelectedCustomPeriods" multiple="multiple" class="form-control"></select>' +
                                        '</div>' +
                                    '</td>' +
                                '</tr>' +
                                '<tr>' +
                                    '<td colspan="3">' +
                                        '<br><button type="button" id="updateFinlHighlights" class="btn btn-primary pull-right btns">Update</button>' +
                                    '</td>' +
                                '</tr>' +
                            '</tbody>' +
                        '</table>' +
                    '</div>' +
                '</div>' +
            '</div>' +
        '</div>' +
    '</div>' +
    '<div id="columnOrderButtonsOuterPanel" class="col-xs-12 col-sm-3">' +
        '<h5 class="irwSubHeads text-primary">Latest On:</h5>' +
        '<div id="columnOrderButtonsInnerPanel" class="chartaxis2 btn-group btn-toggle buttons btn-block" style="margin-bottom: 15px;">' +
            '<button id="btnMostRecentDateFirst" onclick="return false;" type="button" class="btn btn-default half-width btn-primary active">Left</button>' +
            '<button id="btnMostRecentDateLast" onclick="return false;" type="button" class="btn btn-default half-width">Right</button>' +
        '</div>' +
    '</div>' +
'</div>'

periodOptionsTpl string

The template used for rendering all period types within the given selection (i.e. Quarters, Years)

'{{#periods}}' +
    '<option value="{{label}}">{{label}}</option>' +
'{{/periods}}'

periodDropdownTpl string

The template for rendering the Custom Period options

'{{#.}}' +
    '<option value="{{periodTypeLabel}}">{{periodTypeLabel}}</option>' +
'{{/.}}'

selectPeriodListTpl string

This template will render the list of predefined periods (i.e. Last Four Years & YTD)

'{{#.}}' +
    '<li><a href="javascript:;">{{periodTypeLabel}}</a></li>' +
'{{/.}}'

periodSelectionTpl string

The list of items currently being displayed in the table. (Will default to Last Four Years & YTD)

'{{#.}}' +
    '<option value="{{label}}">{{label}}</option>' +
'{{/.}}'

popupTpl string

This template is for custom definitions which will be display in a fancybox

'<div id="irwWrapper" style="margin:0;padding:0">' +
    '<div class="modal-dialog" style="margin:0;padding:0">' +
        '<div class="modal-content">' +
            '<div class="modal-header bg-primary">' +
                '<h4 class="modal-title"><strong id="ModelTitle">{{title}}</strong></h4>' +
            '</div>' +
            '<div class="modal-body">' +
                '<div id="PopupDive" class="irwScrollbar mCustomScrollbar _mCS_1 _mCS_4" style="max-height: 260px; overflow: hidden;" aria-hidden="true">' +
                    '<div class="mCustomScrollBox mCS-bootstrap-thin" id="mCSB_4" style="position: relative; height: 100%; overflow: hidden; max-width: 100%; max-height: 260px;">' +
                        '<div class="mCSB_container mCS_no_scrollbar" style="position:relative; top:0;">' +
                            '<div>' +
                                '<input type="hidden" class="irwHiddenCaption" value="Total Assets">' +
                                '<table style="width:100%" class="table irwPopupTable irwItemDefTable">' +
                                    '<colgroup>' +
                                        '<col class="col-xs-2">' +
                                        '<col class="col-xs-10">' +
                                    '</colgroup>' +
                                    '<tbody>' +
                                        '<tr>' +
                                            '<td class="text-right text-top"><strong>Definition</strong></td>' +
                                            '<td>{{definition}}</td>'     +
                                        '</tr>' +
                                        '<tr>' +
                                            '<td colspan="2">'+
                                                '<small>Data shown on this page is extracted directly from the company’s documents and standardized by S&P Global Market Intelligence. S&P gathers information from numerous sources to ensure that the data we provide is comprehensive and accurate. S&P makes every effort to line up fields, captions and headers that represent the same data over time, despite variations in how the company may report these items in different documents.</small>' +
                                            '</td>' +
                                        '</tr>' +
                                    '</tbody>' +
                                '</table> ' +
                            '</div>' +
                        '</div>' +
                    '</div>' +
                '</div>' +
            '</div>' +
        '</div>' +
    '</div>' +
'</div>'

loadingMessage string

A message or HTML string to display while first loading the widget.

Default value

<p class="module_loader">Loading ...</p>