Multiple skuid standard components inside skuid's Custom Component

What is the Skuid provided custom component? I’d recommend using a responsive grid instead of a panel set. You can easily put in multiple Queues. You’ll probably want to use page includes with the Queue to make them “dynamic” - depending on what you mean by that.

Stephen–

Bad form to not know your own product…

Priya,

You can definitely do what you want to do with the Custom component. There used to be examples of this in the skuid docs, but I can’t find them anymore.

You need to use skuid.componentType.register() to register your component with whatever name you give it in the builder.

To put stock components inside your custom component, you can build the XML with skuid.utils.makeXMLDoc(), and then use skuid.component.factory() to add them to the DOM.

Here’s a section of my code for a Custom component.

skuid.componentType.register('MasterReportComponent',function(element,xmlDef,component){
    element.html('Set the Filters to Run a Report.');
var xmlDefinition = $xml('<skootable uniqueid="MasterReportTable" showconditions="false" showsavecancel="false" searchbox="false" showexportbuttons="true" pagesize="100" '+
'createrecords="false" model="MasterReportModel" mode="readonly" instantfilters="false" cssclass="hidetablefooter"/>')
.append(
$xml('<fields/>')
.append(
$xml('<field id="line" type="CUSTOM" snippet="renderLine"/>'),
$xml('<field id="name" type="CUSTOM" snippet="renderName"/>'),
$xml('<field id="current"/>'),
$xml('<field id="currentRateDisplay" type="CUSTOM" snippet="renderCurrentRate"/>'),
$xml('<field id="minDisplay"/>'),
$xml('<field id="maxDisplay"/>'),
$xml('<field id="prev" />'),
$xml('<field id="prevRateDisplay" type="CUSTOM" snippet="renderPrevRate"/>'),
$xml('<field id="qincNum"/>'),
$xml('<field id="qincRate"/>'),
$xml('<field id="cinc"/>')
),
$xml('<exportproperties usetablecolumns="true"/>')
);
component.renderReport = function(){
element.empty();
    skuid.component.factory({
       element: element,
       xmlDefinition: xmlDefinition
    });
    // Remove 'modified' class so that data appears saved.
    $('.nx-modified').removeClass('nx-modified');
    //Replace Infinity and NaN with '--'
    element.find('.nx-fieldtext:contains(Infinity), .nx-fieldtext:contains(NaN)').text('--');
    // Add tolerance class to columns
    element.find('td:nth-child(6), td:nth-child(7)').addClass('display-tolerance');
};
component.noData = function(){
element.empty();
element.html('The current filters do not return any data. Please change your filter criteria.');
};
    
});

Note: $xml() is just a reference to skuid.utils.makeXMLDoc();

Also note that this is just a section of much larger code. You don’t have to put the factory inside a different function if you only need to generate the components on page load. I have to create this table dynamically with a button press, so I needed to be able to call the factory inside a function.

Matt/Priya,

Here is the link to Skuid’s help page on building dynamic models and components:

https://docs.skuid.com/latest/en/skuid/javascript/dynamic-model-component-creation.html?highlight=lo…

Thanks,

Bill

Hi Matt, what are component.renderReport and .empty? Thanks.

.renderReport() is just a function that I defined in the code.

.empty() is jQuery: https://api.jquery.com/empty/

Thanks. Obviously it was a long day.