In this scenario, we need two (2) case types for the Parent-Child relationship. For this article, we will use the Auto Loan as the Parent Case Type and the Car Quotes as the Child Case Type.

The challenge is to be able to render the Car Quotes cases (the child case) in a tab on the Case Detail Page of Auto Loan (the parent case type) and the ability to create new child cases from this tab. Before doing so, the Child case needs to have a field with the Case ID of the Parent case.

Obtain the Permanent Code of the Case Type Child

  1. Open the Data Model of the child case (Car Quotes)
  2. On the Properties tab, copy the Permanent Code of the child case type in a notebook (CAR_QUOTES)

Adding the Case ID of the Parent case

  1. Open the Data Model of the child case (Car Quotes)
  2. Add the new Attribute to the Car Quotes case. In our example, we name it AutoLoan_ID (Text).
  3. Save the changes
  4. Run a Deploy to commit all the changes on the MDM model before continue

Create a New Child Search Form

  1. Open the Data Model of the child case (Car Quotes)
  2. Go to the Searches tab
  3. Clone the default search form. In our example, we name it Car Quotes_Auto Loan.
  4. Copy the Permanent Code of the Search Form in a notebook (in our example, CAR_QUOTES_AUTO_LOAN)
  5. Save the new search form
  6. Open the new Search Form
  7. Add the AutoLoan_ID field to the Grid and Search section
  8. Edit the Parent ID field (AutoLoan_ID) and copy the Field Code in a notebook (in our example, CDM_CAR_QUOTES_AUTOLOAN_ID)

  9. Open the Grid Properties and paste the following code into the Custom JS tab

  10. Edit the code and update the attributeCode with the value obtained in the previous step (in our example, CDM_CAR_QUOTES_AUTOLOAN_ID)

    Search Form JS Code

    {
    listeners: {
        afterrender: function(){
            var me = this,
            p = me.up('SearchRuntime'),
            vm = p.lookupViewModel(),
            pnlSearch = p.lookupController().lookupReference('pnlSearchBuilderRuntimeSearch');

            pnlSearch.on('add', function(pnl, cmp, index){
                 // Perm Code of the Parent ID field
                if(cmp.attributeCode === 'CDM_CAR_QUOTES_AUTOLOAN_ID'){
                    cmp.setValue(vm.get('Case.ID'));
                    cmp.setReadOnly(true);
                    cmp.setDisabled(true);
                }
            });
        }
    }
}
    JS
  11. Save the search form

Create the Coded Page to Host the Child Search Page

  1. Navigate to Setup → Forms and Pages → Coded Pages
  2. Create a new Coded Page. In our example, we name it Car Quotes List.
  3. Copy the code below to the new coded page
  4. Save & Close

Coded Page JS Code

var caseId = EcxUtils5.Navigation.qparam("Case_Id");
var mainView = Ext.define(null, {
  extend: "Ext.panel.Panel",
  layout: "fit",
  bodyPadding: 0,
  scrollable: true,
  listeners: {
    reloadWidgetData: function () {
      // call on reload of detail page
      debugger;
      var cmp = this.items.getAt(0);
      if (!cmp) return;
      cmp = cmp.lookupController();
      if (!cmp || typeof cmp.doSearch !== "function") return;
      cmp.doSearch();
    },
  },
  items: [
    {
      xtype: "SearchRuntime",
      height: 500,
      viewModel: {
        type: "SearchBuilder",
        data: {
          // Perm Code of the child Search Page
          ConfigCode: "CAR_QUOTES_AUTO_LOAN",
          // Perm Code of the child Case Type
          CaseTypeCode: "CAR_QUOTES",
          ParentId: null,
          isHiddenSearch: false,
          isHiddenCloseBtn: true,
        },
      },
    },
  ],
});
return mainView;
JS

Add the Custom Widget to the Parent Detail Page

  1. Open the parent Detail Page or clone one
  2. Add a Custom Widget to the tabs
  3. On the Basic Settings, change the Content Type to Coded Page
  4. Set a Tab Title. In our example, Car Quotes
  5. On the Coded Page Settings, select the Coded Page created in the previous step. In our example, Car Quotes List
  6. Save the tab settings
  7. Preview the detail page
  8. Congratulations! You are all set