q4.committee

Creates a responsive Committee Composition tables based of the Person List API.

Options

Script link

q4.committee.1.2.7.min.js

Source file

q4.committee.js, line 2

Requires

Mustache.js

Options

url string

The base URL to use for API calls. By default, calls go to the current domain, so this option is usually unnecessary.

languageId string

A number representing which language to pull data from. By default the widget will attempt to auto-detect the language.

Example: '1'

responsive

Enable responsive mode for the table

Default value: true

category string

Set a specific department based off the DepartmentWorkflowId.

Default value: 00000000-0000-0000-0000-000000000000
Example: '75a31b9d-5394-4e78-b5a7-7cd3c7bddffe'

defaultTag array

Filter results by tag. Pass an empty array for no filtering.

Default value: ["committee"]

customRoles object

Static HTML to identify a custom roles. An example of this could be an independent committee member. This is currently set as part inside the @itemTpl and @mobileItemTpl Icons will exist as part of the `customRoles` array.

customRoles: {
     independent: ' ',
     expert: ' '
}

Default value: {"independent":"<div role=\"img\" class=\"inline\" aria-label=\"Lead Independent Director\"><span class=\"q4-icon_lead-director\" aria-hidden=\"true\"></span></div>","chairman":"<div role=\"img\" class=\"inline\" aria-label=\"Chairman of the Board\"><span class=\"q4-icon_chairman\" aria-hidden=\"true\"></span></div>"}

committeeTypes Array.<Object>

The data source for the composition table.

committeeTypes: [{
    name: 'Audit',
    tags: ['audit-chair', 'audit-member'],
    icons: ['q4i-icon-member chair', 'q4i-icon-member'],
    doc: {
        title: "Charter Document",
        url: "/charter-sample.pdf"
    }
}, {
    name: 'Compensation',
    tags: ['compensation-chair', 'compensation-member'],
    icons: ['q4i-icon-member chair', 'q4i-icon-member'],
    doc: {
        title: "Charter Document",
        url: "/charter-sample.pdf"
    }
},{
    name: 'Executive',
    tags: ['executive-chair', 'executive-member'],
    icons: ['q4i-icon-member chair', 'q4i-icon-member'],
    doc: {
        title: "Charter Document",
        url: "/charter-sample.pdf"
    }
}]

Parameters

name string: The committee name.
tags array: All tags associated with the committee.
icons array: Icons that correspond with the specified tag.
docs object: Document associated with the committee

template string

The "master" template to be appended onto the page.

Template includes

header (html) - @headerTpl
members (html) - @itemTpl
mobile (html) - @mobileWrapperTpl
legend (html) - @legendTpl

Example: (
    '<div class="desktop">' + 
        '{{{header}}}' +
        '{{{members}}}' +
    '</div>' +
    '<div class="mobile">' +
        '{{{mobile}}}' +
    '</div>' +
    '{{{legend}}}'
)

headerTpl string

Template used to generate the header

Template includes

name (string) - @committeeTypes.name
members (object) - Members belonging to each committee. @itemTpl.members

Example: (
   '<div class="person-header grid--no-gutter">' +
       '<div class="col col-1-of-{{columns}}"></div>' +
       '{{#.}}' +
           '<div class="col col-1-of-{{columns}}">{{name}}</div>' +
       '{{/.}}' +
   '</div>'
)

itemTpl string

The itemTpl template contains data from the API plus some additional data generated from @committeeTypes

Template includes

firstName (string) - First Name
middleName (string) - Middle name will contain a space before and after the name if it exists, otherwise a single space will be present.
lastName (string) - Last Name
bio (string) - Biography
url (string) - Person Details URL
photo (string) - Image URL
thumb (string) - Thumbnail URL
title (string) - Person Title
committees (array) - Committees the person it belongs to. @committeeTypes
customRoles (array) *Optional - Allows you to include additional tags which will be linked with the corresponding icon which is set under `customRoles`.

Example: (
    '{{#members}}' +
        '<div class="person-item">' +
            '<div class="grid--no-gutter">' +
                '<div class="col col-1-of-{{columns}}">' +
                    '<a href="{{url}}">{{firstName}}{{middleName}}{{lastName}}</a>' +
                    '{{#customRoles}}{{{.}}}{{/customRoles}}' +
                '</div>' +
                '{{{composition}}}' +
            '</div>' +
            '<div class="person-bio">' +
                '{{{bio}}}' +
            '</div>' +
        '</div>' +
    '{{/members}}'
)

committeeTpl string

A wrapper for each committee type.

icon (html) - Returns the correct icon based on the @iconTpl

Example: (
    '<div class="col col-1-of-{{columns}}">' +
      '{{{icon}}}' +
    '</div>'
)

legendTpl string

Static HTML Legend. Can be used in the @template to display additional HTML.

icon (string|html) contains @iconTpl

Example: (
   '<div class="person-legend">' +
       '<span class="icon-legend"><i class="q4i-circle-chair"></i> Chair</span>' +
       '<span class="icon-legend"><i class="q4i-icon-member"></i> Member</span>' +
       '<span class="icon-legend"><i class="q4i-icon-independant"></i> Independent Director</span>' +
   '</div>'
)

