Here we are adding the Province, Phone number Current Suppliers field on the Register page in SCA
For this we need to create the custom field in NetSuite by
- Go to Customization > Lists, Records, & Fields > Entity Fields.
- On the Custom Entity Fields page, each custom field is listed, with columns providing detailed information about the field and which records the field has been applied to.
- Choose an option:
- To edit an existing custom entity field, click the field name in the Description column and then modify the field definition as needed.
- To add a new custom entity field, click New.
for this we need to add a field in the
TPL file :first we need to create a field according to the page design and validation.
<div class="login-register-register-form-controls-group" data-validation="control-group">
<label class="login-register-register-form-label" for="register-address">
{{translate 'Phone Number'}} <small class="login-register-register-form-required">*</small>
</label>
<div class="login-register-register-form-controls" data-validation="control">
<input type="text" name="custentity_jj_phonenumber" id="custentity_jj_phonenumber" class="login-register-register-form-input"
aria-required="true">
</div>
</div>
<div class="login-register-register-form-controls-group" data-validation="control-group">
<label class="login-register-register-form-label">
{{translate 'Province'}} <small class="login-register-register-form-required">*</small>
</label>
<select name="custentity_jj_province" id="custentity_jj_province" class="login-register-register-form-input">
<option></option>
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland">Newfoundland</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Nunavut">Nunavut</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward island">Prince Edward island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="yukon">Yukon</option>
<option value="other">Other</option>
</select>
<div id="validation-message" data-validation-error="block">Province is required</div>
</div>
<div class="login-register-register-form-controls-group" data-validation="control-group">
<label class="login-register-register-form-label" for="register-address">
{{translate 'Current Suppliers'}} <small class="login-register-register-form-required">*</small>
</label>
<div class="login-register-register-form-controls" data-validation="control">
<input type="text" name="custentity_jj_current_suppliers" id="custentity_jj_current_suppliers" class="login-register-register-form-input"
aria-required="true">
</div>
</div>then we need to write the js file for that we need to extend LoginRegisterRegisterView view in that we need to add the bindings and then we need to extend the AccountRegisterModel this view for validation
// Added changes for updating login/registration page
define(
'jj.loginregistration.login'
, [
'jj.loginregistration.login.View','LoginRegister.Register.View','Account.Register.Model','Utils'
]
, function (
loginView,LoginRegisterRegisterView,AccountRegisterModel,Utils
)
{
'use strict';
return {
mountToApp: function mountToApp (container)
{
let LoginRegisterPage = container.getComponent('LoginRegisterPage');
try {
if (LoginRegisterPage) {
LoginRegisterPage.addChildView('Register.CustomFields', function () {
return new loginView
({
LoginRegisterPage: LoginRegisterPage
})
});
}
} catch (error) {
console.log('LoginRegisterPage',error);
}
console.log("LoginRegisterRegisterView",LoginRegisterRegisterView.prototype);
_.extend(LoginRegisterRegisterView.prototype, {
bindings: {
'[name="firstname"]': 'firstname',
'[name="lastname"]': 'lastname',
'[name="phone"]': 'phone',
'[name="company"]': 'company',
'[name="email"]': 'email',
'[name="password"]': 'password',
'[name="password2"]': 'password2',
'[name="custentity_jj_phonenumber"]': 'custentity_jj_phonenumber',
'[name="custentity_jj_province"]': 'custentity_jj_province',
'[name="custentity_jj_current_suppliers"]': 'custentity_jj_current_suppliers'
}
}),
_.extend(AccountRegisterModel.prototype, {
validation: {
firstname: {
required: true,
msg: Utils.translate('First Name is required')
},
lastname: {
required: true,
msg: Utils.translate('Last Name is required')
},
email: {
required: true,
pattern: 'email',
msg: Utils.translate('Valid Email is required')
},
company: {
required: SC.ENVIRONMENT.siteSettings.registration.companyfieldmandatory === 'T',
msg: Utils.translate('Company Name is required')
},
password: {
required: true,
msg: Utils.translate('Please enter a valid password')
},
password2: [
{
required: true,
msg: Utils.translate('Confirm password is required')
},
{
equalTo: 'password',
msg: Utils.translate('New Password and Confirm Password do not match')
}
],
'custentity_jj_phonenumber': [
{
required: true,
msg: 'Phone Number is required',
}, {
pattern: '^(?!0+$)[\+]?[(]?[0-9]{2,4}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,10}$',
msg: 'Please enter a valid Phone Number'
}],
'custentity_jj_province': {
required: true,
msg: Utils.translate('Province is required')
},
'custentity_jj_current_suppliers': {
required: true,
msg: Utils.translate('Current Suppliers is required')
},
}
});
}
};
});
sass :
#validation-message {
display: none;
}
.login-register-register-form-controls-group[data-validation-error="true"]>#validation-message{
display: block;
}
