Script link

q4.index-committee.1.0.3.min.js

Source file

q4.index-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.

usePublic boolean

Overwrites whether public API is used in preview

responsive boolean

Enable responsive mode for the table which builds mobile tables using mobile templates

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"]

grouping array

Option to group person list based off of a tag and renders a header row.

grouping: [{
    tag: 'independent-director',
    label: 'Independent directors',
}, {
    tag: 'other',
    label: 'Other directors',
}]

sortBy stringarray

Option to sort list using data key

Example

'lastName'

priority array

Option to select priority of the members based on tags. Puts priority as first on the list.

Example

['ceo', 'chairman']

showDetails boolean

Whether to render the details fancy box.

Default value

true

fancyboxLinkSelector string

Trigger selector for detail popup using fancybox

Default value

.module-committee_member-link, .module-committee_charter-link

fancyboxOpts object

Fancybox options

Default value

{"parentEl":"#irwCommitteeCharting","type":"html","autoFocus":false,"baseClass":"modal fade in","smallBtn":"","afterLoad":""}

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":"<i class=\"q4-icon_briefcase-line\"></i>","expert":"<i class=\"q4-icon_star-fill\"></i>"}

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) - @mobileTpl
• 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-independent"></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>'
)

Default value

{{{cls}}}

mobileTpl 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 full widget is rendered.

Parameters

event Event

The event object.

data Object

The complete template data.

complete function

A callback that fires after the entire widget is rendered.

Parameters

event Event

The event object.