You can add custom fields to a modal by using the extended model in components. The strategy to add customization to the application is to use the object-oriented nature of typescript to extend and override the out-of-the-box content. Let us see how to add a custom field to the Product object.

To create a custom model

  1. Right-click on the App folder and click Create Folder to create a new folder for models and name it. For example models.
  2. Right-click on the models folder and click Create File to create a product model and name it. For example s-product.model.ts
  3. In the s-product.model.ts, import Product from @apttus/ecommerce. For example: import { Product } from @apttus/ecommerce
  4. Create the extension of the product for your custom model. For example export class SProduct extends Product {} The SProduct class has all the properties of the original product.
  5. When adding custom properties to your model, you must associate the following decorators from the @apttus/core library. These are used to map your classes to the underlying Salesforce objects. Basically, this mechanism is to map typescript classes with Salesforce objects using decorators.
    • ATable - This is used to map product class to any object on the backend by specifying what object you want to map it up to. For Salesforce, the object name can be added to field sobjectName.
    • AField - This is used to specify the Salesforce name of the custom field. For example: SRM_Manufacturer__c. It is not necessary to use the Salesforce syntax for the field name. You can provide a generic name. For example manufacturer. You must specify a default value for any field created. Do not leave a blank value.
    • Type - This is used to determine relationship types (child or lookups). It is recommended to also set the default value to ‘null’ on all attributes unless a default value is explicitly needed.

Now that you have created your custom product model, mapped typescript class to the Salesforce object Product2, and provided custom fields, you must map it back to the service. The product service looks up at the product class. You can override that using a setType method that is available on every single service. This method should be created in the constructor of the component. This changes the mapping of that service to the model that you want to use. Once this is done within your application or within your module, the method gets applied to every other component within your module. Now pass it in the class reference of the class you just created. For details, refer to the image below.