JavaScript update based on Model Query

  • 1
  • Question
  • Updated 3 years ago
  • Answered
I have a script that I need to update and show new data when a table is re-queried. Currently, the data is being displayed in a template.

Can anyone point me in the right direction?

Thank you!
Photo of Tami Lust

Tami Lust

  • 5,280 Points 5k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
You probably  need to wrap your script up as a function and then call the function both when the page is loaded and when a "models.loaded" event is fired. 

Here is code I used. 

// Runs myfunction when model is requeried by filters    
 skuid.events.subscribe('models.loaded',function(updateResult){
       if (updateResult.models.MyModelName)  {
           myfunction();
       }
    });
// Runs render function on initial page load. 
    myfunction();
});    
Photo of Tami Lust

Tami Lust

  • 5,280 Points 5k badge 2x thumb
Rob,

Thanks for the info. Pardon by newbie skills but I am a little confused where that goes in the code. I have tried it in a few different places with no success. 



//Skuid Resource Location: In-Line

(function(skuid){
	var $ = skuid.$;
	//$(document.body).one('pageload',function(){
	// Runs myfunction when model is requeried by filters    
 $.events.subscribe('models.loaded',function(updateResult){
       if (updateResult.models.UiOnly)  {
           myfunction();
       }
       
	
	//Setting Model
      	var fullyearsales = skuid.model.getModel('InvoiceLine_This_Year_Sales_Agg'),
		fullyeargoal = skuid.model.getModel('Invoice_Line_This_Year_Goal_Agg');	
		
    //Outputs
      	var JanSalesRev = 0, JanSalesProfit = 0, JanRevGoal =0, JanProfitGoal=0, JanPercentSales = 0, JanPercentProfit = 0;
		var FebSalesRev = 0, FebSalesProfit = 0, FebRevGoal =0, FebProfitGoal=0, FebPercentSales = 0, FebPercentProfit = 0;
		var MarSalesRev = 0, MarSalesProfit = 0, MarRevGoal =0, MarProfitGoal=0, MarPercentSales = 0, MarPercentProfit = 0;
		
	//Quarters
		var Q1SalesRev = 0, Q2SalesRev = 0, Q3SalesRev = 0, Q4SalesRev = 0;
		var Q1SalesProfit = 0, Q2SalesProfit = 0, Q3SalesProfit = 0, Q4SalesProfit = 0;
		var Q1RevGoal = 0, Q2RevGoal  = 0, Q3RevGoal  = 0, Q4RevGoal  = 0;
		var Q1ProfitGoal = 0, Q2ProfitGoal  = 0, Q3ProfitGoal  = 0, Q4SProfitGoal  = 0;
		
		var Q1SalesPercent = 0, Q2SalesPercent  = 0, Q3SalesPercent = 0, Q4SalesPercent  = 0;
		var Q1ProfitPercent = 0, Q2ProfitPercent  = 0, Q3ProfitPercent = 0, Q4ProfitPercent  = 0;
    
    //loop through rows, summing the rows.
    //Sales
    $.each(fullyearsales.data, function(i, row) { 

            if (row.CalendarMonth =='1') {
              JanSalesRev += (row.SalesRev || 0);
              JanSalesProfit += (row.SalesProfit || 0);
			}
			if (row.CalendarMonth =='2') {
              FebSalesRev += (row.SalesRev || 0);
              FebSalesProfit += (row.SalesProfit || 0);
			}
			if (row.CalendarMonth =='3') {
              MarSalesRev += (row.SalesRev || 0);
              MarSalesProfit += (row.SalesProfit || 0);
			}
    	}
    		
   );
	
		//loop through rows, summing the rows.
	//Goals
	$.each(fullyeargoal.data, function(i, row) { 

            if (row.StartMonth =='1') {
              JanRevGoal += (row.GoalRev || 0);
              JanProfitGoal += (row.GoalProfit || 0);
              
            }
            if (row.StartMonth =='2') {
              FebRevGoal += (row.GoalRev || 0);
              FebProfitGoal += (row.GoalProfit || 0);
              
            }
            if (row.StartMonth =='3') {
              MarRevGoal += (row.GoalRev || 0);
              MarProfitGoal += (row.GoalProfit || 0);
              
              
            }
	
		}
	);
	
	//January Percent Totals
			JanPercentSales = (JanSalesRev / JanRevGoal * 100);
			JanPercentProfit = (JanSalesProfit / JanProfitGoal * 100);
			
	//February Percent Totals
			FebPercentSales = (FebSalesRev / FebRevGoal * 100);
			FebPercentProfit = (FebSalesProfit / FebProfitGoal * 100);
			
	//March Percent Totals
			MarPercentSales = (MarSalesRev / MarRevGoal * 100);
			MarPercentProfit = (MarSalesProfit / MarProfitGoal * 100);
			
			
	//Quarter 1 Totals
			Q1SalesRev = (JanSalesRev + FebSalesRev + MarSalesRev);
			Q1RevGoal = (JanRevGoal + FebRevGoal + MarRevGoal);
			
			Q1SalesProfit = (JanSalesProfit + FebSalesProfit + MarSalesProfit);
			Q1ProfitGoal = (JanProfitGoal + FebProfitGoal + MarProfitGoal);
			
			Q1SalesPercent = (Q1SalesRev / Q1RevGoal * 100);
			Q1ProfitPercent = (Q1SalesProfit / Q1ProfitGoal * 100) ;
			
			
			
			
		
			
/*	function addCommas(nStr){
 nStr += '';
 var x = nStr.split('.');
 var x1 = x[0];
 var x2 = x.length > 1 ? '.' + x[1] : '';
 var rgx = /(\d+)(\d{3})/;
 while (rgx.test(x1)) {
  x1 = x1.replace(rgx, '$1' + ',' + '$2');
 }
 return x1 + x2;
}
var displaynumber = addCommas();
*/



	//January Numbers
		$("#JanSalesRev").html(JanSalesRev.toFixed(0));
		$("#JanSalesProfit").html(JanSalesProfit.toFixed(0));
		$("#JanRevGoal").html(JanRevGoal.toFixed(0));
		$("#JanProfitGoal").html(JanProfitGoal.toFixed(0));
		$("#JanPercentSales").html(JanPercentSales.toFixed(0) + '%');
		$("#JanPercentProfit").html(JanPercentProfit.toFixed(0) + '%');
		
	//February Numbers
		$("#FebSalesRev").html(FebSalesRev.toFixed(0));
		$("#FebSalesProfit").html(FebSalesProfit.toFixed(0));
		$("#FebRevGoal").html(FebRevGoal.toFixed(0));
		$("#FebProfitGoal").html(FebProfitGoal.toFixed(0));
		$("#FebPercentSales").html(FebPercentSales.toFixed(0) + '%');
		$("#FebPercentProfit").html(FebPercentProfit.toFixed(0) + '%');
		
	//March Numbers
		$("#MarSalesRev").html(MarSalesRev.toFixed(0));
		$("#MarSalesProfit").html(MarSalesProfit.toFixed(0));
		$("#MarRevGoal").html(MarRevGoal.toFixed(0));
		$("#MarProfitGoal").html(MarProfitGoal.toFixed(0));
		$("#MarPercentSales").html(MarPercentSales.toFixed(0) + '%');
		$("#MarPercentProfit").html(MarPercentProfit.toFixed(0) + '%');
		
	//Q1 Totals
		$("#Q1SalesRev").html(Q1SalesRev.toFixed(0));
		$("#Q1RevGoal").html(Q1RevGoal.toFixed(0));
		
		
		$("#Q1SalesProfit").html(Q1SalesProfit.toFixed(0));
		$("#Q1ProfitGoal").html(Q1ProfitGoal.toFixed(0));
		
		$("#Q1SalesPercent").html(Q1SalesPercent.toFixed(0)+ '%');
		$("#Q1ProfitPercent").html(Q1ProfitPercent.toFixed(0)+ '%');
		
		
		
		
	});
	
})(skuid);
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hi Tami -

