javascript to open drawer and/or conditionally render row actions based on drawer being opened.

  • 1
  • Question
  • Updated 4 years ago
I'm adding child record in a nested table using drawers. I'd like to be ability to open drawer if it is yet to opened prior to adding a record to the child related table/model.

Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Devil's advocate.  If you can't add materials until the drawer is open,  why do you even have button on the row?  Put the button inside the drawer....
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
hmmm .... yes. Why do I have it as a row action? Table context takes care of which parent to assign.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hey Pat -

I actually had the need for this as well.  There was a community thread a while back that was asking for this.  One of the recent releases added "open/close drawer" to the action framework but it requires that the drawer be defined on that action.  Would be great to see the ability to just "toggle" drawer added as an action framework option.  

In my case, I actually needed to auto open a table row when a new row was added to the model.  To solve for this, I wrote a jquery plugin to trigger the click event of icon in the row that actually contains the drawer.  There are a few ways that this could have been accomplished but this approach lends itself well to both row actions (like your case) and new rows (like in mine).  The jquery extension takes options which allows you to decide drawer you want to open (you could open the 7th drawer in the table if that was your need lol).  Also, you can use it to open drawers in multiple tables at the same time if you so desired.  It's all based on the selector that is passed to the jquery extension.

Here's an inline snippet that should do what you want.  To use this:

1) Create a new JS "inline" resource and copy/paste code below
2) GIve the table on your page a Unique id (the code below uses accountTable but you can use any name.  Just make sure to update the JS
3) GIve the row action that contains the drawer a css class of "drawerhandle"

Sample JS
(function (skuid) {    var $ = skuid.$
        , drawerClass = '.drawerhandle'
    
    $.fn.mynamespace__toggleDrawer = function(options) {
// options
// index = selector (first, last, first-child, last-child, numeric index (eq(index)), etc. 
// to locate and expand - defaults to :first
// don't overwrite originals
options = $.extend({ index: 'first'}, options);
        // get the selector
        var selector = drawerClass + 
        (options.index ? 
        (':' + (skuid.utils.isString(options.index) ? options.index : 'eq(' + options.index + ')'))
        : '');        
        return this.each(function() {
            var self = $(this);    
            $(self).find(selector).trigger('click');
        });
    };
})(skuid);
(function(skuid){
var $ = skuid.$;
skuid.snippet.registerSnippet('openDrawer', function(args) {
   // Note that this doesn't handle situations where a context is provided
        var eventArg = arguments[0]
        , item = eventArg.item
        , element = item && item.element
        , $ = skuid.$;
        $(element).mynamespace__toggleDrawer();
});
skuid.snippet.registerSnippet('handleNewRow', function(args) {
   // need to delay to give skuid time to render elements for new row add to the DOM
        setTimeout(function() {
       $('#accountTable').mynamespace__toggleDrawer();
        }, 15);
});
})(skuid);


Full Sample Page
<skuidpage unsavedchangeswarning="yes" showsidebar="true" showheader="true" tabtooverride="Account">   <models>
      <model id="Account" limit="100" query="true" createrowifnonefound="false" sobject="Account">
         <fields>
            <field id="Name"/>
            <field id="CreatedDate"/>
         </fields>
         <conditions/>
         <actions>
            <action>
               <actions>
                  <action type="custom" snippet="handleNewRow"/>
               </actions>
               <events>
                  <event>row.created</event>
               </events>
            </action>
         </actions>
      </model>
   </models>
   <components>
      <pagetitle model="Account">
         <maintitle>
            <template>{{Model.labelPlural}}</template>
         </maintitle>
         <subtitle>
            <template>Home</template>
         </subtitle>
         <actions/>
      </pagetitle>
      <skootable showconditions="true" showsavecancel="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Account" mode="read" buttonposition="" cssclass="" uniqueid="accountTable">
         <fields>
            <field id="Name" allowordering="true"/>
            <field id="CreatedDate" allowordering="true"/>
         </fields>
         <rowactions>
            <action type="edit"/>
            <action type="delete"/>
            <action type="custom" label="Open Drawer Manually" icon="sk-icon-magic" snippet="openDrawer">
               <drawer title="Drawer Area" width="800" closehandle="true">
                  <components/>
               </drawer>
            </action>
            <action type="drawer" label="View Details" icon="sk-icon-magic drawerhandle">
               <drawer title="Drawer Area" width="800" closehandle="true">
                  <components>
                     <basicfieldeditor showheader="true" showsavecancel="false" model="Account" buttonposition="" mode="read" layout="">
                        <columns>
                           <column width="100%">
                              <sections>
                                 <section title="Section A" collapsible="no">
                                    <fields>
                                       <field id="Name"/>
                                       <field id="CreatedDate"/>
                                    </fields>
                                 </section>
                              </sections>
                           </column>
                        </columns>
                     </basicfieldeditor>
                  </components>
               </drawer>
            </action>
         </rowactions>
         <massactions usefirstitemasdefault="true"/>
         <views>
            <view type="standard"/>
         </views>
      </skootable>
   </components>
   <resources>
      <labels/>
      <css/>
      <javascript>
         <jsitem location="inline" name="drawerSnippets" cachelocation="false" url="">(function (skuid) {
    var $ = skuid.$
        , drawerClass = '.drawerhandle'
    
    $.fn.mynamespace__toggleDrawer = function(options) {
// options
// index = selector (first, last, first-child, last-child, numeric index (eq(index)), etc. 
// to locate and expand - defaults to :first
// don't overwrite originals
options = $.extend({ index: 'first'}, options);
        // get the selector
        var selector = drawerClass + 
        (options.index ? 
        (':' + (skuid.utils.isString(options.index) ? options.index : 'eq(' + options.index + ')'))
        : '');        
        return this.each(function() {
            var self = $(this);    
            $(self).find(selector).trigger('click');
        });
    };
})(skuid);
(function(skuid){
var $ = skuid.$;
skuid.snippet.registerSnippet('openDrawer', function(args) {
   // Note that this doesn't handle situations where a context is provided
        var eventArg = arguments[0]
        , item = eventArg.item
        , element = item &amp;&amp; item.element
        , $ = skuid.$;
        $(element).mynamespace__toggleDrawer();
});
skuid.snippet.registerSnippet('handleNewRow', function(args) {
   // need to delay to give skuid time to render elements for new row add to the DOM
        setTimeout(function() {
       $('#accountTable').mynamespace__toggleDrawer();
        }, 15);
});
})(skuid);</jsitem>
      </javascript>
   </resources>
</skuidpage>
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Thanks Barry. This would've my next solution. I was able to just place global actions on the drawered tables. Since they are in context of the parent row, this is set properly.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Cool, I saw your posts with Rob after submitting mine.  Hopefully it will be helpful to someone else in the community at some point :)

Rob - Would still love to see toggle drawer added as an action :)