OTB Form widget - how to display related list as tab instead of link

[mkm1]

In my scoped application, I am using out of the box (OTB) form widget which shows related list as links. Is there any option to make the links appear as tabs? 

Any direction will help. Cloning the widget is giving error for function 'hasRightsTo()' as unsupported ' data.isAdmin = gs.hasRightsTo('sp/configure.all/execute', null);' 

[mkm1]

Hello jrmarkel,

Couple of issue I detected on the Tabbed Form Widget v2, 1. one is if a Referenced column is dependent on another column, filter does not work properly the data in the widget. Screen shot below using the widget on portal and one on legacy.  2. Another observation is that on conditional UI action on a list control to display a button, it seems does not work with the widget on certain scenarios.

Is there something that I am doing wrong?

[jrmarkel]

See next comment.

[jrmarkel]

Hello mkm,

1. Wow! This has exposed a serious condition. More later.
2. Please try to provide an out-of-the-box example.
The changes to the list screen were relatively minor and should not affect UI Actions.
I suspect that the button is not visible due to an ACL condition.

The first issue was tested with the 'incident' table.
Enter the URL: ..../sp?id=list_v2&table=incident
and then press the 'New' button.

Change the 'Category' dropdown, then drop down the 'Subcategory' (but DO NOT SELECT a value).
Experiment with different categories and the subcategories seem to get appropriately refreshed.
However, if you select a Subcategory, then, change the Category value.....weirdness ensues.
The Subcategory starts flashing and continuous server calls are made.

The issue seems to be related to the template.
The base system templates have significantly changed.

This is the new sp_model.xml:

<div>
   <sp-variable-layout ng-if="!delayView" ng-attr-id="{{::formModel.table}}.do" />
   <div ng-init="execItemScripts()" />
</div>

This is the new sp_variable_layout.xml (what happened to the <fieldset> tag?):

<div ng-repeat="container in containers" class="sp-form-container" ng-show="paintForm(container)" ng-attr-role="{{(container.caption || container.captionDisplay) ? 'group' : undefined}}" ng-attr-aria-labelledby="{{(container.caption || container.captionDisplay) ? 'container_' + container.id : undefined}}">
   <span ng-if="(container.caption || container.captionDisplay)" class="container-caption form-container-caption">
      <span class="h4" role="heading" aria-level="3" id="container_{{::container.id}}">{{container.captionDisplay || container.caption}}</span>
      <sp-help-tag field="::formModel._fields[container.name]" />
   </span>
   <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].isVisible()">
               <label ng-bind="f.label" />
               <sp-help-tag field="::formModel._fields[f.name]" />
               <hr class="sp_label_hr" />
            </div>
            <sp-form-field ng-switch-when="field" ng-if="formModel._fields[f.name] &amp;&amp; formModel._fields[f.name]._class_name != 'RequestedForQuestion'" form-model="formModel" field="formModel._fields[f.name]" glide-form="getGlideForm()" ng-show="formModel._fields[f.name].isVisible()" default-value-setter="setDefaultValue(fieldName,fieldInternalValue,fieldDisplayValue)" />
            <sp-variable-layout ng-switch-when="container" ng-init="containers=[f]" />
            <sp-checkbox-group ng-switch-when="checkbox_container" name="f.name" form-model="formModel" containers="f.containers" glide-form="getGlideForm()" class="checkbox-container" />
            <sp-widget ng-switch-when="formatter" ng-if="formModel._formatters[f.id].widgetInstance" widget="formModel._formatters[f.id].widgetInstance" page="{g_form: getGlideForm()}" />
            <hr ng-switch-when="break" ng-show="formModel._fields[f.name].isVisible()" />
            <sp-sc-request-for ng-switch-when="field" ng-if="formModel._fields[f.name] &amp;&amp; formModel._fields[f.name]._class_name  == 'RequestedForQuestion'" form-model="formModel" field="formModel._fields[f.name]" glide-form="getGlideForm()" ng-show="formModel._fields[f.name].isVisible()" id="sp_formfield_requested_for_{{::field.name}}" tabindex="-1" />
         </div>
      </div>
   </div>
</div>

So, I made all of the substitutions, and following is the new 'tabbed_form_template_v2'.
Go to 'Service Portal - Widgets', select 'widget-form-tabbed-v2', click 'Angular ng-templates' tab and
replace the Template with this:

