Sunday, April 28, 2013

How to display a warning message on the CRM form

We use JavaScript for client side validation on CRM forms. Mostly we use the pop up message box (JavaScript alert function) to display the error/warning messages. The user has to press ok to proceed. If the validation code is running on the formload event then the system will keep poping up the message box everytime the user opens up the record unless the problem is fixed. But if you just want to display a warning message without forcing the user to press ok and fix the problem immediately.

The post is about displaying a warning message without the pop ups.  This solution will display a warning message if the field failed the validation. This does not require any immediate response from the user.

Here is the screen shot of the warning message on account form.
image
For this solution we need 3 web resources
  1. An Image web resource (warning or ! image in front of the message)
  2. A HTML web resource
  3. A JavaScript web resource
You can download the solution containing these web resources from here. Download the solution and publish it.
Here are steps to add the warning message to an account entity form.
  • Open the account entity form in a customise view.
  • Add a new section to the general on the form and move it to the top of the tab. Make sure the name of the tab is “general” and the name of section is “sect_alert_notification” as shown in the screen shot. We are using the tab and the section  name in the JavaScript  web resource.

    image
  • Add the “Notification.HTML” web resource to section. The following screen shots display  the properties of the web resource.

    image
    image
  • Add the “new_Notification.JS” JavaScript web resource to the entity form
  • Call the ShowNotification function on formload event and on onchange event of field you are validating.
    image
  • Update the validation code as required in "ShowNotification” function.
    function ShowNotification() 
    { 
        var Validated= false;
        // Add Validation code Here     
    
    
        if (Validated==false)
         {  
            Xrm.Page.ui.tabs.get("general").sections.get("sect_alert_notification").setVisible(true);
           
        }
       else
       {
          Xrm.Page.ui.tabs.get("general").sections.get("sect_alert_notification").setVisible(false);
       }
    }
    
  • Publish the customisation and test the solution.
Thanks to my colleague Russel Devine for the code. Please leave the feedback as required.

6 comments:

  1. Hi,

    This is just what I am looking for. I have got everthing working to the point where I need to enter the validation code but being a complete noob to Java I'm struggling. I have a custom field on the form that will contain one of three text values and I need the warning to be displayed when it matches two of them but not for the third. Can anyone point me in the right direction please?

    Thanks,
    Eric

    ReplyDelete
  2. var textValue = Xrm.Page.getAttribute("attributeNameOfCustomField").getValue();

    if(textValue == "noWarningTextValue"){
    Validated = true;
    }
    else{
    Validated= false;
    }

    ReplyDelete
  3. Great works a treat

    Thanks ^_^

    ReplyDelete
  4. This is great thanks. I need my validation code to be based on a boolean field on the form. Could anyone help me with this please?

    Thank you.

    ReplyDelete
    Replies
    1. I tried this but it didn't work:

      function ShowNotification()
      {
      //debugger;
      var Validated= false;

      var attributeValue = Xrm.Page.getAttribute('new_ActiveIssue').getValue();
      if (attributeValue == true){
      Validated = true;
      }
      else{
      Validated = false;
      }

      if (Validated==false)
      {
      //replace the name of the tab and the section as required
      Xrm.Page.ui.tabs.get("general").sections.get("sect_alert_notification").setVisible(true);

      }
      else
      {
      //replace the name of the tab and the section as required
      Xrm.Page.ui.tabs.get("general").sections.get("sect_alert_notification").setVisible(false);
      }
      }

      Delete
    2. Try to debug the code and run it line by line.

      Delete