In reviewing your code, you are likely getting a javascript exception that you would see in the developer console (Hit F12 on most browsers and look for "Console").

The reason you would be encountering that error is because of the following line of code:

if (updateResult.models.UiOnly) {
myfunction();
}

Since "myfunction" isn't defined anywhere in your code, when that line of code executes, it fails to locate the function and errors.

Rob's sample was meant as a template so to speak but from it, you'll need to modify to meet your specific situation.

Here's a sample that you can use.  You can copy/paste the code that does all the computation inside of the "updateTemplateFields" function.  The other two blocks of code at the bottom you should be able to leave as-is if I'm understanding your code correctly.  The only thing you might need to change is the updateResult.models.UIOnly changing the "UIOnly" to match the name of the model in your page that you want to track for loading.

One other note is that if you have a UIOnly model with all the fields, your other option would be to use a template control (or rich text), set it to the UIOnly model and inside of it use model merge syntax to output the fields.  Then, in your code (updateTemplateFields below), calculate the values and update the model using updateRow API.  This will force Skuid to update the information in the template.  This avoids you having to set the html directly.  Not sure if this is an option for you but if so, would simplify your code.

(function(skuid){    
var $ = skuid.$;
// define a function to obtain the information
// required and update the necessary fields
var updateTemplateFields = function() {
   
   $('#JanSalesRev').html(555);
   $('#JanSalesProfit').html(444);
};
// add an event to get called after the page has completed loading
// we need to do this because models.loaded will not get called when
// the page is first loaded, only on subsequent loads
$(document.body).one('pageload',function() {
   updateTemplateFields();
});
skuid.events.subscribe('models.loaded',function(updateResult) {
   // if we have an update result, and it has models associated
   // and one of those models is the model with the name 'UIOnly'
   // then force a recalc and update output
   if (updateResult && updateResult.models && updateResult.models.UIOnly) {
            updateTemplateFields();
   }
});
})(skuid);
Photo of Tami Lust

Tami Lust

  • 5,280 Points 5k badge 2x thumb
Barry,

Thank you for such a  detailed explanation. I am going to read this over and let it sink in. I will report back with the final result once it all makes sense to me.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Sounds like a plan Tami.  Good luck and keep us posted.
Photo of Tami Lust

Tami Lust

  • 5,280 Points 5k badge 2x thumb
Barry,

This was perfect thank you. I was having a hard time wrapping my head around the load and re-query being at the end of the script. So instead of just copying what you gave me I kept trying to move things around which did not work. 

Thank you for your clear explanation and code.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
You're welcome Tami, glad you got it working!