As we all know, workflows are a very powerful capability of RockRMS.  The ability for a user to complete a workflow entry form and submit a request help to automate tasks and improve efficiencies.  Sometimes it would be help to quickly popup a workflow entry form on the current page instead of having to navigate to/from the page that contains the form.  This can easily be accomplished with a little knowledge of bootstrap.

The following screen shots show the before / after of wrapping the Contact Us workflow as a dialog popup.

Prerequisites

Allow Frame Domains

The Rock URL for your site must also be defined in the list of allowed domains.  Please see the Creating a New Site section in Designing and Building Websites documentation for details.

Steps

Step 1: Create Blank Page w/ Form

The modal dialog uses an embedded HTML iframe to display the Workflow Entry block.  To begin, create a dedicated page with a Blank layout.  Disable all display setting.  It is also recommended to create a page route to conveniently reference the page from the iframe.

The following screen shots are from setting up the blank page for Contact Us.

Once the page has been created, add the Workflow Entry block for your workflow.

Step 2: Create Button to Invoke Popup

There are several ways to invoke the modal dialog popup.  This recipe is going to create a button, using bootstrap, that can be placed on a page.  It uses a HTML block that can be placed anywhere on the page.

The following code block was used to display the /ContactUsForm page.

<section class="nav-sub">
    <ul class="nav nav-pills nav-stacked nav-categories">
        <li>
            <!-- Button trigger modal --><button type="button" class="btn btn-default btn-nav btn-block btn-lg text-left" data-toggle="modal" data-target="#iframe-cta-contact-us">                <i class="fas fa-calendar-plus"></i> Contact Us Popup            </button> </li>
    </ul>
</section>
<!-- Modal -->
<div class="modal fade" style="max-width:800px;min-width:600px;width:auto;height:750px;overflow-y:hidden;" id="iframe-cta-contact-us" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document" style="height:100%;width:100%;">
        <div class="modal-content" style="height:100%;width:100%;">
            <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><i class="fas fa-times-circle"></i></span></button>
                <h4 class="modal-title" id="myModalLabel"><i class="fas fa-calendar-plus"></i> Contact Us</h4>
            </div>
            <div class="modal-body" style="height:90%;width:100%;"> <iframe src="/ContactUsForm" style="height:100%;width:100%;"></iframe> </div>
        </div>
    </div>
</div>

A few items to note in the HTML code:

• The label "iframe-cta-contact-us" is used to join the button's action (line 4 'data-target') with the dialog popup (line 8 'id')
• The size of the dialog popup can be defined to customize the fit to the Workflow Entry block being displayed.
• The iframe (line 14) uses the page route is used to invoke the page with the Workflow Entry block.