The component id of the current view instance.
Creates a new instance of settings that can be applied to the group content.
Any custom styles to apply to the content.
Creates a new instance of settings that can be applied to a group header.
The title of the group.
The color of the text.
The background color of the header.
Any custom styles to apply to the header.
SERVICES
The configuration of the component to render.
The rendered HTML of the view.
The configuration of the view to render.
The viewFields of the view.
Adds a button to the view
CSL.view.addButton('googleButton', 'fab fa-google', 'Go to Google', () => {window.open('//google.com')}, componentId);
The name for the button.
The icon used for the button.
The label for the button.
The function executed when the button is clicked.
Optional componentId: stringThe id of the component where the button will be added.
Add a condition that sets class(es) on a view field. The condition will be checked when an interaction in the view is made. (loadComplete, value changed, refresh, ...). Because this is extra configuration on the view, the most logical place to call this function is in the configuration script.
CSL.view.addClassCondition(['productName', 'productDescription'], (rowData) => {
if (rowData['productActive']) {
return 'product-active product-highlight';
} else {
return 'product-inactive';
}
});
The names of the view fields that will be affected by the condition.
The condition that returns the classes to set.
Optional componentId: stringthe id of the component.
Sets the hide condition on view field. The hide condition cannot be configured on a view field which is configured to be hidden. When specifying a component id, that component is targeted, otherwise the current context in which the function is called will be taken. The condition will be checked when an interaction in the view is made. (loadComplete, value changed, refresh, ...). Because this is extra configuration on the view, the most logical place to call this function is in the configuration script.
CSL.view.addHideFieldCondition((rowData) => {
return rowData.productActive;
}, ['productName'], componentId);
The condition that returns a boolean that indicates whether the field needs to be hidden.
The names of the view fields to set the condition on.
Optional componentId: stringThe id of the component.
Adds an action to the view fields specified.
// Open dialog to update a product.
const updateProductAction = {
// Name of the field where the action will be placed on.
viewFieldName: 'productName',
// Name of the fields that should be updated with value filled in the dialog.
viewFieldsToUpdate: ['productName', 'productDescription'],
// The settings for the action, what view to open.
actionSettings: {
objectName: 'Product',
viewName: 'Update Product'
}
};
// Open dialog that show all vendors
const getAllVendorsAction = {
viewFieldName: 'vendorName',
actionSettings: {
objectName: 'Vendor',
viewName: 'Get All Vendors',
},
icon: 'fas fa-truck-moving', // Overwrite the default icon
description: 'Vendors' // The description (tooltip)
};
CSL.view.addViewFieldAction([updateProductAction, getAllVendorsAction]);
Specifies the behaviour of the action linked to the view field.
Optional componentId: stringThe id of the component.
Creates a new group instance.
The layout direction of the children.
The children of the row.
Optional header: string | ViewFieldGroupHeaderSettingsThe settings for the header.
Optional content: ViewFieldGroupContentSettingsThe settings for the content.
Any custom styles to apply to the row.
Creates a new group with layout direction set to column.
The children of the group.
Optional header: string | ViewFieldGroupHeaderSettingsThe settings for the header.
Optional content: ViewFieldGroupContentSettingsThe settings for the content.
Any custom styles to apply to the group.
Creates a new group with layout direction set to row.
The children of the group.
Optional header: string | ViewFieldGroupHeaderSettingsThe settings for the header.
Optional content: ViewFieldGroupContentSettingsThe settings for the content.
Any custom styles to apply to the group.
Triggers the delete function of a view. Multi record views will take all selected items into account. Single record will take found record into account. There will be NO confirmation box to ask if you want to delete the record(s).
CSL.view.deleteRecord(componentId).then((result) => {
console.log(result)
},
(error) => {
console.error(error);
});
Optional componentId: stringThe identifier of the component.
Get the configuration of view fields.
let viewConfigs = CSL.view.getConfiguration(['productName', 'productStock']);
viewConfigs.forEach((config) => {
console.log(config);
});
The names of the view fields.
Optional componentId: stringThe id of the component.
Whether the button exists on the component.
// Add a button
CSL.view.addButton('googleButton', 'fab fa-google', 'Go to Google', () => {window.open('//google.com')}, componentId);
CSL.view.hasButton('googleButton', componentId); // True
// Remove button
CSL.view.removeButton('googleButton', componentId);
CSL.view.hasButton('googleButton', componentId); // False
The name of the button.
Optional componentId: stringThe id of the component.
Sets the view into a processing state.
// Set current view in progress.
CSL.view.progress();
// Set the view with component id "3" in progress.
CSL.view.progress(true, '3');
// Remove the progress from view with component id "3".
CSL.view.progress(false, '3');
Whether the view need to set in processing.
Optional componentId: stringThe id of the component to set in processing.
Remove a button from the component.
// Add a button
CSL.view.addButton('googleButton', 'fab fa-google', 'Go to Google', () => {window.open('//google.com')}, componentId);
CSL.view.hasButton('googleButton', componentId); // True
// Remove button
CSL.view.removeButton('googleButton', componentId);
CSL.view.hasButton('googleButton', componentId); // False
The name of the button.
Optional componentId: stringThe id of the component for which the button needs to be removed.
Remove the class condition on view fields specified.
CSL.view.removeClassCondition(['productName', 'productDescription']);
The name of the view fields.
Optional componentId: stringthe id of the component.
Removes the hide condition on view field. If the field is configured as 'hidden' the field will always be hidden. When specifying a component id, that component is targeted, otherwise the current context in which the function is called will be taken.
CSL.view.removeHideFieldCondition(['productName', 'productDescription'], componentId);
The names of the view fields to set the condition on.
Optional componentId: stringThe id of the component.
Sets a custom template for the multi record view. Refer to: http://docs.ometa.net/public/articles/data-visualisation/views/custom-renderer/custom-renderer.html
let templateFunction = function(rowData, formattedData, csl) {
return `
<div>${rowData.myField}</div>
`;
CSL.view.setCustomTemplate(templateFunction);
}
Function that will be called for each record in the page. Should return the HTML which will be rendered as a string.
Css classes applied on the single container.
Css classes applied on each element in the loop.
Optional emptyTemplateFunction: (() => string)Function that will be called when there are no records. Should return the HTML which will be rendered as a string. If unspecified, the no result message is displayed.
Optional customTemplateProperties: CustomTemplatePropertiesSets the default header settings for a view field group.
The color to apply by default.
The background color to apply by default.
The styles to apply by default.
Trigger an event of a view field. The 'On'-prefix is not required for the event to be triggered.
// Both will trigger the same event. The 'on'-prefix is not required.
CSL.view.trigger(['Product Price'], 'blur');
CSL.view.trigger(['Product Price'], 'onblur');
The names of the fields to trigger the event on.
The event to trigger.
Optional componentId: stringThe id of the component.
Gets or sets the values of the view component. Best practice is to set values of the correct type for the control. For example a number for a number field, a date for a date field, ... We will try to parse the 'incorrect' value to the correct type, but we can not guarantee the correct value will be set.
CSL.view.values(); // Returns all values of the form
CSL.view.values({'name': 'John', 'stock': 500, 'delivery': new Date('4-27-2020'), 'isActive': true}, undefined, 'a35b'); // Returns all values of the form after setting values.
CSL.view.values({'name': 'John'}, ['name', 'stock'], componentId); // Returns the values for 'name' and 'stock' after setting value for 'name'
Optional values: { Optional viewFieldNames: string[]Optional componentId: stringGenerated using TypeDoc
This class represents the API for custom scripting related to views. You can access all the methods by using the namespace
CSL.view.