3B Knowledge

Custom Embedded JavaScript Functions: Difference between revisions

Custom Embedded JavaScript Functions (view source)

Revision as of 07:40, 7 June 2023

1,549 bytes removed ,  07:40, 7 June 2023
no edit summary
No edit summary
No edit summary
 
Line 35: Line 35:
* You have access to "element", "documentData", "contextObject" and the function "callout"
* You have access to "element", "documentData", "contextObject" and the function "callout"
<syntaxhighlight lang="javascript" line="1">
<syntaxhighlight lang="javascript" line="1">
//Wrapper element which will be inserted in the document at requested index
async (args) => {
console.log('element: ', element);
    //Wrapper element which will be inserted in the document at requested index
//An object that is populated with all the data loaded from the server
    let element = args[0];
console.log('documentData: ', documentData);
    //An object that is populated with all the data loaded from the server
//The contextual record where the Function Expression is placed in
    let documentData = args[1];
console.log('contextObject: ', contextObject);
    //The contextual record where the Function Expression is placed in
    let contextObject = args[2];
    //Server communication class
    let callout = args[3];


//A router that lets you call an apex class
    //Always return a string that will be inserted in the document
callout({
     return '';
    endp: 'classMethodName'
}
},'ApexClassName').then(response => {
     console.log('callout response from function expression: ');
    console.log(response);
}).catch(err => {
    console.error('error response from function expression: ');
    console.error(err);
})
</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.''
</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.''


Line 111: Line 107:
=== Javascript ===
=== Javascript ===
Now that you have the APEX class created successfully, you are ready to call it from within a function expression. Here is an example of how to call our sample class<syntaxhighlight lang="javascript">
Now that you have the APEX class created successfully, you are ready to call it from within a function expression. Here is an example of how to call our sample class<syntaxhighlight lang="javascript">
callout({
const response = await callout({
     endp: 'classMethodName'
     endp: "classMethodName",
},
    ...// additional parameters
'ApexClassName').then(response => {
  },
    console.log(response);
  false,//Use REST or AJAX
}).catch(err => {
  "ApexClassName"
    console.error(err);
);
})
 


</syntaxhighlight>
</syntaxhighlight>
Line 139: Line 135:
=== Embed Charts ===
=== 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" start="1">
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" start="1">
console.log('element: ', element);
async (args) => {
console.log('documentData: ', documentData);
    let element = args[0];
console.log('contextObject: ', contextObject);
    let documentData = args[1];
    let contextObject = args[2];
    let callout = args[3];


const reportData = {};
    const reportData = await callout({
await callout({
        endp: 'getReportData'
    endp: 'getReportData'
    },'FunctionExpressions');
},'FunctionExpressions').then(response => {
    console.log(response);
    reportData = response.responseObject;
}).catch(err => {
    console.error(err);
});


var script = document.createElement('script');
    var script = document.createElement('script');
script.src = 'https://code.highcharts.com/highcharts.js';
    script.src = 'https://code.highcharts.com/highcharts.js';
document.head.appendChild(script);
    document.head.appendChild(script);
   
    let customId = Math.random().toString(36).slice(2, 7);
    let chartWrapper = document.createElement('div');
    chartWrapper.id = customId;
    element.after(chartWrapper);


let customId = Math.random().toString(36).slice(2, 7);
    script.onload = function () {
let chartWrapper = document.createElement('div');
        //Implement highcharts loading
chartWrapper.id = customId;
         element.appendChild(...);
element.after(chartWrapper);
     };
 
    //Return an empty string
script.onload = function () {
    return '';
    window.addEventListener('documentLoaded', e => {
}
         Highcharts.chart(customId, {
            title: {
                text: 'Some Chart Header'
            },
            subtitle: {
                text: 'Example Chart Sub-Header'
            },
            yAxis: {
                title: {
                    text: 'Number of Employees'
                }
            },
            xAxis: {
                accessibility: {
                    rangeDescription: 'Range: 2010 to 2030'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    pointStart: 2010
                }
            },
            series: reportData.series,
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }
        });
     })
};
 
return '';
</syntaxhighlight>
</syntaxhighlight>


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