Page History
...
Type | Description | |||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
boolean | Boolean value, either true or false | |||||||||||||||||||||||||||||||||||||||||||||||||
border | CSS border string representation | |||||||||||||||||||||||||||||||||||||||||||||||||
color | String color value
| |||||||||||||||||||||||||||||||||||||||||||||||||
dataprovider
| Reference to a dataprovider, either a record or scope/form variable. Can become a complex definition if it needs to support onDataChange, it needs to be able to send changes to server or display tags. The ondatachange handler will receive as parameter the old datarovider value, the new dataprovider value and a JSEvent. Starting with 2021.06 release the JSEvent.data will contain an object: {dataprovider : dataProviderID, scope : dataproviderScope, scopeid : variable_scope_or_datasource}.
Starting with 8.4, if 'forFoundset' above is used, then the client-side (in browser) value also provides two methods: addChangeListener / removeChangeListener. So you can add a listener that will receive updates (row insert/delete/change or full viewport update) similar to how the change listener in foundset property type works. In order for dataprovider typed properties to 'push' their value changes to the server (so changes in the browser to end up in records or scope/form variables) you must either use autoApply or directly apply / startEdit. If you do not 'apply' (auto or manually) the change, the updates will not be sent to server.
Starting with 8.4, if 'forFoundset' above is used, then the client-side (in browser) value also provides two methods: addChangeListener / removeChangeListener. So you can add a listener that will receive updates (row insert/delete/change or full viewport update) similar to how the change listener in foundset property type works. Remember to always remove any added change listeners when the component's $scope is destroyed - similar to what is described in the link for the foundset property type listener. In order for dataprovider typed properties to 'push' their value changes to the server (so changes in the browser to end up in records or scope/form variables) you must either use autoApply or directly apply / startEdit. If you do not 'apply' (auto or manually) the change, the updates will not be sent to server.
Simple example of read-only dataprovider:
Simple example of read-write dataprovider (with auto-apply):
In server-side (solution) scripting, accessing a dataprovider property - for example "elements.myField.myDataprovider" - will yield a string: the dataprovider id (name of variable/column). You can also assign a dataprovider id (string) to that property. | |||||||||||||||||||||||||||||||||||||||||||||||||
dataset | JSDataSet type equivalent. Currently can be used only for runtime api or model (to send a dataset to client).
The type can have two configuration properties: 1. includeColumnNames , default false, will also send the column names as a separate array to client as the first row 2. columnTypes can specify some column types which will be used for converting the value to send client side, this is needed for non basic columns/types | |||||||||||||||||||||||||||||||||||||||||||||||||
date | Date value | dimension |
Code Block | ||
---|---|---|
| ||
{
width: 100,
height: 20
} |
Format string.
Given an object in the .spec file - to be able to specify which dataprovider and/or valuelist property to map this format property on. The 'for' value can be one property name (pointing to a dataprovider-type property or a valuelist property), but it can also contain an array of 2 properties (one being a dataprovider-type property and the other a valuelist property).
It needs the 'for' clause to be able to deduct the type of the format (format depends on DP type, whether or not the valuelist has real/display values or not, ...). If you put a valuelist property in the "for" and that valuelist property has itself a "for" that points to a dataprovider property (that might be linked to a foundset or not) then you must add that same dataprovider property to the "for" clause of the format property as well.
Code Block | ||||
---|---|---|---|---|
| ||||
myFormatProp : { type: 'format', for: 'myDataProviderProp' } |
Code Block | ||||
---|---|---|---|---|
| ||||
myFormatProp : { type: 'format', for: ["myValuelistProp", "myDataProviderProp"] } |
Format property access from solution scripting will give the string value of the parsed format .Assignment to a 'format' typed property allows you to set a new format string .
Callback function information that can be called on server from client.
A callback function set for this type of property will be represented in the component model as a pair of "formname" and "script" that can be used as parameters for "$window.executeInlineScript" to execute it.
Example:
in the component spec
Code Block |
---|
"model": {
"myFunction" : { "type": "function"}
}, |
in the component js implementation we use that executeInlineScript function that is exposed on the window object
Code Block |
---|
$window.executeInlineScript($scope.model.myFunction.formname,
$scope.model.myFunction.script, [arg1, arg2]); |
Note that the component need to have reference to the "$window" service, and the "formname" and ''script" values are already encrypted in the model, and you need to use those values, and not plain text values for formname and script. Arguments for the callback can be set using the last parameter of "$window.executeInlineScript"
Padding insets representation
Code Block | ||
---|---|---|
| ||
{
paddingTop: 10px,
paddingLeft: 20px,
paddingBottom : 10px,
paddingRight: 10px
} |
Reference to a Record. You can use this type:
(starting with Servoy 8.3) to send a client/browser 'foundset' property type's row directly to server (using "record" property type for that); it will be translated to the actual Record on server. E.g.:
language | js |
---|
Client side, the value of a dataprovider property depends on the actual value of the dataprovider (column/variable/...) as well as the type of the dataprovider (is it a number in the database, or a blob / string / date etc.).
For primitives dataprovider types, it will be the primitive value. For date dataprovider types, it will be a Date object on client.
For MEDIA typed dataproviders the client-side value depends on the server side value's content:
- if the value is a BLOB / byte array then client-side you will get an object with two keys: { url: ... , contentType: ... } that can be used to load that content in the browser
- if the value is a date, you will get a Date on client
- if the value is a string:
- if it starts with "media:///" it will be an URL string on the client that points to that server side media resource from the solution
- other strings will be treated as strings
- primitive types will just be sent 'as-is' to client
JSDataSet type equivalent. Currently can be used only for runtime api or model (to send a dataset to client).
Code Block | ||
---|---|---|
| ||
"jsDataSet":{"type" :"dataset", "includeColumnNames": true,
"columnTypes":{ "icon" : "media" }} |
The type can have two configuration properties:
1. includeColumnNames , default false, will also send the column names as a separate array to client as the first row
2. columnTypes can specify some column types which will be used for converting the value to send client side, this is needed for non basic columns/types
Dimension representation
Code Block | ||
---|---|---|
| ||
{
width: 100,
height: 20
} |
Format string.
Given an object in the .spec file - to be able to specify which dataprovider and/or valuelist property to map this format property on. The 'for' value can be one property name (pointing to a dataprovider-type property or a valuelist property), but it can also contain an array of 2 properties (one being a dataprovider-type property and the other a valuelist property).
It needs the 'for' clause to be able to deduct the type of the format (format depends on DP type, whether or not the valuelist has real/display values or not, ...). If you put a valuelist property in the "for" and that valuelist property has itself a "for" that points to a dataprovider property (that might be linked to a foundset or not) then you must add that same dataprovider property to the "for" clause of the format property as well.
Code Block | ||||
---|---|---|---|---|
| ||||
myFormatProp : { type: 'format', for: 'myDataProviderProp' } |
Code Block | ||||
---|---|---|---|---|
| ||||
myFormatProp : { type: 'format', for: ["myValuelistProp", "myDataProviderProp"] } |
Format property access from solution scripting will give the string value of the parsed format .Assignment to a 'format' typed property allows you to set a new format string .
Callback function information that can be called on server from client.
A callback function set for this type of property will be represented in the component model as a pair of "formname" and "script" that can be used as parameters for "$window.executeInlineScript" to execute it.
Example:
in the component spec
Code Block |
---|
"model": {
"myFunction" : { "type": "function"}
}, |
in the component js implementation we use that executeInlineScript function that is exposed on the window object
Code Block |
---|
$window.executeInlineScript($scope.model.myFunction.formname,
$scope.model.myFunction.script, [arg1, arg2]); |
Note that the component need to have reference to the "$window" service, and the "formname" and ''script" values are already encrypted in the model, and you need to use those values, and not plain text values for formname and script. Arguments for the callback can be set using the last parameter of "$window.executeInlineScript"
Padding insets representation
Code Block | ||
---|---|---|
| ||
{
paddingTop: 10px,
paddingLeft: 20px,
paddingBottom : 10px,
paddingRight: 10px
} |
String property that can contain %%tags%%, be an i18n key or <html>. It can also be a simple static string.
Will be pre-processed before being provided to web component depending on configuration options below.
Examples:
Code Block | ||
---|---|---|
| ||
Hello %%name%%, welcome to %%i18n:com.mycompany.mykey%% ...
or
i18n:com.mycompany.mykey
or
<html>...some html that can also contain JS callbacks and media...</html>
or
just some static string |
Here is how this type of property can be configured in the component's .spec file:
title | Definition |
---|
Reference to a Record. You can use this type:
- to send a Record identifier to browser/client code from server that can then be sent back to server later using the same type to become/be translated to the initial Record on server.
(starting with Servoy 8.3) to send a client/browser 'foundset' property type's row directly to server (using "record" property type for that); it will be translated to the actual Record on server. E.g.:
Code Block language js $scope.handlers.recordClicked($scope.model .myFoundset.viewPort.rows[idx]);
(starting with Servoy 8.3) to send a client/browser 'foundset' property type's row to server using "foundsetProp.getRecordRefByRowID(id)". E.g:
Code Block language js // if the component uses the rowId internally to identify rows var rowId = $scope.model.myFoundset.viewPort .rows[idx][$foundsetTypeConstants.ROW_ID_COL_KEY]; // (...) // then it can just send a Record ref. to server using that // ID directly without the need to get the actual row $scope.handlers.recordClicked($scope.model.myFoundset .myFoundset.viewPort.rows[idx]);
(starting with Servoy 8.3) to send a client/browser 'foundset' property type's row to server using "foundsetProp.getRecordRefByRowID(id)". E.g:
Code Block language js // if the component uses the rowId internally to identify rows var rowId = $scope.model.myFoundset.viewPort .rows[idx][$foundsetTypeConstants.ROW_ID_COL_KEY]; // (...) // then it can just send a Record ref. to server using that // ID directly without the need to get the actual row $scope.handlers.recordClicked($scope.model.myFoundset .getRecordRefByRowID(rowId));
See also Foundset property type - Combining Foundset Property Type, Foundset Reference Type, Record type and client-to-server scripting calls if you you are curious about how 'record' type can be used in combination with other types to create complex components.
boolean security property, can be used to protect the entire component or specific properties or handlers in the component. For more information about 'protected' property type see this page.
Configuration:
setting | description | example |
---|---|---|
for | list of properties to protect, when not specified the entire component is protected | "for": ["streetname", "updateInfoFunc"] |
blockingOn | when the property is set to this value, protection is active, default: true | "blockingOn": true |
Code Block | ||||
---|---|---|---|---|
| ||||
"enabled" : { "type": "protected", "blockingOn": false, "default": true } |
Point representation
Code Block | ||
---|---|---|
| ||
{
x: 10,
y: 20
} |
String with space separated CSS classnames.Possible values supported by the component can be specified as hint for the developer
Code Block | ||
---|---|---|
| ||
{
type:'styleclass',
values:[
'btn',
'btn-default',
'btn-lg',
'btn-sm',
'btn-xs'
]
} |
In Servoy version below 8.3 if you name the property "styleClass" that has the "styleclass" type also element.addStyleClass and element.removeStyleClass will work and will add or remove style classes from that property. With 8.3 this still works but you can mark any styleclass property type to be the "mainStyleClass" by adding the tag 'mainStyleClass' and set the value to true for this property:
Code Block |
---|
{
"type": "styleclass",
"tags": { "mainStyleClass":true}
} |
getRecordRefByRowID(rowId));
See also Foundset property type - Combining Foundset Property Type, Foundset Reference Type, Record type and client-to-server scripting calls if you you are curious about how 'record' type can be used in combination with other types to create complex components.
boolean security property, can be used to protect the entire component or specific properties or handlers in the component. For more information about 'protected' property type see this page.
Configuration:
setting | description | example |
---|---|---|
for | list of properties to protect, when not specified the entire component is protected | "for": ["streetname", "updateInfoFunc"] |
blockingOn | when the property is set to this value, protection is active, default: true | "blockingOn": true |
blockingChanges | when the property is set to false changes sent for the component properties and handler calls are allowed, default: true | "blockingChanges": false |
Code Block | ||||
---|---|---|---|---|
| ||||
"enabled" : { "type": "protected", "blockingOn": false, "default": true } |
Point representation
Code Block | ||
---|---|---|
| ||
{
x: 10,
y: 20
} |
String with space separated CSS classnames.Possible values supported by the component can be specified as hint for the developer
Code Block | ||
---|---|---|
| ||
{
type:'styleclass',
values:[
'btn',
'btn-default',
'btn-lg',
'btn-sm',
'btn-xs'
]
} |
In Servoy version below 8.3 if you name the property "styleClass" that has the "styleclass" type also element.addStyleClass and element.removeStyleClass will work and will add or remove style classes from that property. With 8.3 this still works but you can mark any styleclass property type to be the "mainStyleClass" by adding the tag 'mainStyleClass' and set the value to true for this property:
Code Block |
---|
{
"type": "styleclass",
"tags": { "mainStyleClass":true}
} |
String property that can contain %%tags%%, be an i18n key or <html>. It can also be a simple static string.
Will be pre-processed before being provided to web component depending on configuration options below.
Examples:
Code Block | ||
---|---|---|
| ||
Hello %%name%%, welcome to %%i18n:com.mycompany.mykey%% ...
or
i18n:com.mycompany.mykey
or
<html>...some html that can also contain JS callbacks and media...</html>
or
just some static string |
Here is how this type of property can be configured in the component's .spec file:
Code Block | ||
---|---|---|
| ||
myTextProperty : { "type" : "tagstring", "displayTagsPropertyName" : "myDisplaysTagsProp", // default is null. // If specified then the property will initially read the // boolean value of the property with given name; If that // property is true, tags (%%x%%) will be replaced, otherwise // they will be ignored (in which case it will just replace i18n // Ifand specifiedhtml); thenif thenull, propertytags will initially read thebe replaced or not based on // boolean value of the property with given name; If that config option "displayTags" "displayTags" : false, // default is true. If displayTagsPropertyName // property is true, tags (%%x%%) non-null it will be replaced, otherwiseignored. Otherwise, only if true this // theyproperty will beparse ignoredtags (in%%x%%) which case it will just"useParsedValueInRhino" replace: i18ntrue, // default is // and html); if null, tags will be replaced or not based on // config option "displayTags"false. Server side // scripting read/modify will work with: if false the parsed "displayTags" : false, // default is true. If displayTagsPropertyName// (with tags/i18n already replaced, so static) value, if true // isthe non-null it will be ignored. Otherwise, only if true thisparsed (value containing %%x%% or i18n:..., which // propertywill willbe parseafter tagsmodify (%%x%%parsed) value "useParsedValueInRhinoforFoundset" : true,"myFoundsetPropertyName" // defaultoptional; isif false.specified Server side // scriptingthen read/modify will work with: if false on the parsedclient instead of // (with tags/i18n already replaced, so static) value, if trueone value you will get an array // the non-parsed (value containing %%x%% or i18n:..., which of values one for each record in the viewport of given // will be after modify parsed) value "forFoundsetfoundset property (see also 'foundset' property type) }, displaysTags : { "type" : "boolean", "scope" : "myFoundsetPropertyNamedesign" } // optional; ifneeded specifiedonly // thenif on"displayTagsPropertyName" theis clientused instead of one value you will get an array // of values one for each record in the viewport of given // foundset property (see also 'foundset' property type) }, displaysTags : { "type" : "boolean", "scope" : "design" } // needed only // if "displayTagsPropertyName" is used as above |
or simply (to use default config values):
Code Block | ||
---|---|---|
| ||
myTextProperty: "tagstring" |
as above |
or simply (to use default config values):
Code Block | ||
---|---|---|
| ||
myTextProperty: "tagstring" |
Starting with 8.4, if 'forFoundset' above is used, then the client-side (in browser) value also provides two methods: addChangeListener / removeChangeListener. So you can add a listener that will receive updates (row insert/delete/change or full viewport update) similar to how the change listener in foundset property type works. Remember to always remove any added change listeners when the component's $scope is destroyed - similar to what is described in the link for the foundset property type listener.
clientfunction
Anchor | ||||
---|---|---|---|---|
|
This property must be used in NG2 if the value of the property represents a javacript function that must be run client side. In NG1 this was mostly just a (tag)string property type, but for ng2 we must know that it is meant to be a client side javascript function.
For NG1 it works the same as a tagstring property type. But for NG2 it is handled differently so the component can get a function directly from the model instead of getting a string and do an eval(string) on it to generate the function. This is because in NG2 it is not allowed to do eval in the browser by default, Content Security Policy doesn't allow that for security reasons.
String property similar to tagstring, but with support to use as default value the title string form a table column. It has a setting key: "for", that contains the dataprovider property from where the table column would be determined.
Configuration:
setting | description | example |
---|---|---|
for | dataprovider property name from where to get the table column's title for default value | "for": "dp" |
Code Block | ||||
---|---|---|---|---|
| ||||
"headerTitle": {"type" : "titlestring", "for": "dp"}, "dp": { "type": "dataprovider", "forFoundset": "myFoundset", "resolveValuelist" : true} |
Reference to a ValueList.
Supported configuration (in .spec file, next to the type of the property)
setting key | description | example |
---|---|---|
lazyLoading | Added in 8.2 : Setting for Global Method Valuelists only (does not affect any other type of valuelist); it helps not load values on initial display (if not needed), but only when they are really needed. "Lazy loading" must be set on the Valuelist - in the Valuelist Editor as well, otherwise it has no effect. Default and bootstrap typeahead components have this configuration set to true (default is false). | "lazyLoading": true |
max | Allows limiting the number of items the valuelist will send to the browser. | "max": 500 |
for | Allows you to provide a dataprovider-type property name (that this valuelist property will use to determine for example the type of the data - this is needed for some types of valuelist like custom valuelist) | "for": "myDPProperty" |
forFoundset | Allows you to specify that this valuelist can contain different values for each record of a foundset property (for example if you have a valuelist based on a relation). That means that client-side/in browser you get an array of valuelist entries for this valuelist property, each item in the array corresponding to the row at the same index in the specified "foundset" typed property's viewport. If the valuelist that was chosen by developer does not have different values for each row, you still get an array but with the same valuelist at all indexes. Starting with 8.4, if 'forFoundset' is used, then the client-side (in browser) value also provides two methods: addChangeListener / removeChangeListener. So you can add a listener that will receive updates (row insert/delete/change or full viewport update) similar to how the change listener in foundset property type works works. Remember to always remove any added change listeners when the component's $scope is destroyed - similar to what is described in the link for the foundset property type listener. @since Servoy 8.3.2 | "forFoundset": "myFoundset" |
Valuelist property access from solution scripting will give the valuelist name. Assignment to a 'valuelist' typed property allows two types of values:
- if you assign a String to it that will be interpreted as a valuelist name - and the valuelist with the given name is put in that property
- if that property already contains a custom valuelist and you assign a Dataset to it then it will alter the items of the custom valuelist for that property of that element only.
For example:
Code Block | ||
---|---|---|
| ||
// will output the name of the valuelist that is currently in "myValuelistProp" application.output(elements.mycomponent.myValuelistProp); // the following code would change the items of a custom valuelist inside one // of the columns of a servoy-extra table component elements.myExtraTable.columns[1].valuelist = databaseManager.convertToDataSet( new Array({ d: 'Item 1', r: 1}, { d: 'Item 2', r: 2}, { d: 'Item 3', r: 3}, { d: 'Item 4', r: 4}, { d: 'Item 5', r: 5}, { d: 'Item 6', r: 6}), ["d", "r"]);["d", "r"]); |
NOTE: From 2022.09 on the valuelist property type at runtime did change a bit. Now it is more a complex object that has currently 2 properties:
name: to get the current name of the valuelist or to set it and then the valuelist of the given name is put in that property
dataset: this will return the dataset of the current values, or set the current values if it was a CustomValueList.
Client side, the valuelist will be an array of objects (items), each item will have two properties: "realValue" and "displayValue". If Valuelist is defined only having display values, realValue client side will be the same as display value:
Code Block | ||
---|---|---|
| ||
$scope.$watch('model.valuelistID', function() { var valuelist = $scope.model.valuelistID; if (!valuelist || valuelist.length == 0) return; hasRealValues = false; for (var i = 0; i < .length; i++) { var item = valuelist[i]; if (item.realValue != item.displayValue) { hasRealValues = true; break; } } }); |
Client side, valuelist also has some API that can be used: filterList and getDisplayValue. Filter list api takes a filter parameter and applies it to valuelist server side, then filtered valuelist will be sent to client (in same property). This is used for typeahead component:
Code Block | ||
---|---|---|
| ||
uib-typeahead="value.displayValue | formatFilter:model.format.display:model.format.type for value in model.valuelistID.filterList($viewValue)" |
Get display value API is used to retrieve a display value taking real value as parameter from server. This is needed in cases where valuelist has many items and we don't send all items client side for performance reasons (see max property, also settings server side).
Code Block | ||
---|---|---|
| ||
$scope.model.valuelistID.getDisplayValue($scope.model.dataProviderID) .then(function(displayValue) { $scope.value = displayValue; }); |
Both functions return a promise that will be resolved when response comes from server, will receive as parameter the new filtered valuelist (beware also valuelist from model will be filtered) respectively the display value.
boolean security property, when set to false the component is protected from client data changes and function calls, data changes from the server are not sent to the client. For more information about 'visible' property type see this page.
setting | description | example |
---|---|---|
for | list of properties to protect, when not specified the entire component is protected | "for": ["streetname", "updateInfoFunc"] |
Starting from Servoy 8.3, 'record' type should be used instead. See 'record' type above.
DEPRECATED: (to be used only in 8.2) Also known as "Record Finder type". Can be used to send a rowId (from a foundset type property's viewport) from browser scripting to server side scripting. The property type will return a 'finder' function. When you call that function with the foundset as an argument it will return the record that corresponds to that rowId from the client. See Foundset property type - Combining Foundset Property Type, Foundset Reference Type, Record type and client-to-server scripting calls for and example of how it can be used.
...