Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Method

Parameters

Description

apply

Anchor
apply
apply

propertyName

the name of the property of type dataprovider

Pushes a changed dataprovider value of the component to the server (sets it in the actual record). So this is the only way to acutally make the server's data aware of browser-side changes to 'dataprovider' typed properties.

It is used internally by the svy-autoapply directive, but it can also be called directly by the web component itself.

For example the radio button manually pushes the new value to the server when the radio is clicked (without using svy-autoapply):

Code Block
languagejs
titleradio.js
$scope.radioClicked = function()
{
	$scope.model.dataProvider = 
        $scope.model.valuelistID[0].realValue;
	$scope.svyServoyapi.apply('dataProvider')
}
Info
titleIMPORTANT
In order to be able to change server-side dataprovider values using apply, 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.

callServerSideApi

methodName

the name of the serverside method to call

args

the arguments of the serverside method

Used on the client side to call a function which is defined in the server side api of the component. Since Servoy 8.2, api must be defined in special category of the spec: internalApi

Code Block
languagejs
titlecomponent_server.js
"internalApi":
 {
     "mycallback": {
        "returns": "string",
        "parameters": [
            { "name":"name", "type":"string" },
            { "name":"type", "type":"string" }
        ]
    }
}

It returns a promise of angular where the then function will give you the return value of the callback.

Code Block
languagejs
titlecomponent_server.js
$scope.mycallback = function(name, type) 
{
    return "something";
}

In the controller or link function of the component, "mycallback" can be invoked via

callServerSideApi:

Code Block
languagejs
titlecomponent.js
$scope.servoyApi.callServerSideApi("mycallback",
    ["string", "1"]).then(
        function(retValue) {
            console.log(retValue);   
        }
);
Info
titleIMPORTANT

Beware that callServerSideApi does not send outstanding model changes to server, this should be handled by sending new values as parameters and modifying model server-side.

formWillShow

formname

– the name of the form which will be shown

relationname

– the name of the relation (optional)

formIndex

– the formIndex in the tabpanel (optional)

Prepare the form for showing. Example switching tabs in the tabpanel component:

Code Block
languagejs
titletabpanel.js
function setFormVisible(tab,event) 
{
	if (tab.containsFormId)
      $scope.svyServoyapi.formWillShow(
             tab.containsFormId, tab.relationName);

It returns a $q promise.

hideForm

formname

– the name of the form to hide

relationname

the name of the relation (optional)

formIndex

the formIndex in the tabpanel (optional)

 

formnameThatWillShow

– the name of the form to hide (optional)

relationnameThatWillShow

the name of the relation (optional)

formIndexThatWillShow

the formIndex in the tabpanel (optional)

Hides the form. The outcome of the returned angular promise is a boolean, which is true if the form was hidden.

Used by the tabpanel to hide the previously selected tab.

Code Block
languagejs
titletabpanel.js
$scope.select = function(tab) 
{
    if (tab && tab.containedForm && !tab.active)
    {
		//first hide the previous form
		var promise =  $scope.svyServoyapi.hideForm( 
			$scope.model.tabs[$scope.model.tabIndex -1]);
		promise.then(function(ok) 
		{
			$scope.model.tabIndex = getTabIndex(tab)+1;
			//show the selected form
			$scope.svyServoyapi.formWillShow(			   
            tab.containedForm, tab.relationName);
    	    tab.active = true;
		})    		  
   	}	  
}

use the last 3 arguments to let the server directly know if the form that was give can be hidden then show immediately the other form and push that data . This way you won't notice stale data, because the new forms data is pushed sooner then when you ask in 2 points in time first to hide the current one and then to show the next one. The code would then be something like this:

Code Block
languagejs
$scope.select = function(tab) 
{
    if (tab && tab.containedForm && !tab.active)
    {
		//first hide the previous form
		var promise =  $scope.svyServoyapi.hideForm( 
			$scope.model.tabs[$scope.model.tabIndex -1], 
           null, null,tab.containedForm, tab.relationName);
		promise.then(function(ok) 
		{
			$scope.model.tabIndex = getTabIndex(tab)+1;
			//show the selected form
    	    tab.active = true;
		})    		  
   	}	  
}

getFormUrl

formName

Return the URL of a form. It can be used together with ng-include to include a

form in the component template:

Code Block
languagexml
titlecomponent.html
<div ng-include="svyServoyapi.getFormUrl(myFormName)" ></div>

startEdit

Anchor
startEdit
startEdit

propertyName

the name of the property which is edited

Signal that the editing of a property has started, usually at focus gained.

It is automatically used internally by the svy-autoapply directive.

In case svy-autoapply is not used, startEdit can be called manually by the component itself to notify the server that the record should go into edit mode (by giving the name of the model 'dataprovider' typed property):

Code Block
languagexml
titlecomponent.html
 <input ng-focus="svyServoyApi.startEdit('dataprovider')"/>
getFormComponentElements

propertyName

the name of the property form component property where the template should be get for

templateUUID


the template UUID that the property has as its model value.

This api is used form component that use the "formcomponent" property type for 1 or more of its model properties. The model value should be given and the name of the property itself.

This method returns that a compiled dom elements which can be copied/appended into the right place in the dom of the component.

isInDesigner 

returns true when the component is shown in the designer at runtime this method will return false.

This way a component can show something more, like some sample data (a valuelist component can show a few rows of data so it displays nicely)

...