Parameters:
Name | Type | Description |
---|---|---|
options |
Object | A map of option-value pairs to set on the widget. |
- Since:
- 5.1
Example
This example creates a very simple non-editable recordView with just two fields; Id and Name. Only the required options are given; all others will have their default value. The element with id myRecordForm is an empty div.
var fieldDefinitions = {
id: {
index: 0,
heading: "Id",
seq: "1"
},
name: {
index: 1,
heading: "Name",
seq: "2"
}
};
var data = [
["1022", "Betty"],
["1023", "James"],
...
];
apex.model.create( "myModel", {
recordIsArray: true,
fields: fieldDefinitions
}, data );
$( "#myRecordForm" ).recordView( {
modelName: "myModel",
fields: [ fieldDefinitions ]
} );
Extends
actionsContext :actions
Actions context to use. If null or not provided a new context is created. Specifying a context allows this widget to be contained within another one and share the same context. See actions for information on what an actions context is and apex.actions.createContext for how to create one.
Type:
- Default Value:
- null
Examples
Initialize the recordView with the actionsContext option specified.
$( ".selector" ).recordView( {
actionsContext: myContext
} );
Get or set option actionsContext after initialization.
// get
var value = $( ".selector" ).recordView( "option", "actionsContext" );
// set
$( ".selector" ).recordView( "option", "actionsContext", myContext );
Only applies if recordView#editable is true. If true, the recordView will start out in edit mode and double click, Enter, and Escape will not change the mode. Calling method recordView#setEditMode can still change the edit mode.
Type:
- boolean
- Default Value:
- false
Examples
Initialize the recordView with the alwaysEdit option specified.
$( ".selector" ).recordView( {
alwaysEdit: true
} );
Get or set option alwaysEdit after initialization.
// get
var value = $( ".selector" ).recordView( "option", "alwaysEdit" );
// set
$( ".selector" ).recordView( "option", "alwaysEdit", true );
Specifies if a new record should be automatically added when the model doesn't contain any data. If supported by the derived view a new record may be added when moving beyond the last record in the view while editing. Must only be true if the model and view are editable and the model allows adding records.
Type:
- boolean
- Inherited From:
- Default Value:
- false
Examples
Initialize the recordView with the autoAddRecord option specified.
$( ".selector" ).recordView( {
autoAddRecord: true
} );
Get or set option autoAddRecord after initialization.
// get
var value = $( ".selector" ).recordView( "option", "autoAddRecord" );
// set
$( ".selector" ).recordView( "option", "autoAddRecord", true );
Determine if the view allows editing. If true the model must also allow editing but if false the model could still allow editing. If true the view data can be edited according to what the model allows. Only applies if the view supports editing.
Type:
- boolean
- Inherited From:
- Default Value:
- false
Examples
Initialize the recordView with the editable option specified.
$( ".selector" ).recordView( {
editable: true
} );
Get or set option editable after initialization.
// get
var value = $( ".selector" ).recordView( "option", "editable" );
// set
$( ".selector" ).recordView( "option", "editable", true );
Defines headings that fields are grouped together under. Fields specify which group they belong
under with the recordView#fields groupName
property.
A recordView can have one level of headings.
Type:
- Object
Properties:
Name | Type | Description | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
* |
Object | The property name is the field group name. This name is referenced from
a recordView#fields groupName property.
The property values are field group definitions.
Properties
|
Example
This example shows initializing the recordView with "First" name and "Last" name fields that are grouped under heading "Name".
$( ".selector" ).recordView( {
fields[{
FIRST_NAME: {
heading: "First",
groupName: "NAME",
...
},
LAST_NAME: {
heading: "Last",
groupName: "NAME",
....
},
...
],
fieldGroups: {
NAME: {
label: "Name"
},
...
}
} );
Defines the fields in the recordView form. These fields are also fields in the model. The value is an array of exactly one object that maps the field name to a field definition object. The properties are the field names. The property value is a field definition. Wrapping the object in an array simply keeps the widget from making a copy of the fields so that the same definition can be shared.
The same structure can be shared with the view model and a grid widget. This option is required.
Type:
- Array.<object>
Properties:
Name | Type | Description | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
* |
object | The property is the field name. By convention
it is the uppercase database column name. The value is an object that defines the field.
All properties are optional unless specified otherwise.
Properties
|
Example
Initialize the recordView with the fields option specified.
$( ".selector" ).recordView( {
fields: [ {
NAME: {
label: "Name",
seq: 1,
hidden: false,
isRequired: true,
escape: true
},
....
} ]
} );
CSS classes to add to the form wrapper divs.
Type:
- string
- Default Value:
- true
Examples
Initialize the recordView with the formCssClasses option specified.
$( ".selector" ).recordView( {
formCssClasses: "u-Form--labelsAbove u-Form--stretchInputs"
} );
Get or set option formCssClasses after initialization.
// get
var value = $( ".selector" ).recordView( "option", "formCssClasses" );
// set
$( ".selector" ).recordView( "option", "formCssClasses", "u-Form--labelsAbove u-Form--stretchInputs" );
This affects scrolling and how any header (if the view has a header) or footer position is handled.
Set to true if the view is in a container that has a specific height defined. When hasSize is true the record content will scroll within the bounds of the region.
Set to false if the view does not have a defined height. The view height will be as large as needed to contain the view records as determined by pagination settings. The view may scroll within the browser window. Other options may control if the header (if the view has a header) or footer sticks to the window.
The container width must always be defined.
Type:
- boolean
- Inherited From:
- Default Value:
- false
Example
Initialize the recordView with the hasSize option specified.
$( ".selector" ).recordView( {
hasSize: true
} );
The prefix to use when generating ids. To avoid duplicate element ids either
give the widget element an id
attribute or specify this property.
Type:
- string
- Default Value:
- element id or "rv"
Examples
Initialize the recordView with the idPrefix option specified.
$( ".selector" ).recordView( {
idPrefix: "r1"
} );
Get or set option idPrefix after initialization.
// get
var value = $( ".selector" ).recordView( "option", "idPrefix" );
// set
$( ".selector" ).recordView( "option", "idPrefix", "r1" );
Controls how form field labels are aligned. One of "start", "end", "center", "left", "right".
Type:
- string
- Default Value:
- "end"
Examples
Initialize the recordView with the labelAlignment option specified.
$( ".selector" ).recordView( {
labelAlignment: "start"
} );
Get or set option labelAlignment after initialization.
// get
var value = $( ".selector" ).recordView( "option", "labelAlignment" );
// set
$( ".selector" ).recordView( "option", "labelAlignment", "start" );
Name of model that this view widget will display data from. Can include an instance as well.
The model must already exist. This option is required. See apex.model.create
modelId
argument.
Type:
- string
- Inherited From:
Examples
Initialize the recordView with the modelName option specified.
$( ".selector" ).recordView( {
modelName: [ "myModel", "1011" ]
} );
Get or set option modelName after initialization.
// get
var value = $( ".selector" ).recordView( "option", "modelName" );
// set
$( ".selector" ).recordView( "option", "modelName", "myModel" );
Text to display when there is no data.
Type:
- string
- Inherited From:
Examples
Initialize the recordView with the noDataMessage option specified.
$( ".selector" ).recordView( {
noDataMessage: "No employees found."
} );
Get or set option noDataMessage after initialization.
// get
var value = $( ".selector" ).recordView( "option", "noDataMessage" );
// set
$( ".selector" ).recordView( "option", "noDataMessage", "No records found." );
Options object to pass to apex.util.showSpinner. The default depends on the
hasSize
option.
Type:
- object
- Inherited From:
- Default Value:
- { fixed: !options.hasSize }
Examples
Initialize the recordView with the progressOptions option specified.
$( ".selector" ).recordView( {
progressOptions: null
} );
Get or set option progressOptions after initialization.
// get
var value = $( ".selector" ).recordView( "option", "progressOptions" );
// set
$( ".selector" ).recordView( "option", "progressOptions", null );
Zero based index of record in model to display/edit in this recordView.
Type:
- interger
- Default Value:
- 0
Examples
Initialize the recordView with the recordOffset option specified.
$( ".selector" ).recordView( {
recordOffset: 22
} );
Get or set option recordOffset after initialization.
// get
var value = $( ".selector" ).recordView( "option", "recordOffset" );
// set
$( ".selector" ).recordView( "option", "recordOffset", 22 );
If true the user will have the option to exclude fields that are hidden.
Type:
- boolean
- Default Value:
- true
Examples
Initialize the recordView with the showExcludeHiddenFields option specified.
$( ".selector" ).recordView( {
showExcludeHiddenFields: false
} );
Get or set option showExcludeHiddenFields after initialization.
// get
var value = $( ".selector" ).recordView( "option", "showExcludeHiddenFields" );
// set
$( ".selector" ).recordView( "option", "showExcludeHiddenFields", false );
If true the user will have the option to exclude fields that have a null value.
Type:
- boolean
- Default Value:
- true
Examples
Initialize the recordView with the showExcludeNullValues option specified.
$( ".selector" ).recordView( {
showExcludeNullValues: false
} );
Get or set option showExcludeNullValues after initialization.
// get
var value = $( ".selector" ).recordView( "option", "showExcludeNullValues" );
// set
$( ".selector" ).recordView( "option", "showExcludeNullValues", false );
Text to display when the value is null or empty string.
Type:
- string
- Default Value:
- "-"
Examples
Initialize the recordView with the showNullAs option specified.
$( ".selector" ).recordView( {
showNullAs: "- unknown -"
} );
Get or set option showNullAs after initialization.
// get
var value = $( ".selector" ).recordView( "option", "showNullAs" );
// set
$( ".selector" ).recordView( "option", "showNullAs", "- unknown -" );
If true (and the recordView is editable) deleted records/rows will skipped over; the next non-deleted record is shown. Otherwise they are visible but have a visual indication that they are deleted this has no effect if the model deletes records right away.
Type:
- boolean
- Default Value:
- false
Examples
Initialize the recordView with the skipDeletedRecords option specified.
$( ".selector" ).recordView( {
skipDeletedRecords: true
} );
Get or set option skipDeletedRecords after initialization.
// get
var value = $( ".selector" ).recordView( "option", "skipDeletedRecords" );
// set
$( ".selector" ).recordView( "option", "skipDeletedRecords", true );
Toolbar options. A default toolbar is provided. If null then there will be no toolbar.
Type:
- object
Triggered when the edit mode changes.
Properties:
Name | Type | Description | ||||||
---|---|---|---|---|---|---|---|---|
event |
Event | jQuery event object. |
||||||
data |
Object | Additional data for the event.
Properties
|
Examples
Initialize the recordView with the modeChange
callback specified:
$( ".selector" ).recordView({
modeChange: function( event, data ) {}
});
Bind an event listener to the recordviewmodechange
event:
$( ".selector" ).on( "recordviewmodechange", function( event, data ) {} );
Properties:
Name | Type | Description | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
event |
Event | jQuery event object. |
|||||||||
data |
Object | Additional data for the event.
Properties
|
Examples
Initialize the recordView with the recordChange
callback specified:
$( ".selector" ).recordView({
recordChange: function( event, data ) {}
});
Bind an event listener to the recordviewrecordchange
event:
$( ".selector" ).on( "recordviewrecordchange", function( event, data ) {} );
Parameters:
Name | Type | Description |
---|---|---|
pFieldName |
field/column name |
Returns:
- Type
- *
Give focus to the recordView. Focus is given to the first field.
Example
Focus the recordView.
$( ".selector" ).recordView( "focus" );
getActions() → {actions}
Returns the actions context for this recordView instance. See actions for details on how to use the actions context.
Returns:
- Type
- actions
Examples
This example gets the action context and invokes the "next-record" action.
var actions = $( ".selector" ).recordView( "getActions" );
actions.invoke( "next-record" );
To get a list of all actions from the browser JavaScript console.
console.log( JSON.stringify( $( ".selector" ).recordView( "getActions" ).list(), null, 4 ) );
getActiveRecord() → {model.Record}
Returns the active record or null if there is no active record. The active record is the one currently being edited.
- Inherited From:
Returns:
- Type
- model.Record
Returns the identity of the active record or null if there is no active record. The active record is the one currently being edited.
- Inherited From:
Returns:
- Type
- string
Get the field definitions in order.
Returns:
- Type
- Array
getRecord() → {model.Record}
Returns:
- Type
- model.Record
Returns:
- Type
- jQuery
Put focus in the field given by pRecordId
and
pField
. This is used to focus records and fields that have
errors. This will change the current record as needed to focus the field. The record must be in the model.
If pField
is null then the first field is focused.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
pRecordId |
String | The record id of the record to go to. | |
pField |
String |
<optional> |
Name of the field to go to. |
Example
Focus the NAME field of the record with id "0100091".
$( ".selector" ).recordView( "gotoField", "0100091", "NAME" );
Returns:
- Type
- boolean
Example
This example logs a message if the recordView is in edit mode.
if ( $( ".selector" ).recordView( "inEditMode" ) ) {
console.log("In edit mode");
}
Call to lock the active row while async processing is in progress.
The view edits one row/record at a time. This is known as the active row. In edit mode as the user changes the focused cell with the mouse, tab or enter keys if the new cell is on a different row the previous row is deactivated and the new row is activated. Any dynamic actions or other code that manipulates Column items are acting on the active row. If any actions are asynchronous such as using Ajax to set a column item value then the row must not be deactivated while the async action is in progress otherwise the result would be applied to the wrong row!
So this method must be called before starting an async operation. It can be called multiple times if there are
multiple async operations. For each call to lockActive
there must be exactly one call to unlockActive
. See also
See tableModelViewBase#unlockActive
If the view is part of an APEX region plugin, that region should implement the
beforeAsync
and afterAsync
functions on the object returned from region#getSessionState by calling
lockActive
and unlockActive
respectively. Then if an appropriate target option is passed to apex.server.plugin then the locking will
be done automatically. Dynamic Actions that act on column items pass the correct target option.
The bottom line is that for Dynamic Actions on columns of an Interactive Grid these lock/unlock methods are
called automatically.
- Inherited From:
Example
See grid#setActiveRecordValue for an example.
Parameters:
Name | Type | Attributes | Description |
---|---|---|---|
pFocus |
boolean |
<optional> |
If true put focus in the recordView. |
Use after a column item value is set without triggering a change event to update the model and grid view. Has no effect if there is no active record.
When a dynamic action or other event handler on a change event updates the value of the same item that triggered the change event, the change event from setting the value should be suppressed to avoid an infinite loop. However the model is only updated from a change event. This method offers a solution to the model not being updated if the value is set asynchronously. Call this method anytime a column item is updated and the change event is suppressed.
Parameters:
Name | Type | Description |
---|---|---|
pColumn |
string | The name of the column. |
- Inherited From:
Example
This example updates the "SALARY" column, which has static id "C_SALARY", in
interactive grid with static id "MyGrid", to add 10 to whatever the user enters.
setTimeout
is used to simulate an async value update.
The active row must be locked around the async update.
var salary = apex.item( "C_SALARY" );
$( salary.node ).change( function( event ) {
// assume the current view is grid and not single row view.
var grid$ = apex.region( "MyGrid" ).call( "getCurrentView" ).view$;
grid$.grid("lockActive");
setTimeout( function() {
// suppress this change otherwise this handler will be triggered again
salary.setValue( parseFloat( salary.getValue() ) + 10, null, true );
// suppressing the value means the grid model is not updated so call setActiveRecordValue
grid$.grid( "setActiveRecordValue", "SALARY" )
.grid( "unlockActive" );
}, 10 ):
} );
Parameters:
Name | Type | Description |
---|---|---|
pEditMode |
boolean | If true enter edit mode if false enter display-only mode. |
Example
This example enters edit mode.
$( ".selector" ).recordView( "setEditMode", true ) );
Call to unlock the active row after async processing is complete.
Call after the async operation completes. See tableModelViewBase#lockActive for more information.
- Inherited From:
Example
See grid#setActiveRecordValue for an example.