Template includes

iconTpl string

Template used to generate icons and rendered as part of @committeeTpl & @mobileItemTpl.

cls (string|html) - Retrieved from @committeeTypes.icons

Example: (
   '<i class="{{cls}}"></i>'
)

mobileWrapperTpl string

Mobile wrapper.

Template includes

header (html) - @mobileHeaderTpl
items (html) - @mobileItemTpl

Example: (
   '<div class="person-category">' +
       '{{{header}}}' +
       '<div class="person-items">' +
           '{{{items}}}' +
       '</div>' +
   '</div>'
)

mobileHeaderTpl function

Generates a header for each committee

name (string) - Committee name as described in @committeeTypes.names

Example: (
   '<div class="person-header grid--no-gutter">' +
       '<div class="col col-3-of-4 col-sm-3-of-4">{{name}}</div>' +
       '<div class="col col-1-of-4 col-sm-1-of-4"><i class="q4i-rounded-downchevon"></i></div>' +
   '</div>'
)

mobileItemTpl function

Generates the mobile template for each committee member. Refer to @itemTpl for template options.

Template includes

firstName (string) - First Name
middleName (string) - Middle name will contain a space before and after the name if it exists, otherwise a single space will be present.
lastName (string) - Last Name
bio (string) - Biography
url (string) - Person Details URL
photo (string) - Image URL
thumb (string) - Thumbnail URL
title (string) - Person Title
customRoles (array) *Optional - Allows you to include additional tags which will render the corresponding html

Example: (
   '<div class="person-item">' +
       '<div class="grid--no-gutter">' +
           '<div class="person-name col col-3-of-4 col-sm-3-of-4">' +
               '<a class="person-link" href="{{url}}">{{firstName}}{{middleName}}{{lastName}}</a>' +
               '{{#customRoles}}{{{.}}}{{/customRoles}}' +
           '</div>' +
           '<div class="person-icon col col-1-of-4 col-sm-1-of-4">{{{icon}}}</div>' +
       '</div>' +
   '</div>'
)

mobileTplAlt function

Generates an alternate template for mobile html. When used ignores mobileWrapperTpl, mobileHeaderTpl, and mobileItemTpl

Template includes

committees (array). List of committees including members @headerTpl.types
members (array). List of people including committees it belongs to. @itemTpl.members

Example: (
'<div id="irwCommitteeMobTab" class="tabbable irwShow">' +
 '<ul id="irwTabsEvent" class="nav nav-tabs">' +
   '<li class="active"><a href="#ByCommittee">By Committee</a></li>' +
   '<li><a href="#ByMember">By Member</a></li>' +
 '</ul>' +
'</div>' +
'<div id="ByMember" class="Committeetab">' +
 '{{#members}}' +
   '<div class="irwTriggerModal text-primary">' +
     '<div class="irwMemberName footable-visible footable-last-column footable-first-column">' +
       '<span class="footable-toggle"></span>{{firstName}}{{middleName}}{{lastName}}' +
     '</div>' +
     '<div class="footable-row-detail" style="display:none;">' +
       '<div class="footable-row-detail-cell">' +
         '<div class="footable-row-detail-inner">' +
           '{{#committees}}' +
           '<div class="footable-row-detail-row">' +
             '<div class="footable-row-detail-name">{{name}} :</div>' +
             '<div class="footable-row-detail-value text-muted"><span class="faBox"><i class="{{icon}}"></i></span></div>' +
           '</div>' +
           '{{/committees}}' +
         '</div>' +
       '</div>' +
     '</div>' +
   '</div>' +
 '{{/members}}' +
'</div>' +
'<div id="ByCommittee" class="Committeetab" style="display:none;">' +
 '{{#committees}}' +
   '<div class="irwTriggerModal text-primary">' +
     '<div class="irwMemberName footable-visible footable-last-column footable-first-column">' +
       '<span class="footable-toggle"></span>{{name}}' +
     '</div>' +
     '<div class="footable-row-detail" style="display:none;">' +
       '<div class="footable-row-detail-cell">' +
         '<div class="footable-row-detail-inner">' +
           '{{#members}}' +
           '<div class="footable-row-detail-row">' +
             '<div class="footable-row-detail-name"><a href="/governance/board-of-directors/default.aspx">{{firstName}}{{middleName}}{{lastName}}</a> :</div>' +
             '<div class="footable-row-detail-value text-muted"><span class="faBox"><i class="{{icon}}"></i></span></div>' +
           '</div>' +
           '{{/members}}' +
         '</div>' +
       '</div>' +
     '</div>' +
   '</div>' +
 '{{/committees}}' +
'</div>'
)

loadingClass string

A CSS class to add to the widget while data is loading. This can be used to show and hide elements within the widget.

loadingMessage string

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

beforeRender function

A callback that fires before the widget is rendered.

Parameters

personData array: An array of person data.

beforeRenderMobileAlt function

A callback that fires before the mobile alternate template is rendered.

Parameters

mobileData object: Object of commmittees (array) and members (array) .

complete function

A callback that fires after the entire widget is rendered.