All code samples below refer to the skuid object.

In the v2 API, this object is not directly accessible when working within a browser console—or when referring to another Skuid page runtime.

If you are experiencing issues, use the skuid.runtime API to target the appropriate page context.




Creates and registers a new skuid.component.Component by looking for a registered componentType of the given name and, if one exists, applying it to the DOM element provided. If the name is not recognized, returns an error message.

  • options (object) –

    A simple JavaScript object with the following properties:

    • element (DOM element): Optional. The (optionally jQuery-wrapped) DOM element to which the component will be applied. If not provided, a DOM element will be created in memory, meaning the component will exist in the background and not be visible on the page.
    • definition (string -or- XMLDoc -or- jQuery-wrapped XMLDoc): Optional [1] . An XML string or JS XMLDoc (optionally jQuery-wrapped) that specifies the component to be rendered, including its properties. Typically generated with skuid.utils.makeXMLDoc(xmlString).
    • type (string): Optional [1]. The name of the registered component. If not provided, the component name will be extracted from definition.
    [1](1, 2) Either definition or type must be defined, or the component will not be rendered and an error message will be returned. Note that some standard Skuid Components expect an XML definition and may produce errors if given only a type name.

A Component or a string describing an error condition.

Return type:

skuid.component.Component or string


Gets all skuid.component.Components on the Skuid page.

Returns:Any available skuid.component.Components
Return type:array

Gets an instance of a skuid.component.Component by its ID.


skuid.$C() can be used as a shortcut to this API.

  • componentGUID (string) – The globally unique ID of the skuid.component.Component to get.

The specified skuid.component.Component

Return type:



Gets any instances of a skuid.component.Component by its componentType. If not instances are available, returns an empty array.

Return type:array



Instances of skuid.component.Component are the JavaScript objects behind the WYSIWYG Skuid components dragged and dropped into a Skuid page within the Composer.


Use skuid.component.factory() to create new instances of Components.




Read-only. Indicates whether the Component is rendered. If conditional rendering has been defined for the Component, this property will be changed whenever the Component is conditionally rendered / unrendered. Calling render() on an un-rendered Component will also set this property to true.


$( XML Element )

A jQuery-wrapped XML Element representing the XML used to construct the Component. This property may be undefined for dynamically generated Components generated by passing in just a type name and not a full XML definition to skuid.component.factory()

Prototype Functions


Adds a problem to the page, which is displayed in the Page Problems Wrapper:

  • problem (string) – A user-friendly error message

Adds multiple problems to the page.

  • problems (string) – An array of user-friendly error messages

Examines any render conditions defined on a Component and, if all conditions are met, renders the Component, otherwise the Component is unrendered. If no render conditions exist, the Component will always be rendered.

Returns:The Component, to support function chaining.

Return the DOM element of this Component.

Returns:The jQuery-wrapped DOM element which is the parent element for the component.
Return type:String

Return the unique identifier for this Component.

Returns:The unique ID for this component.
Return type:String

Return the type of Component that this is an instance of.

Returns:The type of this Component, e.g. ‘calendar’, ‘skuidvis__chart’
Return type:String

Returns the unique identifier for this Component.

Returns:The unique ID for this component.
Return type:String

Renders or re-renders the Component. That is, applies the Component’s associated Component Type to this Component and its DOM element.

Returns:The Component, to support function chaining.
Return type:skuid.component.Component

Unrenders the Component in the DOM while retaining the component’s information in memory for eventual rerendering through the render() function.


Completely removes the Component in the DOM while also removing the component’s information from memory—meaning it cannot be rerendered.


skuid.component.Component.createChildComponents(componentDefinitions, elementToAppendTo, context, state)

Creates Child Components for a Component and marks the current component as the “parent” for each.

  • componentDefinitions – JS or XML definitions for new Components to create. An array of objects or XML Nodes.
  • elementToAppendTo – A DOM element to append the new Child Components to.
  • context (object) – Optional object of context to use when rendering the Child Components. Defaults to this Component’s context.
  • state (object) – Initial state for the new Components to be created.



Used to create a new FieldRenderer object.

For information on how to build custom field renderers, see the UI Code topic for general concepts and the Custom Field Renderer topic for implementation details.

  • config (Object) –

    An object representing the configuration of the field renderer. The config object is made of the following attributes:

    • readModeStrategy - (String): The rendering strategy for the FieldRenderer when in read mode. Valid options are “element” and “virtual”
    • read - (Function): The function used to render an element in read mode. Expected to have different return types depending on value of “readModeStrategy”
    • editModeStrategy - (String): The rendering strategy for the FieldRenderer when in edit mode. Valid options are “element” and “virtual”
    • edit - (Function): The function used to render an element in edit mode. Expected to have different return types depending on value of “editModeStrategy”
    • dataGridStrategy - (String): The rendering strategy for the FieldRenderer when in data grid mode. Valid options are “element” and “virtual”
    • dataGrid - (Function): The function used to render an element in data grid mode. Expected to have different return types depending on value of “dataGridStrategy”