Tablı Widget yapısı oluşturma.

Navigasyon ekranında formu section yapısı ile tablı olarak dizayn ettiğimiz zaman Servicenow’un OOB widgetları bu tablı yapıyı render edemiyor ve fieldları alt alta listelerek okunması zor bir yapı karşımıza çıkartıyor. Yapacağımız 3 adımlı geliştirme sonrasında widget’ımız tablı özellik kazanmış olacak.

Nevigasyon ekranı tablı yapısı:

OOB widget tablı yapı görünümü:

Geliştirme sonrası tablı Widget görünümü:

Bu sounu aşmak için 3 adımdan oluşan bir geliştirme yapmamız yeterli.

1. adım UI Script oluşturuyoruz.

(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;
    };
  });
  
})();

2. adım

Widget’ın içine bir ng-template tanımlıyoruz. adı: “smse-tabbed-sp-model-xml” olacak.

<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>

3. adım olarak widget’ın Body kısmıda <!–form–> alanını aşağıdaki kod ile değiştiriyoruz.

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