Namespace: viewField

CSL. viewField

Contains all the methods for custom scripting on a view field

Source:

Methods


.addClassCondition(options)

This function adds a condition to the view field for adding classes and inline styles. The view field will receive the styles if the condition returns true. In this condition,
the values of the current form and the source system context can be used. If the field has recieved the styles and the condition results to false, the field will be
stripped of the styles again.

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Description
screenId String

Specify the id of the screen.

viewFieldName String

Specify the name of the view field to add the condition to.

conditionName String

Specify the unique name for the condition. A condition cannot be added if the name is not unique.

condition function

Specify a function that checks whether the view field should be hidden. Return false if the view field should not be hidden.

classNames String

Specify the names of the classes seperated by " ".

styles String

Specify the inline styles. Be sure to use ';' at the end of every definition.

Source:
Throws:
  • Will throw an error if any required input field is not set (screenId and ruleName).

  • Will throw an error when a component with the passed componentId could not be found.

  • Will throw an error if the view field was not found on the view.

  • Will throw an error if a condition with the same name already exists on the view field.

Example
// When the field Product Stock has a value smaller than 15, the background color should be red and the field should receive the class .low-stock
CSL.viewField.addClassCondition({
    screenId: sourceId,
    viewFieldName: "Product Stock",
    conditionName: "ProductStockRedBackground",
    classNames: "low-stock",
    styles: "background-color: red;",
    condition: function(rowData){ return rowData["Product Stock"] < 15; }
});

.addCreateViewToControl(options)

Adds an image to the control with the possibility to open an insert view. The default icon is the plus icon from font-awesome.

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Argument Default Description
screenId String

Specify the id of the screen.

viewFieldName String

Specify the name of the view field to add the icon to.

object String

Specify the name of the object.

view String

Specify the name of the view.

customClasses Array.<String> <optional>

Specify optionally extra css classes for the icon.

iconUrl String <optional>

Specify optionally the url of the icon. This can be a font-awesome class, a url, or the name of an asset.

setOutputAsValue Boolean <optional>
false

Specify optionally if you want to set the first returned record as the value for the view field.

Source:

.addDisableCondition(options)

This function adds a condition to the view field on which it could be disabled. The view field will be disabled if the condition returns true. In this condition,
the values of the current form and the source system context can be used. If the field has been disabled and the condition results to false, the field will be
shown again.

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Description
screenId String

Specify the id of the screen.

viewFieldName String

Specify the name of the view field to add the condition to.

conditionName String

Specify the unique name for the condition. A condition cannot be added if the name is not unique.

condition function

Specify a function that checks whether the view field should be hidden. Return false if the view field should not be hidden.

Source:
Throws:
  • Will throw an error if any required input field is not set (screenId and ruleName).

  • Will throw an error when a component with the passed componentId could not be found.

  • Will throw an error if the view field was not found on the view.

  • Will throw an error if a condition with the same name already exists on the view field.

Example
// When the field Include Lunch (YesNo) is not checked, the Lunch Menu field should be disabled
CSL.viewField.addDisableCondition({
    screenId: sourceId,
    viewFieldName: "Lunch menu",
    conditionName: "DisableLunchMenuWhenLunchNotChecked",
    condition: function(rowData){ return !rowData["Include Lunch"]; }
});

.addHideCondition(options)

This function adds a condition to the view field on which it could be hidden. The view field will be hidden if the condition returns true. In this condition,
the values of the current form and the source system context can be used. If the field has been hidden and the condition results to false, the field will be
shown again.

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Description
screenId String

Specify the id of the screen.

viewFieldName String

Specify the name of the view field to add the condition to.

conditionName String

Specify the unique name for the condition. A condition cannot be added if the name is not unique.

condition function

Specify a function that checks whether the view field should be hidden. Return false if the view field should not be hidden.

Source:
Throws:
  • Will throw an error if any required input field is not set (screenId and ruleName).

  • Will throw an error when a component with the passed componentId could not be found.

  • Will throw an error if the view field was not found on the view.

  • Will throw an error if a condition with the same name already exists on the view field.

Example
// When the field Include Lunch (YesNo) is not checked, the Lunch Menu field should be hidden
CSL.viewField.addHideCondition({
    screenId: sourceId,
    viewFieldName: "Lunch menu",
    conditionName: "HideLunchMenuWhenLunchNotChecked",
    condition: function(rowData){ return !rowData["Include Lunch"]; }
});

