Servoy 2020 Documentation
Child pages
  • Client side logic (.js file)

Versions Compared

Old Version 6

changes.mady.by.user Andrei Costescu

Saved on

compared with

New Version 7

changes.mady.by.user Edit Mera

Saved on

Key

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

...

Info
titleNote about directive/WebComponent received attributes

A WebComponent directive should expect that the attributes it receives (except for svyApi) can completely change.

For example when the record shown by a component changes the svyModel it gets will change by reference. So be careful about caching model contents and accessing some model content only in the link method of the directive for example (which will not be called again when only the displayed record changes).

If you write any repeater components (such as custom portals/table views/list views) you should make sure you don't change the svyApi that you give to the same child WebComponent directive (and which was populated by that directive initially) when the record that it displays changes.

 

ServoyApi

The servoyApi is a Servoy specific api which can be used by web components for interacting with the server. It provides the following methods:

 

Method

Parameters

Description

apply

propertyName –the name of the property of type dataprovider

Pushes a changed dataprovider value of the component to the server.

It is used by the svy-autoapply directive, but it can also be used directly by the webcomponent.

For example the radio button pushes the new value to the server when the radio is clicked:

Code Block
languagejs
titleradio.js
$scope.radioClicked = function()
{
	$scope.model.dataProviderID = $scope.model.valuelistID[0].realValue;
	$scope.svyServoyapi.apply('dataProviderID')
}

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 .

 

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. Usage example tabpanel component when switching tabs:

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

hideForm

formname – the name of the form to hide

relationname –the name of the relation (optional)

formIndex –the formIndex in the tabpanel (optional)

Hides the form.

Used by the tabpanel to hide the previously selected tab.

getFormUrl

formName

Return the URL of a form. Example tabpanel:

Code Block
languagejs
titletabpanel.js
$scope.getForm = function(tab) 
{
  if ($scope.model.selectedTab && tab.containsFormId == $scope.model.selectedTab.containsFormId) 
 {
   return $scope.svyServoyapi.getFormUrl(tab.containsFormId);
 }
  return "";
}

 

 

startEdit

propertyName –the name of the property which is edited

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