diff --git a/dmp-admin/package-lock.json b/dmp-admin/package-lock.json
index ca43201dd..976e4eca1 100644
--- a/dmp-admin/package-lock.json
+++ b/dmp-admin/package-lock.json
@@ -1241,6 +1241,7 @@
       "requires": {
         "anymatch": "1.3.2",
         "async-each": "1.0.1",
+        "fsevents": "1.1.3",
         "glob-parent": "2.0.0",
         "inherits": "2.0.3",
         "is-binary-path": "1.0.1",
@@ -2964,6 +2965,910 @@
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
       "dev": true
     },
+    "fsevents": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.1.3.tgz",
+      "integrity": "sha512-WIr7iDkdmdbxu/Gh6eKEZJL6KPE74/5MEsf2whTOFNxbIoIixogroLdKYqB6FDav4Wavh/lZdzzd3b2KxIXC5Q==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "nan": "2.7.0",
+        "node-pre-gyp": "0.6.39"
+      },
+      "dependencies": {
+        "abbrev": {
+          "version": "1.1.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "ajv": {
+          "version": "4.11.8",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "co": "4.6.0",
+            "json-stable-stringify": "1.0.1"
+          }
+        },
+        "ansi-regex": {
+          "version": "2.1.1",
+          "bundled": true,
+          "dev": true
+        },
+        "aproba": {
+          "version": "1.1.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "are-we-there-yet": {
+          "version": "1.1.4",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "delegates": "1.0.0",
+            "readable-stream": "2.2.9"
+          }
+        },
+        "asn1": {
+          "version": "0.2.3",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "assert-plus": {
+          "version": "0.2.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "asynckit": {
+          "version": "0.4.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "aws-sign2": {
+          "version": "0.6.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "aws4": {
+          "version": "1.6.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "balanced-match": {
+          "version": "0.4.2",
+          "bundled": true,
+          "dev": true
+        },
+        "bcrypt-pbkdf": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "tweetnacl": "0.14.5"
+          }
+        },
+        "block-stream": {
+          "version": "0.0.9",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "inherits": "2.0.3"
+          }
+        },
+        "boom": {
+          "version": "2.10.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "hoek": "2.16.3"
+          }
+        },
+        "brace-expansion": {
+          "version": "1.1.7",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "balanced-match": "0.4.2",
+            "concat-map": "0.0.1"
+          }
+        },
+        "buffer-shims": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true
+        },
+        "caseless": {
+          "version": "0.12.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "co": {
+          "version": "4.6.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "code-point-at": {
+          "version": "1.1.0",
+          "bundled": true,
+          "dev": true
+        },
+        "combined-stream": {
+          "version": "1.0.5",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "delayed-stream": "1.0.0"
+          }
+        },
+        "concat-map": {
+          "version": "0.0.1",
+          "bundled": true,
+          "dev": true
+        },
+        "console-control-strings": {
+          "version": "1.1.0",
+          "bundled": true,
+          "dev": true
+        },
+        "core-util-is": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true
+        },
+        "cryptiles": {
+          "version": "2.0.5",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "boom": "2.10.1"
+          }
+        },
+        "dashdash": {
+          "version": "1.14.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "assert-plus": "1.0.0"
+          },
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "bundled": true,
+              "dev": true,
+              "optional": true
+            }
+          }
+        },
+        "debug": {
+          "version": "2.6.8",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "deep-extend": {
+          "version": "0.4.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "delayed-stream": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true
+        },
+        "delegates": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "detect-libc": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "ecc-jsbn": {
+          "version": "0.1.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "jsbn": "0.1.1"
+          }
+        },
+        "extend": {
+          "version": "3.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "extsprintf": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true
+        },
+        "forever-agent": {
+          "version": "0.6.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "form-data": {
+          "version": "2.1.4",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "asynckit": "0.4.0",
+            "combined-stream": "1.0.5",
+            "mime-types": "2.1.15"
+          }
+        },
+        "fs.realpath": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true
+        },
+        "fstream": {
+          "version": "1.0.11",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "graceful-fs": "4.1.11",
+            "inherits": "2.0.3",
+            "mkdirp": "0.5.1",
+            "rimraf": "2.6.1"
+          }
+        },
+        "fstream-ignore": {
+          "version": "1.0.5",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "fstream": "1.0.11",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4"
+          }
+        },
+        "gauge": {
+          "version": "2.7.4",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "aproba": "1.1.1",
+            "console-control-strings": "1.1.0",
+            "has-unicode": "2.0.1",
+            "object-assign": "4.1.1",
+            "signal-exit": "3.0.2",
+            "string-width": "1.0.2",
+            "strip-ansi": "3.0.1",
+            "wide-align": "1.1.2"
+          }
+        },
+        "getpass": {
+          "version": "0.1.7",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "assert-plus": "1.0.0"
+          },
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "bundled": true,
+              "dev": true,
+              "optional": true
+            }
+          }
+        },
+        "glob": {
+          "version": "7.1.2",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "fs.realpath": "1.0.0",
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4",
+            "once": "1.4.0",
+            "path-is-absolute": "1.0.1"
+          }
+        },
+        "graceful-fs": {
+          "version": "4.1.11",
+          "bundled": true,
+          "dev": true
+        },
+        "har-schema": {
+          "version": "1.0.5",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "har-validator": {
+          "version": "4.2.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ajv": "4.11.8",
+            "har-schema": "1.0.5"
+          }
+        },
+        "has-unicode": {
+          "version": "2.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "hawk": {
+          "version": "3.1.3",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "boom": "2.10.1",
+            "cryptiles": "2.0.5",
+            "hoek": "2.16.3",
+            "sntp": "1.0.9"
+          }
+        },
+        "hoek": {
+          "version": "2.16.3",
+          "bundled": true,
+          "dev": true
+        },
+        "http-signature": {
+          "version": "1.1.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "assert-plus": "0.2.0",
+            "jsprim": "1.4.0",
+            "sshpk": "1.13.0"
+          }
+        },
+        "inflight": {
+          "version": "1.0.6",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "once": "1.4.0",
+            "wrappy": "1.0.2"
+          }
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "bundled": true,
+          "dev": true
+        },
+        "ini": {
+          "version": "1.3.4",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "number-is-nan": "1.0.1"
+          }
+        },
+        "is-typedarray": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "isarray": {
+          "version": "1.0.0",
+          "bundled": true,
+          "dev": true
+        },
+        "isstream": {
+          "version": "0.1.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "jodid25519": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "jsbn": "0.1.1"
+          }
+        },
+        "jsbn": {
+          "version": "0.1.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "json-schema": {
+          "version": "0.2.3",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "json-stable-stringify": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "jsonify": "0.0.0"
+          }
+        },
+        "json-stringify-safe": {
+          "version": "5.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "jsonify": {
+          "version": "0.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "jsprim": {
+          "version": "1.4.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "assert-plus": "1.0.0",
+            "extsprintf": "1.0.2",
+            "json-schema": "0.2.3",
+            "verror": "1.3.6"
+          },
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "bundled": true,
+              "dev": true,
+              "optional": true
+            }
+          }
+        },
+        "mime-db": {
+          "version": "1.27.0",
+          "bundled": true,
+          "dev": true
+        },
+        "mime-types": {
+          "version": "2.1.15",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "mime-db": "1.27.0"
+          }
+        },
+        "minimatch": {
+          "version": "3.0.4",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "brace-expansion": "1.1.7"
+          }
+        },
+        "minimist": {
+          "version": "0.0.8",
+          "bundled": true,
+          "dev": true
+        },
+        "mkdirp": {
+          "version": "0.5.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "minimist": "0.0.8"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "node-pre-gyp": {
+          "version": "0.6.39",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "detect-libc": "1.0.2",
+            "hawk": "3.1.3",
+            "mkdirp": "0.5.1",
+            "nopt": "4.0.1",
+            "npmlog": "4.1.0",
+            "rc": "1.2.1",
+            "request": "2.81.0",
+            "rimraf": "2.6.1",
+            "semver": "5.3.0",
+            "tar": "2.2.1",
+            "tar-pack": "3.4.0"
+          }
+        },
+        "nopt": {
+          "version": "4.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "abbrev": "1.1.0",
+            "osenv": "0.1.4"
+          }
+        },
+        "npmlog": {
+          "version": "4.1.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "are-we-there-yet": "1.1.4",
+            "console-control-strings": "1.1.0",
+            "gauge": "2.7.4",
+            "set-blocking": "2.0.0"
+          }
+        },
+        "number-is-nan": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true
+        },
+        "oauth-sign": {
+          "version": "0.8.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "object-assign": {
+          "version": "4.1.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "once": {
+          "version": "1.4.0",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "wrappy": "1.0.2"
+          }
+        },
+        "os-homedir": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "os-tmpdir": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "osenv": {
+          "version": "0.1.4",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "os-homedir": "1.0.2",
+            "os-tmpdir": "1.0.2"
+          }
+        },
+        "path-is-absolute": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true
+        },
+        "performance-now": {
+          "version": "0.2.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "process-nextick-args": {
+          "version": "1.0.7",
+          "bundled": true,
+          "dev": true
+        },
+        "punycode": {
+          "version": "1.4.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "qs": {
+          "version": "6.4.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "rc": {
+          "version": "1.2.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "deep-extend": "0.4.2",
+            "ini": "1.3.4",
+            "minimist": "1.2.0",
+            "strip-json-comments": "2.0.1"
+          },
+          "dependencies": {
+            "minimist": {
+              "version": "1.2.0",
+              "bundled": true,
+              "dev": true,
+              "optional": true
+            }
+          }
+        },
+        "readable-stream": {
+          "version": "2.2.9",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "buffer-shims": "1.0.0",
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "1.0.7",
+            "string_decoder": "1.0.1",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "request": {
+          "version": "2.81.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "aws-sign2": "0.6.0",
+            "aws4": "1.6.0",
+            "caseless": "0.12.0",
+            "combined-stream": "1.0.5",
+            "extend": "3.0.1",
+            "forever-agent": "0.6.1",
+            "form-data": "2.1.4",
+            "har-validator": "4.2.1",
+            "hawk": "3.1.3",
+            "http-signature": "1.1.1",
+            "is-typedarray": "1.0.0",
+            "isstream": "0.1.2",
+            "json-stringify-safe": "5.0.1",
+            "mime-types": "2.1.15",
+            "oauth-sign": "0.8.2",
+            "performance-now": "0.2.0",
+            "qs": "6.4.0",
+            "safe-buffer": "5.0.1",
+            "stringstream": "0.0.5",
+            "tough-cookie": "2.3.2",
+            "tunnel-agent": "0.6.0",
+            "uuid": "3.0.1"
+          }
+        },
+        "rimraf": {
+          "version": "2.6.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "glob": "7.1.2"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.0.1",
+          "bundled": true,
+          "dev": true
+        },
+        "semver": {
+          "version": "5.3.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "set-blocking": {
+          "version": "2.0.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "signal-exit": {
+          "version": "3.0.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "sntp": {
+          "version": "1.0.9",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "hoek": "2.16.3"
+          }
+        },
+        "sshpk": {
+          "version": "1.13.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "asn1": "0.2.3",
+            "assert-plus": "1.0.0",
+            "bcrypt-pbkdf": "1.0.1",
+            "dashdash": "1.14.1",
+            "ecc-jsbn": "0.1.1",
+            "getpass": "0.1.7",
+            "jodid25519": "1.0.2",
+            "jsbn": "0.1.1",
+            "tweetnacl": "0.14.5"
+          },
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "bundled": true,
+              "dev": true,
+              "optional": true
+            }
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "code-point-at": "1.1.0",
+            "is-fullwidth-code-point": "1.0.0",
+            "strip-ansi": "3.0.1"
+          }
+        },
+        "string_decoder": {
+          "version": "1.0.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
+        "stringstream": {
+          "version": "0.0.5",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        },
+        "strip-json-comments": {
+          "version": "2.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "tar": {
+          "version": "2.2.1",
+          "bundled": true,
+          "dev": true,
+          "requires": {
+            "block-stream": "0.0.9",
+            "fstream": "1.0.11",
+            "inherits": "2.0.3"
+          }
+        },
+        "tar-pack": {
+          "version": "3.4.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "debug": "2.6.8",
+            "fstream": "1.0.11",
+            "fstream-ignore": "1.0.5",
+            "once": "1.4.0",
+            "readable-stream": "2.2.9",
+            "rimraf": "2.6.1",
+            "tar": "2.2.1",
+            "uid-number": "0.0.6"
+          }
+        },
+        "tough-cookie": {
+          "version": "2.3.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "punycode": "1.4.1"
+          }
+        },
+        "tunnel-agent": {
+          "version": "0.6.0",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "safe-buffer": "5.0.1"
+          }
+        },
+        "tweetnacl": {
+          "version": "0.14.5",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "uid-number": {
+          "version": "0.0.6",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "util-deprecate": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true
+        },
+        "uuid": {
+          "version": "3.0.1",
+          "bundled": true,
+          "dev": true,
+          "optional": true
+        },
+        "verror": {
+          "version": "1.3.6",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "extsprintf": "1.0.2"
+          }
+        },
+        "wide-align": {
+          "version": "1.1.2",
+          "bundled": true,
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "string-width": "1.0.2"
+          }
+        },
+        "wrappy": {
+          "version": "1.0.2",
+          "bundled": true,
+          "dev": true
+        }
+      }
+    },
     "fstream": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
