Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
protogrid:script_library [2021-12-21 22:48] – [Execute JS on card load] druprotogrid:script_library [2022-05-16 15:35] (current) – [Execute JS on field change] dru
Line 3: Line 3:
 Protogrid can be extended arbitrarily using [[https://www.w3schools.com/js/|Java script]] libraries. The libraries are located at the "Code"-Tab in the Design-Tab. We differentiate two types of script libraries: server-side and client-side. The can be several libraries per type. On creation of the libraries, they already contain some code and some explanations to fast understand what to do. Protogrid can be extended arbitrarily using [[https://www.w3schools.com/js/|Java script]] libraries. The libraries are located at the "Code"-Tab in the Design-Tab. We differentiate two types of script libraries: server-side and client-side. The can be several libraries per type. On creation of the libraries, they already contain some code and some explanations to fast understand what to do.
  
-===== Server-ScriptLibrary =====+===== Server ScriptLibrary =====
  
-Server-ScriptLibraries contain code happening at the server before sending the data to the client. Every [[protogrid:proto|Proto]] can have a server side library attached. Whenever something is done with a [[protogrid:card|Card]] of this Proto on the server, the Server takes the assigned library into account. The server side libraries contain mainly the following functions: on_render, on_save, get_shortname, get_title. +Server ScriptLibraries contain code happening at the server before sending the data to the client. Every [[protogrid:proto|Proto]] can have a server side library attached. Whenever something is done with a [[protogrid:card|Card]] of this Proto on the server, the Server takes the assigned library into account. The server side libraries contain mainly the following functions: on_render, on_save, get_shortname, get_title. 
 ==== on_render ==== ==== on_render ====
 on_render gets called when opening a new Card. This function can be used for example to [[protogrid:hide_field| hide fields]] of the Card. Inside the on_render function, one has access to the card which is opening as well as to a predicate called "before_first_save" telling you whether the Card was already saved before or not (if not, it is a newly created Card).  on_render gets called when opening a new Card. This function can be used for example to [[protogrid:hide_field| hide fields]] of the Card. Inside the on_render function, one has access to the card which is opening as well as to a predicate called "before_first_save" telling you whether the Card was already saved before or not (if not, it is a newly created Card). 
Line 42: Line 42:
 The client-side script library contains all the code happening locally on the clients machine. This contains all the code executed when [[protogrid:trigger|triggered]] by a client action, especially the code that should be executed at [[protogrid:button|button]] clicks. The client-side script library contains all the code happening locally on the clients machine. This contains all the code executed when [[protogrid:trigger|triggered]] by a client action, especially the code that should be executed at [[protogrid:button|button]] clicks.
  
-Please note that all your code should reside within a enclosing function in order to limit its scope and avoid naming conflicts. Protogrid supports you in this by automatically providing such an enclosing function in the default Client ScriptLibrary and replacing the identifier of this enclosing function with the name of the Client ScriptLibrary before loading it into the browser. However, you are free to set your own static identifier for this function.+Please note that all your code should reside within a enclosing function in order to limit its scope and avoid naming conflicts. Protogrid supports you in this by automatically providing such an enclosing function in the default Client ScriptLibrary and dynamically replacing the identifier of this enclosing function with the name of the Client ScriptLibrary before loading it into the browser. However, you are free to set your own static unique identifier for this function.
  
 ==== Execute JS on card load ==== ==== Execute JS on card load ====
Line 82: Line 82:
 The function document_ready_trigger tells your card that you want something to happen when a value changes. The call "$(document).ready(...)" itself calls the function "document_ready_trigger" as soon as the card is fully loaded. The function document_ready_trigger tells your card that you want something to happen when a value changes. The call "$(document).ready(...)" itself calls the function "document_ready_trigger" as soon as the card is fully loaded.
  
 +==== Activate Save Buttons ====
 +After a manipulation of Fields on a Card you might want to activate the save buttons in order to let the user save the modified Card. Just call modifications_on_current_card() after setting a field value:
 +<code javascript>
 +var csl_helpers = mod_csl_helpers();
 +csl_helpers.set_value(csl_keys.field_key_sample_field, "just a test");
 +modifications_on_current_card();
 +</code>
 ==== Manipulate Contet of Rich Text Field ==== ==== Manipulate Contet of Rich Text Field ====
  

Trace:

Print/export