Welcome to Paradise

Javascript

Paradise lets you add JavaScript code to customize the behavior of your application, and provides a set of API's to interact with components of the platform.

Pressing the next button opens a code editor where you can add your functions:

But how to link the controls to the functions you define here?

There are several ways. One is to use an action of a Button control to call a function. The following image shows a button that has an action that call a JavaScript method. The syntax in the Action Value is the name of the function (Add in this case) and the parameters to send between parentheses. The string that are in inside the brackets are replaced with the value of a control whose ID matches that text. In this example, we will send the value of Text1 and Text2 controls. These controls must be in the current screen.

Another option is to handle events directly from Javascript.

 
$(document).ready(function() {
   $('#ScreenId').on('pageloadcomplete', function() {
      $(this).find('#Button1').click(function() {
         var text1 = $(this).find('#Text1').val();
         var text2 = $(this).find('#Text2').val();
         alert(parseInt(text1, 10) + parseInt(text2, 10));
      });
   });
});
 

This would achieve the same result as with the Action Button in the first example.

Because in Paradise screens are recreated each time a transition is made, the events of the controls should be handled on the 'pageloadcomplete' event of the screen div.

In turn Paradise provides the following functions to interact with the platform:

pageloadcomplete

It is called on the screen div every time a screen finishes loading and executing all datasources.

Example:

 
$(document).ready(function() {
   $('#Screen1').on('pageloadcomplete', function() {
      alert('Screen1 loaded');
   });
   $('#Screen2').on('pageloadcomplete', function() {
      alert('Screen2 loaded');
   });
});
 

DataSourceExecuted

It is called on the screen div every time a datasource runs. It takes as argument an object with properties "result" with the json returned by the datasource and "DataSourceID" with the id of the executed.

Example:

 
$(document).ready(function() {
   $('#Screen1').on('DataSourceExecuted', function(e, args) {
      if(args.dataSourceId == 'DataSource1') {
         alert('DataSource1 executed!');
         $(this).find('#Text1').val(args.result[0]['field1'])
      }
   });
});
 

ExecuteDataSourceById

This function allows you to execute a Data Source in the current screen. The parameters are obtained from the bound controls on the mapping of the Data Source. If a control is bound to the result of the Data Source, this will be reloaded.

Example:

 
$(document).ready(function() {
   $('#ScreenId').on('pageloadcomplete', function() {
      $(this).find('#Button1').click(function() {
         ExecuteDataSourceById('DataSource1');
      });
   });
});
 

GetControlValueFromLocalStore

Allows to retrieve the value of a control of a previous screen.

Example:

 
$(document).ready(function() {
   $('#Screen2').on('pageloadcomplete', function() {
      $(this).find('#Button1').click(function() {
         alert(GetControlValueFromLocalStore('Screen1', 'Text1'));
      });
   });
});
 

showLoading

Locks the screen and displays the image of "loading". Each time you call this method you should call hideLoading" later.

hideLoading

Unlock the screen and hides the "loading" image.

Paradise is built on Jquery Mobile, so you can also use objects and functions of that platform, for example, to transition to another screen you can use:

 
$.mobile.changePage('#Screen2');
 

Community

Made With