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]); |
$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.
Overview
Content Tools
Activity