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

Pat VachonPat Vachon 💎💎💎
edited June 25, 2020 in Questions
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.






Comments

  • Rob HatchRob Hatch 🛠️ 
    edited September 1, 2016
    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....
  • Pat VachonPat Vachon 💎💎💎
    edited June 25, 2020
    hmmm .... yes. Why do I have it as a row action? Table context takes care of which parent to assign.
  • Barry SchnellBarry Schnell 💎💎
    edited June 25, 2020
    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>

  • Pat VachonPat Vachon 💎💎💎
    edited January 5, 2016
    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.
  • Barry SchnellBarry Schnell 💎💎
    edited November 18, 2016
    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 :)
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!