diff --git a/dmp-admin/src/app/compositefield-form/compositefield-form.component.html b/dmp-admin/src/app/compositefield-form/compositefield-form.component.html
index 401c19599..c297447f1 100644
--- a/dmp-admin/src/app/compositefield-form/compositefield-form.component.html
+++ b/dmp-admin/src/app/compositefield-form/compositefield-form.component.html
@@ -1,8 +1,12 @@
 <div>
+    <label>
+        <input type="checkbox" [(ngModel)]="isComposite" (ngModelChange)="onIsCompositeChange(isComposite)" /> Composite Field</label>
+    <label>
+        <input type="checkbox" [(ngModel)]="isMultiplicityEnabled" (ngModelChange)="onIsMultiplicityEnabledChange(isMultiplicityEnabled)" /> Multiplicity</label>
     <div [formGroup]="form">
-        <div class="form-row">
+        <div class="row">
             <div class="form-group col-md-12">
-                <div formGroupName="multiplicity">
+                <div *ngIf="isMultiplicityEnabled" formGroupName="multiplicity">
                     <div class="form-group">
                         <h5 style="margin-left:15px; font-weight:bold;">Multiplicity</h5>
                         <div class="col-md-2">
@@ -16,11 +20,11 @@
                         </div>
                     </div>
                 </div>
