Component Property Reference

A key step in creating your own custom component is defining which properties the user will be able to use and set. Skuid has a variety of built-in properties available, which allow users to create fields without having to build them from the ground up. For example, instead of having to write net-new code for a “Model” property, Skuid has a Model property built-in.

The properties below are a complete list of supported basic property types.

Basic Component Builder Property Settings

The following fields are defined in your custom component’s builder code. You’ll want to fill in the appropriate information so your users understand both how to properly configure your custom component, as well as its functions.

* denotes that field is required

fields

  • *id (string): A unique identification string that will be used as the attribute name for this property in the XML.
  • *label (string): The text used to label and identify the property in the properties panel.
  • onChange (function): A function that is called every time the property is changed.
  • helptext (string): An optional brief description of what this property does and affects. It will appear in a tooltip.
  • *type (string): The type of property that is to be rendered in the property panel. Valid property types are listed below. If a property is not given a valid type, its type will default to “string”.

Property Types

For the field builder *type indicated above, the following property types are available:

* denotes that field is required

Autocomplete

A generic autocomplete that can pull values from any number of fields in an SObject.

type: autocomplete

fields:

  • *sobject (string) [required]: The SObject to pull fields/values from.
  • *fieldsToReturn ([string]): The fields to be returned to be made available by value templates.
  • *fieldsToSearch ([string]): The fields to search the SObject rows by. Fields must be of type “String”. Textarea or any other type will not work.
  • displayTemplate (string): The template for the autocomplete dropdown results.
  • valueTemplates ({string: string, …}): Any number of templates to be evaluated and stored as XML attributes on the component. Data will be stored in the same key-value configuration in the XML as defined in this object.
  • order (string): The field to order the results by.

Boolean

True or false. Displays as a checkbox.

type: boolean

Color

Color represented by the hex of rgba format.

type: color

Field

Provides a field picker. Requires a model property type—modelprop—to be specified as well.

For example, see lines 4-5 below:

1
2
3
4
5
6
7
8
9
{
  id: "endfield",
  label: "End Date",
  type: "field",
  modelprop: "model_d",
  onChange: function(){
    component.refresh();
  },
}

type: field

Model

type: models

Models

User can specify any number of models.

type: models

fields

  • location (string): Where in the xml the data for this property will be saved

valid values: “attribute”, “node”

Multipicklist

A list of options. The user may select any number of the given options.

type: multipicklist

fields

picklistEntries *([{string: string}]): An array of objects with “value” and “label” properties defined

Picklist

A list of options. The user may only select one.

type: picklist

fields

  • *picklistEntries ([{string: string}]): An array of objects with “value” and “label” properties defined.
  • defaultValue (string): The default value selected by the picklist.

SObject

An SObject

type: sobject

String

Accepts any string.

type: string

Template

type: template

fields

  • location (string): Where in the xml the data for this property will be saved

valid values: “attribute”, “node”