| Type | Description |
|---|
| boolean | Boolean value, either true or false |
| border | CSS border string representation |
| byte | A number, 8 bit unsigned |
| color | String color value |
| dataprovider | Reference to a dataprovider, either a record or scope/form variable. Can be a complex definition if it needs to support onDataChange | Code Block |
|---|
| {
"type": "dataprovider",
"pushToServer": "allow", // needed if you want this component
// to be able to change the dataprovider's value on the server
"ondatachange": {
"onchange": "onDataChangeMethodID", // the name of a handler
// defined in spec
"callback": "onDataChangeCallback" // the name of an API func
// defined by the webcomponent that will get called when
// data change is successful on server
}
"forFoundset" : "myFoundsetPropertyName" // optional; if specified
// then on the client 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)
} |
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. | Info |
|---|
| In order to be able to change server-side dataprovider values using apply or svy-autoapply, the .spec file must declare that dataprovider property from the model as pushToServer: allow or higher. Otherwise the server will reject the dataprovider value updates and log a change denied warning. |
Simple example of read-only dataprovider: | Code Block |
|---|
| {
"name": "my-component",
"displayName": ...,
(...)
"model":
{
"myDataProvider" : "dataprovider",
(...)
},
(...)
} |
| Code Block |
|---|
| <span ng-bind-html='model.myDataProvider'/> |
Simple example of read-write dataprovider (with auto-apply): | Code Block |
|---|
| {
"name": "my-component",
"displayName": ...,
(...)
"model":
{
"myDataProvider" : {
"type" : "dataprovider",
"pushToServer" : "allow"
},
(...)
},
(...)
} |
| Code Block |
|---|
| <input (...) ng-model="model.myDataProvider" svy-autoapply /> |
|
| date | Date value |
| dimension | Dimension representation | Code Block |
|---|
| {
width: 100,
height: 20
} |
|
| double | A floating point number |
| float | A floating point number |
| font | CSS font string |
| form | URL string pointing to a form (like tab in tabpanel) |
| format | Format string. Requires to be specified as object to specify which dataprovider/valuelist property to map this format property on. For property can also contain an array of properties (will be applied to first one which is defined). | Code Block |
|---|
| {
for: 'dataProviderID',
type: 'format'
} |
|
| function | 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 | 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" |
| int | An integer number |
| insets | Padding insets representation | Code Block |
|---|
| {
paddingTop: 10px,
paddingLeft: 20px,
paddingBottom : 10px,
paddingRight: 10px
} |
|
| labelfor | Type for labelfor property of the label. |
| long | A number, size is twice an integer |
| media | Reference to a Media entry. Media can be specified in different ways (plain bytes, media url, media id). |
| relation | Reference to a Relation |
| runtimecomponent | The type of component (so that components can be passed as parameters) |
| protected | boolean security property, can be used to protect the entire component or specific properties or handlers in the component. 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 | Point representation | Code Block |
|---|
| {
x: 10,
y: 20
} |
|
| object | Generic type. When using this type, you should pass primitive types or object of primitive types because conversions are not available for more complex types. You use the specific type whenever possible instead of this generic type. This relies on JSON to transfer, so for example Dates should be send as the number value (the times in milis) instead of trying to send the Date as a date object itself. |
| scrollbars | An integer value which represents scrollbar definition. This type is used for designer to display special editor. |
| short | A number, 16 bit |
| string | Plain string property. I18n keys will be resolved by default. |
| styleclass | String with space separated CSS classnames.Possible values supported by the component can be specified as hint for the developer | Code Block |
|---|
| title | Example specifying special classnames supported by the component as hint for the developer |
|---|
| {
type:'styleclass',
values:[
'btn',
'btn-default',
'btn-lg',
'btn-sm',
'btn-xs'
]
} |
|
| tabSeq | Tab sequence integer value. See sablo-tabseq |
| tagstring | String property that can contain %%tags%%, i18n keys 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
// and html); if null, tags will be replaced or not based on
// config option "displayTags"
"displayTags" : false, // default is true. If displayTagsPropertyName
// is non-null it will be ignored. Otherwise, only if true this
// property will parse tags (%%x%%)
"useParsedValueInRhino" : true, // default is false. Server side
// scripting read/modify will work with: if false the parsed
// (with tags/i18n already replaced, so static) value, if true
// the non-parsed (value containing %%x%% or i18n:..., which
// will be after modify parsed) value
"forFoundset" : "myFoundsetPropertyName" // optional; if specified
// then on the client 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" |
|
| valuelist | Reference to a ValueList Configuration | setting | description | example |
|---|
| max | Allows limiting the number of items the valuelist will send to the browser. | "max":500 |
|
| visible | 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 | setting | description | example |
|---|
| for | list of properties to protect, when not specified the entire component is protected | "for": ["streetname", "updateInfoFunc"] |
|