Handling UI events

For the instances where you need to block the form from getting saved due to a user input error I have mentioned briefly, it's always a good idea to return a message to the user and notify them of the reason for such a decision. The option specified results in returning an alert message to the user.

In other situations, you will find that posting a message on the form itself can be much more efficient. For one, it does not require an additional click of the mouse. Also, you can create a tally of all the messages, and display them all in one single spot, formatted to stand out.

Note

This recipe describes a customization approach that is not officially supported. The reason for this is that referencing the form elements is done outside of the standard Dynamics CRM object model. We are using the HTML/JavaScript page object model. Even though it's not officially supported, this type of customization has been available and functional since version 4.0.

Getting ready

For the purpose of this recipe, we will be either reusing any one of the previous solutions or creating a new one. We will be making our changes on the Contact form. For simplicity, we will only validate a single field, and return an error message on the form. You can later expand that functionality to incorporate validation of multiple fields, and return all the custom error messages in the same dialogue box on the form.

How to do it...

To handle UI events perform the following steps:

  1. Open the Contact main form for editing.
  2. Create a new custom field named Message (new_message) of the type Two Options.
  3. Add it to the form.
  4. Create a new single line of text field named Placeholder (new_placeholder).
  5. Place it on the form all the way at the top of the Name section of the General tab. Set its Formatting to Two Columns.
  6. Modify the field's properties. Uncheck the Display label on the form checkbox, as shown in the following screenshot:
    How to do it...
  7. Save and publish the form.
  8. Add a new JScript web resource, named JS Message Box (new_JSMessageBox).
  9. Add a function that will launch on the form's load, named contactLoad. This function will hide the Placeholder field we have created. The purpose of the Placeholder field is to define the location where our custom message will be displayed on the form:
    function contactLoad()
{
  var _placeholder = document.getElementById("new_placeholder");
  _placeholder.style.display = "none";
}
  10. Add the following function, which sets the display message:
    function ShowMessage()
{
    var _placeholder = document.getElementById("new_placeholder");

    if(_placeholder != null)
    {
      var _newDiv = document.createElement("div"); // style='overflow-y:auto; height:80px; border:1px #6699cc solid; background-color:#ffffff;' />");
      _newDiv.id= 'divMessage';
      _newDiv.innerHTML = "<label style='font-family:arial;color:red;font-size:20px'>Field Message must be set to No to be able to save the form!</label>";
      _placeholder.style.display = "none";
      var _previous = _placeholder.firstChild;
      if(_previous == null)
      {
        if(_placeholder.childNodes.length == 0)
        {
          _placeholder.parentNode.appendChild(_newDiv);
        }
        else
        {
          _placeholder.insertBefore(_newDiv, _previous);
        }
      }
      else
      {
        _placeholder.replaceChild(_newDiv, _previous);
      }
    }
}
  11. Add a base function that does the processing and determines when to show the message, and possibly, other logic:
    function message(context)
{
  var _isMessage = Xrm.Page.getAttribute("new_message").getValue();
  if(_isMessage)
  {
    ShowMessage();
    // other logic here
  }
}
  12. Save and publish your web resource.
  13. In the Contact main form properties, associate the contactLoad function to the form OnOpen event.
  14. Also on the Contact main form associate the function message to the OnSave event. You can alternatively associate this function at a field level if you want to do field validation and bring a message for invalid field value.
  15. Save and publish your solution.
  16. Test your solution. The result will look similar to the following screenshot:
    How to do it...

How it works...

As mentioned previously, this customization falls in the unsupported category. The reason is that objects are accessed using standard HTML/JavaScript DOM and not the Dynamics CRM API. Although unsupported, this kind of customization has been used since previous versions of Dynamics CRM, and as long as the HMTL/JavaScript standards are being supported, it will work.

There's more...

Message location is something you can easily determine by positioning your Placeholder field on the form at any location. For the purpose of this example, we have positioned the message at the top of the form, but that is not a mandatory location. Also, we have defined the placeholder to span the whole width of the page. You can decide to show the message only in one column if you desire so.

See also

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.135.186.12