-                <div class="form-group col-md-4">
+                <div *ngIf="isComposite" class="form-group col-md-4">
                     <label>Ordinal</label>
                     <input type="number" class="form-control" formControlName="ordinal">
                 </div>
-                <div class="form-group col-md-4">
+                <div *ngIf="isComposite" class="form-group col-md-4">
                     <label>Id</label>
                     <input type="string" class="form-control" formControlName="id">
                 </div>
@@ -28,24 +32,33 @@
 
         </div>
     </div>
-    <div *ngFor="let field of dataModel.fields let i=index;">
-        <h4 style="text-decoration: underline;">Fields
-            <button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteField(i);">
-                <span class="glyphicon glyphicon-erase"></span>
-            </button>
-        </h4>
-        <field-form [form]="form.get('fields').get(''+i)" [dataModel]="field"></field-form>
 
-        <div>
-            <a (click)="addNewField()" style="cursor: pointer">
-                Add another field +
-            </a>
+    <field-form *ngIf="!isComposite" [form]="form.get('fields').get(''+0)" [dataModel]="dataModel.fields[0]" [showMultiplicity]="false" [indexPath]="indexPath + 'f' + 0"></field-form>
+
+    <div *ngIf="isComposite" class="panel-group" style="margin-top:10px;">
+        <div *ngFor="let field of dataModel.fields let i=index;" class="panel panel-default">
+            <div class="panel-heading clearfix">
+                <a *ngIf="form.get('fields').get(''+i).get('title').value" data-toggle="collapse" href="#{{indexPath + 'f' + i}}" class="panel-title pull-left"
+                    style="padding-top: 7.5px;">{{i + 1}}. {{form.get('fields').get(''+i).get('title').value}}</a>
+                <a *ngIf="!form.get('fields').get(''+i).get('title').value" data-toggle="collapse" href="#{{indexPath + 'f' + i}}" class="panel-title pull-left"
+                    style="padding-top: 7.5px;">{{i + 1}}. Child Field {{i + 1}}</a>
+                <div class="btn-group pull-right">
+                    <button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteField(i);">
+                        <span class="glyphicon glyphicon-erase"></span>
+                    </button>
+                </div>
+            </div>
+            <div id="{{indexPath + 'f' + i}}" class="panel-collapse collapse in">
+                <div class="panel-body">
+                    <field-form [form]="form.get('fields').get(''+i)" [dataModel]="field" [indexPath]="indexPath + 'f' + i"></field-form>
+                </div>
+            </div>
         </div>
     </div>
 
