Generate 'Delete with Confirmation' in JHeadstart applications

JHeadstart is one of the tools we use quite successfully here at AMIS. We have written on this blog about JHeadstart and ways to extend, enhance and optimally benefit from JHeadstart many many times. And today is another moment for just such an article. The issue at hand: JHeadstart does not – unlike Oracle Forms for example – have the split between the data manipulation – for example delete record – and commit – save your changes or revert them. JHeadstart generates pages with big, luring DELETE buttons that allow users to delete records. However, once the button is pressed, there is no way back. There is no ‘Are you sure’ moment, there is no explicit, additional commit required. It’s press the big button and off you go.
 
In many cases, that is just fine. It can be incredibly irritating if your application keeps asking you ‘Are you sure? Are you really truly absolutely positively sure?’ Of course I am! I asked for it, didn’t I? However, some delete operations, especially those with far reaching cascade deletes in the background, may require a little additional caution. For those cases, you may want the user to actively confirm that they know what they are about to do and are sure that they really want to do it. This article describes a very simple method for generating that additional confirmation into JHeadstart applications.

The following are the steps for getting this Delete with Confirm implemented:

1. Create a JavaScript library MyUtils.js

2. Import this library in the pageConfig.jspx file

3. Create a new template DeleteWithConfirmButton.vm

4. Associate Groups in the Application Definition file with this template to achieve Delete With Confirm
 

Step 1 – Create a JavaScript library MyUtils.js

A simple JavaScript function is required to ask the "Are you sure" question and return the OK or Cancel result. We want to i18n-ize this question – i.e. make it locale specific. We create a new JavaScript library – MyUtils.js – that leverages the client side messages infrastructure available in JHeadstart:

addMessage("confirmDelete","en", "Are you sure you want to delete this {0}?");
addMessage("confirmDelete","nl", "Weet u zeker dat u dit {0} wilt verwijderen?");
          
function confirmDelete(objectLabel)
{
  var confirmed;
  confirmed = confirm(getMessage("confirmDelete",[objectLabel]));
  if (confirmed)
  {
    return true;
  }
  else
  {
    return false;
  }
}
      

Of course you can add messages in your own language as well.

Step 2 – Import this library in the pageConfig.jspx file

The MyUtils.js library must be available all across the application. We can achieve that by linking it to the pageConfig.jspx page (in public_html\common\regions) that provides the basic outline for all pages in our application:

  <afh:script source="/jheadstart/MyUtils.js"/>
 

Step 3 – Create a new template DeleteWithConfirmButton.vm

In addition to the Delete button currently generated using the DeleteButton.vm template, we want another Delete button that includes the Confirm functionality. We create a template that provides that functionality, by copying the DeleteButton.vm template and making a small modification in the onclick attribute:

onclick="return confirmDelete('${JHS.current.group.displayTitleSingular}');" 

Step 4 – Associate Groups in the Application Definition file with this template to achieve Delete With Confirm