Developing custom ServiceNow Service Portal widgets will enhance the UI and UX of your Portal, including GitHub Copilot while developing can streamline the process significantly. This post will delve into best practices for writing ServiceNow Service Portal widget code.

TLDR

Ghost text, in particular, plays a crucial role by providing context-aware suggestions and allowing real-time editing. Knowing the capabilities of AngularJS directives will aid in provide in suggestions. Have your files open in your IDE will give you more suggestions.

Assumptions before you read this

You know about ServiceNow (opens in a new tab)
You have built a Custom ServiceNow Service Portal Widget (opens in a new tab)
You have Github Copilot (opens in a new tab) installed in VSCode (opens in a new tab) or your IDE of choice (opens in a new tab).

GitHub Copilot Ghost Text (opens in a new tab)

Ghost text refers to the light, semi-transparent text suggestions for code provided by GitHub Copilot. This feature is crucial as it allows you to preview the suggested code before accepting or modifying it, helping you maintain control over the final code.

In order to get the best features of Copilot have your files open in your IDE so that the files can provide information to each other.

Ghost Text Features

Preview Suggestions: Use ghost text to preview the suggested code snippets. This helps you decide whether the suggestion fits your requirements.
Edit in Real-Time: Modify the ghost text directly in your editor. This allows you to tailor the suggestions to better fit your needs without starting from scratch.
Contextual Understanding: The ghost text provides context-aware suggestions, making it easier to integrate new code with existing structures.

Using Ghost Text to build ServiceNow Service Portal widgets

Apply semantic CSS on an element with the `ng-class` directive

Write your CSS with semantic values

.badge {
  border-radius: 5rem;
  font-family: monospaced;
  padding: .5rem 1rem;
}
.badge-info {
  background: darkblue;
  color: white;
}
.badge-negative {
  background: darkred;
  color: white;
}
.badge-positive {
  background: darkgreen;
  color: white;
}

When typing an AngularJS directive, such as ng-class inside of an ng-repeat, ghost text will appear suggesting what CSS semantic values to assign to the element based upon the values being returned from the server.

<li ng-repeat="item in group" ng-class="
  //'badge badge-info': item.type === 'default'
  //'badge badge-negative': item.type === 'success'
  //'badge badge-positive': item.type === 'error'
  " ng-bind="item.name"></li>

Boilerplate Code

ServiceNow Service Portal widgets often require repetitive boilerplate code. GitHub Copilot can quickly generate this Client Controller Javascript&colon;

(function() {
  // Widget controller
  function($scope, $http) {
    // Initialize scope variables
    $scope.data = {};
    
    // Function to fetch data
    $scope.getData = function() {
      $http.get('/api/now/table/your_table')
        .then(function(response) {
          $scope.data = response.data.result;
        }, function(error) {
          console.error('Error fetching data', error);
        });
    };
    
    // Call the function to fetch data
    $scope.getData();
  }
})();

Ghost text can help ensure the structure is correct before you finalize the code.

Provide Context with Comments

Comments guide Copilot to generate more relevant code snippets. Ghost text will adapt to the comments, providing suggestions that align with your described logic.

For example:

(function() {
  // Widget controller
  function($scope, $http) {
    // Initialize scope variables
    $scope.data = {};
    // Fetch user data from ServiceNow
    $scope.getUserData = function() {
      // Call the ServiceNow API to get user data
      $http.get('/api/now/table/sys_user')
        .then(function(response) {
          // Store the user data in scope
          $scope.data.users = response.data.result;
        }, function(error) {
          console.error('Error fetching user data', error);
        });
    };
 
    // Initialize the widget by fetching user data
    $scope.getUserData();
  }
})();

Outro

Using GitHub Copilot to write code for ServiceNow Service Portal widgets can significantly enhance your productivity and coding experience. Ghost text, in particular, plays a crucial role by providing context-aware suggestions and allowing real-time editing. By following these best practices, you can harness the power of AI to create robust, efficient, and user-friendly widgets. Always validate and refine the generated code, stay updated with ServiceNow best practices, and continuously seek user feedback for improvement.

post Using GitHub Copilot To Build Service Portal Widgets in Developer articles

Using GitHub Copilot To Build Service Portal Widgets

TLDR

Assumptions before you read this

GitHub Copilot Ghost Text (opens in a new tab)

Ghost Text Features

Using Ghost Text to build ServiceNow Service Portal widgets

Apply semantic CSS on an element with the `ng-class` directive

Boilerplate Code

Provide Context with Comments

Outro

post Using GitHub Copilot To Build Service Portal Widgets in Developer articles

Using GitHub Copilot To Build Service Portal Widgets

TLDR

Assumptions before you read this

GitHub Copilot Ghost Text (opens in a new tab)

Ghost Text Features

Using Ghost Text to build ServiceNow Service Portal widgets

Apply semantic CSS on an element with the ng-class directive

Boilerplate Code

Provide Context with Comments

Outro

Apply semantic CSS on an element with the `ng-class` directive