509
edits
Custom Embedded JavaScript Functions: Difference between revisions
Custom Embedded JavaScript Functions (view source)
Revision as of 07:03, 3 September 2022
, 07:03, 3 September 2022no edit summary
(Created page with "== Intro == 3B Docs allows you to write JavaScript code snippets that can be embedded on a document to extend existing functionality and/or create new functionality. == Usage == Most often, a Function Expression will be used to return strings like timestamps, user identifiable information (such as IP address, location, etc) and for locale, timezone and language reasons. Here are some other examples: * To obtain a photo of the currently viewing user using their integra...") |
No edit summary |
||
| Line 17: | Line 17: | ||
To use the function expression in your template, navigate to the “Functions” icon within the Template builder. | To use the function expression in your template, navigate to the “Functions” icon within the Template builder. | ||
You will see a drop-down of all the available Function Expressions that you can use within the | You will see a drop-down of all the available [[Custom Embedded JavaScript Functions|Function Expressions]] that you can use within the Template. | ||
When you select a specific Function Expression, it will be copied to your clipboard and you can simply paste it anywhere inside the | When you select a specific Function Expression, it will be copied to your clipboard and you can simply paste it anywhere inside the Template document via CTRL + V / CMD + V (on Mac) command. | ||
When you paste a function expression, it will look something like this: #{Functions.CurrentDate} | When you paste a function expression, it will look something like this: #{Functions.CurrentDate} | ||
Function | [[Custom Embedded JavaScript Functions|Function Expressions]] are treated just like [[Merge Fields and Tags|merge fields]], so you will have access to the [[Custom Value Formatting|custom value formatters]] that may be available to modify the value returned by the Function Expression. So, the following Function Expression is completely valid: <code>#{Functions.CurrentDate> EU_Date_Format}</code> | ||
== Syntax == | == Syntax == | ||
Just like | Just like custom value formatters, when you create a Function Expression, you are basically creating a JavaScript function. This JavaScript function has access to the global context and thus to the user’s navigator object, the application variables & collections and much more. | ||
The difference between | The difference between custom value formatters and Function Expressions lies in the fact that custom value formatters can only be applied to a specific [[Merge Fields and Tags|merge tag]], whereas [[Custom Embedded JavaScript Functions|Function Expressions]] form their own independent merge tags. | ||
You must always return a string value – this return value will be your “transformation” of the merge tag. | You must always return a string value – this return value will be your “transformation” of the merge tag. | ||
== Examples == | == Examples == | ||
Here are some examples to get you started with the basic syntax used by 3B Docs for | Here are some examples to get you started with the basic syntax used by 3B Docs for Function Expressions: | ||
=== Return Current Date === | === Return Current Date === | ||
This example is useful for getting a dynamically generated timestamp of the current date relative to when the document is opened in dd/mm/yyyy format (don’t worry, you can still apply value formatters and transform the date to a US date!)<syntaxhighlight lang="javascript" line="1"> | This example is useful for getting a dynamically generated timestamp of the current date relative to when the document is opened in dd/mm/yyyy format (don’t worry, you can still apply custom value formatters and transform the date to a US date!)<syntaxhighlight lang="javascript" line="1"> | ||
() => new Date().toLocaleDateString(‘en-GB’); | () => new Date().toLocaleDateString(‘en-GB’); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Line 50: | Line 50: | ||
=== API Callouts === | === API Callouts === | ||
You can use Function Expressions to do callouts, fetch data externally, load additional resources, use JavaScript Libraries such as FullCalendar | You can use Function Expressions to do callouts, fetch data externally, load additional resources, use JavaScript Libraries such as [https://fullcalendar.io/ FullCalendar], [https://www.chartjs.org/ Chart.js], [https://datatables.net/ Datatables] and many more.. | ||
Here is a sample of how to initialize FullCalendar (you may need extra code in order to import JS and CSS):<syntaxhighlight lang="javascript" line="1"> | |||
document.addEventListener('DOMContentLoaded', function() { | |||
var calendarEl = document.getElementById('calendar'); | |||
var calendar = new FullCalendar.Calendar(calendarEl, { | |||
initialView: 'dayGridMonth' | |||
}); | |||
calendar.render(); | |||
}); | |||
</syntaxhighlight> | |||
=== User Logging, Tracking and Fingerprinting === | === User Logging, Tracking and Fingerprinting === | ||
You can use such technologies as | You can use such technologies as [https://fingerprint.com/ Fingerprint] to user tracking capabilities to your documents | ||
[[Category:3B Docs Features]] | [[Category:3B Docs Features]] | ||