<div>
   <div ng-if="!delayView" ng-attr-id="{{::formModel.table}}.do">
      <div ng-if="($first)" ng-repeat="titleContainer in containers" class="sp-form-container" ng-show="paintForm(titleContainer)" ng-attr-role="{{(titleContainer.caption || titleContainer.captionDisplay) ? 'group' : undefined}}" ng-attr-aria-labelledby="{{(titleContainer.caption || titleContainer.captionDisplay) ? 'container_' + titleContainer.id : undefined}}">
         <span ng-if="(titleContainer.caption || titleContainer.captionDisplay)" class="container-caption form-container-caption">
            <span class="h4" role="heading" aria-level="3" id="container_{{::titleContainer.id}}">{{titleContainer.captionDisplay || titleContainer.caption}}</span>
            <sp-help-tag field="::formModel._fields[titleContainer.name]" />
         </span>
         <div class="row">
            <div ng-repeat="column in titleContainer.columns" class="col-md-{{::12 / titleContainer.columns.length }}">
               <div ng-show="titleContainer.visible" 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].isVisible()">
                     <label ng-bind="f.label" />
                     <sp-help-tag field="::formModel._fields[f.name]" />
                     <hr class="sp_label_hr" />
                  </div>
                  <sp-form-field ng-switch-when="field" ng-if="formModel._fields[f.name] &amp;&amp; formModel._fields[f.name]._class_name != 'RequestedForQuestion'" form-model="formModel" field="formModel._fields[f.name]" glide-form="getGlideForm()" ng-show="formModel._fields[f.name].isVisible()" default-value-setter="setDefaultValue(fieldName,fieldInternalValue,fieldDisplayValue)" />
                  <sp-variable-layout ng-switch-when="titleContainer" ng-init="containers=[f]" />
                  <sp-checkbox-group ng-switch-when="checkbox_container" name="f.name" form-model="formModel" containers="f.containers" glide-form="getGlideForm()" class="checkbox-container" />
                  <sp-widget ng-switch-when="formatter" ng-if="formModel._formatters[f.id].widgetInstance" widget="formModel._formatters[f.id].widgetInstance" page="{g_form: getGlideForm()}" />
                  <hr ng-switch-when="break" ng-show="formModel._fields[f.name].isVisible()" />
                  <sp-sc-request-for ng-switch-when="field" ng-if="formModel._fields[f.name] &amp;&amp; formModel._fields[f.name]._class_name  == 'RequestedForQuestion'" form-model="formModel" field="formModel._fields[f.name]" glide-form="getGlideForm()" ng-show="formModel._fields[f.name].isVisible()" id="sp_formfield_requested_for_{{::field.name}}" tabindex="-1" />
               </div>
               <div ng-repeat="container in containers | filter:{'_parent':titleContainer.id}" class="sp-form-container" ng-show="paintForm(container)" ng-attr-role="{{(container.caption || container.captionDisplay) ? 'group' : undefined}}" ng-attr-aria-labelledby="{{(container.caption || container.captionDisplay) ? 'container_' + container.id : undefined}}">
                  <span ng-if="(container.caption || container.captionDisplay)" class="container-caption form-container-caption">
                     <span class="h4" role="heading" aria-level="3" id="container_{{::container.id}}">{{container.captionDisplay || container.caption}}</span>
                     <sp-help-tag field="::formModel._fields[container.name]" />
                  </span>
                  <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].isVisible()">
                              <label ng-bind="f.label" />
                              <sp-help-tag field="::formModel._fields[f.name]" />
                              <hr class="sp_label_hr" />
                           </div>
                           <sp-form-field ng-switch-when="field" ng-if="formModel._fields[f.name] &amp;&amp; formModel._fields[f.name]._class_name != 'RequestedForQuestion'" form-model="formModel" field="formModel._fields[f.name]" glide-form="getGlideForm()" ng-show="formModel._fields[f.name].isVisible()" default-value-setter="setDefaultValue(fieldName,fieldInternalValue,fieldDisplayValue)" />
                           <sp-variable-layout ng-switch-when="container" ng-init="containers=[f]" />
                           <sp-checkbox-group ng-switch-when="checkbox_container" name="f.name" form-model="formModel" containers="f.containers" glide-form="getGlideForm()" class="checkbox-container" />
                           <sp-widget ng-switch-when="formatter" ng-if="formModel._formatters[f.id].widgetInstance" widget="formModel._formatters[f.id].widgetInstance" page="{g_form: getGlideForm()}" />
                           <hr ng-switch-when="break" ng-show="formModel._fields[f.name].isVisible()" />
                           <sp-sc-request-for ng-switch-when="field" ng-if="formModel._fields[f.name] &amp;&amp; formModel._fields[f.name]._class_name  == 'RequestedForQuestion'" form-model="formModel" field="formModel._fields[f.name]" glide-form="getGlideForm()" ng-show="formModel._fields[f.name].isVisible()" id="sp_formfield_requested_for_{{::field.name}}" tabindex="-1" />
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <scrollable-tabset-v2 auto-recalculate="true">
         <uib-tabset active="active" justified="false">
            <uib-tab index="$index+1" ng-repeat="titleContainer in containers | titledFormSectionFilter" ng-if="!($first) &amp;&amp; !titleContainer.parent" class="tab_header" ng-show="paintForm(titleContainer)" onclick="setTimeout(function() { window.dispatchEvent(new Event('resize')); }, 50)">
               <uib-tab-heading>
                  <span class="tab_caption_text" id="container_{{::titleContainer.id}}">{{titleContainer.captionDisplay}}</span>
                  <sp-help-tag field="::formModel._fields[container.name]" />
                  <span ng-repeat="column in titleContainer.columns">
                     <span ng-repeat="f in column.fields | mandatoryColumnFilter : mandatory | limitTo: 1">
                        <span class="fa fa-asterisk mandatory" title="Tab contains missing required entries" style="padding-right: 0.25em;" aria-label="Required" />
                     </span>
                  </span>
               </uib-tab-heading>
               <div style="margin-top: 20px;" ng-repeat="container in containers | currentFormSectionFilter : titleContainer.captionDisplay" ng-show="paintForm(container)">
                  <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].isVisible()">
                              <label ng-bind="f.label" />
                              <sp-help-tag field="::formModel._fields[f.name]" />
                              <hr class="sp_label_hr" />
                           </div>
                           <sp-form-field ng-switch-when="field" ng-if="formModel._fields[f.name] &amp;&amp; formModel._fields[f.name]._class_name != 'RequestedForQuestion'" form-model="formModel" field="formModel._fields[f.name]" glide-form="getGlideForm()" ng-show="formModel._fields[f.name].isVisible()" default-value-setter="setDefaultValue(fieldName,fieldInternalValue,fieldDisplayValue)" />
                           <sp-variable-layout ng-switch-when="container" ng-init="containers=[f]" />
                           <sp-checkbox-group ng-switch-when="checkbox_container" name="f.name" form-model="formModel" containers="f.containers" glide-form="getGlideForm()" class="checkbox-container" />
                           <sp-widget ng-switch-when="formatter" ng-if="formModel._formatters[f.id].widgetInstance" widget="formModel._formatters[f.id].widgetInstance" page="{g_form: getGlideForm()}" />
                           <hr ng-switch-when="break" ng-show="formModel._fields[f.name].isVisible()" />
                           <sp-sc-request-for ng-switch-when="field" ng-if="formModel._fields[f.name] &amp;&amp; formModel._fields[f.name]._class_name  == 'RequestedForQuestion'" form-model="formModel" field="formModel._fields[f.name]" glide-form="getGlideForm()" ng-show="formModel._fields[f.name].isVisible()" id="sp_formfield_requested_for_{{::field.name}}" tabindex="-1" />
                        </div>
                     </div>
                  </div>
               </div>
               <div ng-repeat="subcontainer in containers | filter:{'_parent':container.id}">
                  <div class="row" ng-show="container.visible">
                     <div ng-repeat="column in subcontainer.columns" class="col-md-{{::12 / subcontainer.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].isVisible()">
                              <label ng-bind="f.label" />
                              <sp-help-tag field="::formModel._fields[f.name]" />
                              <hr class="sp_label_hr" />
                           </div>
                           <sp-form-field ng-switch-when="field" ng-if="formModel._fields[f.name] &amp;&amp; formModel._fields[f.name]._class_name != 'RequestedForQuestion'" form-model="formModel" field="formModel._fields[f.name]" glide-form="getGlideForm()" ng-show="formModel._fields[f.name].isVisible()" default-value-setter="setDefaultValue(fieldName,fieldInternalValue,fieldDisplayValue)" />
                           <sp-variable-layout ng-switch-when="subcontainer" ng-init="containers=[f]" />
                           <sp-checkbox-group ng-switch-when="checkbox_container" name="f.name" form-model="formModel" containers="f.containers" glide-form="getGlideForm()" class="checkbox-container" />
                           <sp-widget ng-switch-when="formatter" ng-if="formModel._formatters[f.id].widgetInstance" widget="formModel._formatters[f.id].widgetInstance" page="{g_form: getGlideForm()}" />
                           <hr ng-switch-when="break" ng-show="formModel._fields[f.name].isVisible()" />
                           <sp-sc-request-for ng-switch-when="field" ng-if="formModel._fields[f.name] &amp;&amp; formModel._fields[f.name]._class_name  == 'RequestedForQuestion'" form-model="formModel" field="formModel._fields[f.name]" glide-form="getGlideForm()" ng-show="formModel._fields[f.name].isVisible()" id="sp_formfield_requested_for_{{::field.name}}" tabindex="-1" />
                        </div>
                     </div>
                  </div>
               </div>
            </uib-tab>
         </uib-tabset>
      </scrollable-tabset-v2>
   </div>
   <div ng-init="execItemScripts()" />
</div>

Please test and see if it works for you.