The Billing Care SDK includes samples that you can use for developing your own customizations in the SDK_home/samples/BatchGridCustomization/web/custom/viewmodels/CustomBatchPaymentViewModel.js directory, where SDK_home is the Billing Care SDK installation directory.

To create a custom view model for adding a custom column:

1. Create a new project dedicated to your customization. See "Setting Up a Billing Care Customization Project" for more information.

2. Create a CustomBatchPaymentViewModel.js file to extend the default functionality.

3. Implement the util.gridFields function to define the new custom column. Within this function, specify the column name (key), applicable batch types (batchType), and any additional relevant details.

   For example:

   util.gridFields : function(){
     let startFixedFields = [
       {key:'PIN_FLD_CUSTOM_COLUMN',batchType:[BATCH_TYPE_PAYMENT,BATCH_TYPE_REFUND,BATCH_TYPE_REVERSAL]},
       {key:'PIN_FLD_ACCOUNT_NO',batchType:[BATCH_TYPE_PAYMENT,BATCH_TYPE_REFUND,BATCH_TYPE_REVERSAL]},
       {key:'PIN_FLD_BILL_NO',batchType:[BATCH_TYPE_PAYMENT,BATCH_TYPE_REFUND]},
       {key:'PIN_FLD_PAYMENT_TRANS_ID',batchType:[BATCH_TYPE_REVERSAL]},
       {key:'PIN_FLD_PAYMENT_AMOUNT',batchType:[BATCH_TYPE_PAYMENT,BATCH_TYPE_REFUND,BATCH_TYPE_REVERSAL]} ,
       {key:'PIN_FLD_DUE',batchType:[BATCH_TYPE_PAYMENT]}, {key:'PIN_FLD_END_T',batchType:[BATCH_TYPE_REVERSAL]}];
     let endFixedFields = [
       {key:'PIN_FLD_CHANNEL_ID',batchType:[BATCH_TYPE_PAYMENT]}, 
       {key:'PIN_FLD_STATUS',batchType:[BATCH_TYPE_PAYMENT]},
       {key:'PIN_FLD_DESCR',batchType:[BATCH_TYPE_PAYMENT,BATCH_TYPE_REFUND,BATCH_TYPE_REVERSAL]}, 
       {key:'STATUS',batchType:[BATCH_TYPE_PAYMENT,BATCH_TYPE_REFUND,BATCH_TYPE_REVERSAL]},
       {key:'STATUS_DESCRIPTION',batchType:[BATCH_TYPE_PAYMENT]},
       {key:'PIN_FLD_REASON_ID',batchType:[BATCH_TYPE_PAYMENT]},
       {key:'ALLOCATION',batchType:[BATCH_TYPE_PAYMENT]},
       {key:'DEFERRED_ALLOCATION',batchType:[BATCH_TYPE_PAYMENT]},
       {key:'PIN_FLD_FIRST_NAME',batchType:[BATCH_TYPE_PAYMENT,BATCH_TYPE_REVERSAL]},
       {key:'PIN_FLD_LAST_NAME',batchType:[BATCH_TYPE_PAYMENT,BATCH_TYPE_REVERSAL]}];
     return {startFixedFields,endFixedFields};
   }
   

   This example defines a column named PIN_FLD_CUSTOM_COLUMN applicable to all batch types (payments, refunds, and reversals). You can modify the batchType array to restrict the column's visibility.

4. Create CustomBatchPaymentCreateBatchViewModel to add a new column in the Create Batch window. In batchRecordMap, add a new column customColumn in the BATCHRECORD_COLUMNS array with your new column name as the value, for example, PIN_FLD_CUSTOM_COLUMN. This field will be applicable for all types of batch payments, refunds and reversals. You can update this array and map based on your specific requirements.

   self.BATCHRECORD_COLUMNS = ["accountNumber", "amount", "allocationDeferred", "payInfo", "billNumber","channelId","paymentId","customColumn"];
   self.batchRecordMap = new Map([
       ["accountNumber", "PIN_FLD_ACCOUNT_NO"],
       ["amount", "PIN_FLD_PAYMENT_AMOUNT"],
       ["allocationDeferred", "DEFERRED_ALLOCATION"],
       ["billNumber", "PIN_FLD_BILL_NO"],
       ["channelId","PIN_FLD_CHANNEL_ID"],
       ["comment","PIN_FLD_DESCR"],
       ["paymentId", "PIN_FLD_PAYMENT_TRANS_ID"],
       ["customColumn","PIN_FLD_CUSTOM_COLUMN"]
   ]);