.addRequiredCondition(options)

This function adds a condition to the view field to make it required. The view field will be required if the condition returns true. In this condition,
the values of the current form and the source system context can be used. If the field has been hidden and the condition results to false, the field will no longer be
required.

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Description
screenId String

Specify the id of the screen.

viewFieldName String

Specify the name of the view field to add the condition to.

conditionName String

Specify the unique name for the condition. A condition cannot be added if the name is not unique.

condition function

Specify a function that checks whether the view field should be hidden. Return false if the view field should not be hidden.

Source:
Throws:
  • Will throw an error if any required input field is not set (screenId and ruleName).

  • Will throw an error when a component with the passed componentId could not be found.

  • Will throw an error if the view field was not found on the view.

  • Will throw an error if a condition with the same name already exists on the view field.

Example
// When the field Include Lunch (YesNo) is checked, the Lunch Menu field should be required
CSL.viewField.addRequiredCondition({
    screenId: sourceId,
    viewFieldName: "Lunch menu",
    conditionName: "RequireLunchMenuWhenLunchChecked",
    condition: function(rowData){ return rowData["Include Lunch"]; }
});

.addSingleRecordViewToControl(options)

Adds an image to the control with the possibility to open a single record view. The default icon is the info icon from font-awesome.

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Argument Description
screenId String

Specify the id of the screen.

viewFieldName String

Specify the name of the view field to add the icon to.

object String

Specify the name of the object.

view String

Specify the name of the view.

customClasses Array.<String> <optional>

Specify optionally extra css classes for the icon.

iconUrl String <optional>

Specify optionally the url of the icon. This can be a font-awesome class, a url, or the name of an asset.

Source:

.addUpdateViewToControl(options)

Adds an image to the control with the possibility to open an update view. The default icon is the info icon from font-awesome.

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Argument Description
screenId String

Specify the id of the screen.

viewFieldName String

Specify the name of the view field to add the icon to.

object String

Specify the name of the object.

view String

Specify the name of the view.

customClasses Array.<String> <optional>

Specify optionally extra css classes for the icon.

iconUrl String <optional>

Specify optionally the url of the icon. This can be a font-awesome class, a url, or the name of an asset.

Source:

.addValidationRule(options)

This function adds a validation rule to view field. This validation rule should be a function because this is how kendo implements validation.
This function will test the rule as well by retrieving the o-control element of the view field and passing it to the function. If the result of this test
is not true or false, the rule is invalid and will not be applied.

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Description
screenId string

Specify the unique identifier of the screen.

viewFieldName string

Specify the name of the view field.

rule function

Specify the rule to add.

ruleName string

Specify the name of the rule to add. All rules should have a unique name.

ruleMessage string

Specify the message to show when the rule is invalid.

Source:
Throws:
  • Will throw an error if any required input field is not set (screenId, viewFieldName, rule, ruleName and ruleMessage).

  • Will throw an error when a component with the passed componentId could not be found.

  • Will throw an error when the component has no field configured for the given view field name.

  • Will throw an error if the specified rule didn't return a boolean.

Returns:

This function returns the unique identifier for the added rule. This identifier should be used for removing the custom rule again.

Type
String

.editCell(options)

Enters a cell of the current row when inline editing is set to Batch or RecordRowLeave

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Description
componentId string

Specify the id of the screen or grid.

rowKey string

Specify the unique identifier of the row.

viewFieldName string

Specify the name of the view field.

Source:
Throws:
  • Will throw an error if any required input field is not set (componentId, rowKey, viewFieldName)

  • Will throw an error if the inline editing mode is not set to Batch or RecordRowLeave

Example
CSL.viewField.editCell({ componentId: sourceId, rowKey: myGridRowKey, viewFieldName: 'Stock Value' });

.getConfiguration(options)

This function returns the configuration for a view field on a component. The component could either be a screen, grid or context manager. If the view field doesn't
exist on the component, an exception will be thrown.

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Description
componentId string

Specify the unique identifier of the grid, screen or context manager.

viewFieldName string

Specify the name of the view field to get the configuration from.

