APEX 5: Convert Skillbuilder’s Modal to Universal Theme

If you have implemented the Skillbuilder’s Modal Page Plugin in an application of a previous version of APEX, and want to move to the APEX 5 Universal Theme, you will need to make some modifications. If you continue in an older theme, the plugin should continue to work as normal.

Since the APEX 5 Universal Theme has a modal page type, the plugin is no longer needed. The steps below allow you to convert the Skillbuilder’s Modal Plugin to the Universal Theme modal page. The steps outline the changes needed to make to the application, the modal page, and the parent page (the one that calls the modal page).

Application:

Change theme to Universal Theme.

1. Go to Shared Components -> Themes.
2. Click Create Theme.
3. Select  From the Repository, then click Next.
4. Choose User Interface Desktop, then click Next.
5. Select Theme Type Standard Themes, Theme Universal Theme, click Next.
6. Click Create.
7. After theme is created select Switch Theme.
8. Select the current theme in the top select list and the Universal Theme in the bottom select list.
9. Depending on your application select a Reset Grid option. Click Next.
10. On the Verify Compatibility page, make the necessary adjustments for your page and click Next.
11. Click Switch Theme.

The Universal Theme should now be the current theme of your application.

Modal Page:

1. Page Attributes
   1. Change page mode to Modal Dialog.
   2. Change Dialog Template to Modal Dialog.
      
2. Cancel Button
   1. Change Action to Defined By Dynamic Action.
   2. Add a dynamic action on click of the cancel button, with a true action of Cancel Dialog.
      
3. Page Processes and Branches
   1. Add a new page process of type Close Dialog, to fire after any database activity/row processing is done. Include a success message if desired.
      
   2. Remove any branches from the modal page. They are no longer needed.

Parent Page

1. Remove Dynamic Actions
   If you followed my previous post, the parent page will have three dynamic actions to handle the Skillbuilder’s Modal page: One that fires on the Create button, one that fires on the report’s edit link, and one that handles the Auto Close of the modal in order to refresh the report on the parent page.
   All dynamic actions that have to do with the plugin will need to be removed.
2. Create Button
   1. The create button that opens the modal to a new, empty record. Change  the Behavior -> Action to Redirect to Page in this Application. Reference the modal page number and also clear the cache for that page. In this example the modal page number is 2.
      
3. Edit Links
   In this example there is a report on the EMP table. Each row of the report contains an edit link which opens the modal page (2) to allow editing of the data. In my previous blog post I explained the changes you have to make in order to make the Skillbuilder’s Modal to pop-up. We now need to undo these changes and use the new APEX 5 methodology. In this example, the edit link exists on the EMPNO column.
   1. Remove the Link Attributes from the column link.
   2. Change the Link Target to navigate to the modal page (2) and set the modal page’s primary key (EMPNO).
      
4. Dynamic Actions to handle report refresh on modal close.
   Create a dynamic action that fires on the new Dialog Closed event. This action needs to be attached to the report region.
   1. Right-click on the report region and select Create Dynamic Action from the context menu.
      
   2. Add a true action to refresh the report.
      
5. Dynamic Action to handle the success message on modal close.
   To do this we need some JavaScript to capture the success message, and create a new div to display the message on the parent page.
   1. Right-click on the report region and select Create Dynamic Action from the context menu.
      
   2. Create a true action of type JavaScript to display the success message. Add the following code to the true action:

      [sourcecode language=”javascript”]//Capture success message
      var lSuccessMsg;

      if ( this.data.successMessage ) {
      lSuccessMsg = this.data.successMessage.text;
      } else {
      /* Fallback for 5.0.0 */
      lSuccessMsg = unescape(this.data.APEX_SUCCESS_MESSAGE);

      //Remove checksum
      lSuccessMsg = lSuccessMsg.substr(0,lSuccessMsg.indexOf(‘/’));
      }

      //Construct HTML to emulate standard success message alert
      var successHTML;

      successHTML = ‘<div class="t-Body-alert" id="customSuccessMessage">’;
      successHTML += ‘ <div class="t-Alert t-Alert–defaultIcons t-Alert–success t-Alert–horizontal t-Alert–page t-Alert–colorBG is-visible" id="t_Alert_Success" role="alert">’;
      successHTML += ‘ <div class="t-Alert-wrap">’;
      successHTML += ‘ <div class="t-Alert-icon">’;
      successHTML += ‘ <span class="t-Icon"></span>’;
      successHTML += ‘ </div>’;
      successHTML += ‘ <div class="t-Alert-content">’;
      successHTML += ‘ <div class="t-Alert-header">’;
      successHTML += ‘ <h2 class="t-Alert-title">’+lSuccessMsg+'</h2>’;
      successHTML += ‘ </div>’;
      successHTML += ‘ </div>’;
      successHTML += ‘ <div class="t-Alert-buttons">’;
      successHTML += ‘ <a href="javascript:void(0);" onclick="$(\’#customSuccessMessage\’).remove();" class="t-Button t-Button–noUI t-Button–icon t-Button–closeAlert" type="button" title="Close">’;
      successHTML += ‘ <span class="t-Icon icon-close"></span>’;
      successHTML += ‘ </a>’;
      successHTML += ‘ </div>’;
      successHTML += ‘ </div>’;
      successHTML += ‘ </div>’;
      successHTML += ‘</div>’;

      // Display Success Message
      $(‘#t_Body_content’).after(successHTML);[/sourcecode]

All the pieces should now be in place to have the Universal Theme modal windows behave like the Skillbuilder’s Modal Plugin.