is there a way to set the unique id of a page component in javascript?

  • 1
  • Question
  • Updated 2 years ago
  • Answered
I'm opening a drawer through the multiple actions option on my table, and in the drawer I'm creating a line graph using Highcharts that represents data from the record on the table.

Everything works great with one catch:

Because I have to create a division with a unique id to cast my chart into, I'm running into an issue where if I open a drawer, and then immediately open a second without closing the first both graphs now show the data for the second record instead of their appropriate graph.

The bug gets worse the more drawers I open.

My question is: Is it possible to locate the control I want in javascript, and programmatically change it's unique id so that no other drawers will overwrite the graph in the first drawer. I would like to set the id using information from the context row that I know won't be duplicated.
Photo of Jerry

Jerry

  • 1,150 Points 1k badge 2x thumb

Posted 2 years ago

  • 1
Photo of Jerry

Jerry

  • 1,150 Points 1k badge 2x thumb
Alternately, is it possible to access information from the context row using merge syntax. I could assign the unique Id to the control that way if there is.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,704 Points 20k badge 2x thumb
You should be able to set the context on the chart component and you should be good to go.

No need for js.
(Edited)
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,704 Points 20k badge 2x thumb
The series can be updated as necessary. Here's a snippet we used on Opps. You can alter the series as you see fit.

// this snippet has been created in order to sort the series in the chart by the stage order
// in the sales process assigned to the Prospect Clinic Record Type

var chartObj = arguments[0],
    Opportunities = skuid.$M('Opportunities'),
	StageName,
	sortedSeries= [],
	$ = skuid.$;
	
	// to get the sort order, we need to find the Stage field metadata in the Opportunities models list of fields
	$.each(Opportunities.fields, function(f,field){
	    if (field.id === "StageName"){
	        StageName = field;
	        return false;
	    }
	});
	
	// now use this field to create a temporary array to replace the current series
	// loop through entries in order to then find the corresponding series by the same name
	// in order to add it to the temporary array
	$.each(StageName.picklistEntries, function(p,entry){
	    $.each(chartObj.series, function(s,series){
	        if (series.name === entry.label){
	            sortedSeries.push(series);
	        }
	    });
	});
	
	// empty original series
	chartObj.series.length = 0;
	
	// insert sorted chart
	$.each(sortedSeries,function(ss,sseries){
	    chartObj.series.push(sseries);
	});
	
// console.log(chartObj);
// console.log(Opportunities);
Photo of Jerry

Jerry

  • 1,150 Points 1k badge 2x thumb
I'll give this a shot. I think you might just be my hero :)
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Pat is everyone's hero.
Photo of Jerry

Jerry

  • 1,150 Points 1k badge 2x thumb
How do we set the labels for the x axis? All I'm getting is an index for the points I have.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,704 Points 20k badge 2x thumb
Dunno. I typically either do a console.log of chartObj or add a watch to the variable to explore it in order to figure out what's possible.
Photo of Jerry

Jerry

  • 1,150 Points 1k badge 2x thumb
Figured it all out finally, thanks to Pat for all of his help :)...
Our organization has one object with a record for each month that I needed a line graph representation of.
I created an additional model that I update with the Context Row record
I created a row action that opened a drawer
Placed a skuid chart in that drawer
and used a before render snippet to fill it with what was needed:
below is the snippet I used, hope this helps someone in the future.
<code>
var params = arguments[0], $ = skuid.$;
var intake = skuid.$M('modelContainingContextRowRecord').getFirstRow();
//add intake data as series in params object which is the chart we are rendering.
//also setup the x axis value labels and the y axis label
var chart = params;
var newSeries = [{
                    name: intake.Account_Number__c,
                    data: [intake.Jan_Data__c, intake.Feb_Data__c, intake.Mar_Data__c,
                            intake.Apr_Data__c, intake.May_Data__c, intake.Jun_Data__c,
                            intake.Jul_Data__c, intake.Aug_Data__c, intake.Sept_Data__c,
                            intake.Oct_Data__c, intake.Nov_Data__c, intake.Dec_Data__c]
                }];

chart.xAxis[0].categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
chart.series = newSeries;
</code>

This question is now Answered, I am not sure how to mark it as such though.