Source:
Throws:
  • Will throw an error if any required input field is not set (componentId and viewFieldName).

  • Will throw an error when a component with the passed componentId could not be found.

  • Will throw an error when the component has no field configured for the given view field name.

Returns:

Returns the configuration of the view field.

Type
Object
Example
CSL.viewField.getConfiguration({ componentId: sourceId, viewFieldName: "Product ID" });

.isInlineEditing(options)

Checks whether the view field is being used in inline editing.

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Description
componentId string

Specify the id of the screen or grid.

viewFieldName string

Specify the name of the view field.

Source:
Throws:
  • Will throw an error if any required input field is not set (componentId and viewFieldName).

  • Will throw an error if the view field was not found on the view.

Returns:

True if the view field is used in inline editing, false if not.

Type
boolean
Example
var isInlineEditing = CSL.viewField.isInlineEditing({ componentId: sourceId, viewFieldName: "Product Name" });

.leaveCell(options)

Forces the user out of the cell if inline editing is set to Batch or RecordRowLeave

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Description
componentId string

Specify the id of the screen or grid.

Source:
Throws:
  • Will throw an error if any required input field is not set (componentId)

  • Will throw an error if the inline editing mode is not set to Batch or RecordRowLeave

Example
CSL.viewField.leaveCell({ componentId: sourceId });

.openDataSource(options)

This function opens the data source for the given view field. This function can only be applied to view fields with a data source and
the data source should be configured as a picker or a dropdownlist.

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Description
screenId string

Specify the unique identifier of the screen.

viewFieldName string

Specify the name of the view field.

Source:
Throws:
  • Will throw an error if any required input field is not set (screenId and viewFieldName).

  • Will throw an error when a component with the passed componentId could not be found.

  • Will throw an error when the component has no field configured for the given view field name.

  • Will throw an error when the view field has no data source configured.

  • Will throw an error when a data source is configured on the view field but it is not a picker or dropdown list.

Example
CSL.viewField.openDataSource({ screenId: sourceId, viewFieldName: "Product Category ID" });

.removeClassCondition(options)

This function removes a class condition from the view field.

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Description
screenId String

Specify the id of the screen.

viewFieldName String

Specify the name of the view field to add the condition to.

conditionName String

Specify the unique name for the condition. A condition cannot be added if the name is not unique.

Source:
Throws:
  • Will throw an error if any required input field is not set (screenId and ruleName).

  • Will throw an error when a component with the passed componentId could not be found.

  • Will throw an error if the view field was not found on the view.

Example
CSL.viewField.removeClassCondition({ screenId: sourceId, viewFieldName: "Product Stock", conditionName: "ProductStockRedBackground" });

.removeDisableCondition(options)

This function removes a disable condition on a view field.

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Description
screenId String

Specify the id of the screen.

viewFieldName String

Specify the name of the view field to add the condition to.

conditionName String

Specify the unique name for the condition. A condition cannot be added if the name is not unique.

Source:
Throws:
  • Will throw an error if any required input field is not set (screenId and ruleName).

  • Will throw an error when a component with the passed componentId could not be found.

  • Will throw an error if the view field was not found on the view.

Example
CSL.viewField.removeDisableCondition({ screenId: sourceId, viewFieldName: "Lunch menu", conditionName: "DisableLunchMenuWhenLunchNotChecked" });

.removeHideCondition(options)

This function removes a hide condition on a view field.

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Description
screenId String

Specify the id of the screen.

viewFieldName String

Specify the name of the view field to add the condition to.

conditionName String

Specify the unique name for the condition. A condition cannot be added if the name is not unique.

Source:
Throws:
  • Will throw an error if any required input field is not set (screenId and ruleName).

  • Will throw an error when a component with the passed componentId could not be found.

  • Will throw an error if the view field was not found on the view.

Example
CSL.viewField.removeHideCondition({ screenId: sourceId, viewFieldName: "Lunch menu", conditionName: "HideLunchMenuWhenLunchNotChecked" });

.removeRequiredCondition(options)

This function removes a required condition on a view field.

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Description
screenId String

Specify the id of the screen.

viewFieldName String

Specify the name of the view field to add the condition to.

conditionName String

Specify the unique name for the condition. A condition cannot be added if the name is not unique.

Source:
Throws:
  • Will throw an error if any required input field is not set (screenId and ruleName).

  • Will throw an error when a component with the passed componentId could not be found.

  • Will throw an error if the view field was not found on the view.

