<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <title>angular2 playground</title>
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-orange.min.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://unpkg.com/md-date-time-picker@2.2.0/dist/css/mdDateTimePicker.css">
    <script src="https://unpkg.com/moment/min/moment.min.js"></script>
    <script src="https://unpkg.com/md-date-time-picker@2.2.0/dist/js/mdDateTimePicker.min.js"></script>
    <script src="https://unpkg.com/md-date-time-picker@2.2.0/dist/js/draggabilly.pkgd.min.js"></script>
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>


    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js@0.7.4?main=browser"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.8"></script>
    <script src="https://unpkg.com/systemjs@0.19.27/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>
/* Styles go here */
.p-10 {
  padding: 10px;
} 
### Angular Starter Plunker - Typescript
System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './src',
    
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
    
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.0.2/lib/typescript.js',
    'moment': 'npm:moment/min/moment.min.js',
    '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
    
    'ng2-translate': 'npm:ng2-translate@2.5.0',
    'alfresco-js-api': 'npm:alfresco-js-api@1.1.0/dist/alfresco-js-api.min.js',
    'ng2-alfresco-core': 'npm:ng2-alfresco-core@1.1.0/bundles/ng2-alfresco-core.js',
    'ng2-activiti-form': 'npm:ng2-activiti-form@1.1.0/bundles/ng2-activiti-form.js',
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    },
    'ng2-translate': { defaultExtension: 'js' }
  }
});
//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)
//our root app component
import { Component, NgModule, ViewChild, AfterViewInit, ChangeDetectorRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CoreModule } from 'ng2-alfresco-core';
import { ActivitiFormModule, ActivitiForm, FormModel } from 'ng2-activiti-form';
import { DemoForm } from './demoForm';  

@Component({
  selector: 'my-app',
  template: `
    <activiti-form #activitiForm></activiti-form>
  `,
})
export class App implements AfterViewInit {
  
  @ViewChild(ActivitiForm)
  activitiForm: ActivitiForm;
  
  constructor(private changeDetector: ChangeDetectorRef) {
    
  }
  
  ngAfterViewInit() {
    console.log(this.activitiForm);
    let formDefinitionJSON: any = DemoForm.getDefinition();
    let form: FormModel = this.activitiForm.parseForm(formDefinitionJSON);
    console.log(form);
    
    this.activitiForm.form = form;
    this.changeDetector.detectChanges();
  }
}

