Page History
...
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-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"]; }) |
...
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]); |
...
Code Block | ||||
---|---|---|---|---|
| ||||
var initialDelay = $svyUIProperties.getUIProperty("tooltipInitialDelay"); |
...
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.