5. You can customize the resource bundle. For more information, see "Customizing the Resource Bundle". Following is a sample trans-unit element for the configuration in this section.

   <group id="batchPaymentCreateBatch" restype="batchPaymentCreateBatch">   
           <trans-unit id="PIN_FLD_CUSTOM_COLUMN" translate="yes">  
                  <source>PIN_FLD_CUSTOM_COLUMN</source> 
                  <target>customColumn</target>   
           </trans-unit>
   </group>

6. If you want to make the custom column available in the REST API, modify the XSD file to reflect the added column. See "Adding the XSD and JSON Files to NetBeans Project" for more information on adding the files to your project.

Create a custom module entry in the customRegistry.js file to add custom columns during batch creation or template creation in Batch Payments in Billing Care.

A sample customRegistry.js file is provided in the SDK_home/samples/BatchGridCustomization/web/custom directory, where SDK_home is the Billing Care SDK installation directory. Use this sample to create the customRegistry.js file for your custom view model.

To add an entry in the customRegistry.js file:

1. Create a customRegistry.js file in myproject/web/custom by copying the reference registry file.

2. Specify to use your custom view model. For example:

   batchPayment: {
       viewmodel: '../custom/viewmodels/CustomBatchPaymentViewModel'
   },

3. Close and save the customRegistry.js file.

The Billing Care SDK includes samples that you can use for developing your own customizations in the SDK_home/samples/BatchGridCustomization/web/js/viewmodel/CustomPaymentSearchViewModel.js directory, where SDK_home is the Billing Care SDK installation directory.

To create a custom view model for custom payment search:

1. Create a new project dedicated to your customization or use your existing customization project. See "Setting Up a Billing Care Customization Project" for more information.

2. Create a CustomPaymentSearchViewModel.js file to extend the default functionality.

3. Override the initialize function to modify the search field behavior. Within this function, customize a specific search field to incorporate the drop-down list functionality.

   For example:

   self.initialize = function () {
     var idx = 0;
     if (self.payType() !== CC_TYPE_PAYMENT && self.payType() !== DD_TYPE_PAYMENT) {
         for (var index = 0; index < self.paymentSpecificColumns().length; index++) {
             if (self.paymentSpecificFields()[index].includes("PIN_FLD_EFFECTIVE_T") || 
                 self.paymentSpecificFields()[index] === "PIN_FLD_REASON_CODE") {
                 continue;
             }
             let type = 0;
             let dataProvider = [];
             if (self.paymentSpecificFields()[index] === "PIN_FLD_BANK_CODE") {
                 type = 1;
                 dataProvider = [
                     { "label": "0001",
                       "value": "0001" },
                     { "label": "0002",
                       "value": "0002" },
                     { "label": "0003",
                       "value": "0003" },
                     { "label": "0004",
                       "value": "0004" },
                     { "label": "0005",
                       "value": "0005" },
                     { "label": "0006",
                       "value": "0006" }];
             }
             self["observable" + idx.toString()] = ko.observable("");
             batchColumnDataProvider.push({
                value: self.paymentSpecificColumns()[index].toLowerCase().replace(/ /g, "_") + idx.toString(), 
                label: self.paymentSpecificColumns()[index], 
                type: type, 
                observableVariable: self["observable" + idx.toString()], 
                dataProvider: new oj.ArrayDataProvider(dataProvider, {keyAttributes: "label"})
             });
             idx++;
           }
       }
     self.paymentColumnsDataProvider(new oj.ArrayDataProvider(batchColumnDataProvider, {keyAttributes: "value"}));
   };    
   
   

   This example demonstrates how to modify the PIN_FLD_BANK_CODE field to display as a drop-down list. By setting the "type" to "1" and providing a "data-provider" with a list of options, you can populate the drop-down with the desired values.

