Template component as a table

  • 1
  • Question
  • Updated 3 years ago
  • Answered
I am wanting to bring in data from different models in a tabular format.  It's seems tricky (if at all possible) using the table component but I can using the template module ensuring I order the model the same for each one - each template component is places side by side to represent the table format,

I am wanting to have a count function against a name.  However, if there are no records associated with one person, it misses the row out completely showing less rows and thus messing with the format

Is it possible for it too show 0 instead of missing the row out completely?

Hope that makes sense?
Photo of Chris Mollan

Chris Mollan

  • 570 Points 500 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Chris,

I dealt with the same issue with aggregate models not including a row if the value was zero. I resorted to using javascript to run through the rows of the model and add the missing rows.

You may also want to consider using the table component and creating your own dynamic model for the table. Then you can use adoptRows() to pull rows into your model from your other models.
Photo of Chris Mollan

Chris Mollan

  • 570 Points 500 badge 2x thumb
Thanks Matt, don't suppose you have any examples of the javascript to add the missing rows?
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Here's something of a sample.
This is part of some code to allow us to 'aggregate' on distinct value of a multipicklist field. Before this code, we've calculated the values that we want in each row and stored them in a javascript object called 'totalEthnicity'. We're emptying the model "mdlEthnicity" and then adding back all the rows that we want (even if the value is 0). Our grouping field on the model is called grpCategories and our aggregation field is totalRecords.

// clear the model.
       $.each(mdlEthnicity.getRows(), function(i, row) {
      mdlEthnicity.abandonRow(row);
      });
      // create an array of all of the new rows to be added back to the model for displaying.
      var newRows = [
{ grpCategories: "Unknown", totalRecords: totalEthnicity.unknown },
{ grpCategories: "Hispanic Or Latino", TotalRecords: totalEthnicity.HispanicOrLatino},
{ grpCategories: "American Indian or Alaska Native", TotalRecords: totalEthnicity.AmericanIndianOrAlaskanNative },
{ grpCategories: "Asian", TotalRecords: totalEthnicity.Asian },
{ grpCategories: "African American", TotalRecords: totalEthnicity.AfricanAmerican },
{ grpCategories: "Native Hawaiian or Pacific Islander", TotalRecords: totalEthnicity.NativeHawaiianOrOtherPacificIslander },
{ grpCategories: "Caucasian", TotalRecords: totalEthnicity.Caucasian },
{ grpCategories: "Other", TotalRecords: totalEthnicity.Other },
{ grpCategories: '', TotalRecords: totalValues }
      ];
      // add the rows to the model, then rerender the table for displaying.
mdlEthnicity.adoptRows( newRows, { doAppend: true });
  skuid.component.getById('EthnicityInformationTable').render();


There may be an "empty model" method, but it's not published in the documentation, so we're using abondonRow() instead.

Hope that helps!

You should be able to adopt as many fields and rows as you'd like into your model.
(Edited)