Custom Embedded JavaScript Functions: Difference between revisions

Jump to navigation Jump to search

Custom Embedded JavaScript Functions (view source)

Revision as of 13:19, 15 September 2022

3,881 bytes added ,  13:19, 15 September 2022
no edit summary
No edit summary
No edit summary
Line 33: Line 33:


* You must always return a string value – this return value will be your “transformation” of the [[Merge Fields and Tags|merge tag]].
* You must always return a string value – this return value will be your “transformation” of the [[Merge Fields and Tags|merge tag]].
* You can access the element that will be inserted into the body of the document via the "element" variable that will be passed to your custom function
* You have access to "element", "documentData" and "contextObject"
<syntaxhighlight lang="javascript">
//Wrapper element which will be inserted in the document at requested index
console.log('element: ', element);
//An object that is populated with all the data loaded from the server
console.log('documentData: ', documentData);
//The contextual record where the Function Expression is placed in
console.log('contextObject: ', contextObject);
</syntaxhighlight>''Note: The "contextObject" is the document's "Core Object" record. If the function expression is embedded in a child repeatable context, then the contextObject becomes the child record.''


== Examples ==
== Examples ==
Line 41: Line 49:
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 Formatting|custom 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 Formatting|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>
=== Embed Charts ===
This example demonstrates how we can embed highcharts into a template. This example uses static data, but you can route with data from the template.<syntaxhighlight lang="javascript" line="1">
//This is the element which will be used as a wrapper
console.log('element: ', element);
//This is the object containing all the data loaded
console.log('documentData: ', documentData);
//This is the current contextual object record
console.log('contextObject: ', contextObject);
var script = document.createElement('script');
script.src = 'https://code.highcharts.com/highcharts.js';
document.head.appendChild(script);
let customId = Math.random().toString(36).slice(2, 7);
let chartWrapper = document.createElement('div');
chartWrapper.id = customId;
element.after(chartWrapper);
script.onload = function () {
    window.addEventListener('documentLoaded', e => {
console.log(document.getElementById(customId));
        Highcharts.chart(customId, {
            title: {
                text: 'U.S Solar Employment Growth by Job Category, 2010-2020'
            },
            subtitle: {
                text: 'Source: <a href="https://irecusa.org/programs/solar-jobs-census/" target="_blank">IREC</a>'
            },
            yAxis: {
                title: {
                    text: 'Number of Employees'
                }
            },
            xAxis: {
                accessibility: {
                    rangeDescription: 'Range: 2010 to 2020'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    pointStart: 2010
                }
            },
            series: [{
                name: 'Installation & Developers',
                data: [43934, 48656, 65165, 81827, 112143, 142383,
                    171533, 165174, 155157, 161454, 154610
                ]
            }, {
                name: 'Manufacturing',
                data: [24916, 37941, 29742, 29851, 32490, 30282,
                    38121, 36885, 33726, 34243, 31050
                ]
            }, {
                name: 'Sales & Distribution',
                data: [11744, 30000, 16005, 19771, 20185, 24377,
                    32147, 30912, 29243, 29213, 25663
                ]
            }, {
                name: 'Operations & Maintenance',
                data: [null, null, null, null, null, null, null,
                    null, 11164, 11218, 10077
                ]
            }, {
                name: 'Other',
                data: [21908, 5548, 8105, 11248, 8989, 11816, 18274,
                    17300, 13053, 11906, 10073
                ]
            }],
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }
        });
    })
};
return '';
</syntaxhighlight>
</syntaxhighlight>


Retrieved from ‘https://3bknowhow.com/wiki/Special:MobileDiff/101’

Navigation menu