Example
CSL.viewField.removeRequiredCondition({ screenId: sourceId, viewFieldName: "Lunch menu", conditionName: "RequireLunchMenuWhenLunchChecked" });

.removeValidationRule(options)

This function removes a validation rule of a write screen.

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Description
screenId string

Specify the unique identifier of the screen.

viewFieldName string

Specify the name of the view field.

ruleName string

Specify the name of the rule to add. All rules should have a unique name.

Source:
Throws:
  • Will throw an error if any required input field is not set (screenId, viewFieldName and ruleName).

  • Will throw an error when a component with the passed componentId could not be found.


.toggleEnabled(options)

This function sets whether the view field is available for editing or not. If no value is passed, the current availability will be inversed.

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Argument Description
screenId string

Specify the unique identifier of the screen.

viewFieldName string

Specify the name of the view field.

enabled Object <optional>

Specify whether the view field should be enabled. If this value is not specified, the current value will be inversed.

Source:
Throws:
  • Will throw an error if any required input field is not set (screenId and viewFieldName).

  • Will throw an error when a component with the passed componentId could not be found.

  • Will throw an error when the component has no field configured for the given view field name.

Returns:

This function returns true if the view field is enabled and false if it is disabled.

Type
Boolean
Example
CSL.viewField.toggleEnabled({ screenId: sourceId, viewFieldName: "Product Description" });
CSL.viewField.toggleEnabled({ screenId: sourceId, viewFieldName: "Product Description", enabled: false });

.trigger(options)

This function executes an event that has been configured on the view field. The passed event can have the "On"-prefix because if it does, it will be cut off.

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Description
screenId string

Specify the unique identifier of the screen.

viewFieldName string

Specify the name of the view field.

event Object

Specify the name of the event. Casing is not important and the "On"-prefix will be cut off.

Source:
Throws:
  • Will throw an error if any required input field is not set (screenId, viewFieldName and event).

  • Will throw an error when a component with the passed componentId could not be found.

  • Will throw an error when the component has no field configured for the given view field name.

Example
// Both calls trigger the same event
CSL.viewField.trigger({ screenId: sourceId, viewFieldName: "Product Description", event: "click" });
CSL.viewField.trigger({ screenId: sourceId, viewFieldName: "Product Description", event: "OnClick" });

.updateFormFields(options)

This function sets the value of the configured "Update Form Fields After Selection". If no data source is configured on the view field, calling this function is
useless. If a value is passed for a field that is no update form field, the value will not be set.

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Description
screenId string

Specify the unique identifier of the screen.

viewFieldName string

Specify the name of the view field to update the "update fields" from.

values Object

Specify values for the update form fields. Use the name of the view field as key and the new value for the field as value.

Source:
Throws:
  • Will throw an error if any required input field is not set (screenId, viewFieldName and values).

  • Will throw an error when a component with the passed componentId could not be found.

  • Will throw an error when the component has no field configured for the given view field name.

Example
CSL.viewField.updateFormFields({
     screenId: sourceId,
     viewFieldName: "Product Category ID",
     values: { "Product Category Name": "Drinks" }
});

.value(options)

This function returns the current value for the given view field by calling the getControlValue function on the view field configuration.
If a value was passed to the function, it will be set first by calling the setControlValue function on the view field configuration.

Parameters:
Name Type Description
options Object

Specify the options for this function.

Properties
Name Type Argument Description
componentId string

Specify the unique identifier of the screen or context manager.

viewFieldName string

Specify the name of the view field to get the configuration from.

value * <optional>

Specify the value for the field. This value will be set.

Source:
Throws:
  • Will throw an error if any required input field is not set (componentId and viewFieldName).

  • Will throw an error when a component with the passed componentId could not be found if the view field is not used in inline editing.

  • Will throw an error when the component has no field configured for the given view field name.

Returns:

This function returns the value of the view field in its specific type. Date view field => value is a date

Type
*
Examples
// Gets the value
var productName = CSL.viewField.value({ componentId: sourceId, viewFieldName: "Product Name" });
// Sets the value
var updatedProductName = CSL.viewField.value({
     componentId: sourceId,
     viewFieldName: "Product Name",
     value: "Thrubanower"
});