How to have JavaScript results displayed in Skuid

  • 1
  • Question
  • Updated 3 years ago
I have created a JavaScript that will loop through and add up the values of two different fields if the month and sales team match the data in the model. 

I am not sure how I get the data to display in Skuid on separate lines. Right now it just breaks my page.  I know there is a problem within the first 3 lines of code, but not sure how to fix that. Also how would I know if this should be in-line or in0line snippet?

Use Case:
For all 12 months there will be a separate salesrev value and salesprofit value.


Month       Sales Rev    Sales Profit
January     100,00          270,000
February   150,00          280,000
March       120,00          240,000
April          110,00          260,000
...

Code:
(function(skuid) {
      var $ = skuid.$;
      //$(document.body).one('pageload',function(){
      
      //Setting Model
      var invoicelineyear = skuid.model.getModel('InvoiceLine_Full_Year_View');
      //List of Months
      var monthsList = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
      
      // list of teams
      var teams = ['Team A', 'Team B', 'Team C', 'Team D', 'Team E', 'Team '];
      
      // set current sales team
      //var currentSalesTeam = invoicelineyear.data[0].salesteam;



      // var baseValue = {
        // 	"January ": {
        // 		"salesrev": 0,
        // 		"salesprofit": 2
        // 	},
        // 	"February": {
        // 		"salesrev": 0,
        // 		"salesprofit": 0
        // 	},
        // 	"March": {
        // 		"salesrev": 0,
        // 		"salesprofit": 0
        // 	},
        // 	"April": {
        // 		"salesrev": 0,
        // 		"salesprofit": 0
        // 	},
        // 	"May": {
        // 		"salesrev": 0,
        // 		"salesprofit": 0
        // 	},
        // 	"June": {
        // 		"salesrev": 0,
        // 		"salesprofit": 0
        // 	},
        // 	"July": {
        // 		"salesrev": 0,
        // 		"salesprofit": 0
        // 	},
        // 	"August": {
        // 		"salesrev": 0,
        // 		"salesprofit": 0
        // 	},
        // 	"September": {
        // 		"salesrev": 0,
        // 		"salesprofit": 0
        // 	},
        // 	"October": {
        // 		"salesrev": 0,
        // 		"salesprofit": 0
        // 	},
        // 	"November": {
        // 		"salesrev": 0,
        // 		"salesprofit": 0
        // 	},
        // 	"December": {
        // 		"salesrev": 0,
        // 		"salesprofit": 0
        // 	}
        // }
      // }
      
      var baseValue = {}; // dynamic object we are creating below
      var setBaseRevProfit = function(monthsList) {
        for (var i = 0; i < monthsList.length; i++) {
          baseValue[monthsList[i]] = {
            salesrev: 0,
            salesprofit: 0
          }
        }
      }


      $.each(invoiceline.data, function(i, row) { //loop through rows
        //adding the rows. 

        function getSales(monthWithSales, teams) {
          // call for each month and team
          for (var teamCnt = 0; teamCnt < teams.length; teamCnt++) {
            if (row.Invoice_Date_Month__c == monthWithSales && SCMC__Invoicing__r.Report_Sales_Rep_Team__c == teams[teamCnt]) {
              baseValue[monthWithSales].salesrev += (row.SCMC__Amount__c || 0);
              baseValue[monthWithSales].salesprofit += (row.AC_Reports_Profit_Actual_No_TxDpFr__c || 0);
              console.log(baseValue[monthWithSales].salesrev);
            }
          }
        }

        // call for each month
        for (var cnt = 0; cnt < monthsList.length; cnt++) {
          getSales(monthsList[cnt]);
        }

      });

    })(skuid);
Photo of Tami Lust

Tami Lust

  • 5,280 Points 5k badge 2x thumb

Posted 3 years ago

  • 1
Photo of David Giger

David Giger

  • 1,758 Points 1k badge 2x thumb
Hi Tami,

To  answer your question about what snippet type to use:
"In-Line (Snippet)" are snippets you execute after pageload (like custom field renderers, some a-sync stuff you want to do if a user clicks on a button, some custom save stuff, DOM-manipulation, etc...). Those snippets are only executed if you specifically execute them.
The "In-Line" snippets are snippets which get executed on pageload (after everything of skuid itself is loaded, meaning if the page is ready).
To decide which type to use depends on your use-case as described above.

To answer your other question:
I don't see you calling model.updateRow(row, updates) (more on that here). To display custom data you assemble/calculate/create/aggregate, you have to create a row (or update an existing one) in order to display the data. Make sure that you don't save the model (if its not supposed to save). To be extra careful I'd create a model which consists of UI-Only fields and never loads data.

In your snippet you define a function in an each-loop. A little advice for the future: try to avoid the declaration of variables and functions in an each loops.

$.each(invoiceline.data, function(i, row) { //loop through rows
You named the model invoicelineyear, but you loop through the data of invoiceline (which I suppose should be your model but was never declared). This might be the reason the snippet breaks your page.

If you have any further questions, don't hesitate to ask =)

Cheers