6 Modal Dialog for Workflow Entry Shared by Dennis OFlynn, Archdiocese of Detroit 3 years ago 9.2 Web Intermediate 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. Workflow Entry as a Page Workflow Entry as a Popup PrerequisitesAllow Frame DomainsThe 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.
Kenyon Ozanne Reply 3 years ago (edited 3 years ago) Two suggestions I have:Remove all of the style tags you have in the modal HTML except for the "iframe" div container. A majority of the styles where width and height are set to 100% do not have an effect on the outcome. Also, by inline styling the width and height sizes of the entire modal overrides the responsive coding on mobile devices. Users have to scroll left or right to close or submit forms. Let Bootstrap take care of the responsiveness of the modal.If you want to show the entire embedded page (or more of it) without having the scroll bar inside of the modal, you have to specify the height in the "modal-body" inline style while including !important to force the height. The user will be allowed to scroll down the modal (without showing a scroll bar in the modal itself).Here is what the code would look like:<div class="modal fade" id="iframe-cta-contact-us" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog modal-lg" role="document"><div class="modal-content"><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-praying-hands" style="padding-right: 5px;"></i>Prayer Requests</h4></div><div class="modal-body" style="height: 500px !important;"><iframe src="~/page/812" style="height:100%;width:100%;"></iframe></div></div></div></div>