How do I utilize an Accordion component within SKUID Templates?

  • 2
  • Question
  • Updated 2 years ago
  • Answered
I want to utilize an Accordion within an HTML template component. I have attempted to use HTML tags (which worked great in some browsers but is not supported broadly enough). So I thought I would look for a script off the web.

Anyone have a suggestion for a simple component on the web they think would do the trick. I tried a couple out by including an external reference to Jquery via a CDN, included the Javascript code within an Inline script and included the CSS provided in the demo in an inline CSS. Then pasted the demo HTML into a Template component (allowing HTML selected) and have not found something that works.

It could be that there are plenty of great components but I am fundamentally doing something wrong when trying to get them to work with SKUID or I may be picking components that are not SKUID friendly.

Any tips/suggestions for some code that would provide accordion functionality within the SKUID Template component HTML would be appreciated.
Photo of Joseph Ucuzoglu

Joseph Ucuzoglu

  • 292 Points 250 badge 2x thumb

Posted 2 years ago

  • 2
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hello Joseph -

The good news is that using jQuery UI plug-ins like the accordion or any other jQuery plugin you grab off the web should work just fine within a Skuid page.  Skuid uses jQuery & jQuery UI extensively itself and wouldn't interfere with anything you would want to do "on your own" within an HTML template, etc.

If you could provide more information regarding what's "not working", I'd be happy to try to provide some insight.  More specifically, if you could provide a sample page demonstrating the problem that's always best.

All that said, you might want to check out the Collapsible Wrapper Component as it behaves similar to the accordian and might provide an "out-of-the-box" Skuid component that serves your use case.
Photo of Joseph Ucuzoglu

Joseph Ucuzoglu

  • 292 Points 250 badge 2x thumb
