Build a Form in the Portal

[cnharris1]

Good morning everyone,

I need some guidance on creating a form in the portal (where would I go to create the form?). Basically, I want customers to go to the portal and fill out a form with five or six questions and hit the submit button. Once they hit submit, their answers are automatically recorded to a table. Also, once they hit submit, I want to have a pop up that just displays that their form was successfully submitted. Would any of this be possible in the portal?

Thanks in advance!

cnharris

[Ethan Davies]

You're going to want to look at how Catalogue Items in ServiceNow if you want to create a form for users to use on the Service Portal. These can be found under Service Catalog -> Catalog Definitions -> Maintain Items in ServiceNow (You're going to want to create an update set and work from that before you start messing with Catalog Items!). You can refer to the documentation here to get you started.

[Prins Kumar Gup · Accepted solution]

Hi,

You can do this thing using a widget like I have created a form i.e. registration. To create a new widget like below code :

HTML PART:-

<div>
<form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend class="text-center"><h3>
  Registration Form
  </h3></legend>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="txt_first_name">First Name</label>  
  <div class="col-md-4">
  <input id="txt_first_name" ng-model="c.data.name" type="text" placeholder="Prince" class="form-control input-md">
  <span class="help-block">Please enter your fist name</span>  
  </div>
</div>


<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="txt_email">Email Id</label>  
  <div class="col-md-4">
  <input id="txt_email" ng-model="c.data.email" type="text" placeholder="name@domain.com" class="form-control input-md" required="">
  <span class="help-block">Please enter your Email Id</span>  
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="textinput">Phone Number</label>  
  <div class="col-md-4">
  <input id="textinput" ng-model="c.data.phone_number" type="text" placeholder="prinsguptapkg" class="form-control input-md" required="">
  <span class="help-block">Please enter valid mobile number</span>  
  </div>
</div>


<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="btn_submit"></label>
  <div class="col-md-4">
    <button id="btn_submit" name="btn_submit" class="btn btn-primary pull-right" ng-click="c.addRecord()">Submit</button>
  </div>
</div>

</fieldset>
</form>

</div>

CLIENT CONTROLLER PART:

function($scope) {
  /* widget controller */
  var c = this;
	c.addRecord=function()
	{
		c.data.name = $scope.c.data.name;
		c.data.email = $scope.c.data.email;
		c.data.phone_number = $scope.c.data.phone_number;
		//alert(c.data.name);
		c.data.action = "addRecord"
		c.server.update().then(function(response){
			c.data={};
			alert("Thank You for contacting us...!!!!!");
		})	
		
  }
}

SERVER SCRIPT PART:

(function() {
	/* populate the 'data' object */
	/* e.g., data.table = $sp.getValue('table'); */
	if(input){
		if(input.action=='addRecord'){
			var gr=new GlideRecord(table_name);
			gr.initialize();
			gr.field_name=input.name;
			gr.field_name=input.email;
			gr.field_name=input.phone_number;
			gr.insert();
			gs.addInfoMessage('Record Inserted');
		}
	}



})();

After you create a widget, go to the page and create one page and put the widget on that.

I hope this is helpful to you. Feel free to ask if you have any query.

Thanks,

PKG

[cnharris1]

Thanks PKG for the help! If I want to run a script before the record is inserted to see if that user is already registered or not, is it possible? Also, I created a custom signature widget, would it be possible to call that widget before the record is inserted?

[Prins Kumar Gup]

Yes, It's possible. Write the code in server script:

(function() {
	/* populate the 'data' object */
	/* e.g., data.table = $sp.getValue('table'); */
	if(input){
		if(input.action=='addRecord'){
			var dupEmail = isUniqueEmail(); //verify uniqueness of email
			if(!dupEmail){
				var gr=new GlideRecord(table_name);
				gr.initialize();
				gr.field_name=input.name;
				gr.field_name=input.email;
				gr.field_name=input.phone_number;
				gr.insert();
				gs.addInfoMessage('Record Inserted');
			}
			else{
				gs.addErrorMessage("There is already a user with the email . There was an error processing your request.", input.email);
			}
		}
	}
	
	//Check Email Id
	function isUniqueEmail() {
		var email = input.email;
		var acc = new GlideRecord('table_name');
		acc.addQuery('u_email', email);
		acc.query();
		if (acc.next()){
			return true;
		}
		return false;
	}
})();

[cnharris1]

Thanks PKG, you have really helped me out! Your code has been working perfectly. I have one last question, for the name field, can I use that field as a reference field for whoever is logged in?