skuid.ui¶

skuid.ui.Field¶

A Field is an object which represents a single value associated with a record which is stored within an sObject. The Field exposes a value, the context for that value and the record with which the value is associated, among other things.

See skuid.ui.Field.

Constructor¶

new skuid.ui.Field(row, model, editor, config)¶

Instantiates a new Field that can generate an HTML element for displaying / interacting with a particular field on a particular row in a particular model. The Skuid JavaScript equivalent of the <apex:inputField> tag.

Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Get a reference to the model and row we'll be working with
var model = skuid.model.getModel('AccountData'),
row = model.getFirstRow();

// Creating an editor is for advanced scenarios.
// You typically set this to null.
var editor = null;

// Create a new skuid.ui.Field
// corresponding to the 'MailingCity' field
var f = new skuid.ui.Field(
  row,
  model,
  editor,
  {
     fieldId: 'MailingCity',
      register: true
  }
);

// Render the field, running the corresponding field renderer logic
// using the metadata Skuid finds for the 'MailingCity' field.
f.render();

Properties¶

skuid.ui.Field.editor¶

skuid.ui.Editor

The skuid.ui.Editor associated with the field, if any. This will be populated for most standard Skuid Fields (e.g. Fields in a Field Editor or Table).

skuid.ui.Field.element¶

$( DOM Element )

A jQuery wrapped DOM element representing the parent node for the field. Add HTML content to element to have it displayed in the appropriate place on the screen.

Note

Elements directly associated with a Field will have a reference to the Field stored in the jQuery object data attribute. For example, to get at the Field corresponding to the first <td> element in the first row of a Table Component with ID “table-id”, you could do $(‘#table-id tr:first-child > td:first-child’).data(‘object’).

skuid.ui.Field.id¶

string

The field API name. e.g. “FirstName”, “CreatedBy”, “CustomField__c”

skuid.ui.Field.item¶

skuid.ui.Item

A skuid.ui.Item object representing the list item associated with the row to which the current field belongs.

skuid.ui.Field.label¶

string

The field label as defined by the “Custom Label” property from the Page Composer or as defined by the Salesforce sObject field result metadata.

skuid.ui.Field.metadata¶

Skuid Model Field Metadata Object

Metadata about the field.

skuid.ui.Field.mode¶

string

The Skuid display mode to use when rendering this Field. One of:

• “read” (read mode, with ability to doubleclick into Edit mode, aka “Inline-Edit Mode”)
• “readonly” (read mode, NO ability to doubleclick into Edit mode)
• “edit” (starts out in Edit mode)

skuid.ui.Field.model¶

skuid.model.Model

The skuid.model.Model from which the current Field is derived.

skuid.ui.Field.name¶

name

The field alias. This is usually only used for aggregate queries.

skuid.ui.Field.required¶

boolean

Indicates if the field is required, as specified either by the Page Composer or the Salesforce field’s metadata. Required fields will be wrapped in a red border to indicate that they must have some value in them in order for the corresponding Model to be saved.

skuid.ui.Field.row¶

object

The data row that this skuid.ui.Field is editing on its model, represented as a JavaScript object containing a simple mapping of field names to field values for the current row. For example, the current row of a Model with fields “Name” and “CustomField__c” would be represented as:

1 2 3 4

{ 'Name': '<name value>', 'CustomField__c': '<custom field value>' }

Prototype Functions¶

skuid.ui.Field.render()¶

Renders the field, creating or modifying field.element, a DOM element. Runs the appropriate field renderer logic based on the specified data field’s metadata and the field’s current mode.

For example: - If field.id were 'MailingCity' on the Account object, and field.mode were 'edit', then the ('TEXT')['edit'] renderer would be used. - If field.id were 'CreatedDate' and field.mode were 'readonly', then the ('DATETIME')['readonly'] renderer would be used.

Overriding Field Prototype Functions¶

Skuid Fields have one prototype method that may need to be overriden: handleChange().

Note

This will only be called by Skuid if the skuid.ui.Field is registered on a particular model. If a change is made to the skuid.ui.Field’s corresponding row and field in that model, then Skuid will call the skuid.ui.Field’s handleChange() method as soon as the model has finished processing the change.

handleChange() is only called by Models as a result of calls to the Model updateRow() method – handleChange is NOT called after calls to the Model save(), cancel(), or updateData() methods. However, render() WILL be called after save(), cancel(), or updateData(), as a given Field’s DOM element will be completely rebuilt as a result of these three events.

skuid.ui.Field.handleChange(newValue)¶

By default, re-renders the Field. Override this method if using the Field as a Listener and you want to perform some custom logic based on the new value for the Field.

Arguments:	newValue (object) – The new value that was entered for this Field’s row and field in the model. For example, if you call field.model.updateRow(field.row,field.id,’Cheese’), then handleChange(“Cheese”) would be called on the field.