4. If you want to make the custom column available in the REST API, modify the XSD file to reflect the added column. See "Adding the XSD and JSON Files to NetBeans Project" for more information on adding the files to your project.

To customize the appearance of the custom drop-down list, override the payment search CSS styles:

1. Create a custom overrides.css file in the myproject/web/custom/css directory. You can find a sample file in the SDK_home/samples/BatchGridCustomization/web/custom/css directory.

2. To define styles to customize the appearance and behavior of the drop-down list, add CSS similar to the following:

   .search-overlay {
     border: 1px solid;
     bottom: 0;
     display: block;
     left: 10%;
     position: fixed;
     right: 0;
     top: 2%;
     width: 80%;
     z-index: 999;
     height: 80%;
   }
   #payment_type_columns oj-select-single{
     border: 1px solid #CCCCCC;
     border-radius: 4px;
   }
   .payment_id_search div div input{
     width: 100% !important;
     font-size: 12px;
   }
   #payment_type_columns oj-select-single div div input{
     border : none !important;
   }
   

Create a custom module entry in the customRegistry.js file to include a drop-down menu for filtering payments based on a specific field in Batch Payments in Billing Care.

A sample customRegistry.js file is provided in the SDK_home/samples/BatchGridCustomization/web/custom directory, where SDK_home is the Billing Care SDK installation directory. Use this sample to create the customRegistry.js file with your custom view model.

To add an entry in the customRegistry.js file:

1. Create a customRegistry.js file in myproject/web/custom by copying the reference registry file.

2. Specify to use your custom view model. For example:

   paymentSearch: {
       viewmodel: 'viewmodel/CustomPaymentSearchViewModel'
   }

3. Close and save the customRegistry.js file.

The Billing Care SDK includes samples that you can use for developing your own customizations in the SDK_home/samples/BatchGridCustomization/web/custom/viewmodels/CustomBatchPaymentCreateBatchViewModel.js directory, where SDK_home is the Billing Care SDK installation directory.

To create a custom view model for custom drop-down lists:

1. Create a new project dedicated to your customization or use your existing customization. See "Setting Up a Billing Care Customization Project" for more information.
2. Create a CustomBatchPaymentCreateBatchViewModel.js file to extend the default functionality and do the following:
   1. Initialize an inputColumnMap to define custom input types for specific columns. The inputColumnMap should be a Map object where the key is the column name and the value is an object containing the inputType (for example, "dropdown") and dataProviderArray (an array of options for the dropdown).
      `

      self.inputColumnMap.set("PIN_FLD_ACCOUNT_NO", {inputType: "dropdown", dataProviderArray: [
          {label: "0.0.0.1-447805"},
          {label: "0.0.0.1-88073"},
          {label: "0.0.0.1-228562"}]});
      self.inputColumnMap.set("PIN_FLD_RECEIPT_NO_1", {inputType: "dropdown", dataProviderArray: [
          {label: "QBX121-2"},
          {label: "ZS129-12"},
          {label: "BQ2123-21"}]});
      

   2. Implement the generateInputElement function to dynamically generate input elements based on the inputColumnMap.
3. If you want to make the custom column available in the REST API, modify the XSD file to reflect the added column. See "Adding the XSD and JSON Files to NetBeans Project" for more information on adding the files to your project.

Create a custom module entry in the customRegistry.js file to create a custom input drop-down list for specified fields in batch payments in Billing Care.

A sample customRegistry.js file is provided in the SDK_home/samples/BatchGridCustomization/web/custom directory, where SDK_home is the Billing Care SDK installation directory. Use this sample to create the customRegistry.js file with your custom view model.

To add an entry in the customRegistry.js file:

1. Create a customRegistry.js file in myproject/web/custom by copying the reference registry file.
2. Specify to use your custom view model. For example:

   createBatch: {   
       viewmodel: '../custom/viewmodels/customColumnCreateBatchViewModel'
   }

3. Save and close the customRegistry.js file.