Custom component with multiple skuid components.

  • 1
  • Question
  • Updated 4 years ago
  • Answered
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?
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

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

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
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?
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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?
Photo of Matt Sones

Matt Sones, Champion

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

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
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!
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Awesome.