Accessing Custom Record Fields in SuiteCommerce

The Accessing Custom Record Fields functionality allows developers to efficiently interface with custom records in SuiteCommerce, enabling dynamic data rendering and enhanced user experiences.

Accessing Data

Each custom content type (CCT) view can access SuiteCommerce Advanced (SCA) data regarding items, item lists, products, or categories. These data points are accessible to the Document Object Model (DOM) through various SCA modules. Furthermore, each view is capable of returning values for custom record fields associated with the CMS Content Type records.

Important:

To expose this data to your templates, each view must implement the getContext() method.

Accessing SCA Data

If a custom content type requires data not tied to a custom record, you can utilize the contextDataRequest array property to access certain SCA objects. For optimal functionality, ensure that your view is set up to utilize the information that the following contextData objects provide. This assumes the information is already supplied in the DOM at the relevant location where the CCT is placed.

Note:

When adding SCA content in an area using SMT Admin, the application will automatically execute the validateContextDataRequest method to ensure that all requested contexts are valid. In scenarios where optional data is requested and not available, this method might fail. To prevent this, configure your view to override the validateContextDataRequest method so it always returns true.

Example Usage

The ImageViewer CCT requests an item’s name. A simplified implementation of the CCT could be:

1//...,
2contextDataRequest: ['item'],
3validateContextDataRequest: function() {
4    return true;
5},
6getContext: function getContext() {
7    //...;
8    if (this.contextData.item) {
9        var item = this.contextData.item();
10        //...;
11    }
12    //...;
13}
14//...

Accessing Custom Record Fields

By default, when a template renders, it receives a context object that contains each property defined in the linked custom record within a settings object, where you indicate the fields by Field ID.

Example Fields in ImageViewer CCT:

In the getContext() method for the ImageViewer CCT, you specify which fields from your custom record correlate with the settings. If the custrecord_sc_cct_iv_valign field requires options from a custom list, your code may look like this:

1//...
2getContext: function() {
3    var texts = [],
4        imageUrl = '',
5        valign = this.valign[this.settings.custrecord_sc_cct_iv_valign] || this.valign['3'];
6 
7    var set_text = Utils.trim(this.settings.custrecord_sc_cct_iv_text),
8        set_texts = set_text ? set_text.split('\n') : [],
9        set_imageUrl = Utils.trim(this.settings.custrecord_sc_cct_iv_imageurl);
10 
11    texts = set_texts.length ? set_texts : texts;
12    imageUrl = set_imageUrl ? set_imageUrl : imageUrl;
13//...

Steps to Create the View:

1. Create a New JavaScript File: In your CCT module's JavaScript directory, create new JavaScript or TypeScript files named appropriately. For example: ../SC.CCT.ImageViewer@0.0.1/JavaScript/SC.CCT.ImageViewer.View.js.

2. Define Dependencies: Integrate necessary dependencies in the new view file using either JavaScript or TypeScript syntax, as seen in the previous examples.

3. Build the View: Customize the view in line with your CCT's specifications before saving the view file.

By carefully implementing these steps, developers can effectively access and utilize custom record fields within SuiteCommerce environments, enhancing user engagement through customized templates.

Key Takeaways

• Each CCT view can access SCA data and custom record fields through the getContext() method.
• Utilize the contextDataRequest property for data access beyond custom record fields.
• Override the validateContextDataRequest method to ensure flexibility with optional data requests.
• Define custom fields within a settings object to tailor user experiences.