-    <div *ngIf="dataModel.fields.length == 0;">
+    <div *ngIf="isComposite">
         <a (click)="addNewField()" style="cursor: pointer">
-            Add another field +
+            Add Child Field +
         </a>
     </div>
 
diff --git a/dmp-admin/src/app/compositefield-form/compositefield-form.component.ts b/dmp-admin/src/app/compositefield-form/compositefield-form.component.ts
index 782190da3..b0af6b0e2 100644
--- a/dmp-admin/src/app/compositefield-form/compositefield-form.component.ts
+++ b/dmp-admin/src/app/compositefield-form/compositefield-form.component.ts
@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { CompositeField } from '../models/CompositeField';
 import { Field } from '../models/Field';
-import { FormArray } from '@angular/forms/src/model';
+import { FormArray, FormControl } from '@angular/forms/src/model';
 
 @Component({
   selector: 'compositefield-form',
@@ -11,22 +11,43 @@ import { FormArray } from '@angular/forms/src/model';
 })
 
 export class CompositeFieldFormComponent {
-@Input() form: FormGroup;
-@Input() dataModel: CompositeField;
+  @Input() form: FormGroup;
+  @Input() dataModel: CompositeField;
+  @Input() indexPath: string;
+  
+  isComposite: boolean = false;
+  isMultiplicityEnabled: boolean = false;
 
-constructon(){}
+  constructon() { }
 
-ngOnInit(){
-  //this.addNewField();
-}
+  ngOnInit() {
+    //this.addNewField();
+  }
 
-addNewField(){
-  let field: Field = new Field();
-  this.dataModel.fields.push(field);
-  (<FormArray>this.form.get("fields")).push(field.buildForm());
-}
-DeleteField(index){
-  this.dataModel.fields.splice(index, 1);
+  onIsCompositeChange(isComposite: boolean) {
+    if (!isComposite && (<FormArray>this.form.get("fields")).length > 1) {
+      for(let i = 0; i < (<FormArray>this.form.get("fields")).length - 1; i++) {
+        (<FormArray>this.form.get("fields")).removeAt(1);
+      }
+      this.dataModel.fields.splice(1);
+    }
+  }
+
+  onIsMultiplicityEnabledChange(isMultiplicityEnabled: boolean) {
+    if (!isMultiplicityEnabled) {
+      (<FormControl>this.form.get('multiplicity').get("min")).setValue(0);
+      (<FormControl>this.form.get('multiplicity').get("max")).setValue(0);
+    }
+  }
+
+  addNewField() {
+    let field: Field = new Field();
+    this.dataModel.fields.push(field);
+    (<FormArray>this.form.get("fields")).push(field.buildForm());
+  }
+
+  DeleteField(index) {
+    this.dataModel.fields.splice(index, 1);
     (<FormArray>this.form.get("fields")).removeAt(index);
-}
+  }
 }
\ No newline at end of file
diff --git a/dmp-admin/src/app/field-form/field-form.component.html b/dmp-admin/src/app/field-form/field-form.component.html
index fefbca431..7a24f0e84 100644
--- a/dmp-admin/src/app/field-form/field-form.component.html
+++ b/dmp-admin/src/app/field-form/field-form.component.html
@@ -1,6 +1,6 @@
 <div>
     <div [formGroup]="form">
-        <div class="form-row">
+        <div class="row">
             <div class="form-group col-md-6">
                 <label>Title</label>
                 <input type="text" class="form-control" formControlName="title">
