Capture Form Data with Custom Fields in SuiteCommerce

Capturing user form data is essential for businesses that want to gather specific information, such as a company's tax registration number, before users register or log in to a website. This article provides a comprehensive guide on how to create an extension in SuiteCommerce to obtain additional data from users by adding custom fields to the login/register forms.

How Do You Capture Form Data?

To effectively capture form data on the Login/Register page, follow these steps:

1. Create custom fields in NetSuite - These fields will store user input data.
2. Set up your extension files - You may create a baseline extension as your starting point.
3. Update the entry point file - This involves instantiating the LoginRegisterPage component and adding a child view.
4. Update the view file - Here, you define the view for the form and create a template.
5. Add input validation - Use the beforeRegister event for input validation before form submission.

Creating Custom Fields in NetSuite

Custom fields are vital for storing user data captured on your website. When creating these fields in NetSuite, it’s important to specify a unique identifier (ID) for each field. The ID will follow the prefix "custentity," making it essential for linking with form elements in your templates.

Steps to Create a Custom Field

1. Navigate to Customization > Lists, Records, and Fields > Entity Fields > New.
2. Enter a Label that will represent the field in the customer record.
3. Provide an ID for the field; ensure it starts with an underscore for clarity (e.g., '_comptaxnumber' becomes 'custentity_comptaxnumber').
4. On the Applies To tab, check the Customer and Web Site options.
5. Click Save.

Updating the Entry Point File

If you've created a baseline extension, use the main module file to start building your extension. You will create an instance of the LoginRegisterPage component in the mountToApp() function.

1"text-purple-400">define(
2  'Vendor.CompanyTaxNumber.MainModule',
3  [Vendor.CompanyTaxNumber.MainModule.View],
4  "text-purple-400">function(CompanyTaxNumberView) {
5    'use strict';
6 
7    "text-purple-400">return {
8      mountToApp: "text-purple-400">function mountToApp(container) {
9        "text-purple-400">var loginRegisterPageComponent = container.getComponent('LoginRegisterPage');
10        "text-purple-400">if (loginRegisterPageComponent) {
11          loginRegisterPageComponent.addChildView('Register.CustomFields', "text-purple-400">function() {
12            "text-purple-400">return "text-purple-400">new CompanyTaxNumberView(loginRegisterPageComponent);
13          });
14        }
15      }
16    }
17  }
18);

When constructing the view, ensure you pass in the LoginRegisterPage component to facilitate listening for events.

Creating a View for User Input

Define a view that includes form elements necessary for data capture, such as text boxes or checkboxes. Use the SCView class from the extensibility API or the Backbone View module if you are using an earlier version of SuiteCommerce Advanced.

Here’s an example of how to define the view:

1"text-purple-400">define(
2  'NetSuite.CompanyTaxNumber.Main.View',
3  [
4    'SCView', 
5    'jQuery',
6    'netsuite_companytaxnumber_main.tpl'
7  ],
8  "text-purple-400">function(SCViewComponent, jQuery, netsuite_companytaxnumber_tpl) {
9    'use strict';
10 
11    "text-purple-400">var SCView = SCViewComponent.SCView;
12 
13    "text-purple-400">function CompanyTaxNumberMainView(loginRegisterPageComponent) {
14      SCView.call("text-purple-400">this);
15      "text-purple-400">this.template = netsuite_companytaxnumber_tpl;
16      loginRegisterPageComponent.on('beforeRegister', "text-purple-400">function(formFields) {
17        "text-purple-400">if (formFields.custentity_comptaxnumber === '') {
18          alert('You must enter your company tax number.');
19          "text-purple-400">return jQuery.Deferred().reject();
20        }
21      });
22    }
23 
24    CompanyTaxNumberMainView.prototype = Object.create(SCView.prototype);
25    CompanyTaxNumberMainView.prototype.constructor = CompanyTaxNumberView;
26 
27    CompanyTaxNumberMainView.prototype.getContext = "text-purple-400">function() {
28      "text-purple-400">return {};
29    }
30    "text-purple-400">return CompanyTaxNumberMainView;
31  }
32);

Don't forget to update the template file for the view; it includes the required input fields that ensure the user enters their company details correctly:

1<p class="login-register-register-form-description">
2  We only serve business customers who are currently registered for tax in Canada, USA, and France.
3</p>
4<div class="login-register-register-form-controls-group" data-validation="control-group">
5  <label class="login-register-register-form-label" for="company-tax-number"> Company Tax Number <small class="login-register-register-form-required">*</small></label>
6  <div class="login-register-register-form-controls" data-validation="control">
7    <input type="text" name="custentity_comptaxnumber" id="company-tax-number" class="login-register-register-form-input">
8  </div>
9</div>

Key Takeaways

• Custom fields in NetSuite allow businesses to capture additional user data during registration.
• The custom field IDs must adhere to the naming convention prefixed with "custentity."
• Ensure proper input validation using the beforeRegister event for better data integrity.
• Use SCView or Backbone View for defining custom views based on your SuiteCommerce version.
• The design of templates matching existing form styles ensures a cohesive user experience.

Source: This article is based on Oracle's official NetSuite documentation.