This discussion is archived
5 Replies Latest reply: Jan 7, 2013 7:52 AM by svk1965 RSS

open Skillbuilders modal page from report

894695 Newbie
Currently Being Moderated
I want to open the Skillbuilders modal page from within a report. The first column in a report represents the primary key of the table the report shows. What is the best way to do that?

The idea is this: in the report region, there's a button CREATE that opens the modal dialog by Skillbuilders. A user can enter some data, clicks submit, modal dialog closes and report is refreshed. That's working now. Now I want to add a link to the first column in the report, that also opens the modal dialog, passing the value of the primary key of the row the user clicks on.

I'm not that experienced with Javascript, I guess I'll have to create an dynamic action with a jquery selector, and as a true action, a javascript call to open the dialog. Can someone give me a start?

Thanks in advance!
  • 1. Re: open Skillbuilders modal page from report
    954839 Newbie
    Currently Being Moderated
    A Dynamic action can be a good solution:

    - I would give the buttons a classname like 'myLinkButton'
    - To make it easy, also give the column with the primary key a classname like 'myKey'
    - Then create a Dynamic action using the button class as selector (best use live binding when working with a report)
    .myLinkButton
    // or
    #myReportId .myLinkButton //If using the same button class on multiple reports
    - Then u can add an (javascript) action to set a page item with the id like this
    /*
    this.triggeringElement => gives back the button 
    .closest('tr') => gives back the button's row
    .find('.myKey') => gives back the column with the key (also can use the selector 'td[header="headerName"]', then you don't need to give a classname)
    .text() => gives the text within the selected column.
    */
    var key = $(this.triggeringElement).closest('tr').find('.myKey').text();
    // then you can use the $s function to set the value of an hidden pageitem.
    - Then open the modelpage using the page item to set the id. Use &page_item_id. to pass it in the URL.
  • 2. Re: open Skillbuilders modal page from report
    Tom Petrus Expert
    Currently Being Moderated
    You actually do not need that much javascript in this case. Simply design your column as you would normally do to create a link column.
    <ul>
    <li>Column Link: Provide a link text</li>
    <li>Link Attributes:
    onclick="return false;" class="show_modal"
    </li>
    <li>Set the target page and provide any items you want filled.</li>
    </ul>
    onclick="return false;" is to prevent the default behaviour of the anchor tag: navigate to the location specified in the href attribute. We want to open the modal page instead.

    Now to have the modal dialog open, create a dynamic action.
    <ul>
    <li>Event: Click</li>
    <li>Selection Type: jQuery Selector</li>
    <li>jQuery Selector:
    .show_modal
    </li>
    <li>Advanced > Event Scope: live (so the links will work after pagination)</li>
    </ul>

    For the true action, select the SkillBuilders Modal Page plugin, and make sure these are specified as following. This will take the location in the generated link columns and open a modal page for this location.
    So, this would open your edit page with the correct id (which you set up in the column link).
    </ul>
    <li>URL Location: Attribute of Triggering Element</li>
    <li>Attribute Name: href</li>
    </ul>

    If you set it up like this, you have the convenience of the standard column link definitions, no need for any javascript save onclick=false and no need to fill up page items and deal with submission to session state.
  • 3. Re: open Skillbuilders modal page from report
    894695 Newbie
    Currently Being Moderated
    Hi Tom,

    Briliant sollution! I didn't notice the attribute 'url location'. But that's a very neat way of opening the modal page plugin. It works!

    Thanks!
  • 4. Re: open Skillbuilders modal page from report
    894695 Newbie
    Currently Being Moderated
    Dan McGhan has made a webinar about the modal plugin and how to use it. The sollution above is explained there and a lot more options. A must see if you want to use this plugin! He explains a lot more then the documentation states.
    url: http://www.skillbuilders.com/webinars/webinar.cfm/53?title=Introducing%20SkillBuilders%20Modal%20Page%20Plug-in

    It is based on v1.0.0 of the plugin, but still valid voor v2.0.0.
  • 5. Re: open Skillbuilders modal page from report
    svk1965 Newbie
    Currently Being Moderated
    Hi,

    I followed the .show_modal method in this thread and it works great. But, can anyone tell me: how do I refresh the parent after the modal has closed?

    Thanks, Scott

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points