@@ -25,15 +25,15 @@
                 </div>
             </div>
         </div>
-        <div class="form-row" [ngSwitch]="form.get('viewStyle').get('renderStyle').value">
+        <div class="form" [ngSwitch]="form.get('viewStyle').get('renderStyle').value">
             <div *ngSwitchCase="'combobox'">
-                <combobox-component [form]="form" [dataModel]= "dataModel"></combobox-component>
+                <combobox-component [form]="form" [dataModel]="dataModel"></combobox-component>
             </div>
             <div *ngSwitchCase="'radiobox'">
-                    <radiobox-component [form]="form" [dataModel]= "dataModel"></radiobox-component>
-                </div>
+                <radiobox-component [form]="form" [dataModel]="dataModel"></radiobox-component>
+            </div>
         </div>
-        <div class="form-row">
+        <div class="row">
             <div class="form-group col-md-6">
                 <label>description</label>
                 <input type="text" class="form-control" formControlName="description">
@@ -43,8 +43,8 @@
                 <input type="text" class="form-control" formControlName="extendedDescription">
             </div>
         </div>
-        <div class="form-row">
-            <div formGroupName="multiplicity">
+        <div class="row">
+            <div *ngIf="isFieldMultiplicityEnabled" formGroupName="multiplicity">
                 <div class="form-group">
                     <h5 style="margin-left:15px; font-weight:bold;">Multiplicity</h5>
                     <div class="col-md-2">
@@ -79,20 +79,32 @@
                 </label>
             </div>
         </div>
-
     </div>
-    <div *ngFor="let rule of dataModel.visible.rules let i=index;">
-        <h4 style="text-decoration: underline;">Rules <button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteRule(i);"><span class="glyphicon glyphicon-erase"></span></button></h4>            
-        <rule-form [form]="form.get('visible').get('rules').get(''+i)" [dataModel]="rule"></rule-form>
-        <div>
-            <a (click)="addNewRule(form)" style="cursor: pointer">
-                Add another rule +
-            </a>
+    <label *ngIf="showMultiplicity">
+        <input type="checkbox" [(ngModel)]="isFieldMultiplicityEnabled" (ngModelChange)="onIsFieldMultiplicityEnabledChange(isFieldMultiplicityEnabled)"
+        /> Multiplicity</label>
+
+    <div class="panel-group" style="margin-top:10px;">
+        <div *ngFor="let rule of dataModel.visible.rules let i=index;" class="panel panel-default">
+            <div class="panel-heading clearfix">
+                <a data-toggle="collapse" href="#{{indexPath + 'r' + i}}" class="panel-title pull-left" style="padding-top: 7.5px;">{{i + 1}}. Rule {{i + 1}}</a>
+
+                <div class="btn-group pull-right">
+                    <button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteRule(i);">
+                        <span class="glyphicon glyphicon-erase"></span>
+                    </button>
+                </div>
+            </div>
+            <div id="{{indexPath + 'r' + i}}" class="panel-collapse collapse in">
+                <div class="panel-body">
+                    <rule-form [form]="form.get('visible').get('rules').get(''+i)" [dataModel]="rule"></rule-form>
+                </div>
+            </div>
         </div>
     </div>
-    <div *ngIf="dataModel.visible.rules.length == 0;">
-        <a (click)="addNewRule(form)" style="cursor: pointer">
-            Add another rule +
+    <div>
+        <a (click)="addNewRule()" style="cursor: pointer">
+            Add Rule +
         </a>
     </div>
 
diff --git a/dmp-admin/src/app/field-form/field-form.component.ts b/dmp-admin/src/app/field-form/field-form.component.ts
index de0733025..0f092c871 100644
--- a/dmp-admin/src/app/field-form/field-form.component.ts
+++ b/dmp-admin/src/app/field-form/field-form.component.ts
@@ -1,10 +1,10 @@
 import { Component, Input } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { FormGroup, FormControl } from '@angular/forms';
 import { Field } from '../models/Field';
 import { Rule } from '../models/Rule';
 import { Multiplicity } from '../models/Multiplicity';
 import { FormArray } from '@angular/forms/src/model';
-import {ComboboxComponent} from '../combobox/combobox-component';
+import { ComboboxComponent } from '../combobox/combobox-component';
 
 @Component({
   selector: 'field-form',
@@ -13,25 +13,35 @@ import {ComboboxComponent} from '../combobox/combobox-component';
 })
 
 export class FieldFormComponent {
-@Input() form: FormGroup;
-@Input() dataModel: Field;
+  @Input() form: FormGroup;
+  @Input() dataModel: Field;
+  @Input() showMultiplicity: boolean = true;
+  @Input() indexPath: string;
+  
+  isFieldMultiplicityEnabled: boolean = false;
 
-constructon(){}
+  constructon() { }
 
-ngOnInit(){
-  console.log("init field")
- // this.addNewRule();
-}
+  ngOnInit() {
+    console.log("init field")
+    // this.addNewRule();
+  }
 
-addNewRule(){
-  let rule: Rule = new Rule();
-  this.dataModel.visible.rules.push(rule);
-  (<FormArray>this.form.get("visible").get("rules")).push(rule.buildForm());
-}
+  onIsFieldMultiplicityEnabledChange(isFieldMultiplicityEnabled: boolean) {
+    if (!isFieldMultiplicityEnabled) {
+      (<FormControl>this.form.get('multiplicity').get("min")).setValue(0);
+      (<FormControl>this.form.get('multiplicity').get("max")).setValue(0);
+    }
+  }
 
-DeleteRule(index){
-  this.dataModel.visible.rules.splice(index, 1);
-  (<FormArray>this.form.get("visible").get("rules")).removeAt(index);
-}
-    
+  addNewRule() {
+    let rule: Rule = new Rule();
+    this.dataModel.visible.rules.push(rule);
+    (<FormArray>this.form.get("visible").get("rules")).push(rule.buildForm());
+  }
+
+  DeleteRule(index) {
+    this.dataModel.visible.rules.splice(index, 1);
+    (<FormArray>this.form.get("visible").get("rules")).removeAt(index);
+  }
 }
\ No newline at end of file
diff --git a/dmp-admin/src/app/form/form.component.html b/dmp-admin/src/app/form/form.component.html
index 9de3ea02a..db6916000 100644
--- a/dmp-admin/src/app/form/form.component.html
+++ b/dmp-admin/src/app/form/form.component.html
@@ -1,32 +1,37 @@
 <div class="container">
     <div style="background-color: #f5f5f5;border: 1px solid #e3e3e3;padding: 24px;">
         <form novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
-            <div class="form-row">
+            <div class="row">
                 <div class="form-group col-md-12">
                     <label>Label</label>
                     <input type="text" class="form-control" formControlName="label">
                 </div>
             </div>
-            <div *ngFor="let section of dataModel.sections; let i=index;">
-                <h4 style="text-decoration: underline;">Section
-                    <button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteSection(i);">
-                        <span class="glyphicon glyphicon-erase"></span>
-                    </button>
-                </h4>
-                <section-form [form]="form.get('sections').get(''+i)" [dataModel]="section" [index]="i"></section-form>
-                <div style="margin-top:20px; padding-left: 15px;">
-                    <a (click)="addSection()" style="cursor: pointer">
-                        Add another section +
-                    </a>
-                </div>
 
+            <div class="panel-group" style="margin-top:10px;">
+                <div *ngFor="let section of dataModel.sections; let i=index;" class="panel panel-default">
+                    <div class="panel-heading clearfix">
+                        <a *ngIf="form.get('sections').get(''+i).get('title').value" data-toggle="collapse" href="#{{'s' + i}}" class="panel-title pull-left"
+                            style="padding-top: 7.5px;">{{i + 1}}. {{form.get('sections').get(''+i).get('title').value}}</a>
+                        <a *ngIf="!form.get('sections').get(''+i).get('title').value" data-toggle="collapse" href="#{{'s' + i}}" class="panel-title pull-left"
+                            style="padding-top: 7.5px;">{{i + 1}}. Section {{i + 1}}</a>
+                        <div class="btn-group pull-right">
+                                <button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteSection(i);">
+                                        <span class="glyphicon glyphicon-erase"></span>
+                                    </button>
+                        </div>
+                    </div>
+                    <div id="{{'s' + i}}" class="panel-collapse collapse in">
+                        <div class="panel-body">
+                            <section-form [form]="form.get('sections').get(''+i)" [dataModel]="section" [indexPath]="'s' + i"></section-form>
+                        </div>
+                    </div>
+                </div>
             </div>
 
-
-
-            <div *ngIf="dataModel.sections.length == 0;" style="margin-top:20px; padding-left: 15px;">
+            <div style="margin-top:20px; padding-left: 15px;">
                 <a (click)="addSection()" style="cursor: pointer">
-                    Add another section +
+                    Add Section +
                 </a>
             </div>
 
diff --git a/dmp-admin/src/app/form/form.component.ts b/dmp-admin/src/app/form/form.component.ts
index 8b388d545..31b0c22ca 100644
--- a/dmp-admin/src/app/form/form.component.ts
+++ b/dmp-admin/src/app/form/form.component.ts
@@ -1,6 +1,6 @@
 import { DatasetProfileService } from '../services/dataset-profile.service';
 import { Component, OnInit } from '@angular/core';
-import { FormGroup } from '@angular/forms';
+import { FormGroup, FormControl } from '@angular/forms';
 import { JsonSerializer } from '../utilities/JsonSerializer';
 import { SectionFormComponent } from '../section-form/section-form.component';
 import { Section } from '../models/Section';
@@ -48,6 +48,13 @@ export class FormComponent {
     // this.form = this.dataModel.buildForm();
   }
 
