Multiple skuid standard components inside skuid's Custom Component

edited March 2019 in Questions
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.

Comments

  • edited September 2017
    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.
  • Matt SonesMatt Sones ✭✭
    edited September 2017
    Stephen--

    Bad form to not know your own product...
    image


  • Matt SonesMatt Sones ✭✭
    edited March 2019
    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();
  • Matt SonesMatt Sones ✭✭
    edited March 2019
    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.
  • edited March 2019
    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

  • edited March 2019
    Hi Matt, what are component.renderReport and .empty? Thanks.
  • Matt SonesMatt Sones ✭✭
    edited March 2019
    .renderReport() is just a function that I defined in the code.

    .empty() is jQuery: https://api.jquery.com/empty/
  • edited March 2019
    Thanks. Obviously it was a long day.
Sign In or Register to comment.