AAE-36536 Allow form sections to be at the root level of form (#11070)

* temp checkin to share

* add id attribute

* [AAE-36536] test fix for form.model.ts changes

---------

Co-authored-by: Alex Molodyh <alex.molodyh@hyland.com>

lib/core/src/lib/form/components/form-renderer.component.html

@@ -21,6 +21,10 @@
 
 <ng-template #render let-fieldToRender="fieldToRender">
     <div *ngFor="let currentRootElement of fieldToRender">
+        <div *ngIf="currentRootElement.type === 'section'" [id]="'field-' + currentRootElement?.id + '-container'" class="adf-container-widget">
+            <adf-form-section [field]="currentRootElement" />
+        </div>
+
         <div *ngIf="currentRootElement.type === 'container' || currentRootElement.type === 'group'"
              [id]="'field-' + currentRootElement?.id + '-container'"
              class="adf-container-widget"

lib/core/src/lib/form/components/widgets/core/form.model.spec.ts

@@ -708,5 +708,103 @@ describe('FormModel', () => {
             expect(fields[1].type).toBe(FormFieldTypes.DATE);
             expect(fields[2].type).toBe(FormFieldTypes.NUMBER);
         });
+
+        it('should handle sections at root level correctly', () => {
+            const mockFormWithRootSection = {
+                id: 'test-form',
+                name: 'Test Form',
+                fields: [
+                    {
+                        id: 'root-section',
+                        name: 'Root Section',
+                        type: 'section',
+                        numberOfColumns: 2,
+                        fields: {
+                            1: [
+                                {
+                                    id: 'text-in-root-section',
+                                    name: 'Text in Root Section',
+                                    type: 'text',
+                                    required: false,
+                                    readOnly: false
+                                }
+                            ]
+                        }
+                    }
+                ]
+            };
+
+            const formWithRootSection = new FormModel(mockFormWithRootSection);
+
+            // Check that the root section is parsed correctly - wrapped in ContainerModel as expected
+            expect(formWithRootSection.fields.length).toBe(1);
+            expect(formWithRootSection.fields[0]).toBeInstanceOf(ContainerModel);
+            expect(formWithRootSection.fields[0].field.type).toBe('section');
+            expect(formWithRootSection.fields[0].field.id).toBe('root-section');
+
+            // Check that getFormFields returns all fields including the section and its children
+            const allFields = formWithRootSection.getFormFields();
+            expect(allFields.length).toBe(2); // section + text field inside
+            expect(allFields[0].type).toBe('section');
+            expect(allFields[1].type).toBe('text');
+            expect(allFields[1].id).toBe('text-in-root-section');
+        });
+
+        it('should process container fields before section fields in getFormFields', () => {
+            const mockFormWithContainerAndSection = {
+                id: 'test-form',
+                name: 'Test Form',
+                fields: [
+                    {
+                        id: 'container-field',
+                        name: 'Container Field',
+                        type: 'container',
+                        numberOfColumns: 2,
+                        fields: {
+                            1: [
+                                {
+                                    id: 'text-in-container',
+                                    name: 'Text in Container',
+                                    type: 'text',
+                                    required: false,
+                                    readOnly: false
+                                }
+                            ]
+                        }
+                    },
+                    {
+                        id: 'section-field',
+                        name: 'Section Field',
+                        type: 'section',
+                        numberOfColumns: 1,
+                        fields: {
+                            1: [
+                                {
+                                    id: 'text-in-section',
+                                    name: 'Text in Section',
+                                    type: 'text',
+                                    required: false,
+                                    readOnly: false
+                                }
+                            ]
+                        }
+                    }
+                ]
+            };
+
+            const formWithMixed = new FormModel(mockFormWithContainerAndSection);
+            const allFields = formWithMixed.getFormFields();
+
+            // Check that the following order is correct: container, text-in-container, section, text-in-section
+            expect(allFields.length).toBe(4);
+            expect(allFields[0].type).toBe('container');
+            expect(allFields[0].id).toBe('container-field');
+            expect(allFields[1].type).toBe('text');
+            expect(allFields[1].id).toBe('text-in-container');
+            expect(allFields[2].type).toBe('section');
+            expect(allFields[2].id).toBe('section-field');
+            expect(allFields[3].type).toBe('text');
+            expect(allFields[3].id).toBe('text-in-section');
+        });
     });
 });

lib/core/src/lib/form/components/widgets/core/form.model.ts

@@ -201,7 +201,7 @@ export class FormModel implements ProcessFormModel {
         this.validateForm();
     }
 
-    // Activiti supports 3 types of root fields: container|group|dynamic-table
+    // Activiti supports 4 types of root fields: container|group|dynamic-table|section
     private parseRootFields(json: any): (ContainerModel | FormFieldModel)[] {
         let fields = [];
 
@@ -354,10 +354,10 @@ export class FormModel implements ProcessFormModel {
 
     private processFields(fields: (ContainerModel | FormFieldModel)[], formFieldModel: FormFieldModel[]): void {
         fields.forEach((field) => {
-            if (this.isSectionField(field)) {
-                this.handleSectionField(field, formFieldModel);
-            } else if (this.isContainerField(field)) {
+            if (this.isContainerField(field)) {
                 this.handleContainerField(field, formFieldModel);
+            } else if (this.isSectionField(field)) {
+                this.handleSectionField(field, formFieldModel);
             } else if (this.isFormField(field)) {
                 this.handleSingleField(field, formFieldModel);
             }