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

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…

hmmm … yes. Why do I have it as a row action? Table context takes care of which parent to assign.

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;&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>

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.

Cool, I saw your posts with Rob after submitting mine.  Hopefully it will be helpful to someone else in the community at some point 🙂