Skip to main content

How do I create a custom skuid component to contain multiple pre-defined skuid components?


Here is my attempt:


skuid.componentType.register('ccoptimize__script',function(element,xmlDef,component){

        // Get properties and model

        var scriptModelId = xmlDef.attr('scriptmodel'),

            toggleVisible = xmlDef.attr('togglevisible');

        var scriptModel = skuid.$M(scriptModelId),

            scriptRow = scriptModel.getFirstRow();

        var scriptLabel = scriptModel.getFieldValue(scriptRow, 'Name');

        //Set value for default visibility

        var toggleField = scriptModel.getFieldValue(scriptRow, 'Toggle_Visible__c');

        if (toggleField !== toggleVisible) {

            scriptModel.updateRow(scriptRow,{Toggle_Visible__c: toggleVisible});

        }

        // Define XML for our child components

        var $xml = skuid.utils.makeXMLDoc;

        var xmlPageTitle = $xml('[XML STUFF]');

        var xmlFieldEditor = $xml('[ALSO XLM STUFF]');

        // Make containers for our components

        element.append($('<div id="scriptbuttons">'),$('<div id="scripttext">'));

            skuid.component.factory({

                xmlDefinition: xmlPageTitle,

                element: element.children.scriptbuttons

            });

            skuid.component.factory({

                xmlDefinition: xmlFieldEditor,

                element: element.children.scripttext

            });



    });

All I’m getting for element when the page loads is:


<div id="2" data-rendered="true"> <div id="scriptbuttons"></div> <div id="scripttext"></div> </div>

What’s the proper way to accomplish this?

Your syntax for passing a pre-defined element to component factory is incorrect. Try something like this instead:


var scriptButtons = $('<div id="scriptbuttons">'),

   scriptText = $('<div id="scripttext">');

skuid.component.factory({

   xmlDefinition: xmlPageTitle,

   element: scriptButtons

});

skuid.component.factory({

   xmlDefinition: xmlFieldEditor,

   element: scriptText

});

element.append(scriptButtons,scriptText);

Thanks, Zach! I’m getting closer. Now there is some stuff in the DOM… just not the stuff I expected. 😉


For my custom pagetitle component, I’m getting:


<div id="3" class="toggleButton nx-pagetitle nx-editor ui-widget" data-rendered="true"> <div class="nx-editor-header">

<div class="nx-header-right">

<div style="display: inline-block;">

<div style="display: none;"></div>

<div style="display: none;"></div>

</div>

</div>

<div class="nx-actionselect nx-status" style="display: none;">

<div class="nx-actionselect-text"></div>

</div>

</div>

<div class="nx-messages"></div>

<div class="nx-editor-contents"></div>

</div>

When I look at the outerHTML value for my variable xmlPageTitle in the console, I’m getting this:


<pagetitle model="Script" cssclass="toggleButton"> <actions>

<action type="multi" label="Adoption Presentation" window="self" icon="fa-angle-up">

<actions>

<action type="updateRow" fieldmodel="Script" field="Toggle_Visible__c" enclosevalueinquotes="false" value="false"/>

</actions>

<renderconditions logictype="and">

<rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="Script" sourcetype="fieldvalue" field="Toggle_Visible__c" value="true" nosourcerowbehavior="deactivate"/>

</renderconditions>

</action>

<action type="multi" label="Adoption Presentation" window="self" icon="fa-angle-down">

<actions>

<action type="updateRow" fieldmodel="Script" field="Toggle_Visible__c" enclosevalueinquotes="false" value="true"/>

</actions>

<renderconditions logictype="and">

<rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="Script" sourcetype="fieldvalue" field="Toggle_Visible__c" value="false" nosourcerowbehavior="deactivate"/>

</renderconditions>

</action>

</actions>

<renderconditions logictype="and"/>

</pagetitle>

Seems like that’s working. It looks like the XML for a pagetitle component with two buttons. But somehow that isn’t making it onto the page.


What else am I missing?

Looks correct to me — assuming that the two Buttons in your Page Title should not be conditionally rendered initially. Is the “Script” Model in your page?

The script model is on the page.

At least one of the buttons should always be rendered, because one renders when Toggle_Visible__c = true and the other renders when Toggle_Visible__c = false.

From the console:

skuid.$M(‘Script’).data.0].Toggle_Visible__c
“true”

Hahaha, so… you can go ahead and laugh.
It was working fine all along, but the value for Toggle_Visible__c was null, so neither of the buttons was rendering… I changed =false to !=true, and we’re all set!

Thanks for your help!

Awesome. 

View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings