How To Add a Custom Rule in MDM Forms

The MDM Form Builder allows the addition of Custom Rules to fields, adding Actions when some data changes in that field.

In this example, the rule will change the color of the Label based on the selection of a dropdown list.

We add a Dictionary for the colors to the Auto Loan Case Type.

Then we add this dictionary to the Auto Loan case and assign the "Pick a Color" name and select the Color List category.

In Form Builder, we need to add the new field manually to the form, select the Pick a Color from the Business Object Fields.

Please take note of the Code associated with this field (PICK_A_COLOR_ID) as we'll use it in the code of the custom rule.

The other Code we will need if the one from the Credit Score (CDM_AUTO_LOAN_CREDIT_SCORE) which the custom rule will change the color.

Click the Edit Form rules button (1), add a new Custom Rule (2)

Select the Condition Field (3) that will be used in the code. In our example, we will use the Pick a Color.

Custom Rule Code

function (viewForm, bindObj, arrUIElements) {
  /*temporary function you can add to GlobalJS if you want*/

  var CUST_syncLabelWithReq = function (colorStyle) {
    console.log('Function called -->', colorStyle);
    //     "type": "field",
    //     "title": "Credit Score",
    //     "attributeCode": "CDM_AUTO_LOAN_CREDIT_SCORE",
    //     "ref": "ref_CDM_AUTO_LOAN_CREDIT_SCORE"
    var tpl = ' <span class="req" style="color:' + colorStyle + '">Score Needed</span>';
    var txtCreditScore = viewForm.lookupReference('ref_CDM_AUTO_LOAN_CREDIT_SCORE');
    if (!txtCreditScore) {
      console.log('Field not rendered');
      return;
    }
    var rawFieldLabel = txtCreditScore.fieldLabel.replace(' <span class="req" style="color:' + colorStyle + '">Credit Score</span>', '');
    console.log('Color -->', colorStyle, 'New Label Style -->', tpl);
    txtCreditScore.setFieldLabel(tpl);
  }
  /*======================================*/

  try {
    //     "type": "field",
    //     "code": "reference",
    //     "title": "Pick a Color",
    //     "ref": "ref_PICK_A_COLOR_ID",
    //     "attributeCode": "PICK_A_COLOR_ID",
    //     "referenceDetailName": "PICK_A_COLOR_NAME",
    
     var cmbPickColor = viewForm.lookupReference('ref_PICK_A_COLOR_ID');
      if (!cmbPickColor) {
          console.log('Field not rendered');
          return;
      }

      var dictStore = cmbPickColor.getStore(); //do dictStore.getRange() to see all records
      //get code ID
      var colorId = bindObj['PICK_A_COLOR_ID'];
      var mediumRec = dictStore.findRecord('ID', colorId);
      if (!mediumRec) {
          console.log('Record not found');
          return;
      }
      var colorName = mediumRec.get('NAME');   // 'Red'
      var colorCode = mediumRec.get('CODE');   // 'RED'
      console.log('Color Selected: ', colorName, colorCode);

    //     "type": "field",
    //     "title": "Credit Score",
    //     "attributeCode": "CDM_AUTO_LOAN_CREDIT_SCORE",
    //     "ref": "ref_CDM_AUTO_LOAN_CREDIT_SCORE"

      switch (colorName.toUpperCase()) {
      case 'RED':
        console.log('Option RED ', colorName, colorCode);
        CUST_syncLabelWithReq(colorCode);
        break;
      case 'BLUE':
        console.log('Option BLUE ', colorName, colorCode);
        CUST_syncLabelWithReq(colorCode);
        break;
      default:
        console.log('Option DEFAULT ', colorName, colorCode);
        CUST_syncLabelWithReq('BROWN');
      }
  } catch (err) {
      console.log(err);
  }
}

JS

The function receives three variables from the ExtJS framework: viewForm, bindObj, and arrUIElements. The purpose of these variables is explained in the table below:

Variable	Purpose
`viewForm`	ExtJs panel that contains the MDM Form
`bindObj`	Array of current values of fields selected in the "Condition Fields" section
`arrUIElements`	List of all UI elements in the MDM Form

The general idea is to use the ID of the selected color to look up the CODE value in the combo box's store (Dictionary). In the example below, we will make the "Credit Score" field depend on the "Pick a Color" value.

Using the viewForm parameter, the code retrieves the object of the Pick a Color field.

var cmbPickColor = viewForm.lookupReference('ref_PICK_A_COLOR_ID');

Using the bindObj parameter, the code retrieves the selection of the Pick a Color field:

var colorId = bindObj['PICK_A_COLOR_ID'];

var mediumRec = dictStore.findRecord('ID', colorId);

var colorCode = mediumRec.get('CODE'); // 'RED'

Using the CODE we select the color to change the Credit Score field.

var tpl = ' <span class="req" style="color:' + colorStyle + '">Score Needed</span>';

var txtCreditScore = viewForm.lookupReference('ref_CDM_AUTO_LOAN_CREDIT_SCORE');

txtCreditScore.setFieldLabel(tpl);

This will result in the following runtime scenario: