Hello all,
I want to build a custom pie chart in JS (using Raphael) that will show the breakdown of records of one object by values in a picklist. Is there a good way to get the picklist values in an array so that I can then get the count of records for each value and also use the values (not the codes) to populate the legend? The array needs to be dynamically generated since values can be added to the picklist as new records are uploaded, so I need to recreate the array each time the chart is generated.
I.e., a picklist field has the options "A," "B," and "C." The piechart will show the breakdown (20 records have value "A," 5 have "B," and 10 have "C") and the legend will list each value. When a new record is uploaded and adds "D" as a value in the picklist, the chart will then include "D" in the breakdown and legend.
So is there a query to return the values in a picklist as an array?
Thank you,
Greg
Hi Greg,
You can use the code below to get all the option values in a picklist:
<script src='../js/metadata.js' type='text/javascript' charset='utf-8'></script> <script> var arrName = [], count = 0; $(function() { rbf_getFieldDef("object_a", "my_picklist", function(data){ //get the field definition of "mypicklist" field alert(data); $(data).find('ListItem').each(function(){ //Loop all "ListItem" Nodes arrName[count] = $(this).attr('Name'); count++; }); alert(arrName); //Debug }); }); </script>
Note: Please change the integration names and paste the code on a script component.
Regards,
Godfrey
Hi Greg,
You can use the code below to get all the option values in a picklist:
<script src='../js/metadata.js' type='text/javascript' charset='utf-8'></script> <script> var arrName = [], count = 0; $(function() { rbf_getFieldDef("object_a", "my_picklist", function(data){ //get the field definition of "mypicklist" field alert(data); $(data).find('ListItem').each(function(){ //Loop all "ListItem" Nodes arrName[count] = $(this).attr('Name'); count++; }); alert(arrName); //Debug }); }); </script>
Note: Please change the integration names and paste the code on a script component.
Regards,
Godfrey
Awesome, thank you very much, Godfrey!
Just one more question - when I try to use the arrName array outside of the jQuery function I get undefined values (like if I put an alert(arrName) or alert(arrName[3]) after the final parenthesis). How do I access the array for the JavaScript code to follow?
Greg
Hi gwf,
$( function() {}) basically tells the page to execute this function when the page has loaded. There are multiple ways of specifying the same. See http://api.jquery.com/ready/ for more info.
This basically ensures that the rbf_getFieldDef that you are calling is executed only when all of the page (html, js, other files) has loaded in the browser. Putting it outside the ready function, executes it when processing the page for rendering (as in an interpreted language) and by this time the getFieldDef function has not yet been processed, so arrName is undefined.
You should really execute all your javascript code in the $(function() { <here> }); which could very well include generating your dynamic chart data.
P.S: We have plans to provide a REST api to get all possible values for a picklist. Should be available in the release after 3.1 (scheduled to come out soon).
OK, that's good to know. Thank you very much, Santosh!
Greg
You probably can't access the arrName variable because of the asynchronous nature of rbf_getFieldDef API. By the time you're accessing the variable, the data transfer and JavaScript operations are still running in the background. You can find out more about AJAX on this link: http://www.w3schools.com/ajax/ajax_intro.asp
Below is a sample code for nested AJAX APIs:
<script src='../js/metadata.js' type='text/javascript' charset='utf-8'></script> <script> var arrName = [], arrCount = [], count1 = 0, count2=0; $(function() { rbf_getFieldDef("object_a", "my_picklist", function(data){ //get the field definition of "mypicklist" field $(data).find('ListItem').each(function(){ //Loop all "ListItem" Nodes arrName[count1] = $(this).attr('Name'); rbf_selectNumber("SELECT count(1) FROM object_a WHERE my_picklist="+$(this).attr('Id'), function(data){ arrCount[count2] = data; count2++; if (count2==count1) runSucceedingScipt(); }); count1++; }); }); }); function runSucceedingScipt() { alert(arrName[0] + ":" + arrCount[0]); } </script>
However, please keep in mind that number of client-side API calls is limited per login session. You might hit this limitation fast depending on the number of picklist values you have.
Godfrey
Thank you, Godfrey - but if I use the original code to populate the arrName and then insert code where marked below that makes use of arrName, does that avoid multiple API calls?
<script src='../js/metadata.js' type='text/javascript' charset='utf-8'></script> <script> var arrName = [], count = 0; $(function() { rbf_getFieldDef("sg_opportunity", "industry", function(data){ $(data).find('ListItem').each(function(){ arrName[count] = $(this).attr('Name'); count++; }); //JS code here }); }); </script>
Yes. Assuming you will not use other Rollbase AJAX APIs that will only be counted as 1.
Thank you!