Explained how to create a contact us page using extension
Creating a contact us page with URL “contact-us” as an extension using the router method to set the URL. Added the link to ‘contact us’ page from the header navigation
In the contact us page, displaying a form with the following fields (* for required fields)
- name – *
- DOB
- email id -*
- phone no -*
and a submit button at bottom, upon submit of form, display a thank you message. before the thank you message is displayed saving the form values in the customer record.
Code:
Entry point file
define(
'sruthy.new.new'
, [
'sruthy.new.new.View',
'sruthy.new.new.Router'
]
, function (
newView,
newRouter
)
{
'use strict';
return {
mountToApp: function mountToApp (container)
{
// using the 'Layout' component we add a new child view inside the 'Header' existing view
// (there will be a DOM element with the HTML attribute data-view="Header.Logo")
// more documentation of the Extensibility API in
// https://system.netsuite.com/help/helpcenter/en_US/APIs/SuiteCommerce/Extensibility/Frontend/index.html
/** @type {LayoutComponent} */
var layout = container.getComponent('Layout');
/*if(layout)
{
layout.addChildView('Header.Logo', function() {
return new newView({ container: container });
});
}*/
return new newRouter(container);
}
};
});View file
// @module sruthy.new.new
define('sruthy.new.new.View'
, [
'sruthy_new_new.tpl'
, 'sruthy.new.new.SS2Model'
, 'Backbone'
, 'sruthy.new.new.Model', 'GlobalViews.Message.View', 'Utils', 'Backbone.CompositeView', 'Backbone.CollectionView', 'Backbone.FormView', 'jQuery', 'underscore'
]
, function (
sruthy_new_new_tpl
, newSS2Model
, Backbone
, newModel, GlobalViewsMessageView, Utils, BackboneCompositeView, BackboneCollectionView, BackboneFormView, jQuery, _
)
{
'use strict';
// @class sruthy.new.new.View @extends Backbone.View
return Backbone.View.extend({
template: sruthy_new_new_tpl
, initialize: function (options) {
/* Uncomment to test backend communication with an example service
(you'll need to deploy and activate the extension first)
*/
// this.model = new newModel();
// var self = this;
// this.model.fetch().done(function(result) {
// self.message = result.message;
// self.render();
// });
BackboneCompositeView.add(this);
this.application = options.application;
this.model = new newModel();
BackboneFormView.add(this);
},
title: _('Contact Us').translate(),
page_header: _('Contact Us').translate(),
attributes: {
'id': 'contact-us',
'class': 'contact-us'
}
, events: {
"submit #contact-us-form": "SubmitForm"
}
, bindings: {
'[name="firstname"]': 'firstname',
'[name="email"]': 'email',
'[name="phone"]': 'phone',
'[name="dob"]': 'dob',
},
SubmitForm: function (e)
{
//return this.saveForm(e,this.model);
var promise = this.saveForm(e,this.model);
if(promise)
{
alert("Submitted successfully");
}
return promise;
/*var promise = BackboneFormView.saveForm.apply(this, arguments),
self = this;
console.log('promise', promise)
return promise && promise.then(
function(success)
{
if (success.successMessage)
{
console.log('inside if success')
alert("success");
} else
{
alert("fail");
}
},
function(fail)
{
alert("fail");
});*/
}
, childViews: {
}
//@method getContext @return sruthy.new.new.View.Context
, getContext: function getContext()
{
//@class sruthy.new.new.View.Context
this.message = this.message || 'Hello World!!'
return {
message: this.message
};
}
});
});
Router file
// @module sruthy.new.new
define('sruthy.new.new.View'
, [
'sruthy_new_new.tpl'
, 'sruthy.new.new.SS2Model'
, 'Backbone'
, 'sruthy.new.new.Model', 'GlobalViews.Message.View', 'Utils', 'Backbone.CompositeView', 'Backbone.CollectionView', 'Backbone.FormView', 'jQuery', 'underscore'
]
, function (
sruthy_new_new_tpl
, newSS2Model
, Backbone
, newModel, GlobalViewsMessageView, Utils, BackboneCompositeView, BackboneCollectionView, BackboneFormView, jQuery, _
)
{
'use strict';
// @class sruthy.new.new.View @extends Backbone.View
return Backbone.View.extend({
template: sruthy_new_new_tpl
, initialize: function (options) {
/* Uncomment to test backend communication with an example service
(you'll need to deploy and activate the extension first)
*/
// this.model = new newModel();
// var self = this;
// this.model.fetch().done(function(result) {
// self.message = result.message;
// self.render();
// });
BackboneCompositeView.add(this);
this.application = options.application;
this.model = new newModel();
BackboneFormView.add(this);
},
title: _('Contact Us').translate(),
page_header: _('Contact Us').translate(),
attributes: {
'id': 'contact-us',
'class': 'contact-us'
}
, events: {
"submit #contact-us-form": "SubmitForm"
}
, bindings: {
'[name="firstname"]': 'firstname',
'[name="email"]': 'email',
'[name="phone"]': 'phone',
'[name="dob"]': 'dob',
},
SubmitForm: function (e)
{
//return this.saveForm(e,this.model);
var promise = this.saveForm(e,this.model);
if(promise)
{
alert("Submitted successfully");
}
return promise;
/*var promise = BackboneFormView.saveForm.apply(this, arguments),
self = this;
console.log('promise', promise)
return promise && promise.then(
function(success)
{
if (success.successMessage)
{
console.log('inside if success')
alert("success");
} else
{
alert("fail");
}
},
function(fail)
{
alert("fail");
});*/
}
, childViews: {
}
//@method getContext @return sruthy.new.new.View.Context
, getContext: function getContext()
{
//@class sruthy.new.new.View.Context
this.message = this.message || 'Hello World!!'
return {
message: this.message
};
}
});
});
Model file
// Model.js
// -----------------------
// @module Case
define("sruthy.new.new.Model", ["Backbone", "Utils", "underscore", "jQuery"], function(
Backbone,
Utils,
_, jQuery
) {
"use strict";
// @class Case.Fields.Model @extends Backbone.Model
return Backbone.Model.extend({
//@property {String} urlRoot
urlRoot: Utils.getAbsoluteUrl(
getExtensionAssetsPath(
"services/new.Service.ss"
)
),
validation: {
firstname: {
required: true,
msg: _('Name is required').translate()
},
dob: {
required: true,
msg: _('date of birth is required').translate()
},
/*message: {
required: true,
msg: _('Message is required').translate()
},*/
email: [{
required: true,
msg: _('Email is required').translate()
}, {
pattern: 'email',
msg: _('Enter a valid Email').translate()
}],
phone: [{
fn: _.validatePhone,
required: true,
msg: Utils.translate('Phone is required')
}]
},
parse: function (response) {
return response;
}
});
});
Template file
<section id='theme-contact-us'>
<div class="imgcont">
<div class="row">
<div class="contactus-form-section">
<div class="col-sm-12 col-lg-7 contactus-left-container contactdeskcon">
<div id="contactus-section">
<div class="contact-us-form">
<div class="contact-us-form-content">
<div class='contactus-container'>
<div data-view="Contactformus"></div>
<h1>Contact Us</h1>
<form id="contact-us-form" class="contact-us-form-new" action="POST" >
<div class='contactus-container'>
<div class='row secndrowclass'>
<div class='col-lg-10 col-sm-12 contact-us-form-container conformdesktop'>
<div data-type="alert-placeholder"></div>
<div class='contact-us-form-box'>
<div class="col-xs-12 col-sm-6">
<div data-validation="control-group" data-input="firstname">
<div class="contact-us-form-controls" data-validation="control">
Name<span class="mandatory-star"> *</span><input type='text' id="firstname"
name='firstname' value="{{firstname}}">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div data-input="dob">
<div class="contact-us-form-controls">
Date of birth
<input type='text' id="dob" name='dob' value="{{dob}}">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div data-validation="control-group" data-input="email">
<div class="contact-us-form-controls" data-validation="control">
Email<span class="mandatory-star"> *</span> <input type='text' id="email" name='email'
value="{{email}}">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div data-validation="control-group" data-input="phone">
<div class="contact-us-form-controls" data-validation="control">
Phone Number<span class="mandatory-star"> *</span>
<input type="text" name="phone" id="phone"
class="login-register-register-form-input" value="{{phone}}">
</div>
</div>
</div>
<!--<div class="col-xs-12 col-sm-12">
<div data-validation="control-group" data-input="message">
<div class="contact-us-form-controls" data-validation="control">
Message<span class="mandatory-star"> *</span> <textarea name="message"
class='form-control textstyles' id="message" type='text'
value="{{message}}">{{message}}</textarea>
</div>
</div>
</div>-->
<div class="col-xs-12 col-sm-6 sendbutton">
<center><button class="contactus-submit-button" type="submit">Submit</button></center>
</div>
<div id='alert-container'></div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Suite Script files
new.ServiceController.js
define("sruthy.new.new.ServiceController", ["ServiceController","sruthy.new.new"], function(
ServiceController,
newModel
) {
"use strict";
return ServiceController.extend({
name: "sruthy.new.new.ServiceController",
// The values in this object are the validation needed for the current service.
options: {
common: {}
},
get: function get() {
console.log("inside get");
return JSON.stringify({
message: "Hello World I'm an Extension using a Service!"
});
},
post: function post() {
console.log("inside post");
return newModel.CreateLead(this.data);
// not implemented
},
put: function put() {
console.log("inside put");
// not implemented
},
delete: function() {
console.log("inside delete");
// not implemented
}
});
});
// sruthy.new.new.js
// Load all your starter dependencies in backend for your extension here
// ----------------
define('sruthy.new.new'
, [
'sruthy.new.new.ServiceController',
'SC.Model', 'Application', 'Utils', 'underscore', 'Profile.Model'
]
, function (
newServiceController,
SCModel, Application, Utils, _, ProfileModel
)
{
'use strict';
return SCModel.extend({
CreateLead: function (data) {
console.log('name inside createlead', data);
try {
/*var profile = ProfileModel.get();
console.error('profileseet', profile)
var customer = nlapiGetUser();
console.error('customer123', customer);*/
var customerRecord = nlapiCreateRecord('lead');
if (data.firstname) {
firstname = Utils.sanitizeString(data.firstname);
customerRecord.setFieldValue('firstname', firstname);
}
if (data.firstname) {
lastname = Utils.sanitizeString(data.firstname);
customerRecord.setFieldValue('lastname', lastname);
}
if (data.firstname) {
firstname = Utils.sanitizeString(data.firstname);
customerRecord.setFieldValue('custentitycn_name', firstname);
}
if (data.email) {
email = Utils.sanitizeString(data.email);
customerRecord.setFieldValue('custentityemail', email);
}
if (data.phone) {
phone = Utils.sanitizeString(data.phone);
customerRecord.setFieldValue('custentityphone', phone);
}
if (data.dob) {
dob = Utils.sanitizeString(data.dob);
customerRecord.setFieldValue('custentitydob', dob);
}
nlapiSubmitRecord(customerRecord);
return {
successMessage: 'Your request has been submitted, we will get back to you within 24 hours.'
}
} catch (e) {
// statements
console.error('err@contactus', e);
return {
status: 500,
code: 'ERR_FORM',
message: 'There was an error submitting the form, please try again later'
}
}
}
});
});