Component-Specific APIs

Good news, everyone!

We are currently writing more material for our Javascript API. All of the objects and functions you see below are part of Skuid’s public API, even if they aren’t fully documented yet. Feel free to experiment while we write about them—and check back later for updates.

Along with the standard functions available to all components, several of Skuid’s delivered components have their own specific APIs or component programming interface (CPIs). These CPIs accomplish specific logic within a component, and they are available on all instances of the given skuid.component.Component.

Public CPIs are available in the cpi namespace of a component instance. To access a component instance, use one of the get methods available in the skuid.component namespace.

Get by ID

Relies on having set a Unique Id value for the given component:

1
2
3
skuid.component.getId('uniqueId')
// Alternatively, you could use this alias to accomplish the same thing
skuid.$C('uniqueId')

Get by index within available component type instances

Retrieves a list of all instances of the given component type, and then uses the index to select a specific instance in that array:

1
2
3
4
skuid.component.getByType('componentType')[0]

// For example, get the first Tab Set in the page:
skuid.component.getByType('skuid__tabSet')[0]

Warning

Private CPIs within the _cpi namespace are not supported for public use.

Accordion

Component type/XML element name: skuid__accordion

closeAllSections()

Closes all open sections within the selected Accordion.

1
2
// Assumes component is accessible via `accordion`
accordion.cpi.closeAllSections()
openAllSections()

Opens all closed sections within the selected Accordion.

1
2
// Assumes component is accessible via `accordion`
accordion.cpi.openAllSections()
toggleSection(sectionId)

Toggles a given Accordion section to be open or closed. Works by checking if the given sectionId is open or closed, then updates the Accordion’s state with the opposite value.

Arguments:
  • sectionId (string) – Unique ID of the section to toggle. Set in Section Properties within the Composer.
 
1
2
3
// Assumes component is accessible via `accordion`

accordion.cpi.toggleSection('sectionUniqueId')

List

closeAllDrawers()

Closes all drawers for all rows in the selected List.

1
2
// Assumes component is accessible via `list`
list.cpi.closeAllDrawers()
openAllDrawers()

Opens all drawers for all rows in the selected List.

1
2
// Assumes component is accessible via `list`
list.cpi.openAllDrawers()

Filter Set

closeAllSections()

(Only applies to Filter Sets with a Vertical with accordions layout) Closes all accordion sections in the selected Filter Set.

1
2
// Assumes component is accessible via `filterSet`
filterSet.cpi.closeAllSections();
openAllSections()

(Only applies to Filter Sets with a Vertical with accordions layout) Opens all accordion sections in the selected Filter Set.

1
2
// Assumes component is accessible via `filterSet`
filterSet.cpi.openAllSections();

Tab Set

Component type/XML element name: skuid__tabSet

selectTab(tabId)

Selects and activates the tab for a given unique ID.

Arguments:
  • tabId (string) – Unique ID of the tab to be selected. Set in Tab Properties within the Composer.
 
1
2
// Assumes component is accessible via `tabSet`
tabSet.cpi.selectTab('tabUniqueId')
getSelectedTabId()

Getter for the currently selected tab

Returns:Unique ID of the tab that is current selected
Return type:String 
1
2
// Assumes component is accessible via `tabSet`
tabSet.cpi.getSelectedTabId()
findTabToActivate()

Called internally when the currently selected tab is unrendered, finds another rendered tab to activate.

Table

Component type/XML element name: skuid__table

closeAllDrawers()

Closes all drawers for all rows in the selected Table.

1
2
// Assumes component is accessible via `table`
table.cpi.closeAllDrawers()
openAllDrawers()

Opens all drawers for all rows in the selected Table.

1
2
// Assumes component is accessible via `table`
table.cpi.openAllDrawers()