Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
protogrid:script_library [2017-11-30 10:55] – 46.140.51.3 | protogrid:script_library [2022-05-16 15:35] (current) – [Execute JS on field change] dru | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== | + | ====== |
Protogrid can be extended arbitrarily using [[https:// | Protogrid can be extended arbitrarily using [[https:// | ||
- | === Server-side Script Library | + | ===== Server |
- | Server-side libraries | + | Server |
- | == on_render == | + | ==== on_render |
- | on_render gets called when opening a new Card. This function can be used for example to [[protogrid: | + | on_render gets called when opening a new Card. This function can be used for example to [[protogrid: |
<code javascript> | <code javascript> | ||
function on_render(card, | function on_render(card, | ||
Line 13: | Line 13: | ||
} | } | ||
</ | </ | ||
- | ==on_save== | + | ====on_save==== |
The on_save function can for example be used to do some computations or assertions before saving. The function has access to the card, the predicate " | The on_save function can for example be used to do some computations or assertions before saving. The function has access to the card, the predicate " | ||
<code javascript> | <code javascript> | ||
Line 21: | Line 21: | ||
</ | </ | ||
- | == get_shortname == | + | ==== get_shortname |
- | This function is supposed to return a string that defines a Card' | + | This function is supposed to return a string that defines a Card' |
<code javascript> | <code javascript> | ||
function get_shortname(card) { | function get_shortname(card) { | ||
Line 30: | Line 30: | ||
</ | </ | ||
- | == get_title == | + | ==== get_title |
This function should return a string that defines a Card's title. Titles are being used exclusively in the Card's title row when it is opened. By default, the Card's title is defined by its shortname if you don't override it using this function. You have access to the card and the predicate " | This function should return a string that defines a Card's title. Titles are being used exclusively in the Card's title row when it is opened. By default, the Card's title is defined by its shortname if you don't override it using this function. You have access to the card and the predicate " | ||
<code javascript> | <code javascript> | ||
Line 39: | Line 39: | ||
</ | </ | ||
- | === Client-side Script Library | + | ===== Client |
The client-side script library contains all the code happening locally on the clients machine. This contains all the code executed when [[protogrid: | The client-side script library contains all the code happening locally on the clients machine. This contains all the code executed when [[protogrid: | ||
- | === Execute JS on card load === | + | 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 ==== | ||
To execute some JavaScript code at the time, a card is loaded, there are two options. | To execute some JavaScript code at the time, a card is loaded, there are two options. | ||
- | If you want to execute this code only for one proto, you add the code inside a client-side Java Script library | + | If you want to execute this code only for one proto, you add the code inside a Client ScriptLibrary |
<code javascript> | <code javascript> | ||
on_load(); | on_load(); | ||
function on_load() { | function on_load() { | ||
- | //do something useful | + | |
+ | | ||
} | } | ||
</ | </ | ||
- | If you want the code to be executed on load of every card, write your Code into a separate JavaScript-File and load it into the attachments section on the " | + | If you want the code to be executed on load of every card, write your code into a separate JavaScript |
+ | |||
+ | ==== Execute JS on field change ==== | ||
+ | |||
+ | To execute some JavaScript when a field value changes, you need to add the following code-snippet to a client-side Script library, which is linked to the Proto with some Trigger. The variable " | ||
+ | |||
+ | <code javascript> | ||
+ | function my_function(){ | ||
+ | //do something here | ||
+ | } | ||
+ | |||
+ | function document_ready_trigger() { | ||
+ | $("#" | ||
+ | my_function(); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | $(document).ready(function () { | ||
+ | document_ready_trigger(); | ||
+ | }); | ||
+ | </ | ||
+ | |||
+ | The function document_ready_trigger tells your card that you want something to happen when a value changes. The call " | ||
+ | |||
+ | ==== 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, | ||
+ | modifications_on_current_card(); | ||
+ | </ | ||
+ | ==== Manipulate Contet of Rich Text Field ==== | ||
+ | |||
+ | <code javascript> | ||
+ | var rich_text_editor = $("#" | ||
+ | |||
+ | var content = rich_text_editor.getDocument().toString(); | ||
+ | var current_range = rich_text_editor.getSelectedRange(); | ||
+ | |||
+ | rich_text_editor.setSelectedRange([0, | ||
+ | rich_text_editor.setSelectedRange([0, | ||
+ | rich_text_editor.insertString(" | ||
+ | rich_text_editor.insertHTML("< | ||
+ | rich_text_editor.insertLineBreak(); | ||
+ | rich_text_editor.deleteInDirection(" | ||
+ | rich_text_editor.activateAttribute(" | ||
+ | rich_text_editor.deactivateAttribute(" | ||
+ | </ | ||
+ | |||
+ | Please see https:// |