Creating a table-based widget structure

When we design the form on the navigation screen as tabbed using a section structure, ServiceNow’s OOB widgets cannot render this tabbed structure and present us with a structure where the fields are listed one below another, making it hard to read. After the 3-step development we will do, our widget will have gained tabbed functionality.

Navigation screen tabbed structure:

OOB widget tabbed structure view:

Tabbed Widget view after development:

To overcome this problem, it is enough to make a development consisting of 3 steps.

1. step, we create a UI Script.

(function() {
  angular.module('myTabbedFormFilters', []).filter('titledFormSectionFilter', function() {
    return function(input) {
      var output = [];
      console.log('JMM: input.length: '+ input.length);
      for (var i = 0; i < input.length; i++) {
        if (input[i].captionDisplay.length > 0) {
          console.log('JMM: captionDisplay:' + input[i].captionDisplay);
          output.push(input[i]);
        }	

      }
      return output;
    };
  }).filter('currentFormSectionFilter', function() {
    return function(input, startingCaptionDisplay) {
      var output = [];
      var include = false;
      for (var i = 0; i < input.length; i++) {
        if (input[i].captionDisplay == startingCaptionDisplay) {
          include = true;
          output.push(input[i]);
        } else if((include)&&(input[i].captionDisplay == '')){
          output.push(input[i]);
        } else {
          include = false;
        }
      }
      return output;
    };
  });
  
})();

Step 2

Inside the widget, we define an ng-template. Its name will be: “smse-tabbed-sp-model-xml”.

<div>
  <uib-tabset active="active" justified="true">
  <uib-tab index="$index+1" ng-repeat="titleContainer in containers | titledFormSectionFilter" heading="{{titleContainer.captionDisplay}}">
    <fieldset ng-repeat="container in containers | currentFormSectionFilter : titleContainer.captionDisplay" ng-show="isContainerVisible(container)" ng-init="$last ? execItemScripts() : null">
      <legend class="h4" ng-if="(container.caption || container.captionDisplay)">{{container.captionDisplay || container.caption}}</legend>
      <div class="row">
        <div ng-repeat="column in container.columns" class="col-md-{{12 / container.columns.length }}">
          <div ng-switch="f.type" ng-repeat="f in column.fields" id="{{getVarID(f)}}" ng-class="{'form-inline': isInlineForm === true }">
            <div ng-switch-when="label" ng-if="formModel._fields[f.name]" ng-show="formModel._fields[f.name].visible">
              <label ng-bind-html="::f.label"></label>
              <span ng-if="::formModel._fields[f.name].instructions" ng-bind-html="::formModel._fields[f.name].instructions"></span>
              <p ng-if="::formModel._fields[f.name].help_text" title="{{::formModel._fields[f.name].help_tag}}" class="help-block" ng-bind-html="::formModel._fields[f.name].help_text"></p>
              <hr class="sp_label_hr"></hr>
            </div>
            <sp-form-field ng-switch-when="field" ng-if="formModel._fields[f.name]" form-model="formModel" field="formModel._fields[f.name]" glide-form="getGlideForm()" ng-show="formModel._fields[f.name].visible"></sp-form-field>
            <sp-variable-layout ng-switch-when="container" ng-init="containers=[f]"></sp-variable-layout>
            <sp-variable-layout ng-switch-when="checkbox_container" ng-init="containers=f.containers"></sp-variable-layout>
            <sp-widget ng-switch-when="formatter" ng-if="formModel._formatters[f.id].widgetInstance" widget="formModel._formatters[f.id].widgetInstance" page="{g_form: getGlideForm()}"></sp-widget>
            <hr ng-switch-when="break"></hr>
          </div>
        </div>
      </div>
    </fieldset>
  </uib-tab>
  </uib-tabset>
</div>

As the 3rd step, we replace the <!–form–> area in the Body section of the widget with the following code.

<div>
     <sp-model form_model="data.f" mandatory="mandatory" template-url="smse-tabbed-sp-model-xml"></sp-model>
   </div>