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

edited June 25, 2020 in Questions
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.

Comments

  • edited November 13, 2017
    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.
  • Pat VachonPat Vachon 💎💎💎
    edited June 25, 2020
    You should be able to set the context on the chart component and you should be good to go.

    No need for js.
  • edited December 20, 2016
    I had to build my chart in highcharts because the source of my data is not compatible with the way skuids chart components are populated. I had a question floating around about how to use the skuid chart for my needs, but that didn't got a good answer.

    https://community.skuid.com/skuid/topics/skuid-line-graph-question
  • Pat VachonPat Vachon 💎💎💎
    edited October 26, 2016
    Not sure how I would proceed. I'd first make absolutely sure the data you need can't be provided by a model with a Before Render Snippet.
  • edited December 20, 2016
    I have thought about making separate models that I could chart from the initial model that holds my data, allowing me to create data that the standard charts could handle. The issue I have with that is the record I'm using is a child record, and the parent records could have several hundred of them.... I don't want to make 12x the number of models I already have...

  • Pat VachonPat Vachon 💎💎💎
    edited October 26, 2016
    Where's the data coming from now then?
  • edited December 20, 2016
    It's coming from the original records, with highcharts, I can just plug my data points in
    <code>
    $('#container').highcharts({
        title: 'Monthly Usage',
        chart: {
            renderTo: document.getElementById("#container")  
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {text: 'Usage'}
        },
        plotOptions: {
            series: {
                type: "line"
            }
        },
        series: [{
            name: iqModelRow.Utility_Account_Number__c,
            data: [iqModelRow.Jan_Load__c, iqModelRow.Feb_Load__c, iqModelRow.Mar_Load__c, iqModelRow.Apr_Load__c, 
                    iqModelRow.May_Load__c, iqModelRow.Jun_Load__c, iqModelRow.Jul_Load__c, iqModelRow.Aug_Load__c, 
                    iqModelRow.Sept_Load__c, iqModelRow.Oct_Load__c, iqModelRow.Nov_Load__c, iqModelRow.Dec_Load__c]
        }]
    });
    </code>

    If there were a way to just plug datapoints of a single record into a skuid line chart I wouldn't have this issue I think.
  • Pat VachonPat Vachon 💎💎💎
    edited October 26, 2016
    You can achieve this using a snippet I think. You'd do the same type of thing are you've done above, but then you'd gain the ability to use Context of the Skuid chart component.
  • edited December 20, 2016
    I can load data into a chart using the before render snippet? I looked for examples of this but was unable to find any.
  • Pat VachonPat Vachon 💎💎💎
    edited October 26, 2016
    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);
  • edited December 20, 2016
    I'll give this a shot. I think you might just be my hero :)
  • Matt SonesMatt Sones 💎💎💎
    edited December 7, 2016
    Pat is everyone's hero.
  • edited December 20, 2016
    How do we set the labels for the x axis? All I'm getting is an index for the points I have.
  • Pat VachonPat Vachon 💎💎💎
    edited October 26, 2016
    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.

  • edited November 13, 2017
    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.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!