I have cloned the ootb widget-form and am attempting to make edits to the template in order to make the widget-form tabular. I am running into an issue where form sections and any splits within a section are considered the same thing. For example, in the system view, I have a form section that looks like this:
Notice that in my form section called "Name" I have two fields in 1 column format, then I split, and have 6 remaining fields in a two column format. When I pull up the formModel for the widget-form, I see this:
"_sections":[
{
"_bootstrap_cells":12,
"_count":1,
"visible":true,
"columns":[
{
"fields":[
{
"name":"name",
"type":"field"
},
{
"name":"favorite_fruit",
"type":"field"
},
{
"name":"birth_date",
"type":"field"
}
]
}
],
"caption":"Name",
"id":"136ae5c5db030300b11c771c8c9619a0",
"scope_name":"x_82643_my_custom"
},
{
"_bootstrap_cells":6,
"_count":2,
"visible":true,
"columns":[
{
"fields":[
{
"name":"name.phone",
"type":"field"
},
{
"name":"name.city",
"type":"field"
},
{
"name":"name.country",
"type":"field"
}
]
},
{
"fields":[
{
"name":"name.email",
"type":"field"
},
{
"name":"name.employee_number",
"type":"field"
},
{
"name":"name.gender",
"type":"field"
}
]
}
],
"caption":"",
"id":"",
"scope_name":"x_82643_my_custom"
}
]Even though they appear on the same form section, the formModel recognizes both as individual sections. This matters because when I change the template to be tabular, I'm creating the tabs via ng-repeat on containers:
<uib-tabset active="active" justified="true">
<uib-tab index="$index+1" ng-init="$last ? execItemScripts() : null" ng-show="isContainerVisible(container)" ng-repeat="container in containers" heading="{{$index+1}}. {{container.captionDisplay || container.caption}}">When this runs, the widget-form creates two tabs: 1 with a tab name of "Name" and a subsequent one is just blank:
I want all that information to be in one tab, like it appears in the system view.
I've found the code in the spModel directive where I think this problem stems from, but am unsure how to alter it so that all the fields appear under one section:
function getNestedFields(fields, containers) {
if (!containers)
return;
for (var _container in containers) {
var container = containers[_container];
if (container.columns) {
for (var _col in container.columns) {
var col = container.columns[_col];
for (var _field in col.fields) {
var field = col.fields[_field];
if (field.type == "container")
getNestedFields(fields, [field]);
else if (field.type == "checkbox_container")
getNestedFields(fields, field.containers);
else if (field.type == "field")
fields.push(formModel._fields[field.name]);
}
}
}
}
}Any suggestions on how to change this code so that _sections without a "caption" or "id" gets appended to the previous _section?
Thanks.
Ok ive got it.
Here is the template 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>
and here is the UI script for the custom AngularJS formatters (there are two):
(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;
};
});
})();
And here is the result:
@davilu @jamesmcwhinney
I am trying the steps but getting nothing. please note that my instance is in Madrid. I have followed all the steps and added the new cloned form widget in the ticket page but its not displaying any records, attaching screenshot of the same. Not sure where its going wrong, any help on this will be great.
