Extended Attributes in Dynamic Forms

You can customize dynamic forms to show extended attributes for offers, product specification, and catalog.

You can edit the basic details form of these objects using VB Studio. Refer the VB Studio guide to understand how to make the changes.

You would need to do the following steps for Launch:

  1. From the Settings and Actions menu in Visual Builder, click Edit Pages to open the page in the Designer in VB Studio.
  2. Choose the form layout you need to edit. You may either duplicate the layout and make changes or create a new layout.
  3. Add or remove fields from the new layout as needed. For the new fields, make sure that you create a new field and template under the Field as well as Template section. Also ensure that the field is correctly mapped to the template under the fieldTemplateMap section in the layout JSON. Here's a sample input text template for a custom Partner ID field for product offering:
    <template id="partnerIdTemplate">
      <oj-input-text value="{{ $componentContext.pageVariables.productOfferingPayload.PartnerId }}" label-hint="[[ $metadata.labelHint ]]"
          readonly="[[ $componentContext.pageVariables.offerFlow === $layout.functions.constants.data_mode.view || $componentContext.pageVariables.offerFlow === $layout.functions.constants.data_mode.revise]]"></oj-input-text>
    </template>
    
    You may refer the read-only definition of other fields in the layout template to use the correct variables.

For the input value to be included in the payload, you need to use two-way binding using curly braces to the correct variable as shown in the sample. In the sample, $componentContext.pageVariables.productOfferingPayload is the payload variable used for product offering. Similarly use $componentContext.pageVariables.productSpecificationPayload for Product Specification and $componentContext.pageVariables.catalogPayload for Catalog.

After configuring the new layout, edit the rule set to show your layout based on _attype. A sample rule set definition for Product Offering, Product Specification and Catalog is as follows:

  • $componentContext.pageVariables.productOfferingPayload._attype ===
          'PartnerOffer'
    ? 'partnerLayout': 'default'
  • $componentContext.pageVariables.productSpecificationPayload['@type'] ===
            'TestProductSpecification'
    ||
            $componentContext.pageVariables.getProductSpecificationByIdResponse['_attype'] ===
            'TestProductSpecification'
    ? 'customLayout': 'default'
  • $componentContext.pageVariables.catalogPayload['@type'] ===
          'TestCatalog'
    ? 'partnerCatalog': 'default'