Sign In
How to add double-click subfile actions to Wings Applications 

This recipe lets you add a double-click action to a work-with-panel's subfile row to invoke a default action on that row. The default action will be one of the actions originally offered for the subfile row. For example, consider a work-with panel where option #2 invokes the update function for the data displayed in the subfile row. By hooking up this recipe, your users can easily get to the update panel just by double-clicking on the subfile row. To add to the user experience  this recipe also dynamically highlights the current row the cursor is hovering over.

The only constraints required to use this recipe is the the record format can only have one subfile on it and it must offer a drop-down set of actions (this accounts for nearly 99% of all record formats using subfiles).

Figure 1 below shows this in action. Double-clicking on the row selected invokes its default action.


Figure 1. Moving the cursor over a row selects it.

Working on the client side

The work done to acheive this double-click action is done on the client-side JavaScript. Only minor change is required to the markup: in the master page, add this line just above the closing </form> tag:

    <asp:ContentPlaceHolder ID="PageScriptPlaceHolder" runat="server" />

This content placeholder provides a place into which JavaScript will be injected into the master page from a content page. In this case, the content page is the page with the subfile on it.

Then in the display's content page add this code.

    <asp:Content ID="Content1" runat="server" ContentPlaceHolderID="PageScriptPlaceHolder">   
        <script type="text/javascript">
        wingsHelpers.subfile.assignDoubleClickAction( "SFL1", SFL1_DOUBLE_CLICK_ACTION_CODE );

The first argument passed to the wingsHelpers.subfile.assignDoubleClickAction() method is the case-senstive alias of the subfile for which you're assigning the double-click action. To get this value, in the design-time view of the ASPX page on which the subfile resides, give the subfile focus and press F4 to see its properties. Its Alias property is shown in the Alias row (as shown below in Figure 2).

 Figure 2. Seeing the subfile's Alias in Visual Studio's properties window.

The DOUBLE_CLICK_ACTION_CODE is provided for readability--to avoid having the "2" look like a magic value in the method call. By convention I name this value the alias of the subfile + "_DOUBLE_CLICK_ACTION_CODE." This value needs to be one of the available options for a subfile row. You can assign actions like this for as many subfiles as necesary in the display file.  

There are four support files you need to use this double-click feature:

  • rpError.css - CSS for error display.
  • jquery.tmpl.min.js - jQuery template add-on (used by rpError.js).
  • rpError.js - a general purpose JavaScript error message display panel.
  • wingsHelpers.subfile.js - JavaScript to invoke the double-click action.

To add these files to your Wings project, create an "OtherAssets" folder under the "Monarch" folder and add folders named "CSS" and "JS" under the OtherAssets folder. Add the files to these folders as shown in the image in Figure 3. Use the "Download code" below link to download these files.

Download code

 Figure 3. Folder structure for the double-click action's support files.

jQuery to the rescue

This double-click action makes extensive use of jQuery. If you've never used jQuery, I highly recommend you spend some time with it. jQuery is a very popular, open source, JavaScript library that actually makes JavaScript fun to code. (Yes, I said "makes JavaScript fun to code."). Explaining jQuery is beyond the scope of this article, but have a look through the wingsHelpers.subfile.js file. It is the model on which we'll be providing several Wings client-side helper routines.


Related Articles
Article Downloads
Article ID: 500 
Category: ASNA Visual RPG; Other ASNA Products 
Applies To:  
Article Date: 4/4/2011