Page History
...
svy-autoapply
Is the main way of 'pushing' dataprovider updates (for 'dataprovider' typed properties defined in the web component's model) from browser to server (to the record or global/form var ...). It requires angular's 'ng-model' directive (value being the model dataprovider property) to be used on the same input element. It's purpose is to listen for any change (html 'change' event) from the input element to which it is applied as attribute and to send the new value to the server record/dataprovider after setting it in the web component's model as well (client-side). It also monitors focus and triggers startEditing on the server when the input receives focus. Behind the scenes it uses servoyApi provided to the web component by Servoy in svyServoyapi. See also apply and startEdit. Anchor autoApply autoApply
Info | ||
---|---|---|
| ||
In orderfor order for svy-autoapply to work properly, 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. |
...
For example:
Code Block | ||
---|---|---|
| ||
<my-component name="mySpecialTextfield" svy-model="model.myDataproviderProperty" svy-autoapply (...)/> |
svy-decimal-key-converter is a directive that can be used in (text) input fields to convert the numeric pad decimal key to the character the locale of the user defines. So for a US (international) keyboard that displays a . on the key will input a , for the dutch locale (the decimal delimiter is a , in the dutch locale). This is used by the default servoy textfield.
...
Code Block |
---|
svy-click='handlers.onActionMethodID($event)' |
Info | ||
---|---|---|
| ||
Note that all svy-* handlers will be executed asynchronous because of Servoy order of events. This may affect some operations inside handler (for example $event.preventDefault() may not work) |
svy-dblclick (Design, domevent:'dblclick') this directive triggers the given function when a double click happens, It does supply an $event parameter.
...
Code Block |
---|
svy-mnemonic='model.mnemonic' |
svy-attributes (Design | object) - sets provided attributes on the html element being applied to - added in 2020.09
Code Block |
---|
svy-attributes='model.attributes' |
sablo-tabseq(Runtime | tabseq) - a nice way to control client side tabIndexes. See sablo-tabseq page for more info.
...
Code Block |
---|
ng-bind='model.myStringProperty | formatFilter:model.formatProp' |
Services
$svyI18NService:
A component or service can ask for the $svyI18NService to get translated messages for 1 or a set of keys, it returns a promise object where the result object in the then() will be the key:value pairs of the keys that where asked for:
Code Block | ||||
---|---|---|---|---|
| ||||
var x = $svyI18NService.getI18NMessages("servoy.filechooser.button.upload","servoy.filechooser.upload.addMoreFiles","servoy.filechooser.selected.files","servoy.filechooser.nothing.selected","servoy.filechooser.button.remove","servoy.filechooser.label.name","servoy.button.cancel") x.then(function(result) { $scope.i18n_upload = result["servoy.filechooser.button.upload"]; $scope.i18n_chooseFiles = result["servoy.filechooser.upload.addMoreFiles"]; $scope.i18n_cancel = result["servoy.button.cancel"]; $scope.i18n_selectedFiles = result["servoy.filechooser.selected.files"]; $scope.i18n_nothingSelected = result["servoy.filechooser.nothing.selected"]; $scope.i18n_remove = result["servoy.filechooser.button.remove"]; $scope.i18n_name = result["servoy.filechooser.label.name"]; }) |
...
$svyProperties:
Used for setting some ui properties to a component: border, alignment, scrollbars, tooltips..
Code Block | ||||
---|---|---|---|---|
| ||||
Object.defineProperty($scope.model,$sabloConstants.modelChangeNotifier, {configurable:true,value:function(property,value) {
switch(property) {
case "borderType":
$svyProperties.setBorder($element,value);
break;
case "background":
case "transparent":
$svyProperties.setCssProperty($element,"backgroundColor",$scope.model.transparent?"transparent":$scope.model.background);
break;
case "foreground":
$svyProperties.setCssProperty($element,"color",value);
break;
case "fontType":
$svyProperties.setCssProperty($element,"font",value);
break;
case "format":
if (formatState)
formatState(value);
else formatState = $formatterUtils.createFormatState($element, $scope, ngModel,true,value);
break;
case "horizontalAlignment":
$svyProperties.setHorizontalAlignment($element,value);
break;
case "enabled":
if (value) $element.removeAttr("disabled");
else $element.attr("disabled","disabled");
break;
case "editable":
if (value) $element.removeAttr("readonly");
else $element.attr("readonly","readonly");
break;
case "placeholderText":
if(value) $element.attr("placeholder",value)
else $element.removeAttr("placeholder");
break;
case "margin":
if (value) $element.css(value);
break;
case "selectOnEnter":
if (value) $svyProperties.addSelectOnEnter($element);
break;
case "styleClass":
if (className) $element.removeClass(className);
className = value;
if(className) $element.addClass(className);
break;
}
}});
$svyProperties.createTooltipState($element, function() { return $scope.model.toolTipText }); |
Info |
---|
Default tooltip comes styled using bootstrap css, thus having a max-width of 200 pixels (for text wrapping). You can override this css property from your solution using the tooltip element id: 'mktipmsg' |
$apifunctions:
Some standard re-usable API
Code Block | ||||
---|---|---|---|---|
| ||||
$scope.api.getSelectedText = $apifunctions.getSelectedText($element[0]);
$scope.api.setSelection = $apifunctions.setSelection($element[0]);
$scope.api.replaceSelectedText = $apifunctions.replaceSelectedText($element[0]);
$scope.api.selectAll = $apifunctions.selectAll($element[0]);
$scope.api.getWidth = $apifunctions.getWidth($element[0]);
$scope.api.getHeight = $apifunctions.getHeight($element[0]);
$scope.api.getLocationX = $apifunctions.getX($element[0]);
$scope.api.getLocationY = $apifunctions.getY($element[0]); |
$svyUIProperties:
Get/Set global (application) UI Property
Code Block | ||||
---|---|---|---|---|
| ||||
var initialDelay = $svyUIProperties.getUIProperty("tooltipInitialDelay"); |
$formatterUtils:
Apply format to a certain ui element
Code Block | ||||
---|---|---|---|---|
| ||||
var formatState = null;
var child = $element.children();
var ngModel = child.controller("ngModel");
if($scope.model.inputType == "text") {
$scope.$watch('model.format', function(){
if ($scope.model.format)
{
if (formatState)
formatState(value);
else formatState = $formatterUtils.createFormatState(child, $scope, ngModel,true,$scope.model.format);
}
})
} |
Model values
Servoy provides a unique css id called svyMarkupId in the model object which can be used by the component to set its main css id to a page unique value.