Barry thank you for the response. I looked at your collapsible wrapper component (and was very impressed with the post that described it.

The reason why I think I need an Accordion in a template is because I need to display one collapsible element per item within a model and I surmised (perhaps incorrectly) that the wrapper does not repeat for each item in the model (if it does then let me know and I will switch to your component in a heartbeat.

I implemented JQUERY UI as you suggested and it worked like a charm! I should have tried it first. Thank You.

Question, should I be loading JQuery from a CDN or is it already loaded when I run a SKUID snippet?
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hi Joseph -

Glad you were able to get the Accordion working! 

You are correct, the CW is a "container" which allows other components to be placed inside and hence it wouldn't fit your use case unfortunately.

You should not need to load jQuery or jQuery UI as Skuid brings this in to the page already.  Keep in mind that Skuid pulls in a version of jQuery 1.11.1 so if there is something in jQuery 2.x that you need things get a little more complicated unfortunately.

Back to your use case - Since you need one accordion element for each row in a model, while there are ways to do this in a template component, I'd recommend you might want to look at your own Custom Component to emit the HTML required for the accordion.   This will allow you to iterate the rows in the model using javascript, emit the appropriate HTML tags, etc.  It will be much easier I think than trying to do this in a template component.  Just something to consider.
Photo of Menachem Shanowitz

Menachem Shanowitz

  • 1,074 Points 1k badge 2x thumb
Hi Joseph,

Attached is a gif of a wizard in our org that uses a custom made "accordion" that represents rows in a model and uses a skuid field editor for each row. If this is something that you and other community members want, we may be able to publish it as a skuid component.

Let me know your thoughts. 

Photo of Mendy Ezagui

Mendy Ezagui

  • 104 Points 100 badge 2x thumb
Joseph, something to note that perhaps isn't clear from the image is the ability to add/remove the records from the accordion @Menachem #RockStar!.

By default the interface loads a single record and the user can continue adding as many as they'd like by clicking the bar (Add new person) at the bottom. 
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Menachem - Very very cool!!
Photo of Joseph Ucuzoglu

Joseph Ucuzoglu

  • 292 Points 250 badge 2x thumb
Hi Menachem that represents the perfect solution for my use case. If you published it I would definitely want to use that since it already incorporates the SKUID theme etc... Please let me know if you plan to and the approximate timing so I can determine if I should hold off with my other option.

Question and not to sound too greedy because what I see looks phenomenal and I will be super excited to get it. But any chance that it ties into the Action framework (i.e. you click to expand an accordion entry and it can run a sequence of actions) ?
Photo of Menachem Shanowitz

Menachem Shanowitz

  • 1,074 Points 1k badge 2x thumb
Thanks for your feedback.

There is a high chance that I will make this available as a component within the next few weeks. I have not determined what features (such as the action framework) this component will have.
Photo of Joseph Ucuzoglu

Joseph Ucuzoglu

  • 292 Points 250 badge 2x thumb
Any update on when you may make this available.? I would love to use this on my project.
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Hey Joseph ... I've prototyped something similar recently, but it uses CSS transitions rather than JQueryUI Accordion (Javascript). The section labels are streamed from a model and each rendered "accordion" section contains a page include, which is refreshed when the section is activated. See brief demo: https://www.dropbox.com/s/cibvhqk3eqicbt6/PseudoAccordion.mp4?dl=0

Here's the source without the header and sidebar. Please note its prototype nature:) 
<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" showheader="false" theme="Lightning Design">
    <models>
        <model id="ContentBlocks" limit="40" query="true" createrowifnonefound="false" adapter="salesforce" type="" sobject="cloupra__Content_Block__c" orderby="cloupra__Order__c">
            <fields>
                <field id="cloupra__Content_Item__r.Label__c"/>
                <field id="Id"/>
                <field id="cloupra__Content_Item__r.Tab__c"/>
            </fields>
            <conditions>
                <condition type="fieldvalue" value="ClientView" enclosevalueinquotes="true" field="cloupra__Related_To__c"/>
                <condition type="fieldvalue" value="FACTFIND" enclosevalueinquotes="true" field="cloupra__Group_Code__c"/>
            </conditions>
            <actions/>
        </model>
    </models>
    <components>
        <pagetitle uniqueid="sk-yVvnN-243" model="ContentBlocks">
            <maintitle>Fact Find</maintitle>
            <actions/>
        </pagetitle>
        <template multiple="false" uniqueid="ff-container" allowhtml="true">
            <contents/>
        </template>
        <includepanel type="assignment" uniqueid="ff-include" actiontype="View" objecttype="main_default" cssclass="pf-suppress">
            <renderconditions logictype="and"/>
        </includepanel>
    </components>
    <resources>
        <labels/>
        <javascript>
            <jsitem location="inline" name="renderFactFind" cachelocation="false" url="">(function(skuid){
	var $ = skuid.$;
	$(document.body).one('pageload',function(){
        var htmlStream = '';
        var ffSectionsModel = skuid.model.getModel('ContentBlocks'); //get the fact find sections
        $.each(ffSectionsModel.data,function(i,row){
            htmlStream = htmlStream + '&lt;div id="ff-section-' + row.cloupra__Content_Item__r.Tab__c + '" class="pf-ff-section"&gt;&lt;div id="ff-section-header" class="pf-ff-section-header nx-item nx-queue-item"&gt;&lt;span&gt;' + row.cloupra__Content_Item__r.Label__c +  '&lt;/span&gt;&lt;/div&gt;&lt;div class="pf-ff-section-content"&gt;&lt;/div&gt;&lt;/div&gt;';
        });
        $('#ff-container').html(htmlStream); //render the fact find sections into a template.
        $('.pf-ff-section').click(function(){ //on click of a fact find section
            $('.pf-ff-section').removeClass('pf-ff-section-selected'); //deselect all other sections
            $(this).find('.pf-ff-section-content').addClass('pf-suppress'); //hide selected section content during refresh            
            $(this).addClass('pf-ff-section-selected'); //animate the selected section
            var tab = this.id.substr(this.id.length - 3);
            $('#ff-include').appendTo('#' + this.id + ' .pf-ff-section-content'); //move include to selected section
            var ffInclude = $('#ff-include').data('object');
            ffInclude.objecttype = 'faf_' + tab + '_v';
            var selSection = '#' + this.id;
            ffInclude.load(function(){  //refresh include based on the content block's tab attribute
                $(selSection).find('.pf-ff-section-content').removeClass('pf-suppress'); //show selected section content again
                $('#ff-include').removeClass('pf-suppress'); //show the include, which is initially suppressed
            });
        });
	});
})(skuid);</jsitem>
        </javascript>
        <css>
            <cssitem location="inline" name="factfindcss" cachelocation="false">.pf-ff-section{
    height: 25px;
    overflow: hidden;
    color:#fff;
    margin-bottom: 5px;
    padding: 10px 0;
    -webkit-transition: all 0.5s;
}
.pf-ff-section-selected{
    height: 120px;
    border-radius: 10px;
    -webkit-transition: all 0.5s;
}
.pf-ff-section-header{
    line-height: 25px;
    font-size: 12px;
    text-transform: uppercase;
}
.pf-ff-section-content{
    line-height: 15px;
    padding: 10px 0;
}
.pf-ff-section-selected .pf-ff-section-header, .pf-ff-section-header:hover{
   border-bottom: 2px solid #0070d2;
}
.pf-suppress{
    display: none;
}
</cssitem>
        </css>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>

Hope it helps you.

Glenn.