JavaScript field: Difference between revisions

m
no edit summary
mNo edit summary
mNo edit summary
(13 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{Stamp|2016-12-03|4.1.0|1.0.7}}
{{Stamp|2018-04-09|4.4.5|1.3.5}}


The value of the field will be the result of execution of the script defined in the field and executed in the entry context.
The value of the field will be the result of execution of the script defined in the field and executed in the entry context.
Line 10: Line 10:
i + 1          //  but instead, this is the final statement, so the result will be 3
i + 1          //  but instead, this is the final statement, so the result will be 3
</source>
</source>
{{FieldNameHint}}
== Script ==
; Script itself
: JavaScript script. The context of the script is the [[Triggers#Object Entry|'''Entry object''']]. The value returned is the last value assigned or expressed.
; JavaScript Libraries
: Choose additional JavaScript Libraries to be loaded. At this time, only moment.min.js is available.
; Execute script in real time:
:; No (default)
:: Script will run only upon edit. Performance will be enhanced.
:; Yes
:: Script will run upon edit or display.
== Display Options ==
{{FieldRoleRNDS}}
{{FieldOnCard}}
{{FieldFont}}
{{FieldDepend}}


== Fields of an entry ==
== Fields of an entry ==
Line 16: Line 42:


Compatibility of Memento field types and JavaScript objects is shown in the table:
Compatibility of Memento field types and JavaScript objects is shown in the table:
{| class="wikitable" style="font-size:120%"
{{FieldTypeReturnValues}}
|-
! Field type !! JavaScript object
|-
| Text , Hyperlink, Password, Phone, Email, Calculation (string result) , Single-choice list , Radio buttons || [https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String '''String''']
|-
| Integer, Real number, Rating, Currency, Calculation (number result) || [https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number '''Number''']
|-
| Date , Date/Time, Time || [https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Date '''Date''']
|-
| Checkbox (Boolean) || [https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean '''Boolean''']
|-
| Multiple-choice list, Checkboxes || [https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array '''Array'''] of [https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String '''String''']
|-
| Link to entry || [https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array '''Array'''] of [[Triggers#Object Entry|'''Entry''']]<br/>Each array element has a method ''field()'' for access to values of fields of entries of the linked library.<br/>Example: field("linkField")[i].field("remoteField")
|}


== Time of script execution ==
== Time of script execution ==
Line 68: Line 79:


== Examples ==
== Examples ==
==== Example: Sum ====
==== Example: Product ====
Entries contain fields: Price, Count.
The library contains the fields Price and Count.
We add a JavaScript field "Sum" by using the following script:
The JavaScript field '''Total price''' can be computed as follows:
<source lang="javascript">
<source lang="javascript">
field('Price')*field('Count')
field('Price')*field('Count');
</source>
</source>


==== Example: Percentage ====
==== Example: Percentage ====
Entries contain fields: Count, Total.
The library contains the fields Count and Total.
We add a JavaScript field "Percentage" by using the following script:
The JavaScript field '''Percentage''' can be computed as follows:
<source lang="javascript">
<source lang="javascript">
var total = field('Total')
var total = field('Total');
if (total > 0)
if (total > 0)
   field('Count')*100/total + ' %'
   field('Count')*100/total + ' %';
else
else
   'none'
   'None';
</source>
</source>


==== Example: Days ====
==== Example: Days ====
Entries contain fields: StartDateTime, EndDateTime.
The library contains DateTime (or Time) fields Start and End.
We add a calculating field "Days" by using the following script:
The JavaScript field '''Days''' can be computed as follows:
<source lang="javascript">
<source lang="javascript">
moment(field('End')).diff(field('Start') , 'days')
moment(field('End')).diff(field('Start') , 'days');
</source>
 
==== Example: References ====
There’s library Order – with orders and library Item – with items. Library Order contains a link to library Item. Library Item contains field Price.
To calculate the cost of the order, let’s add script field Sum using the following script:
<source lang="javascript">
var sum = 0
var items = field('Item')
for(var i in items) {
  sum = sum + items[i].field('Price')
}
</source>
</source>


Line 109: Line 109:
var years = moment().diff(field('Birthday') , 'years' )
var years = moment().diff(field('Birthday') , 'years' )
if (years < 18)
if (years < 18)
   'Youth'
   'Youth';
else
else
   'Adult'
   'Adult';
</source>
</source>


Line 179: Line 179:
</source>
</source>


== References ==
==== Example: Order containing items ====
You can find a full description of the language [https://developer.mozilla.org/docs/Web/JavaScript '''here'''].
The library Orders contains orders and the library Items contains items. Orders contains a link Items to library Items. Items contains the fields Quantity and Price.
The implementation is based on the [https://www.mozilla.org/rhino/ '''Rhino library'''].
To calculate the cost of the order, the JavaScript field '''Cost''' can be computed as follows:
<source lang="javascript">
var items = field('Items');        // CHANGE Items to your link field name
var cost = 0;
for (var i in items)
    cost += items[i].field('Quantity') * items[i].field('Price');


{{FieldNameHint}}
cost;                              // The result is the COMPUTED COST
</source>


== Script ==
==== Example: Controlling entry color ====
The color of an entry in the Entries List screen can be controlled using a JavaScript field. The JavaScript field merely returns a color string in the form "#RRGGBB", where RR is the hexadecimal (hex) value of the red component of the color, GG the hex value for the green component, and BB the hex value of the blue component. The user must identify the JavaScript field by editing the library and selecting the field for the Entry color parameter on the MAIN tab.


; Script itself
You could have many entries with distinct colors indicating things like regions, categories, ranges, etc.
: JavaScript script. The context of the script is the [[Triggers#Object Entry|'''Entry object''']]. The value returned is the last value assigned or expressed.


; JavaScript Libraries
For example, suppose you have an numeric field and want to color entries red if the field is negative and green if it is positive. Here's how you would do it...
: Choose additional JavaScript Libraries to be loaded. At this time, only moment.min.js is available.


; Execute script in real time:
Create a JavaScript field, called anything, say "Color of entry". Maybe you have a Currency field called "Amount". You can set the script to be something like...
:; No (default)
:: Script will run only upon edit. Performance will be enhanced.
:; Yes
:: Script will run upon edit or display.


== Display Options ==
<source lang="JavaScript">
var amount = field("Amount");
if (amount < 0) "#FF0000";      // Red
else if (amount > 0) "#00FF00"; // Green
</source>


{{FieldRoleRNDS}}
Now, go to the MAIN tab of the Library Edit screen. Tap Entry color and select your new JavaScript field, Color of entry.


{{FieldOnCard}}
So, if your Amount field is negative, it will show in the entries list with a red bar on the left.
If it is positive, it'll show with a green bar on the left.
Otherwise it's zero, in which case it will have no bar on the left (barcolor dictated by the theme you're using -- white if you're using the light theme and black if using the dark theme).


{{FieldFont}}
== References ==
 
You can find a full description of the language [https://developer.mozilla.org/docs/Web/JavaScript '''here'''].
{{FieldDepend}}
The implementation is based on the [https://www.mozilla.org/rhino/ '''Rhino library'''].


== JavaScript links ==
== JavaScript links ==
{{Template:JavaScriptLinks}}
{{Template:JavaScriptLinks}}


[Category:Spec]
[[Category:en]] [[Category:Spec]]