Multiple skuid standard components inside skuid's Custom Component

  • 1
  • Question
  • Updated 1 year ago
  • In Progress
Hi all,

I'm using skuid provided Custom component in my page builder, In that custom component's JS I need to add a Panel Set and Inside that Panel Set, I need to have multiple Queue Component (number of Queue Component is dynamic).

Any help to achieve this will be appreciated. Thanks in advance.
Photo of Priya

Priya

  • 478 Points 250 badge 2x thumb

Posted 1 year ago

  • 1
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
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.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Stephen--

Bad form to not know your own product...
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
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();
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
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.
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
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