Client Script Libraries

Client script libraries allow you to define collections of custom JavaScript functions that you can use or reuse in your client scripts. Once you bundle functions that you frequently use together in a client script library, you can access those functions in any client script by importing the library.

Create a Client Script Library

1. In FintechOS Studio, go to Main Menu > Advanced > Client Script Libraries.
2. Click Insert. The Add Client Script Library page appears.
   
3. In the Name field, provide a unique name for the library.
4. In the Code field, provide the actual code that will be executed (typically functions definitions). E.g:
   Copy

   function capitalize(word){
       return word.substr(0,1).toUpperCase() + word.substr(1); 
   }

5. For usability purposes and to avoid calling the wrong methods and attributes, when creating script libraries and scripts you can use code snippets. For information on how to use code snippets, see Code Snippets Support for JavaScript.
6. In the Definition field, provide the TypeScript definition of the code you provided in the Code field. For more information on how to write TypeScript declarations, see the TypeScript documentation. E.g:
   Copy

   interface ILibrary{
       capitalize(word: string): string;
   }

7. Click Save and close. The new function is added to the Client Script Library and it will be displayed in the Client Script Libraries List.

Clone a Client Script Library

If you wish to create a variation based on an existing client script library, you can clone the desired library and use it as a starting point for further modifications.

To clone a client script library

1. Open the source library in the editor and press the Clone Library button.

   

2. In the pop-up window that opens, provide a name for the clone.
3. Click Clone to create your new library.

Import Client Script Libraries in your Client Side Code

The use of custom functions defined in client script libraries is available in the following entities and JavaScript attributes:

To use a custom function in a JavaScript field, import the client script library by using the ebs.importClientScript Client SDK functio in the following format: ebs.importClientScript("");

Place the cursor between the two quotation marks (“|”) and press CTRL+SPACE. You will be suggested the available client script libraries.

Choose the client script library that defines the custom function that you want to use. E.g:

var myLib = ebs.importClientScript("myLibrary");

For usability purposes and to avoid calling the wrong methods and attributes, when creating script libraries and scripts, you can use the ‘$m’ mechanism as follows:

• To transform text in an entity_name string, type $m.entity_name and then press the TAB key.
• To transform text in in an attribute_name string, type $m.entity_name.attribute_name and then press the TAB key.
• To transform text in a relationship_name string, type $m.entity_name.relationship_name and then press the TAB key.

Once imported, you can access the library functions as methods of the library object. E.g.:

console.log(myLib.capitalize("aWord"));

The TypeScript definitions of a client script library describe their functions. Therefore, the IntelliSense assistant will suggest the function name after you type the variable name.

If you’re using Chrome, open the client application where the code will run and by using the Developer tools > Console, check that the custom function returns the expected result.

Example: Print the word “AWord”.

Code execution

When retrieved, the code is transformed using the module pattern:

INPUT

Copy

var c1 = 1;
 
function A()
{
    return c1;
}
 
var c2 = 2;
function B()
{
    var y = function C()
            {
            };
    return c2;
}        

 

OUTPUT

Copy

//# sourceURL=clientScriptLib_myScript.js;
 
(function(){
 
    var $export = {};
        var c1 = 1;
         $export.A = function ()
        {
            return c1;
        };
         var c2 = 2;
         $export.B = function ()
        {
            var y = function C()
                {
                };
            return c2;
        };
     return $export;
}());
        

 

If the module pattern is detected in the INPUT, then no transformation occurs.