Create a form in UI Page to create incident in ServiceNow

Updated: May 8, 2023

In this blog post, we will show you how you can create a form in UI Page which can create an incident record.

Navigate to System Definition > UI Pages in the ServiceNow instance.
Click on New to create a new UI Page.
Give a name for the UI Page, for example, "Create Incident".
In the HTML field, add the following code to create a form that contains the necessary input fields and a submit button:

<html>
<head>
  <title>Create Incident</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"></link>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script>
    var app = angular.module('createIncidentApp', []);
    app.controller('createIncidentCtrl', function($scope, $http) {
      $scope.createIncident = function() {
        var shortDesc = $scope.shortDesc;
        var desc = $scope.desc;
        var ci = $scope.ci.sys_id;

        var gr = new GlideRecord('incident');
        gr.initialize();
        gr.setValue('short_description', shortDesc);
        gr.setValue('description', desc);
        gr.setValue('cmdb_ci', ci);
        gr.insert();

        alert("Incident created successfully!");
        $scope.resetForm();
      };

      $scope.resetForm = function() {
        $scope.shortDesc = '';
        $scope.desc = '';
        $scope.ci = '';
        $scope.ciResults = [];
      };

      $scope.searchCi = function() {
        var query = $scope.ciQuery;
        var url = '/api/now/table/cmdb_ci?sysparm_query=' + encodeURIComponent('nameLIKE' + query + '^ORDERBYname');
        $http.get(url).then(function(response) {
          $scope.ciResults = response.data.result;
        });
      };
    });
  </script>
</head>
<body ng-app="createIncidentApp" ng-controller="createIncidentCtrl">
  <div class="container">
    <h2>Create Incident</h2>
    <form>
      <div class="form-group">
        <label for="shortDesc">Short Description:</label>
        <input type="text" class="form-control" id="shortDesc" ng-model="shortDesc"></input>
      </div>
      <div class="form-group">
        <label for="desc">Description:</label>
        <textarea class="form-control" id="desc" ng-model="desc"></textarea>
      </div>
      <div class="form-group">
        <label for="ci">Configuration Item :</label>
        <input type="text" class="form-control" id="ci" ng-model="ci.name" ng-change="searchCi()">
        <ul class="list-group" ng-show="ciResults.length">
          <li class="list-group-item" ng-repeat="result in ciResults" ng-click="ci = result">{{result.name}}</li>
        </ul>
			</input>
      </div>
      <button type="button" class="btn btn-primary" ng-click="createIncident()">Create Incident</button>
      <button type="button" class="btn btn-default" ng-click="resetForm()">Reset</button>
    </form>
  </div>
</body>
</html>

Save the UI Page configuration.

You have created a UI Page that allows users to create incidents with Short Description, Description, and CI fields.

When the "Submit" button is clicked, a new incident record is created in the background using GlideRecord APIs. Note that you may need to modify the code to fit your specific requirements and configurations.

SAASWITHSERVICENOW

Free Servicenow Learning

Create a form in UI Page to create incident in ServiceNow

Recent Posts