In the previous recipes of this chapter we have seen some examples on working with the form UI based on either a predefined rule on form load, or on a field's onchange event. This example will focus on putting it all together in order to achieve a comprehensive result that actually can satisfy a realistic business rule.
Let's go back to the solution that we have worked with in the previous recipe. We will be using the same Contact form to implement this example. Following the Form load event usage recipe described earlier in this chapter, we can easily realize that it only works first time when the user loads a contact. How about if the user changes a value on the form? We have touched on the functionality a little bit in the following recipes, but let's put it all together now.
The following is what we want to achieve:
- When a user opens a contact, if the contact is marked as special customer, we want to collect additional information about him/her.
- When a user opens a contact that is not marked as special customer, we want to hide the additional fields.
- When a user changes a contact from special to not special or back, we want the form to dynamically show or hide the fields.
Up until now, the first two conditions are met by the recipe described earlier. Now let's focus on the third requirements.
- Open your existing solution from the first recipe in this chapter.
- Open your JScript web resource in which you added the other functions.
- Add the following new function to this resource:
function ChangeCustomer() { var _isSpecialSelection = null; var _isSpecial = Xrm.Page.getAttribute("new_isspecialcustomer"); if(_isSpecial != null) { _isSpecialSelection = _isSpecial.getValue(); } if(_isSpecialSelection == false) { // hide the Special Customer tab Xrm.Page.ui.tabs.get("tab_5").setVisible(false); // hide the Customer Classification field Xrm.Page.ui.controls.get("new_customerclassification").setVisible(false); // hide the Partner field Xrm.Page.ui.controls.get("new_partner").setVisible(false); } else if(_isSpecialSelection == true) { // show the Special Customer tab Xrm.Page.ui.tabs.get("tab_5").setVisible(true); // show the Customer Classification field Xrm.Page.ui.controls.get("new_customerclassification").setVisible(true); // show the Partner field Xrm.Page.ui.controls.get("new_partner").setVisible(true); } } - Associate this function with the OnChange event of the Is Special Customer field, as shown in the following screenshot:
- Save and Publish your solution.
- Test your script by opening a contact, and changing the Is Special Customer value from Yes to No and back. You will observe the Special Customer tab being shown and hidden as you change the value, as well as the other two fields.
Taking a closer look at the function presented earlier, there are really a handful of actions we take.
- First off, we begin by declaring our temporary variable that will store the value of the Is Special Customer field. This being a two-options field, we expect back a
True/Falsevalue. We set this tonull, note that if it does not get assigned we can skip execution of any other code:var _isSpecialSelection = null;
- On the next line, we get a reference to the form field:
var _isSpecial = Xrm.Page.getAttribute("new_isspecialcustomer"); - In the next section, we check to make sure that our form field reference indeed found a field on the form, and we get the value of that field into the first variable we declared:
if(_isSpecial != null) { _isSpecialSelection = _isSpecial.getValue(); } - Based on the value retrieved from the form field, we can start to act on other form elements. Observe that first we check if the value is
false, and then we hide the Form tab and fields:if(_isSpecialSelection == false) { // hide the Special Customer tab Xrm.Page.ui.tabs.get("tab_5").setVisible(false); // hide the Customer Classification field Xrm.Page.ui.controls.get("new_customerclassification").setVisible(false); // hide the Partner field Xrm.Page.ui.controls.get("new_partner").setVisible(false); } - Then we check if the value is
trueso we can show these elements back to the user:else if(_isSpecialSelection == true) { // show the Special Customer tab Xrm.Page.ui.tabs.get("tab_5").setVisible(true); // show the Customer Classification field Xrm.Page.ui.controls.get("new_customerclassification").setVisible(true); // show the Partner field Xrm.Page.ui.controls.get("new_partner").setVisible(true); }
If the value is not assigned, and it remains null as we defined it at the beginning, we do not execute any code. If there is a requirement to execute an action for that case, you can easily add another else if block at the end.
A few things we have to be aware of when designing our forms include the following aspects:
Working with form elements in Dynamics CRM assumes that all these fields are precreated and added to the forms. You cannot dynamically create new form fields and add them.
While this might not catch your attention right away, depending on where you drop your field on the form, after a while you will observe that when you hide a field, the remaining fields underneath do not rearrange automatically. This is because, while you have your field hidden, it still exists on the page at that specified location.
When designing your page, arrange your individual fields that you will hide in such a way so that when you hide one, it does not leave an obvious gap on the form. Either place them at the bottom of a section or tab, or place them in such an order that while you start showing them, they get added at the bottom of the previous one. This works in a case where you have a business progression expected, and you display items on the form as you progress through phases predefined.
- For additional references on using form programming, see the following MSDN article: