Apex Code Development You need to sign in to do that
Don't have an account?
code red How to run VF page level function
Hi all,
I am tyring to run a page level function from a commandbutton click.
The function is embedded in a VF page, and is intended to open a dialog box to edit a chart. The chart is taken from Google Visualizations; Chart Editor. You can find this chart at the Google Visualization site; Google Visualization API Reference.
The idea is that there is a parent chart (VF page in my case), and upon clicking on 'Edit Me', a dialog opens as an instance of that chart (VF page), and its data source. Saving the modified chart places it in a Div on the parent page.
I've been able to replicate a VF page using the source data provided in the example. I have not been successful in pointing to a JSON data source (DataTable) (but I'll save that for another post), nor have I been successful in launching the dialog instance of the parent page.
I have loaded the VF codeshare for Google Visualizations, but Chart Editor is not included in that effort.
I am using VF Components to drive pages in all other VF pages, which do render the GV, but not this one. With the Chart Editor page I have taken a different approach, in that rather than use a VF Component to render the page, I have written all the code in the page constructs. The Function to instansiate the dialog is also included (loadEditor()).
Here's the code for the page that renders the GV chart, and from which I would like to launch the Function to create an instance of it:
<apex:page id="page" standardcontroller="Work_Order__c" extensions="PageExtension,WorkOrderBarChartExtension" showHeader="false" sidebar="false" standardStylesheets="false">
<apex:composition template="{!$Page.SiteTemplate}">
<apex:define name="body">
<apex:form id="form">
<apex:pageBlock id="page_block" title="Work Order Data">
<apex:pageBlockButtons >
</apex:pageBlockButtons>
</apex:pageBlock>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {packages: ['charteditor']});
</script>
<script type="text/javascript">
google.setOnLoadCallback(drawChartEditor);
var chartEditor = null;
var wrap = null;
var chartEditorDiv = null;
// Populates the chart div on startup and initiates global vars. Called on page load.
function drawChartEditor(){
// Initialize Chart editor handle
chartEd = new google.visualization.ChartEditor();
google.visualization.events.addListener(chartEd, 'ok', saveChart);
chartEditorDiv = document.getElementById('chartEditorDiv');
// Add the chart to the page
wrap = new google.visualization.ChartWrapper({
'chartType':'LineChart',
'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
'query':'SELECT A,D WHERE D > 100 ORDER BY D',
'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
});
wrap.draw(chartEditorDiv);
}
// User clicked 'ok' to save chart
function saveChart(){
chartEd.getChartWrapper().draw(chartEditorDiv);
}
// Onclick handler, opens the editor
function loadEditor() {
chartEd.openDialog(wrap, {});
}
</script>
</head>
<body>
<div id="chartEditorDiv" style="width:600px; height:400px;">
</div>
</body>
</apex:form>
</apex:define>
</apex:composition>
</apex:page>
(Note; in the case of this VF page, there is nothing in the Extension that constructs the page relative to my question.)
As mentioned; have been able to create the page with the GV example of a chart. I have been unsuccessful in launching the Function to open the dialog, and have tried to put the 'editor' in the page's extension (WorkOrderBarChartExtension), but unsuccessfully. I've not seen an example of putting page constructs in an Apex Class.
Maybe it is not possible to run a function at the VF page level? If not, how do I write a VF page construct into a VF Component or Apex Class?
I can post more code if needed. Thank you in advance for any suggestions.
Further to my post; I do have this page that works, but it's constructs are different in that the 'function' runs on page load. As a result, when it loads the dialog opens first. Once it's loaded the command button just reloads the Function. It works, but not the way I need it to.
Here's the page:
<apex:page id="page" standardcontroller="Work_Order__c" extensions="PageExtension,WorkOrderBarChartExtension" showHeader="false" sidebar="false" standardStylesheets="false"> <apex:composition template="{!$Page.SiteTemplate}"> <apex:define name="body"> <apex:form id="form"> <apex:pageBlock id="page_block" title="Work Order Data"> <apex:pageBlockButtons > <apex:commandButton value="Open Chart Editor" action="{!openEditor}" /> </apex:pageBlockButtons> </apex:pageBlock> <title> Google Visualization API Sample </title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1.0', {packages: ['charteditor']}); </script> <script type="text/javascript"> google.setOnLoadCallback(loadEditor); var chartEditor = null; function loadEditor() { // Create the chart to edit. var wrapper = new google.visualization.ChartWrapper({ 'chartType':'LineChart', 'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1', 'query':'SELECT A,D WHERE D > 100 ORDER BY D', 'options': {'title':'Population Density (people/km^2)', 'legend':'none'} }); chartEditor = new google.visualization.ChartEditor(); google.visualization.events.addListener(chartEditor, 'ok', redrawChart); chartEditor.openDialog(wrapper, {}); } // On "OK" save the chart to a <div> on the page. function redrawChart(){ chartEditor.getChartWrapper().draw(document.getElementById('vis_div')); } </script> </head> <body> <div id="vis_div" style="height: 400px; width: 600px;"></div> </body> </apex:form> </apex:define> </apex:composition> </apex:page>Thank you.