+  onIsMultiplicityEnabledChange(isMultiplicityEnabled: boolean) {
+    if (!isMultiplicityEnabled) {
+      (<FormControl>this.form.get('multiplicity').get("min")).setValue(0);
+      (<FormControl>this.form.get('multiplicity').get("max")).setValue(0);
+    }
+  }
+
   addSection() {
     let section: Section = new Section();
     this.dataModel.sections.push(section);
diff --git a/dmp-admin/src/app/groupfield-form/groupfield-form.component.html b/dmp-admin/src/app/groupfield-form/groupfield-form.component.html
index 6dec8b40f..2bc5326fb 100644
--- a/dmp-admin/src/app/groupfield-form/groupfield-form.component.html
+++ b/dmp-admin/src/app/groupfield-form/groupfield-form.component.html
@@ -1,7 +1,7 @@
 <div>
     <!-- style="border-style: solid;"-->
     <div [formGroup]="form">
-        <div class="form-row">
+        <div class="row">
             <div class="form-group col-md-5">
                 <label>Title</label>
                 <input type="text" class="form-control" formControlName="title">
@@ -24,7 +24,7 @@
                 </label>
             </div>
         </div>
-        <div class="form-row">
+        <div class="row">
             <div class="form-group col-md-6">
                 <label>Description</label>
                 <input type="text" class="form-control" formControlName="description">
@@ -35,27 +35,33 @@
             </div>
         </div>
     </div>
-    <div *ngFor="let field of dataModel.compositeFields let i=index;">
-        <h4 style="text-decoration: underline;">FieldSet
-            <button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteFieldSet(i);">
-                <span class="glyphicon glyphicon-erase"></span>
-            </button>
-        </h4>
-        <compositefield-form [form]="form.get('compositeFields').get(''+i)" [dataModel]="field"></compositefield-form>
 
-        <div>
-            <a (click)="addNewFieldSet()" style="cursor: pointer">
-                Add another field Set (CompositeField) +
-            </a>
+    <div class="panel-group" style="margin-top:10px;">
+        <div *ngFor="let field of dataModel.compositeFields let i=index;" class="panel panel-default">
+            <div class="panel-heading clearfix">
+                <!-- <a *ngIf="form.get('compositeFields').get(''+i).get('title').value" data-toggle="collapse" href="#{{'compositeFieldCollapse' + i}}"
+                    class="panel-title pull-left" style="padding-top: 7.5px;">{{i + 1}}. {{form.get('compositeFields').get(''+i).get('title').value}}</a>
+                <a *ngIf="!form.get('compositeFields').get(''+i).get('title').value" data-toggle="collapse" href="#{{'compositeFieldCollapse' + i}}"
+                    class="panel-title pull-left" style="padding-top: 7.5px;">{{i + 1}}. Field {{i + 1}}</a> -->
+                    <a data-toggle="collapse" href="#{{indexPath + 'cf' + i}}"
+                    class="panel-title pull-left" style="padding-top: 7.5px;">{{i + 1}}. Field {{i + 1}}</a>
+               
+                    <div class="btn-group pull-right">
+                    <button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteFieldSet(i);">
+                        <span class="glyphicon glyphicon-erase"></span>
+                    </button>
+                </div>
+            </div>
+            <div id="{{indexPath + 'cf' + i}}" class="panel-collapse collapse in">
+                <div class="panel-body">
+                    <compositefield-form [form]="form.get('compositeFields').get(''+i)" [dataModel]="field" [indexPath]="indexPath + 'cf' + i"></compositefield-form>
+                </div>
+            </div>
         </div>
-
     </div>
-
-    <div *ngIf="dataModel.compositeFields.length == 0;">
+    <div>
         <a (click)="addNewFieldSet()" style="cursor: pointer">
-            Add another field Set (CompositeField) +
+            Add Field +
         </a>
     </div>
-
-
 </div>
\ No newline at end of file
diff --git a/dmp-admin/src/app/groupfield-form/groupfield-form.component.ts b/dmp-admin/src/app/groupfield-form/groupfield-form.component.ts
index cf599e739..bdf8f522b 100644
--- a/dmp-admin/src/app/groupfield-form/groupfield-form.component.ts
+++ b/dmp-admin/src/app/groupfield-form/groupfield-form.component.ts
@@ -14,7 +14,8 @@ import { Field } from '../models/Field';
 export class GroupFieldFormComponent {
   @Input() form: FormGroup;
   @Input() dataModel: FieldGroup;
-
+  @Input() indexPath: string;
+  
   constructor(){}
 
   ngOnInit(){
diff --git a/dmp-admin/src/app/section-form/section-form.component.css b/dmp-admin/src/app/section-form/section-form.component.css
new file mode 100644
index 000000000..1ded10469
--- /dev/null
+++ b/dmp-admin/src/app/section-form/section-form.component.css
@@ -0,0 +1,5 @@
+.section-container {
+    background-color: #f5f5f5;
+    border: 1px solid #e3e3e3;
+    padding: 24px;
+}
\ No newline at end of file
diff --git a/dmp-admin/src/app/section-form/section-form.component.html b/dmp-admin/src/app/section-form/section-form.component.html
index 93cd6a372..df217bf85 100644
--- a/dmp-admin/src/app/section-form/section-form.component.html
+++ b/dmp-admin/src/app/section-form/section-form.component.html
@@ -1,7 +1,6 @@
-<div style="background-color: #f5f5f5;border: 1px solid #e3e3e3;padding: 24px;">
-    <!--style="border-style: solid;"-->
-    <div [formGroup]="form">
-        <div class="form-row">
+<div class="section-container">
+    <div class="row" [formGroup]="form">
+        <div class="row">
             <div class="form-group col-md-5">
                 <label>Title</label>
                 <input type="text" class="form-control" formControlName="title">
@@ -25,44 +24,29 @@
             </div>
         </div>
     </div>
-    <div *ngIf="dataModel.sections">
-        <div *ngFor="let section of dataModel.sections let i=index;">
-            <h4 style="text-decoration: underline;">Section
-                <button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteSectionInSection(i);">
-                    <span class="glyphicon glyphicon-erase"></span>
-                </button>
-            </h4>
-            <section-form [form]="form.get('sections').get(''+i)" [dataModel]="section"></section-form>
-        </div>
-    </div>
-    <div *ngIf="dataModel.fieldGroups">
-        <div *ngFor="let fieldGroup of dataModel.fieldGroups let i=index;">
-            <h4 style="text-decoration: underline;">GroupFields
-                <button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteFieldGroup(i);">
-                    <span class="glyphicon glyphicon-erase"></span>
-                </button>
-            </h4>
-            <groupfield-form [form]="form.get('fieldGroups').get(''+i)" [dataModel]="fieldGroup"></groupfield-form>
-            <div>
-                <a (click)="addGroupField()" style="cursor: pointer">
-                    Add group +
-                </a>
+    <div *ngIf="dataModel.fieldGroups" class="panel-group" style="margin-top:10px;">
+        <div *ngFor="let fieldGroup of dataModel.fieldGroups let i=index;" class="panel panel-default">
+            <div class="panel-heading clearfix">
+                <a *ngIf="form.get('fieldGroups').get(''+i).get('title').value" data-toggle="collapse" href="#{{indexPath + 'g' + i}}" class="panel-title pull-left"
+                    style="padding-top: 7.5px;">{{i + 1}}. {{form.get('fieldGroups').get(''+i).get('title').value}}</a>
+                <a *ngIf="!form.get('fieldGroups').get(''+i).get('title').value" data-toggle="collapse" href="#{{indexPath + 'g' + i}}" class="panel-title pull-left"
+                    style="padding-top: 7.5px;">{{i + 1}}. Group {{i + 1}}</a>
+                <div class="btn-group pull-right">
+                    <button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeleteFieldGroup(i);">
+                        <span class="glyphicon glyphicon-erase"></span>
+                    </button>
+                </div>
+            </div>
+            <div id="{{indexPath + 'g' + i}}" class="panel-collapse collapse in">
+                <div class="panel-body">
+                    <groupfield-form [form]="form.get('fieldGroups').get(''+i)" [dataModel]="fieldGroup" [indexPath]="indexPath + 'g' + i"></groupfield-form>
+                </div>
             </div>
-
         </div>
     </div>
-
-    <div style="margin-top:20px; padding-left: 15px;">
-        <a (click)="addSectioninSection()" style="cursor: pointer">
-            Add section +
-        </a>
-    </div>
-
-    <div *ngIf="dataModel.fieldGroups.length == 0;">
+    <div>
         <a (click)="addGroupField()" style="cursor: pointer">
-            Add group +
+            Add Group +
         </a>
     </div>
-
-
 </div>
\ No newline at end of file
diff --git a/dmp-admin/src/app/section-form/section-form.component.ts b/dmp-admin/src/app/section-form/section-form.component.ts
index 0ff8420cc..fd1f68d8d 100644
--- a/dmp-admin/src/app/section-form/section-form.component.ts
+++ b/dmp-admin/src/app/section-form/section-form.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { Section } from '../models/Section';
 import { FieldGroup } from '../models/FieldGroup';
@@ -9,40 +9,42 @@ import { DatasetProfileModel } from '../models/DatasetProfileModel';
 @Component({
   selector: 'section-form',
   templateUrl: './section-form.component.html',
-  styleUrls: []
+  styleUrls: ['./section-form.component.css'],
+  encapsulation: ViewEncapsulation.None
 })
 
 export class SectionFormComponent {
   @Input() form: FormGroup;
-  @Input() dataModel:Section;
-  @Input() index:number;
-  constructor(){ }
+  @Input() dataModel: Section;
+  @Input() indexPath: string;
 
-  ngOnInit(){
+  constructor() { }
+
+  ngOnInit() {
     //this.addGroupField(); //for new DatasetProfile
   }
 
-  addGroupField(){
-    let fieldGroup:FieldGroup = new FieldGroup();
-    if(this.dataModel.fieldGroups)
+  addGroupField() {
+    let fieldGroup: FieldGroup = new FieldGroup();
+    if (this.dataModel.fieldGroups)
       this.dataModel.fieldGroups.push(fieldGroup);
     (<FormArray>this.form.get("fieldGroups")).push(fieldGroup.buildForm());
   }
 
-  DeleteFieldGroup(index){
+  DeleteFieldGroup(index) {
     this.dataModel.fieldGroups.splice(index, 1);
     (<FormArray>this.form.get("fieldGroups")).removeAt(index)
   }
 
-  addSectioninSection(){
-    let section:Section = new Section();
+  addSectioninSection() {
+    let section: Section = new Section();
     this.dataModel.sections.push(section);
     (<FormArray>this.form.get("sections")).push(section.buildForm());
   }
 
-  DeleteSectionInSection(index){
+  DeleteSectionInSection(index) {
     this.dataModel.sections.splice(index);
     (<FormArray>this.form.get("sections")).removeAt(index);
   }
-    
+
 }
\ No newline at end of file