@NgModule({
  imports: [
    BrowserModule,
    CoreModule.forRoot(),
    ActivitiFormModule.forRoot()
  ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}
export class DemoForm {
  
  static getDefinition(): any {
    return {
      "id": 3003,
      "name": "plunker-01",
      "taskId": "7501",
      "taskName": "Plunk 01",
      "tabs": [
          {
              "id": "tab1",
              "title": "Text",
              "visibilityCondition": null
          },
          {
              "id": "tab2",
              "title": "Misc",
              "visibilityCondition": null
          }
      ],
      "fields": [
          {
              "fieldType": "ContainerRepresentation",
              "id": "1488274019966",
              "name": "Label",
              "type": "container",
              "value": null,
              "required": false,
              "readOnly": false,
              "overrideId": false,
              "colspan": 1,
              "placeholder": null,
              "minLength": 0,
              "maxLength": 0,
              "minValue": null,
              "maxValue": null,
              "regexPattern": null,
              "optionType": null,
              "hasEmptyValue": null,
              "options": null,
              "restUrl": null,
              "restResponsePath": null,
              "restIdProperty": null,
              "restLabelProperty": null,
              "tab": null,
              "className": null,
              "dateDisplayFormat": null,
              "layout": null,
              "sizeX": 2,
              "sizeY": 1,
              "row": -1,
              "col": -1,
              "visibilityCondition": null,
              "numberOfColumns": 2,
              "fields": {
                  "1": [],
                  "2": []
              }
          },
          {
              "fieldType": "ContainerRepresentation",
              "id": "section4",
              "name": "Section 4",
              "type": "group",
              "value": null,
              "required": false,
              "readOnly": false,
              "overrideId": false,
              "colspan": 1,
              "placeholder": null,
              "minLength": 0,
              "maxLength": 0,
              "minValue": null,
              "maxValue": null,
              "regexPattern": null,
              "optionType": null,
              "hasEmptyValue": null,
              "options": null,
              "restUrl": null,
              "restResponsePath": null,
              "restIdProperty": null,
              "restLabelProperty": null,
              "tab": "tab2",
              "className": null,
              "dateDisplayFormat": null,
              "layout": {
                  "row": -1,
                  "column": -1,
                  "colspan": 2
              },
              "sizeX": 2,
              "sizeY": 1,
              "row": -1,
              "col": -1,
              "visibilityCondition": null,
              "numberOfColumns": 2,
              "fields": {
                  "1": [
                      {
                          "fieldType": "FormFieldRepresentation",
                          "id": "label8",
                          "name": "Label8",
                          "type": "people",
                          "value": null,
                          "required": false,
                          "readOnly": false,
                          "overrideId": false,
                          "colspan": 1,
                          "placeholder": null,
                          "minLength": 0,
                          "maxLength": 0,
                          "minValue": null,
                          "maxValue": null,
                          "regexPattern": null,
                          "optionType": null,
                          "hasEmptyValue": null,
                          "options": null,
                          "restUrl": null,
                          "restResponsePath": null,
                          "restIdProperty": null,
                          "restLabelProperty": null,
                          "tab": "tab2",
                          "className": null,
                          "params": {
                              "existingColspan": 1,
                              "maxColspan": 2
                          },
                          "dateDisplayFormat": null,
                          "layout": {
                              "row": -1,
                              "column": -1,
                              "colspan": 1
                          },
                          "sizeX": 1,
                          "sizeY": 1,
                          "row": -1,
                          "col": -1,
                          "visibilityCondition": null
                      },
                      {
                          "fieldType": "FormFieldRepresentation",
                          "id": "label13",
                          "name": "Label13",
                          "type": "functional-group",
                          "value": null,
                          "required": false,
                          "readOnly": false,
                          "overrideId": false,
                          "colspan": 1,
                          "placeholder": null,
                          "minLength": 0,
                          "maxLength": 0,
                          "minValue": null,
                          "maxValue": null,
                          "regexPattern": null,
                          "optionType": null,
                          "hasEmptyValue": null,
                          "options": null,
                          "restUrl": null,
                          "restResponsePath": null,
                          "restIdProperty": null,
                          "restLabelProperty": null,
                          "tab": "tab2",
                          "className": null,
                          "params": {
                              "existingColspan": 1,
                              "maxColspan": 2
                          },
                          "dateDisplayFormat": null,
                          "layout": {
                              "row": -1,
                              "column": -1,
                              "colspan": 1
                          },
                          "sizeX": 1,
                          "sizeY": 1,
                          "row": -1,
                          "col": -1,
                          "visibilityCondition": null
                      },
                      {
                          "fieldType": "FormFieldRepresentation",
                          "id": "label18",
                          "name": "Label18",
                          "type": "readonly",
                          "value": null,
                          "required": false,
                          "readOnly": false,
                          "overrideId": false,
                          "colspan": 1,
                          "placeholder": null,
                          "minLength": 0,
                          "maxLength": 0,
                          "minValue": null,
                          "maxValue": null,
                          "regexPattern": null,
                          "optionType": null,
                          "hasEmptyValue": null,
                          "options": null,
                          "restUrl": null,
                          "restResponsePath": null,
                          "restIdProperty": null,
                          "restLabelProperty": null,
                          "tab": "tab2",
                          "className": null,
                          "params": {
                              "existingColspan": 1,
                              "maxColspan": 2
                          },
                          "dateDisplayFormat": null,
                          "layout": {
                              "row": -1,
                              "column": -1,
                              "colspan": 1
                          },
                          "sizeX": 1,
                          "sizeY": 1,
                          "row": -1,
                          "col": -1,
                          "visibilityCondition": null
                      },
                      {
                          "fieldType": "FormFieldRepresentation",
                          "id": "label19",
                          "name": "Label19",
                          "type": "readonly-text",
                          "value": "Display text as part of the form",
                          "required": false,
                          "readOnly": false,
                          "overrideId": false,
                          "colspan": 1,
                          "placeholder": null,
                          "minLength": 0,
                          "maxLength": 0,
                          "minValue": null,
                          "maxValue": null,
                          "regexPattern": null,
                          "optionType": null,
                          "hasEmptyValue": null,
                          "options": null,
                          "restUrl": null,
                          "restResponsePath": null,
                          "restIdProperty": null,
                          "restLabelProperty": null,
                          "tab": "tab2",
                          "className": null,
                          "params": {
                              "existingColspan": 1,
                              "maxColspan": 2
                          },
                          "dateDisplayFormat": null,
                          "layout": {
                              "row": -1,
                              "column": -1,
                              "colspan": 1
                          },
                          "sizeX": 1,
                          "sizeY": 1,
                          "row": -1,
                          "col": -1,
                          "visibilityCondition": null
                      }
                  ],
                  "2": [
                      {
                          "fieldType": "HyperlinkRepresentation",
                          "id": "label15",
                          "name": "Label15",
                          "type": "hyperlink",
                          "value": null,
                          "required": false,
                          "readOnly": false,
                          "overrideId": false,
                          "colspan": 1,
                          "placeholder": null,
                          "minLength": 0,
                          "maxLength": 0,
                          "minValue": null,
                          "maxValue": null,
                          "regexPattern": null,
                          "optionType": null,
                          "hasEmptyValue": null,
                          "options": null,
                          "restUrl": null,
                          "restResponsePath": null,
                          "restIdProperty": null,
                          "restLabelProperty": null,
                          "tab": "tab2",
                          "className": null,
                          "params": {
                              "existingColspan": 1,
                              "maxColspan": 1
                          },
                          "dateDisplayFormat": null,
                          "layout": {
                              "row": -1,
                              "column": -1,
                              "colspan": 1
                          },
                          "sizeX": 1,
                          "sizeY": 1,
                          "row": -1,
                          "col": -1,
                          "visibilityCondition": null,
                          "hyperlinkUrl": "www.google.com",
                          "displayText": null
                      },
                      {
                          "fieldType": "AttachFileFieldRepresentation",
                          "id": "label16",
                          "name": "Label16",
                          "type": "upload",
                          "value": [],
                          "required": false,
                          "readOnly": false,
                          "overrideId": false,
                          "colspan": 1,
                          "placeholder": null,
                          "minLength": 0,
                          "maxLength": 0,
                          "minValue": null,
                          "maxValue": null,
                          "regexPattern": null,
                          "optionType": null,
                          "hasEmptyValue": null,
                          "options": null,
                          "restUrl": null,
                          "restResponsePath": null,
                          "restIdProperty": null,
                          "restLabelProperty": null,
                          "tab": "tab2",
                          "className": null,
                          "params": {
                              "existingColspan": 1,
                              "maxColspan": 1,
                              "fileSource": {
                                  "serviceId": "all-file-sources",
                                  "name": "All file sources"
                              }
                          },
                          "dateDisplayFormat": null,
                          "layout": {
                              "row": -1,
                              "column": -1,
                              "colspan": 1
                          },
                          "sizeX": 1,
                          "sizeY": 1,
                          "row": -1,
                          "col": -1,
                          "visibilityCondition": null,
                          "metaDataColumnDefinitions": null
                      },
                      {
                          "fieldType": "FormFieldRepresentation",
                          "id": "label17",
                          "name": "Label17",
                          "type": "select-folder",
                          "value": null,
                          "required": false,
                          "readOnly": false,
                          "overrideId": false,
                          "colspan": 1,
                          "placeholder": null,
                          "minLength": 0,
                          "maxLength": 0,
                          "minValue": null,
                          "maxValue": null,
                          "regexPattern": null,
                          "optionType": null,
                          "hasEmptyValue": null,
                          "options": null,
                          "restUrl": null,
                          "restResponsePath": null,
                          "restIdProperty": null,
                          "restLabelProperty": null,
                          "tab": "tab2",
                          "className": null,
                          "params": {
                              "existingColspan": 1,
                              "maxColspan": 1,
                              "folderSource": {
                                  "serviceId": "alfresco-1",
                                  "name": "Alfresco 5.2 Local",
                                  "metaDataAllowed": true
                              }
                          },
                          "dateDisplayFormat": null,
                          "layout": {
                              "row": -1,
                              "column": -1,
                              "colspan": 1
                          },
                          "sizeX": 1,
                          "sizeY": 1,
                          "row": -1,
                          "col": -1,
                          "visibilityCondition": null
                      }
                  ]
              }
          },
          {
              "fieldType": "DynamicTableRepresentation",
              "id": "label14",
              "name": "Label14",
              "type": "dynamic-table",
              "value": null,
              "required": false,
              "readOnly": false,
              "overrideId": false,
              "colspan": 1,
              "placeholder": null,
              "minLength": 0,
              "maxLength": 0,
              "minValue": null,
              "maxValue": null,
              "regexPattern": null,
              "optionType": null,
              "hasEmptyValue": null,
              "options": null,
              "restUrl": null,
              "restResponsePath": null,
              "restIdProperty": null,
              "restLabelProperty": null,
              "tab": "tab2",
              "className": null,
              "params": {
                  "existingColspan": 1,
                  "maxColspan": 1
              },
              "dateDisplayFormat": null,
              "layout": {
                  "row": -1,
                  "column": -1,
                  "colspan": 2
              },
              "sizeX": 2,
              "sizeY": 2,
              "row": -1,
              "col": -1,
              "visibilityCondition": null,
              "columnDefinitions": [
                  {
                      "id": "id",
                      "name": "id",
                      "type": "String",
                      "value": null,
                      "optionType": null,
                      "options": null,
                      "restResponsePath": null,
                      "restUrl": null,
                      "restIdProperty": null,
                      "restLabelProperty": null,
                      "amountCurrency": null,
                      "amountEnableFractions": false,
                      "required": true,
                      "editable": true,
                      "sortable": true,
                      "visible": true,
                      "endpoint": null,
                      "requestHeaders": null
                  },
                  {
                      "id": "name",
                      "name": "name",
                      "type": "String",
                      "value": null,
                      "optionType": null,
                      "options": null,
                      "restResponsePath": null,
                      "restUrl": null,
                      "restIdProperty": null,
                      "restLabelProperty": null,
                      "amountCurrency": null,
                      "amountEnableFractions": false,
                      "required": true,
                      "editable": true,
                      "sortable": true,
                      "visible": true,
                      "endpoint": null,
                      "requestHeaders": null
                  }
              ]
          },
          {
              "fieldType": "ContainerRepresentation",
              "id": "section1",
              "name": "Section 1",
              "type": "group",
              "value": null,
              "required": false,
              "readOnly": false,
              "overrideId": false,
              "colspan": 1,
              "placeholder": null,
              "minLength": 0,
              "maxLength": 0,
              "minValue": null,
              "maxValue": null,
              "regexPattern": null,
              "optionType": null,
              "hasEmptyValue": null,
              "options": null,
              "restUrl": null,
              "restResponsePath": null,
              "restIdProperty": null,
              "restLabelProperty": null,
              "tab": "tab1",
              "className": null,
              "dateDisplayFormat": null,
              "layout": {
                  "row": -1,
                  "column": -1,
                  "colspan": 2
              },
              "sizeX": 2,
              "sizeY": 1,
              "row": -1,
              "col": -1,
              "visibilityCondition": null,
              "numberOfColumns": 2,
              "fields": {
                  "1": [
                      {
                          "fieldType": "FormFieldRepresentation",
                          "id": "label1",
                          "name": "Label1",
                          "type": "text",
                          "value": null,
                          "required": false,
                          "readOnly": false,
                          "overrideId": false,
                          "colspan": 1,
                          "placeholder": null,
                          "minLength": 0,
                          "maxLength": 0,
                          "minValue": null,
                          "maxValue": null,
                          "regexPattern": null,
                          "optionType": null,
                          "hasEmptyValue": null,
                          "options": null,
                          "restUrl": null,
                          "restResponsePath": null,
                          "restIdProperty": null,
                          "restLabelProperty": null,
                          "tab": "tab1",
                          "className": null,
                          "params": {
                              "existingColspan": 1,
                              "maxColspan": 2
                          },
                          "dateDisplayFormat": null,
                          "layout": {
                              "row": -1,
                              "column": -1,
                              "colspan": 1
                          },
                          "sizeX": 1,
                          "sizeY": 1,
                          "row": -1,
                          "col": -1,
                          "visibilityCondition": null
                      },
                      {
                          "fieldType": "FormFieldRepresentation",
                          "id": "label3",
                          "name": "Label3",
                          "type": "text",
                          "value": null,
                          "required": false,
                          "readOnly": false,
                          "overrideId": false,
                          "colspan": 1,
                          "placeholder": null,
                          "minLength": 0,
                          "maxLength": 0,
                          "minValue": null,
                          "maxValue": null,
                          "regexPattern": null,
                          "optionType": null,
                          "hasEmptyValue": null,
                          "options": null,
                          "restUrl": null,
                          "restResponsePath": null,
                          "restIdProperty": null,
                          "restLabelProperty": null,
                          "tab": "tab1",
                          "className": null,
                          "params": {
                              "existingColspan": 1,
                              "maxColspan": 2
                          },
                          "dateDisplayFormat": null,
                          "layout": {
                              "row": -1,
                              "column": -1,
                              "colspan": 1
                          },
                          "sizeX": 1,
                          "sizeY": 1,
                          "row": -1,
                          "col": -1,
                          "visibilityCondition": null
                      }
                  ],
                  "2": [
                      {
                          "fieldType": "FormFieldRepresentation",
                          "id": "label2",
                          "name": "Label2",
                          "type": "multi-line-text",
                          "value": null,
                          "required": false,
                          "readOnly": false,
                          "overrideId": false,
                          "colspan": 1,
                          "placeholder": null,
                          "minLength": 0,
                          "maxLength": 0,
                          "minValue": null,
                          "maxValue": null,
                          "regexPattern": null,
                          "optionType": null,
                          "hasEmptyValue": null,
                          "options": null,
                          "restUrl": null,
                          "restResponsePath": null,
                          "restIdProperty": null,
                          "restLabelProperty": null,
                          "tab": "tab1",
                          "className": null,
                          "params": {
                              "existingColspan": 1,
                              "maxColspan": 1
                          },
                          "dateDisplayFormat": null,
                          "layout": {
                              "row": -1,
                              "column": -1,
                              "colspan": 1
                          },
                          "sizeX": 1,
                          "sizeY": 2,
                          "row": -1,
                          "col": -1,
                          "visibilityCondition": null
                      }
                  ]
              }
          },
          {
              "fieldType": "ContainerRepresentation",
              "id": "section2",
              "name": "Section 2",
              "type": "group",
              "value": null,
              "required": false,
              "readOnly": false,
              "overrideId": false,
              "colspan": 1,
              "placeholder": null,
              "minLength": 0,
              "maxLength": 0,
              "minValue": null,
              "maxValue": null,
              "regexPattern": null,
              "optionType": null,
              "hasEmptyValue": null,
              "options": null,
              "restUrl": null,
              "restResponsePath": null,
              "restIdProperty": null,
              "restLabelProperty": null,
              "tab": "tab1",
              "className": null,
              "dateDisplayFormat": null,
              "layout": {
                  "row": -1,
                  "column": -1,
                  "colspan": 2
              },
              "sizeX": 2,
              "sizeY": 1,
              "row": -1,
              "col": -1,
              "visibilityCondition": null,
              "numberOfColumns": 2,
              "fields": {
                  "1": [
                      {
                          "fieldType": "FormFieldRepresentation",
                          "id": "label4",
                          "name": "Label4",
                          "type": "integer",
                          "value": null,
                          "required": false,
                          "readOnly": false,
                          "overrideId": false,
                          "colspan": 1,
                          "placeholder": null,
                          "minLength": 0,
                          "maxLength": 0,
                          "minValue": null,
                          "maxValue": null,
                          "regexPattern": null,
                          "optionType": null,
                          "hasEmptyValue": null,
                          "options": null,
                          "restUrl": null,
                          "restResponsePath": null,
                          "restIdProperty": null,
                          "restLabelProperty": null,
                          "tab": "tab1",
                          "className": null,
                          "params": {
                              "existingColspan": 1,
                              "maxColspan": 2
                          },
                          "dateDisplayFormat": null,
                          "layout": {
                              "row": -1,
                              "column": -1,
                              "colspan": 1
                          },
                          "sizeX": 1,
                          "sizeY": 1,
                          "row": -1,
                          "col": -1,
                          "visibilityCondition": null
                      },
                      {
                          "fieldType": "FormFieldRepresentation",
                          "id": "label7",
                          "name": "Label7",
                          "type": "date",
                          "value": null,
                          "required": false,
                          "readOnly": false,
                          "overrideId": false,
                          "colspan": 1,
                          "placeholder": null,
                          "minLength": 0,
                          "maxLength": 0,
                          "minValue": null,
                          "maxValue": null,
                          "regexPattern": null,
                          "optionType": null,
                          "hasEmptyValue": null,
                          "options": null,
                          "restUrl": null,
                          "restResponsePath": null,
                          "restIdProperty": null,
                          "restLabelProperty": null,
                          "tab": "tab1",
                          "className": null,
                          "params": {
                              "existingColspan": 1,
                              "maxColspan": 2
                          },
                          "dateDisplayFormat": null,
                          "layout": {
                              "row": -1,
                              "column": -1,
                              "colspan": 1
                          },
                          "sizeX": 1,
                          "sizeY": 1,
                          "row": -1,
                          "col": -1,
                          "visibilityCondition": null
                      }
                  ],
                  "2": [
                      {
                          "fieldType": "FormFieldRepresentation",
                          "id": "label5",
                          "name": "Label5",
                          "type": "boolean",
                          "value": null,
                          "required": false,
                          "readOnly": false,
                          "overrideId": false,
                          "colspan": 1,
                          "placeholder": null,
                          "minLength": 0,
                          "maxLength": 0,
                          "minValue": null,
                          "maxValue": null,
                          "regexPattern": null,
                          "optionType": null,
                          "hasEmptyValue": null,
                          "options": null,
                          "restUrl": null,
                          "restResponsePath": null,
                          "restIdProperty": null,
                          "restLabelProperty": null,
                          "tab": "tab1",
                          "className": null,
                          "params": {
                              "existingColspan": 1,
                              "maxColspan": 1
                          },
                          "dateDisplayFormat": null,
                          "layout": {
                              "row": -1,
                              "column": -1,
                              "colspan": 1
                          },
                          "sizeX": 1,
                          "sizeY": 1,
                          "row": -1,
                          "col": -1,
                          "visibilityCondition": null
                      },
                      {
                          "fieldType": "FormFieldRepresentation",
                          "id": "label6",
                          "name": "Label6",
                          "type": "boolean",
                          "value": null,
                          "required": false,
                          "readOnly": false,
                          "overrideId": false,
                          "colspan": 1,
                          "placeholder": null,
                          "minLength": 0,
                          "maxLength": 0,
                          "minValue": null,
                          "maxValue": null,
                          "regexPattern": null,
                          "optionType": null,
                          "hasEmptyValue": null,
                          "options": null,
                          "restUrl": null,
                          "restResponsePath": null,
                          "restIdProperty": null,
                          "restLabelProperty": null,
                          "tab": "tab1",
                          "className": null,
                          "params": {
                              "existingColspan": 1,
                              "maxColspan": 1
                          },
                          "dateDisplayFormat": null,
                          "layout": {
                              "row": -1,
                              "column": -1,
                              "colspan": 1
                          },
                          "sizeX": 1,
                          "sizeY": 1,
                          "row": -1,
                          "col": -1,
                          "visibilityCondition": null
                      },
                      {
                          "fieldType": "AmountFieldRepresentation",
                          "id": "label11",
                          "name": "Label11",
                          "type": "amount",
                          "value": null,
                          "required": false,
                          "readOnly": false,
                          "overrideId": false,
                          "colspan": 1,
                          "placeholder": null,
                          "minLength": 0,
                          "maxLength": 0,
                          "minValue": null,
                          "maxValue": null,
                          "regexPattern": null,
                          "optionType": null,
                          "hasEmptyValue": null,
                          "options": null,
                          "restUrl": null,
                          "restResponsePath": null,
                          "restIdProperty": null,
                          "restLabelProperty": null,
                          "tab": "tab1",
                          "className": null,
                          "params": {
                              "existingColspan": 1,
                              "maxColspan": 1
                          },
                          "dateDisplayFormat": null,
                          "layout": {
                              "row": -1,
                              "column": -1,
                              "colspan": 1
                          },
                          "sizeX": 1,
                          "sizeY": 1,
                          "row": -1,
                          "col": -1,
                          "visibilityCondition": null,
                          "enableFractions": false,
                          "currency": null
                      }
                  ]
              }
          },
          {
              "fieldType": "ContainerRepresentation",
              "id": "section3",
              "name": "Section 3",
              "type": "group",
              "value": null,
              "required": false,
              "readOnly": false,
              "overrideId": false,
              "colspan": 1,
              "placeholder": null,
              "minLength": 0,
              "maxLength": 0,
              "minValue": null,
              "maxValue": null,
              "regexPattern": null,
              "optionType": null,
              "hasEmptyValue": null,
              "options": null,
              "restUrl": null,
              "restResponsePath": null,
              "restIdProperty": null,
              "restLabelProperty": null,
              "tab": "tab1",
              "className": null,
              "dateDisplayFormat": null,
              "layout": {
                  "row": -1,
                  "column": -1,
                  "colspan": 2
              },
              "sizeX": 2,
              "sizeY": 1,
              "row": -1,
              "col": -1,
              "visibilityCondition": null,
              "numberOfColumns": 2,
              "fields": {
                  "1": [
                      {
                          "fieldType": "RestFieldRepresentation",
                          "id": "label9",
                          "name": "Label9",
                          "type": "dropdown",
                          "value": "Choose one...",
                          "required": false,
                          "readOnly": false,
                          "overrideId": false,
                          "colspan": 1,
                          "placeholder": null,
                          "minLength": 0,
                          "maxLength": 0,
                          "minValue": null,
                          "maxValue": null,
                          "regexPattern": null,
                          "optionType": null,
                          "hasEmptyValue": true,
                          "options": [
                              {
                                  "id": "empty",
                                  "name": "Choose one..."
                              }
                          ],
                          "restUrl": null,
                          "restResponsePath": null,
                          "restIdProperty": null,
                          "restLabelProperty": null,
                          "tab": "tab1",
                          "className": null,
                          "params": {
                              "existingColspan": 1,
                              "maxColspan": 2
                          },
                          "dateDisplayFormat": null,
                          "layout": {
                              "row": -1,
                              "column": -1,
                              "colspan": 1
                          },
                          "sizeX": 1,
                          "sizeY": 1,
                          "row": -1,
                          "col": -1,
                          "visibilityCondition": null,
                          "endpoint": null,
                          "requestHeaders": null
                      },
                      {
                          "fieldType": "RestFieldRepresentation",
                          "id": "label12",
                          "name": "Label12",
                          "type": "radio-buttons",
                          "value": null,
                          "required": false,
                          "readOnly": false,
                          "overrideId": false,
                          "colspan": 1,
                          "placeholder": null,
                          "minLength": 0,
                          "maxLength": 0,
                          "minValue": null,
                          "maxValue": null,
                          "regexPattern": null,
                          "optionType": null,
                          "hasEmptyValue": null,
                          "options": [
                              {
                                  "id": "option_1",
                                  "name": "Option 1"
                              },
                              {
                                  "id": "option_2",
                                  "name": "Option 2"
                              }
                          ],
                          "restUrl": null,
                          "restResponsePath": null,
                          "restIdProperty": null,
                          "restLabelProperty": null,
                          "tab": "tab1",
                          "className": null,
                          "params": {
                              "existingColspan": 1,
                              "maxColspan": 2
                          },
                          "dateDisplayFormat": null,
                          "layout": {
                              "row": -1,
                              "column": -1,
                              "colspan": 1
                          },
                          "sizeX": 1,
                          "sizeY": 1,
                          "row": -1,
                          "col": -1,
                          "visibilityCondition": null,
                          "endpoint": null,
                          "requestHeaders": null
                      }
                  ],
                  "2": [
                      {
                          "fieldType": "RestFieldRepresentation",
                          "id": "label10",
                          "name": "Label10",
                          "type": "typeahead",
                          "value": null,
                          "required": false,
                          "readOnly": false,
                          "overrideId": false,
                          "colspan": 1,
                          "placeholder": null,
                          "minLength": 0,
                          "maxLength": 0,
                          "minValue": null,
                          "maxValue": null,
                          "regexPattern": null,
                          "optionType": null,
                          "hasEmptyValue": null,
                          "options": null,
                          "restUrl": null,
                          "restResponsePath": null,
                          "restIdProperty": null,
                          "restLabelProperty": null,
                          "tab": "tab1",
                          "className": null,
                          "params": {
                              "existingColspan": 1,
                              "maxColspan": 1
                          },
                          "dateDisplayFormat": null,
                          "layout": {
                              "row": -1,
                              "column": -1,
                              "colspan": 1
                          },
                          "sizeX": 1,
                          "sizeY": 1,
                          "row": -1,
                          "col": -1,
                          "visibilityCondition": null,
                          "endpoint": null,
                          "requestHeaders": null
                      }
                  ]
              }
          }
      ],
      "outcomes": [],
      "javascriptEvents": [],
      "className": "",
      "style": "",
      "customFieldTemplates": {},
      "metadata": {},
      "variables": [],
      "gridsterForm": false,
      "globalDateFormat": "D-M-YYYY"
    }
  }
  
}