diff --git a/README.md b/README.md
index 78d7816f65..5d8a323461 100644
--- a/README.md
+++ b/README.md
@@ -104,7 +104,7 @@ DSPACE_REST_SSL # Whether the angular REST uses SSL [true/false]
 
 The same settings can also be overwritten by setting system environment variables instead, E.g.:
 ```bash 
-export DSPACE_HOST=https://dspace7.4science.cloud/server
+export DSPACE_HOST=dspace7.4science.cloud
 ```
 
 The priority works as follows: **environment variable** overrides **variable in `.env` file** overrides **`environment.(prod, dev or test).ts`** overrides **`environment.common.ts`**
diff --git a/package.json b/package.json
index 8d3c936212..21a89400bf 100644
--- a/package.json
+++ b/package.json
@@ -101,7 +101,7 @@
     "moment": "^2.22.1",
     "morgan": "^1.9.1",
     "ng-mocks": "^8.1.0",
-    "ng2-file-upload": "1.2.1",
+    "ng2-file-upload": "1.4.0",
     "ng2-nouislider": "^1.8.2",
     "ngx-bootstrap": "^5.3.2",
     "ngx-infinite-scroll": "6.0.1",
diff --git a/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.spec.ts b/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.spec.ts
index 98128a6a61..0cb259c6d1 100644
--- a/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.spec.ts
+++ b/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.spec.ts
@@ -27,7 +27,8 @@ describe('MetadataFieldFormComponent', () => {
   /* tslint:disable:no-empty */
   const registryServiceStub = {
     getActiveMetadataField: () => observableOf(undefined),
-    createOrUpdateMetadataField: (field: MetadataField) => observableOf(field),
+    createMetadataField: (field: MetadataField) => observableOf(field),
+    updateMetadataField: (field: MetadataField) => observableOf(field),
     cancelEditMetadataField: () => {},
     cancelEditMetadataSchema: () => {},
     clearMetadataFieldRequests: () => observableOf(undefined)
@@ -75,7 +76,6 @@ describe('MetadataFieldFormComponent', () => {
     const scopeNote = 'fakeScopeNote';
 
     const expected = Object.assign(new MetadataField(), {
-      schema: metadataSchema,
       element: element,
       qualifier: qualifier,
       scopeNote: scopeNote
diff --git a/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.ts b/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.ts
index 42f6441791..70cdc15b4d 100644
--- a/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.ts
+++ b/src/app/+admin/admin-registries/metadata-schema/metadata-field-form/metadata-field-form.component.ts
@@ -157,19 +157,17 @@ export class MetadataFieldFormComponent implements OnInit, OnDestroy {
     this.registryService.getActiveMetadataField().pipe(take(1)).subscribe(
       (field) => {
         const values = {
-          schema: this.metadataSchema,
           element: this.element.value,
           qualifier: this.qualifier.value,
           scopeNote: this.scopeNote.value
         };
         if (field == null) {
-          this.registryService.createOrUpdateMetadataField(Object.assign(new MetadataField(), values)).subscribe((newField) => {
+          this.registryService.createMetadataField(Object.assign(new MetadataField(), values), this.metadataSchema).subscribe((newField) => {
             this.submitForm.emit(newField);
           });
         } else {
-          this.registryService.createOrUpdateMetadataField(Object.assign(new MetadataField(), field, {
+          this.registryService.updateMetadataField(Object.assign(new MetadataField(), field, {
             id: field.id,
-            schema: this.metadataSchema,
             element: (values.element ? values.element : field.element),
             qualifier: (values.qualifier ? values.qualifier : field.qualifier),
             scopeNote: (values.scopeNote ? values.scopeNote : field.scopeNote)
diff --git a/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.spec.ts b/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.spec.ts
index 26f4c90b0c..9532a64e84 100644
--- a/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.spec.ts
+++ b/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.spec.ts
@@ -61,7 +61,7 @@ describe('MetadataSchemaComponent', () => {
       element: 'contributor',
       qualifier: 'advisor',
       scopeNote: null,
-      schema: mockSchemasList[0]
+      schema: createSuccessfulRemoteDataObject$(mockSchemasList[0])
     },
     {
       id: 2,
@@ -73,7 +73,7 @@ describe('MetadataSchemaComponent', () => {
       element: 'contributor',
       qualifier: 'author',
       scopeNote: null,
-      schema: mockSchemasList[0]
+      schema: createSuccessfulRemoteDataObject$(mockSchemasList[0])
     },
     {
       id: 3,
@@ -85,7 +85,7 @@ describe('MetadataSchemaComponent', () => {
       element: 'contributor',
       qualifier: 'editor',
       scopeNote: 'test scope note',
-      schema: mockSchemasList[1]
+      schema: createSuccessfulRemoteDataObject$(mockSchemasList[1])
     },
     {
       id: 4,
@@ -97,15 +97,15 @@ describe('MetadataSchemaComponent', () => {
       element: 'contributor',
       qualifier: 'illustrator',
       scopeNote: null,
-      schema: mockSchemasList[1]
+      schema: createSuccessfulRemoteDataObject$(mockSchemasList[1])
     }
   ];
   const mockSchemas = createSuccessfulRemoteDataObject$(new PaginatedList(null, mockSchemasList));
   /* tslint:disable:no-empty */
   const registryServiceStub = {
     getMetadataSchemas: () => mockSchemas,
-    getMetadataFieldsBySchema: (schema: MetadataSchema) => createSuccessfulRemoteDataObject$(new PaginatedList(null, mockFieldsList.filter((value) => value.schema === schema))),
-    getMetadataSchemaByName: (schemaName: string) => createSuccessfulRemoteDataObject$(mockSchemasList.filter((value) => value.prefix === schemaName)[0]),
+    getMetadataFieldsBySchema: (schema: MetadataSchema) => createSuccessfulRemoteDataObject$(new PaginatedList(null, mockFieldsList.filter((value) => value.id === 3 || value.id === 4))),
+    getMetadataSchemaByPrefix: (schemaName: string) => createSuccessfulRemoteDataObject$(mockSchemasList.filter((value) => value.prefix === schemaName)[0]),
     getActiveMetadataField: () => observableOf(undefined),
     getSelectedMetadataFields: () => observableOf([]),
     editMetadataField: (schema) => {},
diff --git a/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.ts b/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.ts
index 96872573b9..87f4b863c0 100644
--- a/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.ts
+++ b/src/app/+admin/admin-registries/metadata-schema/metadata-schema.component.ts
@@ -17,6 +17,7 @@ import { getFirstSucceededRemoteDataPayload } from '../../../core/shared/operato
 import { toFindListOptions } from '../../../shared/pagination/pagination.utils';
 import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 import { combineLatest } from 'rxjs/internal/observable/combineLatest';
+import { followLink } from '../../../shared/utils/follow-link-config.model';
 
 @Component({
   selector: 'ds-metadata-schema',
@@ -71,7 +72,7 @@ export class MetadataSchemaComponent implements OnInit {
    * @param params
    */
   initialize(params) {
-    this.metadataSchema$ = this.registryService.getMetadataSchemaByName(params.schemaName).pipe(getFirstSucceededRemoteDataPayload());
+    this.metadataSchema$ = this.registryService.getMetadataSchemaByPrefix(params.schemaName).pipe(getFirstSucceededRemoteDataPayload());
     this.updateFields();
   }
 
@@ -91,7 +92,7 @@ export class MetadataSchemaComponent implements OnInit {
     this.metadataFields$ = combineLatest(this.metadataSchema$, this.needsUpdate$).pipe(
       switchMap(([schema, update]: [MetadataSchema, boolean]) => {
         if (update) {
-          return this.registryService.getMetadataFieldsBySchema(schema, toFindListOptions(this.config));
+          return this.registryService.getMetadataFieldsBySchema(schema, toFindListOptions(this.config), followLink('schema'));
         }
       })
     );
diff --git a/src/app/+admin/admin-sidebar/admin-sidebar.component.ts b/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
index a2818b699a..e5a71aa411 100644
--- a/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
+++ b/src/app/+admin/admin-sidebar/admin-sidebar.component.ts
@@ -149,11 +149,17 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
             this.modalService.open(CreateItemParentSelectorComponent);
           }
         } as OnClickMenuItemModel,
-        // model: {
-        //   type: MenuItemType.LINK,
-        //   text: 'menu.section.new_item',
-        //   link: '/submit'
-        // } as LinkMenuItemModel,
+      },
+      {
+        id: 'new_process',
+        parentID: 'new',
+        active: false,
+        visible: true,
+        model: {
+          type: MenuItemType.LINK,
+          text: 'menu.section.new_process',
+          link: '/processes/new'
+        } as LinkMenuItemModel,
       },
       {
         id: 'new_item_version',
@@ -350,6 +356,20 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
         icon: 'cogs',
         index: 9
       },
+
+      /* Processes */
+      {
+        id: 'processes',
+        active: false,
+        visible: true,
+        model: {
+          type: MenuItemType.LINK,
+          text: 'menu.section.processes',
+          link: '/processes'
+        } as LinkMenuItemModel,
+        icon: 'terminal',
+        index: 10
+      },
     ];
     menuList.forEach((menuSection) => this.menuService.addSection(this.menuID, Object.assign(menuSection, {
       shouldPersistOnRouteChange: true
@@ -466,7 +486,7 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
             link: '/admin/workflow'
           } as LinkMenuItemModel,
           icon: 'user-check',
-          index: 10
+          index: 11
         },
       ];
 
diff --git a/src/app/+collection-page/collection-page-routing.module.ts b/src/app/+collection-page/collection-page-routing.module.ts
index 589defa331..1ebd9b3630 100644
--- a/src/app/+collection-page/collection-page-routing.module.ts
+++ b/src/app/+collection-page/collection-page-routing.module.ts
@@ -9,10 +9,13 @@ import { CreateCollectionPageGuard } from './create-collection-page/create-colle
 import { DeleteCollectionPageComponent } from './delete-collection-page/delete-collection-page.component';
 import { URLCombiner } from '../core/url-combiner/url-combiner';
 import { getCollectionModulePath } from '../app-routing.module';
+import { EditItemTemplatePageComponent } from './edit-item-template-page/edit-item-template-page.component';
+import { ItemTemplatePageResolver } from './edit-item-template-page/item-template-page.resolver';
 import { CollectionItemMapperComponent } from './collection-item-mapper/collection-item-mapper.component';
 import { CollectionBreadcrumbResolver } from '../core/breadcrumbs/collection-breadcrumb.resolver';
 import { DSOBreadcrumbsService } from '../core/breadcrumbs/dso-breadcrumbs.service';
 import { LinkService } from '../core/cache/builders/link.service';
+import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
 
 export const COLLECTION_PARENT_PARAMETER = 'parent';
 
@@ -30,6 +33,7 @@ export function getCollectionCreatePath() {
 
 const COLLECTION_CREATE_PATH = 'create';
 const COLLECTION_EDIT_PATH = 'edit';
+const ITEMTEMPLATE_PATH = 'itemtemplate';
 
 @NgModule({
   imports: [
@@ -58,6 +62,16 @@ const COLLECTION_EDIT_PATH = 'edit';
             component: DeleteCollectionPageComponent,
             canActivate: [AuthenticatedGuard],
           },
+          {
+            path: ITEMTEMPLATE_PATH,
+            component: EditItemTemplatePageComponent,
+            canActivate: [AuthenticatedGuard],
+            resolve: {
+              item: ItemTemplatePageResolver,
+              breadcrumb: I18nBreadcrumbResolver
+            },
+            data: { title: 'collection.edit.template.title', breadcrumbKey: 'collection.edit.template' }
+          },
           {
             path: '',
             component: CollectionPageComponent,
@@ -75,6 +89,7 @@ const COLLECTION_EDIT_PATH = 'edit';
   ],
   providers: [
     CollectionPageResolver,
+    ItemTemplatePageResolver,
     CollectionBreadcrumbResolver,
     DSOBreadcrumbsService,
     LinkService,
diff --git a/src/app/+collection-page/collection-page.module.ts b/src/app/+collection-page/collection-page.module.ts
index 03daae68ae..554d56815a 100644
--- a/src/app/+collection-page/collection-page.module.ts
+++ b/src/app/+collection-page/collection-page.module.ts
@@ -8,6 +8,8 @@ import { CollectionPageRoutingModule } from './collection-page-routing.module';
 import { CreateCollectionPageComponent } from './create-collection-page/create-collection-page.component';
 import { CollectionFormComponent } from './collection-form/collection-form.component';
 import { DeleteCollectionPageComponent } from './delete-collection-page/delete-collection-page.component';
+import { EditItemTemplatePageComponent } from './edit-item-template-page/edit-item-template-page.component';
+import { EditItemPageModule } from '../+item-page/edit-item-page/edit-item-page.module';
 import { CollectionItemMapperComponent } from './collection-item-mapper/collection-item-mapper.component';
 import { SearchService } from '../core/shared/search/search.service';
 import { StatisticsModule } from '../statistics/statistics.module';
@@ -17,13 +19,15 @@ import { StatisticsModule } from '../statistics/statistics.module';
     CommonModule,
     SharedModule,
     CollectionPageRoutingModule,
-    StatisticsModule.forRoot()
+    StatisticsModule.forRoot(),
+    EditItemPageModule
   ],
   declarations: [
     CollectionPageComponent,
     CreateCollectionPageComponent,
     DeleteCollectionPageComponent,
     CollectionFormComponent,
+    EditItemTemplatePageComponent,
     CollectionItemMapperComponent
   ],
   exports: [
diff --git a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
index 6f3a63790d..b4eaf46bfb 100644
--- a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
+++ b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.html
@@ -1,3 +1,21 @@
+<div class="container-fluid mb-2" *ngVar="(itemTemplateRD$ | async) as itemTemplateRD">
+  <label>{{ 'collection.edit.template.label' | translate}}</label>
+  <div class="button-row">
+    <button *ngIf="!itemTemplateRD?.payload" class="btn btn-success" (click)="addItemTemplate()">
+      <i class="fas fa-plus"></i>
+      <span class="d-none d-sm-inline">&nbsp;{{"collection.edit.template.add-button" | translate}}</span>
+    </button>
+    <button *ngIf="itemTemplateRD?.payload" class="btn btn-danger" (click)="deleteItemTemplate()">
+      <i class="fas fa-trash-alt"></i>
+      <span class="d-none d-sm-inline">&nbsp;{{"collection.edit.template.delete-button" | translate}}</span>
+    </button>
+    <button *ngIf="itemTemplateRD?.payload" class="btn btn-primary"
+            [routerLink]="'/collections/' + (dsoRD$ | async)?.payload.uuid + '/itemtemplate'">
+      <i class="fas fa-edit"></i>
+      <span class="d-none d-sm-inline">&nbsp;{{"collection.edit.template.edit-button" | translate}}</span>
+    </button>
+  </div>
+</div>
 <ds-collection-form (submitForm)="onSubmit($event)"
                     [dso]="(dsoRD$ | async)?.payload"
                     (finish)="navigateToHomePage()"></ds-collection-form>
diff --git a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
index 6b480c1a79..aec843afa3 100644
--- a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
+++ b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.spec.ts
@@ -4,16 +4,54 @@ import { SharedModule } from '../../../shared/shared.module';
 import { CommonModule } from '@angular/common';
 import { RouterTestingModule } from '@angular/router/testing';
 import { CollectionDataService } from '../../../core/data/collection-data.service';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { of as observableOf } from 'rxjs/internal/observable/of';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { CollectionMetadataComponent } from './collection-metadata.component';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
+import { Item } from '../../../core/shared/item.model';
+import { ItemTemplateDataService } from '../../../core/data/item-template-data.service';
+import { Collection } from '../../../core/shared/collection.model';
+import { ObjectCacheService } from '../../../core/cache/object-cache.service';
+import { RequestService } from '../../../core/data/request.service';
+import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
 
 describe('CollectionMetadataComponent', () => {
   let comp: CollectionMetadataComponent;
   let fixture: ComponentFixture<CollectionMetadataComponent>;
+  let router: Router;
+  let itemTemplateService: ItemTemplateDataService;
+
+  const template = Object.assign(new Item(), {
+    _links: {
+      self: { href: 'template-selflink' }
+    }
+  });
+  const collection = Object.assign(new Collection(), {
+    uuid: 'collection-id',
+    id: 'collection-id',
+    name: 'Fake Collection',
+    _links: {
+      self: { href: 'collection-selflink' }
+    }
+  });
+
+  const itemTemplateServiceStub = Object.assign({
+    findByCollectionID: () => createSuccessfulRemoteDataObject$(template),
+    create: () => createSuccessfulRemoteDataObject$(template),
+    deleteByCollectionID: () => observableOf(true)
+  });
+
+  const notificationsService = jasmine.createSpyObj('notificationsService', {
+    success: {},
+    error: {}
+  });
+  const objectCache = jasmine.createSpyObj('objectCache', {
+    remove: {}
+  });
+  const requestService = jasmine.createSpyObj('requestService', {
+    removeByHrefSubstring: {}
+  });
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -21,8 +59,11 @@ describe('CollectionMetadataComponent', () => {
       declarations: [CollectionMetadataComponent],
       providers: [
         { provide: CollectionDataService, useValue: {} },
-        { provide: ActivatedRoute, useValue: { parent: { data: observableOf({ dso: { payload: {} } }) } } },
-        { provide: NotificationsService, useValue: new NotificationsServiceStub() }
+        { provide: ItemTemplateDataService, useValue: itemTemplateServiceStub },
+        { provide: ActivatedRoute, useValue: { parent: { data: observableOf({ dso: createSuccessfulRemoteDataObject(collection) }) } } },
+        { provide: NotificationsService, useValue: notificationsService },
+        { provide: ObjectCacheService, useValue: objectCache },
+        { provide: RequestService, useValue: requestService }
       ],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
@@ -31,12 +72,51 @@ describe('CollectionMetadataComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(CollectionMetadataComponent);
     comp = fixture.componentInstance;
+    router = (comp as any).router;
+    itemTemplateService = (comp as any).itemTemplateService;
     fixture.detectChanges();
   });
 
   describe('frontendURL', () => {
     it('should have the right frontendURL set', () => {
       expect((comp as any).frontendURL).toEqual('/collections/');
-    })
+    });
+  });
+
+  describe('addItemTemplate', () => {
+    it('should navigate to the collection\'s itemtemplate page', () => {
+      spyOn(router, 'navigate');
+      comp.addItemTemplate();
+      expect(router.navigate).toHaveBeenCalledWith(['collections', collection.uuid, 'itemtemplate']);
+    });
+  });
+
+  describe('deleteItemTemplate', () => {
+    describe('when delete returns a success', () => {
+      beforeEach(() => {
+        spyOn(itemTemplateService, 'deleteByCollectionID').and.returnValue(observableOf(true));
+        comp.deleteItemTemplate();
+      });
+
+      it('should display a success notification', () => {
+        expect(notificationsService.success).toHaveBeenCalled();
+      });
+
+      it('should reset related object and request cache', () => {
+        expect(objectCache.remove).toHaveBeenCalledWith(template.self);
+        expect(requestService.removeByHrefSubstring).toHaveBeenCalledWith(collection.self);
+      });
+    });
+
+    describe('when delete returns a failure', () => {
+      beforeEach(() => {
+        spyOn(itemTemplateService, 'deleteByCollectionID').and.returnValue(observableOf(false));
+        comp.deleteItemTemplate();
+      });
+
+      it('should display an error notification', () => {
+        expect(notificationsService.error).toHaveBeenCalled();
+      });
+    });
   });
 });
diff --git a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
index af2ab7d0a7..ca2a38aa86 100644
--- a/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
+++ b/src/app/+collection-page/edit-collection-page/collection-metadata/collection-metadata.component.ts
@@ -3,8 +3,17 @@ import { ComcolMetadataComponent } from '../../../shared/comcol-forms/edit-comco
 import { Collection } from '../../../core/shared/collection.model';
 import { CollectionDataService } from '../../../core/data/collection-data.service';
 import { ActivatedRoute, Router } from '@angular/router';
+import { ItemTemplateDataService } from '../../../core/data/item-template-data.service';
+import { Observable } from 'rxjs/internal/Observable';
+import { RemoteData } from '../../../core/data/remote-data';
+import { Item } from '../../../core/shared/item.model';
+import { getRemoteDataPayload, getSucceededRemoteData } from '../../../core/shared/operators';
+import { switchMap, take } from 'rxjs/operators';
+import { combineLatest as combineLatestObservable } from 'rxjs';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
+import { ObjectCacheService } from '../../../core/cache/object-cache.service';
+import { RequestService } from '../../../core/data/request.service';
 
 /**
  * Component for editing a collection's metadata
@@ -17,13 +26,91 @@ export class CollectionMetadataComponent extends ComcolMetadataComponent<Collect
   protected frontendURL = '/collections/';
   protected type = Collection.type;
 
+  /**
+   * The collection's item template
+   */
+  itemTemplateRD$: Observable<RemoteData<Item>>;
+
   public constructor(
     protected collectionDataService: CollectionDataService,
+    protected itemTemplateService: ItemTemplateDataService,
     protected router: Router,
     protected route: ActivatedRoute,
     protected notificationsService: NotificationsService,
-    protected translate: TranslateService
+    protected translate: TranslateService,
+    protected objectCache: ObjectCacheService,
+    protected requestService: RequestService
   ) {
     super(collectionDataService, router, route, notificationsService, translate);
   }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.initTemplateItem();
+  }
+
+  /**
+   * Initialize the collection's item template
+   */
+  initTemplateItem() {
+    this.itemTemplateRD$ = this.dsoRD$.pipe(
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      switchMap((collection: Collection) => this.itemTemplateService.findByCollectionID(collection.uuid))
+    );
+  }
+
+  /**
+   * Add a new item template to the collection and redirect to the item template edit page
+   */
+  addItemTemplate() {
+    const collection$ = this.dsoRD$.pipe(
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      take(1)
+    );
+    const template$ = collection$.pipe(
+      switchMap((collection: Collection) => this.itemTemplateService.create(new Item(), collection.uuid)),
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      take(1)
+    );
+
+    combineLatestObservable(collection$, template$).subscribe(([collection, template]) => {
+      this.router.navigate(['collections', collection.uuid, 'itemtemplate']);
+    });
+  }
+
+  /**
+   * Delete the item template from the collection
+   */
+  deleteItemTemplate() {
+    const collection$ = this.dsoRD$.pipe(
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      take(1)
+    );
+    const template$ = collection$.pipe(
+      switchMap((collection: Collection) => this.itemTemplateService.findByCollectionID(collection.uuid)),
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      take(1)
+    );
+
+    combineLatestObservable(collection$, template$).pipe(
+      switchMap(([collection, template]) => {
+        const success$ = this.itemTemplateService.deleteByCollectionID(template, collection.uuid);
+        this.objectCache.remove(template.self);
+        this.requestService.removeByHrefSubstring(collection.self);
+        return success$;
+      })
+    ).subscribe((success: boolean) => {
+      if (success) {
+        this.notificationsService.success(null, this.translate.get('collection.edit.template.notifications.delete.success'));
+      } else {
+        this.notificationsService.error(null, this.translate.get('collection.edit.template.notifications.delete.error'));
+      }
+      this.initTemplateItem();
+    });
+  }
 }
diff --git a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.html b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.html
new file mode 100644
index 0000000000..5b0f83fa22
--- /dev/null
+++ b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.html
@@ -0,0 +1,9 @@
+<div class="container" *ngVar="(collectionRD$ | async)?.payload as collection">
+  <div class="row">
+    <div class="col-12">
+      <h2 class="border-bottom">{{ 'collection.edit.template.head' | translate:{ collection: collection?.name } }}</h2>
+      <ds-item-metadata [updateService]="itemTemplateService"></ds-item-metadata>
+      <button [routerLink]="getCollectionEditUrl(collection)" class="btn btn-outline-secondary">{{ 'collection.edit.template.cancel' | translate }}</button>
+    </div>
+  </div>
+</div>
diff --git a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts
new file mode 100644
index 0000000000..6d5ffc8768
--- /dev/null
+++ b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.spec.ts
@@ -0,0 +1,51 @@
+import { EditItemTemplatePageComponent } from './edit-item-template-page.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { SharedModule } from '../../shared/shared.module';
+import { RouterTestingModule } from '@angular/router/testing';
+import { CommonModule } from '@angular/common';
+import { ItemTemplateDataService } from '../../core/data/item-template-data.service';
+import { ActivatedRoute } from '@angular/router';
+import { of as observableOf } from 'rxjs/internal/observable/of';
+import { Collection } from '../../core/shared/collection.model';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { getCollectionEditPath } from '../collection-page-routing.module';
+import { createSuccessfulRemoteDataObject } from '../../shared/remote-data.utils';
+
+describe('EditItemTemplatePageComponent', () => {
+  let comp: EditItemTemplatePageComponent;
+  let fixture: ComponentFixture<EditItemTemplatePageComponent>;
+  let itemTemplateService: ItemTemplateDataService;
+  let collection: Collection;
+
+  beforeEach(async(() => {
+    collection = Object.assign(new Collection(), {
+      uuid: 'collection-id',
+      id: 'collection-id',
+      name: 'Fake Collection'
+    });
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot(), SharedModule, CommonModule, RouterTestingModule],
+      declarations: [EditItemTemplatePageComponent],
+      providers: [
+        { provide: ItemTemplateDataService, useValue: {} },
+        { provide: ActivatedRoute, useValue: { parent: { data: observableOf({ dso: createSuccessfulRemoteDataObject(collection) }) } } }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditItemTemplatePageComponent);
+    comp = fixture.componentInstance;
+    itemTemplateService = (comp as any).itemTemplateService;
+    fixture.detectChanges();
+  });
+
+  describe('getCollectionEditUrl', () => {
+    it('should return the collection\'s edit url', () => {
+      const url = comp.getCollectionEditUrl(collection);
+      expect(url).toEqual(getCollectionEditPath(collection.uuid));
+    });
+  });
+});
diff --git a/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
new file mode 100644
index 0000000000..329c72d683
--- /dev/null
+++ b/src/app/+collection-page/edit-item-template-page/edit-item-template-page.component.ts
@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs/internal/Observable';
+import { RemoteData } from '../../core/data/remote-data';
+import { Collection } from '../../core/shared/collection.model';
+import { ActivatedRoute } from '@angular/router';
+import { first, map } from 'rxjs/operators';
+import { ItemTemplateDataService } from '../../core/data/item-template-data.service';
+import { getCollectionEditPath } from '../collection-page-routing.module';
+
+@Component({
+  selector: 'ds-edit-item-template-page',
+  templateUrl: './edit-item-template-page.component.html',
+})
+/**
+ * Component for editing the item template of a collection
+ */
+export class EditItemTemplatePageComponent implements OnInit {
+
+  /**
+   * The collection to edit the item template for
+   */
+  collectionRD$: Observable<RemoteData<Collection>>;
+
+  constructor(protected route: ActivatedRoute,
+              public itemTemplateService: ItemTemplateDataService) {
+  }
+
+  ngOnInit(): void {
+    this.collectionRD$ = this.route.parent.data.pipe(first(), map((data) => data.dso));
+  }
+
+  /**
+   * Get the URL to the collection's edit page
+   * @param collection
+   */
+  getCollectionEditUrl(collection: Collection): string {
+    if (collection) {
+      return getCollectionEditPath(collection.uuid);
+    } else {
+      return '';
+    }
+  }
+
+}
diff --git a/src/app/+collection-page/edit-item-template-page/item-template-page.resolver.spec.ts b/src/app/+collection-page/edit-item-template-page/item-template-page.resolver.spec.ts
new file mode 100644
index 0000000000..885adadb3f
--- /dev/null
+++ b/src/app/+collection-page/edit-item-template-page/item-template-page.resolver.spec.ts
@@ -0,0 +1,28 @@
+import { of as observableOf } from 'rxjs/internal/observable/of';
+import { first } from 'rxjs/operators';
+import { ItemTemplatePageResolver } from './item-template-page.resolver';
+
+describe('ItemTemplatePageResolver', () => {
+  describe('resolve', () => {
+    let resolver: ItemTemplatePageResolver;
+    let itemTemplateService: any;
+    const uuid = '1234-65487-12354-1235';
+
+    beforeEach(() => {
+      itemTemplateService = {
+        findByCollectionID: (id: string) => observableOf({ payload: { id }, hasSucceeded: true })
+      };
+      resolver = new ItemTemplatePageResolver(itemTemplateService);
+    });
+
+    it('should resolve an item template with the correct id', () => {
+      resolver.resolve({ params: { id: uuid } } as any, undefined)
+        .pipe(first())
+        .subscribe(
+          (resolved) => {
+            expect(resolved.payload.id).toEqual(uuid);
+          }
+        );
+    });
+  });
+});
diff --git a/src/app/+collection-page/edit-item-template-page/item-template-page.resolver.ts b/src/app/+collection-page/edit-item-template-page/item-template-page.resolver.ts
new file mode 100644
index 0000000000..919e131836
--- /dev/null
+++ b/src/app/+collection-page/edit-item-template-page/item-template-page.resolver.ts
@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { RemoteData } from '../../core/data/remote-data';
+import { Item } from '../../core/shared/item.model';
+import { ItemTemplateDataService } from '../../core/data/item-template-data.service';
+import { Observable } from 'rxjs/internal/Observable';
+import { find } from 'rxjs/operators';
+import { hasValue } from '../../shared/empty.util';
+import { followLink } from '../../shared/utils/follow-link-config.model';
+
+/**
+ * This class represents a resolver that requests a specific collection's item template before the route is activated
+ */
+@Injectable()
+export class ItemTemplatePageResolver implements Resolve<RemoteData<Item>> {
+  constructor(private itemTemplateService: ItemTemplateDataService) {
+  }
+
+  /**
+   * Method for resolving a collection's item template based on the parameters in the current route
+   * @param {ActivatedRouteSnapshot} route The current ActivatedRouteSnapshot
+   * @param {RouterStateSnapshot} state The current RouterStateSnapshot
+   * @returns Observable<<RemoteData<Collection>> Emits the found item template based on the parameters in the current route,
+   * or an error if something went wrong
+   */
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<RemoteData<Item>> {
+    return this.itemTemplateService.findByCollectionID(route.params.id, followLink('templateItemOf')).pipe(
+      find((RD) => hasValue(RD.error) || RD.hasSucceeded),
+    );
+  }
+}
diff --git a/src/app/+item-page/edit-item-page/abstract-item-update/abstract-item-update.component.ts b/src/app/+item-page/edit-item-page/abstract-item-update/abstract-item-update.component.ts
index 503759eeff..6f97ec3057 100644
--- a/src/app/+item-page/edit-item-page/abstract-item-update/abstract-item-update.component.ts
+++ b/src/app/+item-page/edit-item-page/abstract-item-update/abstract-item-update.component.ts
@@ -11,6 +11,7 @@ import { first, map } from 'rxjs/operators';
 import { RemoteData } from '../../../core/data/remote-data';
 import { AbstractTrackableComponent } from '../../../shared/trackable/abstract-trackable.component';
 import { environment } from '../../../../environments/environment';
+import { combineLatest as observableCombineLatest } from 'rxjs';
 
 @Component({
   selector: 'ds-abstract-item-update',
@@ -45,11 +46,12 @@ export class AbstractItemUpdateComponent extends AbstractTrackableComponent impl
    * Initialize common properties between item-update components
    */
   ngOnInit(): void {
-    this.route.parent.data.pipe(map((data) => data.item))
-      .pipe(
-        first(),
-        map((data: RemoteData<Item>) => data.payload)
-      ).subscribe((item: Item) => {
+    observableCombineLatest(this.route.data, this.route.parent.data).pipe(
+      map(([data, parentData]) => Object.assign({}, data, parentData)),
+      map((data) => data.item),
+      first(),
+      map((data: RemoteData<Item>) => data.payload)
+    ).subscribe((item: Item) => {
       this.item = item;
       this.postItemInit();
     });
diff --git a/src/app/+item-page/edit-item-page/edit-item-page.module.ts b/src/app/+item-page/edit-item-page/edit-item-page.module.ts
index 44cb4099f0..c3bd9eb924 100644
--- a/src/app/+item-page/edit-item-page/edit-item-page.module.ts
+++ b/src/app/+item-page/edit-item-page/edit-item-page.module.ts
@@ -78,6 +78,9 @@ import { ObjectValuesPipe } from '../../shared/utils/object-values-pipe';
   providers: [
     BundleDataService,
     ObjectValuesPipe
+  ],
+  exports: [
+    ItemMetadataComponent
   ]
 })
 export class EditItemPageModule {
diff --git a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.spec.ts b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.spec.ts
index 125fc1fb0c..0bdb4be6cb 100644
--- a/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.spec.ts
@@ -142,6 +142,7 @@ describe('ItemBitstreamsComponent', () => {
       parent: {
         data: observableOf({ item: createMockRD(item) })
       },
+      data: observableOf({}),
       url: url
     });
     bundleService = jasmine.createSpyObj('bundleService', {
diff --git a/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html b/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html
index e8ffc28920..80c78941c8 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html
+++ b/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html
@@ -67,4 +67,4 @@
             <i class="fas fa-undo-alt fa-fw"></i>
         </button>
     </div>
-</td>
\ No newline at end of file
+</td>
diff --git a/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.ts b/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.ts
index 45eecc6e7e..5a905fc7ea 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.ts
+++ b/src/app/+item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.ts
@@ -58,7 +58,7 @@ export class EditInPlaceFieldComponent implements OnInit, OnChanges {
   metadataFieldSuggestions: BehaviorSubject<InputSuggestion[]> = new BehaviorSubject([]);
 
   constructor(
-    private metadataFieldService: RegistryService,
+    private registryService: RegistryService,
     private objectUpdatesService: ObjectUpdatesService,
   ) {
   }
@@ -75,7 +75,7 @@ export class EditInPlaceFieldComponent implements OnInit, OnChanges {
    * Sends a new change update for this field to the object updates service
    */
   update(ngModel?: NgModel) {
-    this.objectUpdatesService.saveChangeFieldUpdate(this.url, this.metadata);
+    this.objectUpdatesService.saveChangeFieldUpdate(this.url, cloneDeep(this.metadata));
     if (hasValue(ngModel)) {
       this.checkValidity(ngModel);
     }
@@ -103,7 +103,7 @@ export class EditInPlaceFieldComponent implements OnInit, OnChanges {
    * Sends a new remove update for this field to the object updates service
    */
   remove() {
-    this.objectUpdatesService.saveRemoveFieldUpdate(this.url, this.metadata);
+    this.objectUpdatesService.saveRemoveFieldUpdate(this.url, cloneDeep(this.metadata));
   }
 
   /**
@@ -123,11 +123,12 @@ export class EditInPlaceFieldComponent implements OnInit, OnChanges {
   /**
    * Requests all metadata fields that contain the query string in their key
    * Then sets all found metadata fields as metadataFieldSuggestions
+   * Ignores fields from metadata schemas "relation" and "relationship"
    * @param query The query to look for
    */
   findMetadataFieldSuggestions(query: string): void {
     if (isNotEmpty(query)) {
-      this.metadataFieldService.queryMetadataFields(query).pipe(
+      this.registryService.queryMetadataFields(query).pipe(
         // getSucceededRemoteData(),
         take(1),
         map((data) => data.payload.page)
diff --git a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.html b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.html
index 496429a3ba..366f6fffe2 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.html
+++ b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.html
@@ -1,5 +1,5 @@
 <div class="item-metadata">
-    <div class="button-row top d-flex">
+    <div class="button-row top d-flex mb-2">
         <button class="mr-auto btn btn-success"
                 (click)="add()"><i
                 class="fas fa-plus"></i>
@@ -22,7 +22,7 @@
             <span class="d-none d-sm-inline">&nbsp;{{"item.edit.metadata.save-button" | translate}}</span>
         </button>
     </div>
-    <table class="table table-responsive table-striped table-bordered">
+    <table class="table table-responsive table-striped table-bordered" *ngIf="((updates$ | async)| dsObjectValues).length > 0">
         <tbody>
         <tr>
             <th>{{'item.edit.metadata.headers.field' | translate}}</th>
@@ -44,21 +44,24 @@
         </tr>
         </tbody>
     </table>
-    <div class="button-row bottom">
-        <div class="my-2 float-right">
-            <button class="btn btn-danger" *ngIf="!(isReinstatable() | async)"
-                    [disabled]="!(hasChanges() | async)"
-                    (click)="discard()"><i
-                    class="fas fa-times"></i> {{"item.edit.metadata.discard-button" | translate}}
-            </button>
-            <button class="btn btn-warning" *ngIf="isReinstatable() | async"
-                    (click)="reinstate()"><i
-                    class="fas fa-undo-alt"></i> {{"item.edit.metadata.reinstate-button" | translate}}
-            </button>
-            <button class="btn btn-primary" [disabled]="!(hasChanges() | async)"
-                    (click)="submit()"><i
-                    class="fas fa-save"></i> {{"item.edit.metadata.save-button" | translate}}
-            </button>
-        </div>
+    <div *ngIf="((updates$ | async)| dsObjectValues).length == 0">
+      <ds-alert [content]="'item.edit.metadata.empty'" [type]="AlertTypeEnum.Info"></ds-alert>
     </div>
+    <div class="button-row bottom">
+          <div class="float-right">
+              <button class="btn btn-danger mr-1" *ngIf="!(isReinstatable() | async)"
+                      [disabled]="!(hasChanges() | async)"
+                      (click)="discard()"><i
+                      class="fas fa-times"></i> {{"item.edit.metadata.discard-button" | translate}}
+              </button>
+              <button class="btn btn-warning mr-1" *ngIf="isReinstatable() | async"
+                      (click)="reinstate()"><i
+                      class="fas fa-undo-alt"></i> {{"item.edit.metadata.reinstate-button" | translate}}
+              </button>
+              <button class="btn btn-primary" [disabled]="!(hasChanges() | async)"
+                      (click)="submit()"><i
+                      class="fas fa-save"></i> {{"item.edit.metadata.save-button" | translate}}
+              </button>
+          </div>
+      </div>
 </div>
diff --git a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.spec.ts b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.spec.ts
index 37a75d6090..2b50a974ee 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.spec.ts
@@ -122,6 +122,7 @@ describe('ItemMetadataComponent', () => {
         commitUpdates: {}
       });
       routeStub = {
+        data: observableOf({}),
         parent: {
           data: observableOf({ item: createSuccessfulRemoteDataObject(item) })
         }
diff --git a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts
index 77e772b0b6..52402f8b32 100644
--- a/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts
+++ b/src/app/+item-page/edit-item-page/item-metadata/item-metadata.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { Item } from '../../../core/shared/item.model';
 import { ItemDataService } from '../../../core/data/item-data.service';
 import { ObjectUpdatesService } from '../../../core/data/object-updates/object-updates.service';
@@ -12,10 +12,13 @@ import { RemoteData } from '../../../core/data/remote-data';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
 import { RegistryService } from '../../../core/registry/registry.service';
-import { MetadatumViewModel } from '../../../core/shared/metadata.models';
+import { MetadataValue, MetadatumViewModel } from '../../../core/shared/metadata.models';
 import { Metadata } from '../../../core/shared/metadata.utils';
 import { AbstractItemUpdateComponent } from '../abstract-item-update/abstract-item-update.component';
 import { MetadataField } from '../../../core/metadata/metadata-field.model';
+import { UpdateDataService } from '../../../core/data/update-data.service';
+import { hasNoValue, hasValue } from '../../../shared/empty.util';
+import { AlertType } from '../../../shared/alert/aletr-type';
 
 @Component({
   selector: 'ds-item-metadata',
@@ -27,6 +30,18 @@ import { MetadataField } from '../../../core/metadata/metadata-field.model';
  */
 export class ItemMetadataComponent extends AbstractItemUpdateComponent {
 
+  /**
+   * The AlertType enumeration
+   * @type {AlertType}
+   */
+  public AlertTypeEnum = AlertType;
+
+  /**
+   * A custom update service to use for adding and committing patches
+   * This will default to the ItemDataService
+   */
+  @Input() updateService: UpdateDataService<Item>;
+
   /**
    * Observable with a list of strings with all existing metadata field keys
    */
@@ -50,6 +65,9 @@ export class ItemMetadataComponent extends AbstractItemUpdateComponent {
   ngOnInit(): void {
     super.ngOnInit();
     this.metadataFields$ = this.findMetadataFields();
+    if (hasNoValue(this.updateService)) {
+      this.updateService = this.itemService;
+    }
   }
 
   /**
@@ -88,20 +106,21 @@ export class ItemMetadataComponent extends AbstractItemUpdateComponent {
   public submit() {
     this.isValid().pipe(first()).subscribe((isValid) => {
       if (isValid) {
-        const metadata$: Observable<Identifiable[]> = this.objectUpdatesService.getUpdatedFields(this.url, this.getMetadataAsListExcludingRelationships()) as Observable<MetadatumViewModel[]>;
+        const metadata$: Observable<Identifiable[]> = this.objectUpdatesService.getUpdatedFields(this.url, this.item.metadataAsList) as Observable<MetadatumViewModel[]>;
         metadata$.pipe(
           first(),
           switchMap((metadata: MetadatumViewModel[]) => {
             const updatedItem: Item = Object.assign(cloneDeep(this.item), { metadata: Metadata.toMetadataMap(metadata) });
-            return this.itemService.update(updatedItem);
+            return this.updateService.update(updatedItem);
           }),
-          tap(() => this.itemService.commitUpdates()),
+          tap(() => this.updateService.commitUpdates()),
           getSucceededRemoteData()
         ).subscribe(
           (rd: RemoteData<Item>) => {
             this.item = rd.payload;
+            this.checkAndFixMetadataUUIDs();
             this.initializeOriginalFields();
-            this.updates$ = this.objectUpdatesService.getFieldUpdates(this.url, this.getMetadataAsListExcludingRelationships());
+            this.updates$ = this.objectUpdatesService.getFieldUpdates(this.url, this.item.metadataAsList);
             this.notificationsService.success(this.getNotificationTitle('saved'), this.getNotificationContent('saved'));
           }
         )
@@ -121,7 +140,14 @@ export class ItemMetadataComponent extends AbstractItemUpdateComponent {
       map((remoteData$) => remoteData$.payload.page.map((field: MetadataField) => field.toString())));
   }
 
-  getMetadataAsListExcludingRelationships(): MetadatumViewModel[] {
-    return this.item.metadataAsList.filter((metadata: MetadatumViewModel) => !metadata.key.startsWith('relation.') && !metadata.key.startsWith('relationship.'));
+  /**
+   * Check for empty metadata UUIDs and fix them (empty UUIDs would break the object-update service)
+   */
+  checkAndFixMetadataUUIDs() {
+    const metadata = cloneDeep(this.item.metadata);
+    Object.keys(this.item.metadata).forEach((key: string) => {
+      metadata[key] = this.item.metadata[key].map((value) => hasValue(value.uuid) ? value : Object.assign(new MetadataValue(), value));
+    });
+    this.item.metadata = metadata;
   }
 }
diff --git a/src/app/+item-page/edit-item-page/item-relationships/item-relationships.component.spec.ts b/src/app/+item-page/edit-item-page/item-relationships/item-relationships.component.spec.ts
index a2b18a4bce..5e657ae09d 100644
--- a/src/app/+item-page/edit-item-page/item-relationships/item-relationships.component.spec.ts
+++ b/src/app/+item-page/edit-item-page/item-relationships/item-relationships.component.spec.ts
@@ -140,6 +140,7 @@ describe('ItemRelationshipsComponent', () => {
       findById: observableOf(new RemoteData(false, false, true, undefined, item))
     });
     routeStub = {
+      data: observableOf({}),
       parent: {
         data: observableOf({ item: new RemoteData(false, false, true, null, item) })
       }
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 15123cb322..c8ee6ecd8b 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -122,6 +122,7 @@ export function getUnauthorizedPath() {
         path: PROFILE_MODULE_PATH,
         loadChildren: './profile-page/profile-page.module#ProfilePageModule', canActivate: [AuthenticatedGuard]
       },
+      { path: 'processes', loadChildren: './process-page/process-page.module#ProcessPageModule', canActivate: [AuthenticatedGuard] },
       { path: UNAUTHORIZED_PATH, component: UnauthorizedComponent },
       { path: '**', pathMatch: 'full', component: PageNotFoundComponent },
     ],
diff --git a/src/app/community-list-page/community-list-service.spec.ts b/src/app/community-list-page/community-list-service.spec.ts
index accd0f23a5..6868b8d546 100644
--- a/src/app/community-list-page/community-list-service.spec.ts
+++ b/src/app/community-list-page/community-list-service.spec.ts
@@ -462,7 +462,7 @@ describe('CommunityListService', () => {
         });
         let flatNodeList;
         describe('should return list containing only flatnode corresponding to that community', () => {
-          beforeAll((done) => {
+          beforeEach((done) => {
             service.transformCommunity(communityWithSubcoms, 0, null, null)
               .pipe(take(1))
               .subscribe((value) => {
diff --git a/src/app/core/breadcrumbs/i18n-breadcrumb.resolver.spec.ts b/src/app/core/breadcrumbs/i18n-breadcrumb.resolver.spec.ts
index a06abdc816..6b640a9db0 100644
--- a/src/app/core/breadcrumbs/i18n-breadcrumb.resolver.spec.ts
+++ b/src/app/core/breadcrumbs/i18n-breadcrumb.resolver.spec.ts
@@ -1,21 +1,38 @@
 import { I18nBreadcrumbResolver } from './i18n-breadcrumb.resolver';
+import { URLCombiner } from '../url-combiner/url-combiner';
 
 describe('I18nBreadcrumbResolver', () => {
   describe('resolve', () => {
     let resolver: I18nBreadcrumbResolver;
     let i18nBreadcrumbService: any;
     let i18nKey: string;
-    let path: string;
+    let route: any;
+    let parentSegment;
+    let segment;
+    let expectedPath;
     beforeEach(() => {
       i18nKey = 'example.key';
-      path = 'rest.com/path/to/breadcrumb';
+      parentSegment = 'path';
+      segment = 'breadcrumb';
+      route = {
+        data: { breadcrumbKey: i18nKey },
+        routeConfig: {
+          path: segment
+        },
+        parent: {
+          routeConfig: {
+            path: parentSegment
+          }
+        } as any
+      };
+      expectedPath = new URLCombiner(parentSegment, segment).toString();
       i18nBreadcrumbService = {};
       resolver = new I18nBreadcrumbResolver(i18nBreadcrumbService);
     });
 
     it('should resolve the breadcrumb config', () => {
-      const resolvedConfig = resolver.resolve({ data: { breadcrumbKey: i18nKey }, url: [path], pathFromRoot: [{ url: [path] }] } as any, {} as any);
-      const expectedConfig = { provider: i18nBreadcrumbService, key: i18nKey, url: path };
+      const resolvedConfig = resolver.resolve(route, {} as any);
+      const expectedConfig = { provider: i18nBreadcrumbService, key: i18nKey, url: expectedPath };
       expect(resolvedConfig).toEqual(expectedConfig);
     });
 
diff --git a/src/app/core/breadcrumbs/i18n-breadcrumb.resolver.ts b/src/app/core/breadcrumbs/i18n-breadcrumb.resolver.ts
index a6298628c7..cce36f590a 100644
--- a/src/app/core/breadcrumbs/i18n-breadcrumb.resolver.ts
+++ b/src/app/core/breadcrumbs/i18n-breadcrumb.resolver.ts
@@ -3,6 +3,7 @@ import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 import { I18nBreadcrumbsService } from './i18n-breadcrumbs.service';
 import { hasNoValue } from '../../shared/empty.util';
+import { currentPathFromSnapshot } from '../../shared/utils/route.utils';
 
 /**
  * The class that resolves a BreadcrumbConfig object with an i18n key string for a route
@@ -25,17 +26,7 @@ export class I18nBreadcrumbResolver implements Resolve<BreadcrumbConfig<string>>
     if (hasNoValue(key)) {
       throw new Error('You provided an i18nBreadcrumbResolver for url \"' + route.url + '\" but no breadcrumbKey in the route\'s data')
     }
-    const fullPath = this.getResolvedUrl(route);
+    const fullPath = currentPathFromSnapshot(route);
     return { provider: this.breadcrumbService, key: key, url: fullPath };
   }
-
-  /**
-   * Resolve the full URL of an ActivatedRouteSnapshot
-   * @param route
-   */
-  getResolvedUrl(route: ActivatedRouteSnapshot): string {
-    return route.pathFromRoot
-      .map((v) => v.url.map((segment) => segment.toString()).join('/'))
-      .join('/');
-  }
 }
diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts
index 22c33edca0..4b2a842bca 100644
--- a/src/app/core/core.module.ts
+++ b/src/app/core/core.module.ts
@@ -1,7 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
 import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
-
 import { DynamicFormLayoutService, DynamicFormService, DynamicFormValidationService } from '@ng-dynamic-forms/core';
 import { EffectsModule } from '@ngrx/effects';
 
@@ -138,8 +137,15 @@ import { VersionDataService } from './data/version-data.service';
 import { VersionHistoryDataService } from './data/version-history-data.service';
 import { Version } from './shared/version.model';
 import { VersionHistory } from './shared/version-history.model';
+import { Script } from '../process-page/scripts/script.model';
+import { Process } from '../process-page/processes/process.model';
+import { ProcessDataService } from './data/processes/process-data.service';
+import { ScriptDataService } from './data/processes/script-data.service';
+import { ProcessFilesResponseParsingService } from './data/process-files-response-parsing.service';
 import { WorkflowActionDataService } from './data/workflow-action-data.service';
 import { WorkflowAction } from './tasks/models/workflow-action-object.model';
+import { ItemTemplateDataService } from './data/item-template-data.service';
+import { TemplateItem } from './shared/template-item.model';
 import { Feature } from './shared/feature.model';
 import { Authorization } from './shared/authorization.model';
 import { FeatureDataService } from './data/feature-authorization/feature-data.service';
@@ -149,6 +155,10 @@ import { Registration } from './shared/registration.model';
 import { MetadataSchemaDataService } from './data/metadata-schema-data.service';
 import { MetadataFieldDataService } from './data/metadata-field-data.service';
 import { TokenResponseParsingService } from './auth/token-response-parsing.service';
+import { SubmissionCcLicenseDataService } from './submission/submission-cc-license-data.service';
+import { SubmissionCcLicence } from './submission/models/submission-cc-license.model';
+import { SubmissionCcLicenceUrl } from './submission/models/submission-cc-license-url.model';
+import { SubmissionCcLicenseUrlDataService } from './submission/submission-cc-license-url-data.service';
 
 /**
  * When not in production, endpoint responses can be mocked for testing purposes
@@ -215,6 +225,8 @@ const PROVIDERS = [
   BrowseItemsResponseParsingService,
   BrowseService,
   ConfigResponseParsingService,
+  SubmissionCcLicenseDataService,
+  SubmissionCcLicenseUrlDataService,
   SubmissionDefinitionsConfigService,
   SubmissionFormsConfigService,
   SubmissionRestService,
@@ -249,6 +261,7 @@ const PROVIDERS = [
   BitstreamDataService,
   EntityTypeService,
   ContentSourceResponseParsingService,
+  ItemTemplateDataService,
   SearchService,
   SidebarService,
   SearchFilterService,
@@ -263,6 +276,9 @@ const PROVIDERS = [
   LicenseDataService,
   ItemTypeDataService,
   WorkflowActionDataService,
+  ProcessDataService,
+  ScriptDataService,
+  ProcessFilesResponseParsingService,
   FeatureDataService,
   AuthorizationDataService,
   SiteAdministratorGuard,
@@ -301,6 +317,8 @@ export const models =
     License,
     WorkflowItem,
     WorkspaceItem,
+    SubmissionCcLicence,
+    SubmissionCcLicenceUrl,
     SubmissionDefinitionsModel,
     SubmissionFormsModel,
     SubmissionSectionModel,
@@ -317,9 +335,12 @@ export const models =
     ItemType,
     ExternalSource,
     ExternalSourceEntry,
+    Script,
+    Process,
     Version,
     VersionHistory,
     WorkflowAction,
+    TemplateItem,
     Feature,
     Authorization,
     Registration
diff --git a/src/app/core/data/data.service.ts b/src/app/core/data/data.service.ts
index 7f77d72d3a..b6f6465450 100644
--- a/src/app/core/data/data.service.ts
+++ b/src/app/core/data/data.service.ts
@@ -50,9 +50,10 @@ import {
 import { RequestEntry } from './request.reducer';
 import { RequestService } from './request.service';
 import { RestRequestMethod } from './rest-request-method';
+import { UpdateDataService } from './update-data.service';
 import { GenericConstructor } from '../shared/generic-constructor';
 
-export abstract class DataService<T extends CacheableObject> {
+export abstract class DataService<T extends CacheableObject> implements UpdateDataService<T> {
   protected abstract requestService: RequestService;
   protected abstract rdbService: RemoteDataBuildService;
   protected abstract store: Store<CoreState>;
@@ -75,6 +76,13 @@ export abstract class DataService<T extends CacheableObject> {
    * @returns {Observable<string>}
    */
   getBrowseEndpoint(options: FindListOptions = {}, linkPath?: string): Observable<string> {
+    return this.getEndpoint();
+  }
+
+  /**
+   * Get the base endpoint for all requests
+   */
+  protected getEndpoint(): Observable<string> {
     return this.halService.getEndpoint(this.linkPath);
   }
 
@@ -259,6 +267,16 @@ export abstract class DataService<T extends CacheableObject> {
     return this.buildHrefFromFindOptions(endpoint + '/' + resourceID, {}, [], ...linksToFollow);
   }
 
+  /**
+   * Create an observable for the HREF of a specific object based on its identifier
+   * @param resourceID The identifier for the object
+   * @param linksToFollow   List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be automatically resolved
+   */
+  getIDHrefObs(resourceID: string, ...linksToFollow: Array<FollowLinkConfig<T>>): Observable<string> {
+    return this.getEndpoint().pipe(
+      map((endpoint: string) => this.getIDHref(endpoint, resourceID, ...linksToFollow)));
+  }
+
   /**
    * Returns an observable of {@link RemoteData} of an object, based on its ID, with a list of {@link FollowLinkConfig},
    * to automatically resolve {@link HALLink}s of the object
@@ -266,8 +284,7 @@ export abstract class DataService<T extends CacheableObject> {
    * @param linksToFollow   List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be automatically resolved
    */
   findById(id: string, ...linksToFollow: Array<FollowLinkConfig<T>>): Observable<RemoteData<T>> {
-    const hrefObs = this.halService.getEndpoint(this.linkPath).pipe(
-      map((endpoint: string) => this.getIDHref(endpoint, encodeURIComponent(id), ...linksToFollow)));
+    const hrefObs = this.getIDHrefObs(encodeURIComponent(id), ...linksToFollow);
 
     hrefObs.pipe(
       find((href: string) => hasValue(href)))
@@ -437,7 +454,7 @@ export abstract class DataService<T extends CacheableObject> {
    */
   create(dso: T, ...params: RequestParam[]): Observable<RemoteData<T>> {
     const requestId = this.requestService.generateRequestId();
-    const endpoint$ = this.halService.getEndpoint(this.linkPath).pipe(
+    const endpoint$ = this.getEndpoint().pipe(
       isNotEmptyOperator(),
       distinctUntilChanged(),
       map((endpoint: string) => this.buildHrefWithParams(endpoint, params))
@@ -563,8 +580,7 @@ export abstract class DataService<T extends CacheableObject> {
   private deleteAndReturnRequestId(dsoID: string, copyVirtualMetadata?: string[]): string {
     const requestId = this.requestService.generateRequestId();
 
-    const hrefObs = this.halService.getEndpoint(this.linkPath).pipe(
-      map((endpoint: string) => this.getIDHref(endpoint, dsoID)));
+    const hrefObs = this.getIDHrefObs(dsoID);
 
     hrefObs.pipe(
       find((href: string) => hasValue(href)),
diff --git a/src/app/core/data/item-data.service.ts b/src/app/core/data/item-data.service.ts
index 562050c802..218abb2dee 100644
--- a/src/app/core/data/item-data.service.ts
+++ b/src/app/core/data/item-data.service.ts
@@ -55,7 +55,7 @@ export class ItemDataService extends DataService<Item> {
     protected requestService: RequestService,
     protected rdbService: RemoteDataBuildService,
     protected store: Store<CoreState>,
-    private bs: BrowseService,
+    protected bs: BrowseService,
     protected objectCache: ObjectCacheService,
     protected halService: HALEndpointService,
     protected notificationsService: NotificationsService,
diff --git a/src/app/core/data/item-template-data.service.spec.ts b/src/app/core/data/item-template-data.service.spec.ts
new file mode 100644
index 0000000000..d5f3e4b6f6
--- /dev/null
+++ b/src/app/core/data/item-template-data.service.spec.ts
@@ -0,0 +1,139 @@
+import { ItemTemplateDataService } from './item-template-data.service';
+import { RestRequest } from './request.models';
+import { RequestEntry } from './request.reducer';
+import { RestResponse } from '../cache/response.models';
+import { RequestService } from './request.service';
+import { of as observableOf } from 'rxjs';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { Store } from '@ngrx/store';
+import { CoreState } from '../core.reducers';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { BrowseService } from '../browse/browse.service';
+import { Observable } from 'rxjs/internal/Observable';
+import { cold } from 'jasmine-marbles';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { HttpClient } from '@angular/common/http';
+import { CollectionDataService } from './collection-data.service';
+import { RestRequestMethod } from './rest-request-method';
+import { Item } from '../shared/item.model';
+
+describe('ItemTemplateDataService', () => {
+  let service: ItemTemplateDataService;
+  let itemService: any;
+
+  const item = new Item();
+  const collectionEndpoint = 'https://rest.api/core/collections/4af28e99-6a9c-4036-a199-e1b587046d39';
+  const itemEndpoint = `${collectionEndpoint}/itemtemplate`;
+  const scopeID = '4af28e99-6a9c-4036-a199-e1b587046d39';
+  const requestService = {
+    generateRequestId(): string {
+      return scopeID;
+    },
+    configure(request: RestRequest) {
+      // Do nothing
+    },
+    getByHref(requestHref: string) {
+      const responseCacheEntry = new RequestEntry();
+      responseCacheEntry.response = new RestResponse(true, 200, 'OK');
+      return observableOf(responseCacheEntry);
+    },
+    getByUUID(uuid: string) {
+      const responseCacheEntry = new RequestEntry();
+      responseCacheEntry.response = new RestResponse(true, 200, 'OK');
+      return observableOf(responseCacheEntry);
+    },
+    commit(method?: RestRequestMethod) {
+      // Do nothing
+    }
+  } as RequestService;
+  const rdbService = {} as RemoteDataBuildService;
+  const store = {} as Store<CoreState>;
+  const bs = {} as BrowseService;
+  const objectCache = {
+    getObjectBySelfLink(self) {
+      return observableOf({})
+    },
+    addPatch(self, operations) {
+      // Do nothing
+    }
+  } as ObjectCacheService;
+  const halEndpointService = {
+    getEndpoint(linkPath: string): Observable<string> {
+      return cold('a', {a: itemEndpoint});
+    }
+  } as HALEndpointService;
+  const notificationsService = {} as NotificationsService;
+  const http = {} as HttpClient;
+  const comparator = {
+    diff(first, second) {
+      return [{}];
+    }
+  } as any;
+  const collectionService = {
+    getIDHrefObs(id): Observable<string> {
+      return observableOf(collectionEndpoint);
+    }
+  } as CollectionDataService;
+
+  function initTestService() {
+    service = new ItemTemplateDataService(
+      requestService,
+      rdbService,
+      store,
+      bs,
+      objectCache,
+      halEndpointService,
+      notificationsService,
+      http,
+      comparator,
+      undefined,
+      collectionService
+    );
+    itemService = (service as any).dataService;
+  }
+
+  beforeEach(() => {
+    initTestService();
+  });
+
+  describe('commitUpdates', () => {
+    it('should call commitUpdates on the item service implementation', () => {
+      spyOn(itemService, 'commitUpdates');
+      service.commitUpdates();
+      expect(itemService.commitUpdates).toHaveBeenCalled();
+    });
+  });
+
+  describe('update', () => {
+    it('should call update on the item service implementation', () => {
+      spyOn(itemService, 'update');
+      service.update(item);
+      expect(itemService.update).toHaveBeenCalled();
+    });
+  });
+
+  describe('findByCollectionID', () => {
+    it('should call findByCollectionID on the item service implementation', () => {
+      spyOn(itemService, 'findByCollectionID');
+      service.findByCollectionID(scopeID);
+      expect(itemService.findByCollectionID).toHaveBeenCalled();
+    });
+  });
+
+  describe('create', () => {
+    it('should call createTemplate on the item service implementation', () => {
+      spyOn(itemService, 'createTemplate');
+      service.create(item, scopeID);
+      expect(itemService.createTemplate).toHaveBeenCalled();
+    });
+  });
+
+  describe('deleteByCollectionID', () => {
+    it('should call deleteByCollectionID on the item service implementation', () => {
+      spyOn(itemService, 'deleteByCollectionID');
+      service.deleteByCollectionID(item, scopeID);
+      expect(itemService.deleteByCollectionID).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/app/core/data/item-template-data.service.ts b/src/app/core/data/item-template-data.service.ts
new file mode 100644
index 0000000000..d157c09a7c
--- /dev/null
+++ b/src/app/core/data/item-template-data.service.ts
@@ -0,0 +1,193 @@
+import { Injectable } from '@angular/core';
+import { ItemDataService } from './item-data.service';
+import { UpdateDataService } from './update-data.service';
+import { Item } from '../shared/item.model';
+import { RestRequestMethod } from './rest-request-method';
+import { RemoteData } from './remote-data';
+import { Observable } from 'rxjs/internal/Observable';
+import { DSOChangeAnalyzer } from './dso-change-analyzer.service';
+import { RequestService } from './request.service';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { Store } from '@ngrx/store';
+import { CoreState } from '../core.reducers';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { HttpClient } from '@angular/common/http';
+import { BrowseService } from '../browse/browse.service';
+import { CollectionDataService } from './collection-data.service';
+import { switchMap } from 'rxjs/operators';
+import { BundleDataService } from './bundle-data.service';
+import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
+
+/* tslint:disable:max-classes-per-file */
+/**
+ * A custom implementation of the ItemDataService, but for collection item templates
+ * Makes sure to change the endpoint before sending out CRUD requests for the item template
+ */
+class DataServiceImpl extends ItemDataService {
+  protected collectionLinkPath = 'itemtemplate';
+  protected linkPath = 'itemtemplates';
+
+  /**
+   * Endpoint dynamically changing depending on what request we're sending
+   */
+  private endpoint$: Observable<string>;
+
+  /**
+   * Is the current endpoint based on a collection?
+   */
+  private collectionEndpoint = false;
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected store: Store<CoreState>,
+    protected bs: BrowseService,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+    protected http: HttpClient,
+    protected comparator: DSOChangeAnalyzer<Item>,
+    protected bundleService: BundleDataService,
+    protected collectionService: CollectionDataService) {
+    super(requestService, rdbService, store, bs, objectCache, halService, notificationsService, http, comparator, bundleService);
+  }
+
+  /**
+   * Set the endpoint to be based on a collection
+   * @param collectionID  The ID of the collection to base the endpoint on
+   */
+  private setCollectionEndpoint(collectionID: string) {
+    this.collectionEndpoint = true;
+    this.endpoint$ = this.collectionService.getIDHrefObs(collectionID).pipe(
+      switchMap((href: string) => this.halService.getEndpoint(this.collectionLinkPath, href))
+    );
+  }
+
+  /**
+   * Set the endpoint to the regular linkPath
+   */
+  private setRegularEndpoint() {
+    this.collectionEndpoint = false;
+    this.endpoint$ = this.halService.getEndpoint(this.linkPath);
+  }
+
+  /**
+   * Get the base endpoint for all requests
+   * Uses the current collectionID to assemble a request endpoint for the collection's item template
+   */
+  protected getEndpoint(): Observable<string> {
+    return this.endpoint$;
+  }
+
+  /**
+   * If the current endpoint is based on a collection, simply return the collection's template endpoint, otherwise
+   * create a regular template endpoint
+   * @param resourceID
+   */
+  getIDHrefObs(resourceID: string): Observable<string> {
+    if (this.collectionEndpoint) {
+      return this.getEndpoint();
+    } else {
+      return super.getIDHrefObs(resourceID);
+    }
+  }
+
+  /**
+   * Set the collection ID and send a find by ID request
+   * @param collectionID
+   * @param linksToFollow   List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be automatically resolved
+   */
+  findByCollectionID(collectionID: string, ...linksToFollow: Array<FollowLinkConfig<Item>>): Observable<RemoteData<Item>> {
+    this.setCollectionEndpoint(collectionID);
+    return super.findById(collectionID, ...linksToFollow);
+  }
+
+  /**
+   * Set the collection ID and send a create request
+   * @param item
+   * @param collectionID
+   */
+  createTemplate(item: Item, collectionID: string): Observable<RemoteData<Item>> {
+    this.setCollectionEndpoint(collectionID);
+    return super.create(item);
+  }
+
+  /**
+   * Set the collection ID and send a delete request
+   * @param item
+   * @param collectionID
+   */
+  deleteByCollectionID(item: Item, collectionID: string): Observable<boolean> {
+    this.setRegularEndpoint();
+    return super.delete(item.uuid);
+  }
+}
+
+/**
+ * A service responsible for fetching/sending data from/to the REST API on a collection's itemtemplates endpoint
+ */
+@Injectable()
+export class ItemTemplateDataService implements UpdateDataService<Item> {
+  /**
+   * The data service responsible for all CRUD actions on the item
+   */
+  private dataService: DataServiceImpl;
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected store: Store<CoreState>,
+    protected bs: BrowseService,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+    protected http: HttpClient,
+    protected comparator: DSOChangeAnalyzer<Item>,
+    protected bundleService: BundleDataService,
+    protected collectionService: CollectionDataService) {
+    this.dataService = new DataServiceImpl(requestService, rdbService, store, bs, objectCache, halService, notificationsService, http, comparator, bundleService, collectionService);
+  }
+
+  /**
+   * Commit current object changes to the server
+   */
+  commitUpdates(method?: RestRequestMethod) {
+    this.dataService.commitUpdates(method);
+  }
+
+  /**
+   * Add a new patch to the object cache
+   */
+  update(object: Item): Observable<RemoteData<Item>> {
+    return this.dataService.update(object);
+  }
+
+  /**
+   * Find an item template by collection ID
+   * @param collectionID
+   * @param linksToFollow   List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be automatically resolved
+   */
+  findByCollectionID(collectionID: string, ...linksToFollow: Array<FollowLinkConfig<Item>>): Observable<RemoteData<Item>> {
+    return this.dataService.findByCollectionID(collectionID, ...linksToFollow);
+  }
+
+  /**
+   * Create a new item template for a collection by ID
+   * @param item
+   * @param collectionID
+   */
+  create(item: Item, collectionID: string): Observable<RemoteData<Item>> {
+    return this.dataService.createTemplate(item, collectionID);
+  }
+
+  /**
+   * Delete a template item by collection ID
+   * @param item
+   * @param collectionID
+   */
+  deleteByCollectionID(item: Item, collectionID: string): Observable<boolean> {
+    return this.dataService.deleteByCollectionID(item, collectionID);
+  }
+}
diff --git a/src/app/core/data/metadata-field-data.service.spec.ts b/src/app/core/data/metadata-field-data.service.spec.ts
index 5c17b56845..be610e3d8c 100644
--- a/src/app/core/data/metadata-field-data.service.spec.ts
+++ b/src/app/core/data/metadata-field-data.service.spec.ts
@@ -4,9 +4,8 @@ import { NotificationsService } from '../../shared/notifications/notifications.s
 import { of as observableOf } from 'rxjs/internal/observable/of';
 import { RestResponse } from '../cache/response.models';
 import { HALEndpointServiceStub } from '../../shared/testing/hal-endpoint-service.stub';
-import { CreateRequest, FindListOptions, PutRequest } from './request.models';
+import { FindListOptions } from './request.models';
 import { MetadataFieldDataService } from './metadata-field-data.service';
-import { MetadataField } from '../metadata/metadata-field.model';
 import { MetadataSchema } from '../metadata/metadata-schema.model';
 import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
 import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
@@ -64,45 +63,6 @@ describe('MetadataFieldDataService', () => {
     });
   });
 
-  describe('createOrUpdateMetadataField', () => {
-    let field: MetadataField;
-
-    beforeEach(() => {
-      field = Object.assign(new MetadataField(), {
-        element: 'identifier',
-        qualifier: undefined,
-        schema: schema,
-        _links: {
-          self: { href: 'selflink' }
-        }
-      });
-    });
-
-    describe('called with a new metadata field', () => {
-      it('should send a CreateRequest', (done) => {
-        metadataFieldService.createOrUpdateMetadataField(field).subscribe(() => {
-          expect(requestService.configure).toHaveBeenCalledWith(jasmine.any(CreateRequest));
-          done();
-        });
-      });
-    });
-
-    describe('called with an existing metadata field', () => {
-      beforeEach(() => {
-        field = Object.assign(field, {
-          id: 'id-of-existing-field'
-        });
-      });
-
-      it('should send a PutRequest', (done) => {
-        metadataFieldService.createOrUpdateMetadataField(field).subscribe(() => {
-          expect(requestService.configure).toHaveBeenCalledWith(jasmine.any(PutRequest));
-          done();
-        });
-      });
-    });
-  });
-
   describe('clearRequests', () => {
     it('should remove requests on the data service\'s endpoint', (done) => {
       metadataFieldService.clearRequests().subscribe(() => {
diff --git a/src/app/core/data/metadata-field-data.service.ts b/src/app/core/data/metadata-field-data.service.ts
index f50be20f13..1f7a4b9089 100644
--- a/src/app/core/data/metadata-field-data.service.ts
+++ b/src/app/core/data/metadata-field-data.service.ts
@@ -13,14 +13,11 @@ import { NotificationsService } from '../../shared/notifications/notifications.s
 import { METADATA_FIELD } from '../metadata/metadata-field.resource-type';
 import { MetadataField } from '../metadata/metadata-field.model';
 import { MetadataSchema } from '../metadata/metadata-schema.model';
-import { FindListOptions, FindListRequest } from './request.models';
+import { FindListOptions } from './request.models';
 import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
 import { Observable } from 'rxjs/internal/Observable';
-import { hasValue } from '../../shared/empty.util';
-import { find, skipWhile, switchMap, tap } from 'rxjs/operators';
-import { RemoteData } from './remote-data';
+import { tap } from 'rxjs/operators';
 import { RequestParam } from '../cache/models/request-param.model';
-import { PaginatedList } from './paginated-list';
 
 /**
  * A service responsible for fetching/sending data from/to the REST API on the metadatafields endpoint
@@ -56,24 +53,6 @@ export class MetadataFieldDataService extends DataService<MetadataField> {
     return this.searchBy(this.searchBySchemaLinkPath, optionsWithSchema, ...linksToFollow);
   }
 
-  /**
-   * Create or Update a MetadataField
-   *  If the MetadataField contains an id, it is assumed the field already exists and is updated instead
-   *  Since creating or updating is nearly identical, the only real difference is the request (and slight difference in endpoint):
-   *  - On creation, a CreateRequest is used
-   *  - On update, a PutRequest is used
-   * @param field    The MetadataField to create or update
-   */
-  createOrUpdateMetadataField(field: MetadataField): Observable<RemoteData<MetadataField>> {
-    const isUpdate = hasValue(field.id);
-
-    if (isUpdate) {
-      return this.put(field);
-    } else {
-      return this.create(field, new RequestParam('schemaId', field.schema.id));
-    }
-  }
-
   /**
    * Clear all metadata field requests
    * Used for refreshing lists after adding/updating/removing a metadata field from a metadata schema
diff --git a/src/app/core/data/process-files-response-parsing.service.ts b/src/app/core/data/process-files-response-parsing.service.ts
new file mode 100644
index 0000000000..0fa7c66869
--- /dev/null
+++ b/src/app/core/data/process-files-response-parsing.service.ts
@@ -0,0 +1,41 @@
+import { ResponseParsingService } from './parsing.service';
+import { RestRequest } from './request.models';
+import { GenericSuccessResponse, RestResponse } from '../cache/response.models';
+import { DSpaceRESTV2Response } from '../dspace-rest-v2/dspace-rest-v2-response.model';
+import { isEmpty, isNotEmpty } from '../../shared/empty.util';
+import { PaginatedList } from './paginated-list';
+import { PageInfo } from '../shared/page-info.model';
+import { Injectable } from '@angular/core';
+import { DSpaceSerializer } from '../dspace-rest-v2/dspace.serializer';
+import { Bitstream } from '../shared/bitstream.model';
+
+@Injectable()
+/**
+ * A ResponseParsingService used to parse DSpaceRESTV2Response coming from the REST API to a GenericSuccessResponse
+ * containing a PaginatedList of a process's output files
+ */
+export class ProcessFilesResponseParsingService implements ResponseParsingService {
+  parse(request: RestRequest, data: DSpaceRESTV2Response): RestResponse {
+    const payload = data.payload;
+
+    let page;
+    if (isNotEmpty(payload._embedded) && isNotEmpty(Object.keys(payload._embedded))) {
+      const bitstreams = new DSpaceSerializer(Bitstream).deserializeArray(payload._embedded[Object.keys(payload._embedded)[0]]);
+
+      if (isNotEmpty(bitstreams)) {
+        page = new PaginatedList(Object.assign(new PageInfo(), {
+          elementsPerPage: bitstreams.length,
+          totalElements: bitstreams.length,
+          totalPages: 1,
+          currentPage: 1
+        }), bitstreams);
+      }
+    }
+
+    if (isEmpty(page)) {
+      page = new PaginatedList(new PageInfo(), []);
+    }
+
+    return new GenericSuccessResponse(page, data.statusCode, data.statusText);
+  }
+}
diff --git a/src/app/core/data/processes/process-data.service.ts b/src/app/core/data/processes/process-data.service.ts
new file mode 100644
index 0000000000..48c1d502cc
--- /dev/null
+++ b/src/app/core/data/processes/process-data.service.ts
@@ -0,0 +1,70 @@
+import { Injectable } from '@angular/core';
+import { DataService } from '../data.service';
+import { RequestService } from '../request.service';
+import { RemoteDataBuildService } from '../../cache/builders/remote-data-build.service';
+import { Store } from '@ngrx/store';
+import { CoreState } from '../../core.reducers';
+import { ObjectCacheService } from '../../cache/object-cache.service';
+import { HALEndpointService } from '../../shared/hal-endpoint.service';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { HttpClient } from '@angular/common/http';
+import { DefaultChangeAnalyzer } from '../default-change-analyzer.service';
+import { Process } from '../../../process-page/processes/process.model';
+import { dataService } from '../../cache/builders/build-decorators';
+import { PROCESS } from '../../../process-page/processes/process.resource-type';
+import { Observable } from 'rxjs/internal/Observable';
+import { map, switchMap } from 'rxjs/operators';
+import { ProcessFilesRequest, RestRequest } from '../request.models';
+import { configureRequest, filterSuccessfulResponses } from '../../shared/operators';
+import { GenericSuccessResponse } from '../../cache/response.models';
+import { PaginatedList } from '../paginated-list';
+import { Bitstream } from '../../shared/bitstream.model';
+import { RemoteData } from '../remote-data';
+
+@Injectable()
+@dataService(PROCESS)
+export class ProcessDataService extends DataService<Process> {
+  protected linkPath = 'processes';
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected store: Store<CoreState>,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+    protected http: HttpClient,
+    protected comparator: DefaultChangeAnalyzer<Process>) {
+    super();
+  }
+
+  /**
+   * Get the endpoint for a process his files
+   * @param processId The ID of the process
+   */
+  getFilesEndpoint(processId: string): Observable<string> {
+    return this.getBrowseEndpoint().pipe(
+      switchMap((href) => this.halService.getEndpoint('files', `${href}/${processId}`))
+    );
+  }
+
+  /**
+   * Get a process his output files
+   * @param processId The ID of the process
+   */
+  getFiles(processId: string): Observable<RemoteData<PaginatedList<Bitstream>>> {
+    const request$ = this.getFilesEndpoint(processId).pipe(
+      map((href) => new ProcessFilesRequest(this.requestService.generateRequestId(), href)),
+      configureRequest(this.requestService)
+    );
+    const requestEntry$ = request$.pipe(
+      switchMap((request: RestRequest) => this.requestService.getByHref(request.href))
+    );
+    const payload$ = requestEntry$.pipe(
+      filterSuccessfulResponses(),
+      map((response: GenericSuccessResponse<PaginatedList<Bitstream>>) => response.payload)
+    );
+
+    return this.rdbService.toRemoteDataObservable(requestEntry$, payload$);
+  }
+}
diff --git a/src/app/core/data/processes/script-data.service.ts b/src/app/core/data/processes/script-data.service.ts
new file mode 100644
index 0000000000..6600444ea0
--- /dev/null
+++ b/src/app/core/data/processes/script-data.service.ts
@@ -0,0 +1,61 @@
+import { Injectable } from '@angular/core';
+import { DataService } from '../data.service';
+import { RemoteDataBuildService } from '../../cache/builders/remote-data-build.service';
+import { Store } from '@ngrx/store';
+import { CoreState } from '../../core.reducers';
+import { ObjectCacheService } from '../../cache/object-cache.service';
+import { HALEndpointService } from '../../shared/hal-endpoint.service';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
+import { HttpClient } from '@angular/common/http';
+import { DefaultChangeAnalyzer } from '../default-change-analyzer.service';
+import { Script } from '../../../process-page/scripts/script.model';
+import { ProcessParameter } from '../../../process-page/processes/process-parameter.model';
+import { find, map, switchMap } from 'rxjs/operators';
+import { URLCombiner } from '../../url-combiner/url-combiner';
+import { MultipartPostRequest, RestRequest } from '../request.models';
+import { RequestService } from '../request.service';
+import { Observable } from 'rxjs';
+import { RequestEntry } from '../request.reducer';
+import { dataService } from '../../cache/builders/build-decorators';
+import { SCRIPT } from '../../../process-page/scripts/script.resource-type';
+
+@Injectable()
+@dataService(SCRIPT)
+export class ScriptDataService extends DataService<Script> {
+  protected linkPath = 'scripts';
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected store: Store<CoreState>,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+    protected http: HttpClient,
+    protected comparator: DefaultChangeAnalyzer<Script>) {
+    super();
+  }
+
+  public invoke(scriptName: string, parameters: ProcessParameter[], files: File[]): Observable<RequestEntry> {
+    const requestId = this.requestService.generateRequestId();
+    return this.getBrowseEndpoint().pipe(
+      map((endpoint: string) => new URLCombiner(endpoint, scriptName, 'processes').toString()),
+      map((endpoint: string) => {
+        const body = this.getInvocationFormData(parameters, files);
+        return new MultipartPostRequest(requestId, endpoint, body)
+      }),
+      map((request: RestRequest) => this.requestService.configure(request)),
+      switchMap(() => this.requestService.getByUUID(requestId)),
+      find((request: RequestEntry) => request.completed)
+    );
+  }
+
+  private getInvocationFormData(parameters: ProcessParameter[], files: File[]): FormData {
+    const form: FormData = new FormData();
+    form.set('properties', JSON.stringify(parameters));
+    files.forEach((file: File) => {
+      form.append('file', file);
+    });
+    return form;
+  }
+}
diff --git a/src/app/core/data/request.effects.ts b/src/app/core/data/request.effects.ts
index 7f793f4ac4..44d8416f35 100644
--- a/src/app/core/data/request.effects.ts
+++ b/src/app/core/data/request.effects.ts
@@ -11,12 +11,7 @@ import { DSpaceRESTV2Response } from '../dspace-rest-v2/dspace-rest-v2-response.
 
 import { DSpaceRESTv2Service } from '../dspace-rest-v2/dspace-rest-v2.service';
 import { DSpaceSerializer } from '../dspace-rest-v2/dspace.serializer';
-import {
-  RequestActionTypes,
-  RequestCompleteAction,
-  RequestExecuteAction,
-  ResetResponseTimestampsAction
-} from './request.actions';
+import { RequestActionTypes, RequestCompleteAction, RequestExecuteAction, ResetResponseTimestampsAction } from './request.actions';
 import { RequestError, RestRequest } from './request.models';
 import { RequestEntry } from './request.reducer';
 import { RequestService } from './request.service';
@@ -42,12 +37,12 @@ export class RequestEffects {
     filter((entry: RequestEntry) => hasValue(entry)),
     map((entry: RequestEntry) => entry.request),
     flatMap((request: RestRequest) => {
-      let body;
-      if (isNotEmpty(request.body)) {
+      let body = request.body;
+      if (isNotEmpty(request.body) && !request.isMultipart) {
         const serializer = new DSpaceSerializer(getClassForType(request.body.type));
         body = serializer.serialize(request.body);
       }
-      return this.restApi.request(request.method, request.href, body, request.options).pipe(
+      return this.restApi.request(request.method, request.href, body, request.options, request.isMultipart).pipe(
         map((data: DSpaceRESTV2Response) => this.injector.get(request.getResponseParser()).parse(request, data)),
         addToResponseCacheAndCompleteAction(request),
         catchError((error: RequestError) => observableOf(new ErrorResponse(error)).pipe(
diff --git a/src/app/core/data/request.models.ts b/src/app/core/data/request.models.ts
index 2438ea02b2..bd497d4ddb 100644
--- a/src/app/core/data/request.models.ts
+++ b/src/app/core/data/request.models.ts
@@ -18,6 +18,7 @@ import { URLCombiner } from '../url-combiner/url-combiner';
 import { TaskResponseParsingService } from '../tasks/task-response-parsing.service';
 import { ContentSourceResponseParsingService } from './content-source-response-parsing.service';
 import { MappedCollectionsReponseParsingService } from './mapped-collections-reponse-parsing.service';
+import { ProcessFilesResponseParsingService } from './process-files-response-parsing.service';
 import { TokenResponseParsingService } from '../auth/token-response-parsing.service';
 
 /* tslint:disable:max-classes-per-file */
@@ -31,6 +32,8 @@ export enum IdentifierType {
 export abstract class RestRequest {
   public responseMsToLive = 10 * 1000;
   public forceBypassCache = false;
+  public isMultipart = false;
+
   constructor(
     public uuid: string,
     public href: string,
@@ -73,6 +76,21 @@ export class PostRequest extends RestRequest {
   }
 }
 
+/**
+ * Request representing a multipart post request
+ */
+export class MultipartPostRequest extends RestRequest {
+  public isMultipart = true;
+  constructor(
+    public uuid: string,
+    public href: string,
+    public body?: any,
+    public options?: HttpOptions
+  )  {
+    super(uuid, href, RestRequestMethod.POST, body)
+  }
+}
+
 export class PutRequest extends RestRequest {
   constructor(
     public uuid: string,
@@ -208,6 +226,15 @@ export class MappedCollectionsRequest extends GetRequest {
   }
 }
 
+/**
+ * Request to fetch the files of a process
+ */
+export class ProcessFilesRequest extends GetRequest {
+  getResponseParser(): GenericConstructor<ResponseParsingService> {
+    return ProcessFilesResponseParsingService;
+  }
+}
+
 export class ConfigRequest extends GetRequest {
   constructor(uuid: string, href: string, public options?: HttpOptions) {
     super(uuid, href, null, options);
diff --git a/src/app/core/data/update-data.service.ts b/src/app/core/data/update-data.service.ts
new file mode 100644
index 0000000000..34835e14c1
--- /dev/null
+++ b/src/app/core/data/update-data.service.ts
@@ -0,0 +1,11 @@
+import { Observable } from 'rxjs/internal/Observable';
+import { RemoteData } from './remote-data';
+import { RestRequestMethod } from './rest-request-method';
+
+/**
+ * Represents a data service to update a given object
+ */
+export interface UpdateDataService<T> {
+  update(object: T): Observable<RemoteData<T>>;
+  commitUpdates(method?: RestRequestMethod);
+}
diff --git a/src/app/core/dspace-rest-v2/dspace-rest-v2.service.ts b/src/app/core/dspace-rest-v2/dspace-rest-v2.service.ts
index 6eb144580c..8cb730c358 100644
--- a/src/app/core/dspace-rest-v2/dspace-rest-v2.service.ts
+++ b/src/app/core/dspace-rest-v2/dspace-rest-v2.service.ts
@@ -69,10 +69,12 @@ export class DSpaceRESTv2Service {
    *    an optional body for the request
    * @param options
    *    the HttpOptions object
+   * @param isMultipart
+   *     true when this concerns a multipart request
    * @return {Observable<string>}
    *      An Observable<string> containing the response from the server
    */
-  request(method: RestRequestMethod, url: string, body?: any, options?: HttpOptions): Observable<DSpaceRESTV2Response> {
+  request(method: RestRequestMethod, url: string, body?: any, options?: HttpOptions, isMultipart?: boolean): Observable<DSpaceRESTV2Response> {
     const requestOptions: HttpOptions = {};
     requestOptions.body = body;
     if (method === RestRequestMethod.POST && isNotEmpty(body) && isNotEmpty(body.name)) {
@@ -98,7 +100,7 @@ export class DSpaceRESTv2Service {
       requestOptions.withCredentials = options.withCredentials;
     }
 
-    if (!requestOptions.headers.has('Content-Type')) {
+    if (!requestOptions.headers.has('Content-Type') && !isMultipart) {
       // Because HttpHeaders is immutable, the set method returns a new object instead of updating the existing headers
       requestOptions.headers = requestOptions.headers.set('Content-Type', DEFAULT_CONTENT_TYPE);
     }
diff --git a/src/app/core/metadata/metadata-field.model.ts b/src/app/core/metadata/metadata-field.model.ts
index ad7ec59b25..66171141c5 100644
--- a/src/app/core/metadata/metadata-field.model.ts
+++ b/src/app/core/metadata/metadata-field.model.ts
@@ -9,6 +9,9 @@ import { ResourceType } from '../shared/resource-type';
 import { excludeFromEquals } from '../utilities/equals.decorators';
 import { METADATA_FIELD } from './metadata-field.resource-type';
 import { MetadataSchema } from './metadata-schema.model';
+import { RemoteData } from '../data/remote-data';
+import { Observable } from 'rxjs';
+import { METADATA_SCHEMA } from './metadata-schema.resource-type';
 
 /**
  * Class the represents a metadata field
@@ -61,16 +64,15 @@ export class MetadataField extends ListableObject implements HALResource {
    * The MetadataSchema for this MetadataField
    * Will be undefined unless the schema {@link HALLink} has been resolved.
    */
-  // TODO the responseparsingservice assumes schemas are always embedded. This should use remotedata, and be a link instead.
-  // @link(METADATA_SCHEMA)
-  schema?: MetadataSchema;
+  @link(METADATA_SCHEMA)
+  schema?: Observable<RemoteData<MetadataSchema>>;
 
   /**
    * Method to print this metadata field as a string
    * @param separator The separator between the schema, element and qualifier in the string
    */
   toString(separator: string = '.'): string {
-    let key = this.schema.prefix + separator + this.element;
+    let key = this.element;
     if (isNotEmpty(this.qualifier)) {
       key += separator + this.qualifier;
     }
diff --git a/src/app/core/registry/registry.service.spec.ts b/src/app/core/registry/registry.service.spec.ts
index 203e58136c..8e4e191e0f 100644
--- a/src/app/core/registry/registry.service.spec.ts
+++ b/src/app/core/registry/registry.service.spec.ts
@@ -82,7 +82,7 @@ describe('RegistryService', () => {
           element: 'contributor',
           qualifier: 'advisor',
           scopeNote: null,
-          schema: mockSchemasList[0],
+          schema: createSuccessfulRemoteDataObject$(mockSchemasList[0]),
           type: MetadataField.type
         }),
       Object.assign(new MetadataField(),
@@ -94,7 +94,7 @@ describe('RegistryService', () => {
           element: 'contributor',
           qualifier: 'author',
           scopeNote: null,
-          schema: mockSchemasList[0],
+          schema: createSuccessfulRemoteDataObject$(mockSchemasList[0]),
           type: MetadataField.type
         }),
       Object.assign(new MetadataField(),
@@ -106,7 +106,7 @@ describe('RegistryService', () => {
           element: 'contributor',
           qualifier: 'editor',
           scopeNote: 'test scope note',
-          schema: mockSchemasList[1],
+          schema: createSuccessfulRemoteDataObject$(mockSchemasList[1]),
           type: MetadataField.type
         }),
       Object.assign(new MetadataField(),
@@ -118,7 +118,7 @@ describe('RegistryService', () => {
           element: 'contributor',
           qualifier: 'illustrator',
           scopeNote: null,
-          schema: mockSchemasList[1],
+          schema: createSuccessfulRemoteDataObject$(mockSchemasList[1]),
           type: MetadataField.type
         })
     ];
@@ -134,7 +134,8 @@ describe('RegistryService', () => {
     metadataFieldService = jasmine.createSpyObj('metadataFieldService', {
       findAll: createSuccessfulRemoteDataObject$(createPaginatedList(mockFieldsList)),
       findById: createSuccessfulRemoteDataObject$(mockFieldsList[0]),
-      createOrUpdateMetadataField: createSuccessfulRemoteDataObject$(mockFieldsList[0]),
+      create: createSuccessfulRemoteDataObject$(mockFieldsList[0]),
+      put: createSuccessfulRemoteDataObject$(mockFieldsList[0]),
       deleteAndReturnResponse: observableOf(new RestResponse(true, 200, 'OK')),
       clearRequests: observableOf('href')
     });
@@ -178,7 +179,7 @@ describe('RegistryService', () => {
     let result;
 
     beforeEach(() => {
-      result = registryService.getMetadataSchemaByName(mockSchemasList[0].prefix);
+      result = registryService.getMetadataSchemaByPrefix(mockSchemasList[0].prefix);
     });
 
     it('should call metadataSchemaService.findById with the correct ID', (done) => {
@@ -189,21 +190,6 @@ describe('RegistryService', () => {
     });
   });
 
-  describe('when requesting metadatafields', () => {
-    let result;
-
-    beforeEach(() => {
-      result = registryService.getAllMetadataFields();
-    });
-
-    it('should call metadataFieldService.findAll', (done) => {
-      result.subscribe(() => {
-        expect(metadataFieldService.findAll).toHaveBeenCalled();
-        done();
-      });
-    });
-  });
-
   describe('when dispatching to the store', () => {
     beforeEach(() => {
       spyOn(mockStore, 'dispatch');
@@ -325,14 +311,29 @@ describe('RegistryService', () => {
     });
   });
 
-  describe('when createOrUpdateMetadataField is called', () => {
+  describe('when createMetadataField is called', () => {
     let result: Observable<MetadataField>;
 
     beforeEach(() => {
-      result = registryService.createOrUpdateMetadataField(mockFieldsList[0]);
+      result = registryService.createMetadataField(mockFieldsList[0], mockSchemasList[0]);
     });
 
-    it('should return the created/updated metadata field', (done) => {
+    it('should return the created metadata field', (done) => {
+      result.subscribe((field: MetadataField) => {
+        expect(field).toEqual(mockFieldsList[0]);
+        done();
+      });
+    });
+  });
+
+  describe('when updateMetadataField is called', () => {
+    let result: Observable<MetadataField>;
+
+    beforeEach(() => {
+      result = registryService.updateMetadataField(mockFieldsList[0]);
+    });
+
+    it('should return the updated metadata field', (done) => {
       result.subscribe((field: MetadataField) => {
         expect(field).toEqual(mockFieldsList[0]);
         done();
diff --git a/src/app/core/registry/registry.service.ts b/src/app/core/registry/registry.service.ts
index 79b982da8a..cad5478f7a 100644
--- a/src/app/core/registry/registry.service.ts
+++ b/src/app/core/registry/registry.service.ts
@@ -2,18 +2,10 @@ import { combineLatest as observableCombineLatest, Observable } from 'rxjs';
 import { Injectable } from '@angular/core';
 import { RemoteData } from '../data/remote-data';
 import { PaginatedList } from '../data/paginated-list';
-import { PageInfo } from '../shared/page-info.model';
 import { FindListOptions } from '../data/request.models';
-import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
-import { RequestService } from '../data/request.service';
-import {
-  MetadatafieldSuccessResponse,
-  MetadataschemaSuccessResponse,
-  RestResponse
-} from '../cache/response.models';
-import { HALEndpointService } from '../shared/hal-endpoint.service';
-import { hasNoValue, hasValue, hasValueOperator, isNotEmpty, isNotEmptyOperator } from '../../shared/empty.util';
-import { getAllSucceededRemoteDataPayload, getFirstSucceededRemoteDataPayload } from '../shared/operators';
+import { RestResponse } from '../cache/response.models';
+import { hasValue, hasValueOperator, isNotEmptyOperator } from '../../shared/empty.util';
+import { getFirstSucceededRemoteDataPayload } from '../shared/operators';
 import { createSelector, select, Store } from '@ngrx/store';
 import { AppState } from '../../app.reducer';
 import { MetadataRegistryState } from '../../+admin/admin-registries/metadata-registry/metadata-registry.reducers';
@@ -37,6 +29,8 @@ import { MetadataField } from '../metadata/metadata-field.model';
 import { MetadataSchemaDataService } from '../data/metadata-schema-data.service';
 import { MetadataFieldDataService } from '../data/metadata-field-data.service';
 import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
+import { RequestParam } from '../cache/models/request-param.model';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
 
 const metadataRegistryStateSelector = (state: AppState) => state.metadataRegistry;
 const editMetadataSchemaSelector = createSelector(metadataRegistryStateSelector, (metadataState: MetadataRegistryState) => metadataState.editSchema);
@@ -68,11 +62,11 @@ export class RegistryService {
   }
 
   /**
-   * Retrieves a metadata schema by its name
-   * @param schemaName The name of the schema to find
+   * Retrieves a metadata schema by its prefix
+   * @param prefix The prefux of the schema to find
    * @param linksToFollow List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be automatically resolved
    */
-  public getMetadataSchemaByName(schemaName: string, ...linksToFollow: Array<FollowLinkConfig<MetadataSchema>>): Observable<RemoteData<MetadataSchema>> {
+  public getMetadataSchemaByPrefix(prefix: string, ...linksToFollow: Array<FollowLinkConfig<MetadataSchema>>): Observable<RemoteData<MetadataSchema>> {
     // Temporary options to get ALL metadataschemas until there's a rest api endpoint for fetching a specific schema
     const options: FindListOptions = Object.assign(new FindListOptions(), {
       elementsPerPage: 10000
@@ -81,7 +75,7 @@ export class RegistryService {
       getFirstSucceededRemoteDataPayload(),
       map((schemas: PaginatedList<MetadataSchema>) => schemas.page),
       isNotEmptyOperator(),
-      map((schemas: MetadataSchema[]) => schemas.filter((schema) => schema.prefix === schemaName)[0]),
+      map((schemas: MetadataSchema[]) => schemas.filter((schema) => schema.prefix === prefix)[0]),
       flatMap((schema: MetadataSchema) => this.metadataSchemaService.findById(`${schema.id}`, ...linksToFollow))
     );
   }
@@ -103,11 +97,11 @@ export class RegistryService {
    * @param linksToFollow List of {@link FollowLinkConfig} that indicate which {@link HALLink}s should be automatically resolved
    * @returns an observable that emits a remote data object with a page of metadata fields
    */
+  // TODO this is temporarily disabled. The performance is too bad.
+  // It is used down the line for validation. That validation will have to be rewritten against a new rest endpoint.
+  // Not by downloading the list of all fields.
   public getAllMetadataFields(options?: FindListOptions, ...linksToFollow: Array<FollowLinkConfig<MetadataField>>): Observable<RemoteData<PaginatedList<MetadataField>>> {
-    if (hasNoValue(options)) {
-      options = {currentPage: 1, elementsPerPage: 10000} as any;
-    }
-    return this.metadataFieldService.findAll(options, ...linksToFollow);
+    return createSuccessfulRemoteDataObject$(new PaginatedList<MetadataField>(null, []));
   }
 
   public editMetadataSchema(schema: MetadataSchema) {
@@ -240,21 +234,32 @@ export class RegistryService {
   }
 
   /**
-   * Create or Update a MetadataField
-   *  If the MetadataField contains an id, it is assumed the field already exists and is updated instead
-   *  Since creating or updating is nearly identical, the only real difference is the request (and slight difference in endpoint):
-   *  - On creation, a CreateRequest is used
-   *  - On update, a PutRequest is used
-   * @param field    The MetadataField to create or update
+   * Create a MetadataField
+   *
+   * @param field    The MetadataField to create
+   * @param schema   The MetadataSchema to create the field in
    */
-  public createOrUpdateMetadataField(field: MetadataField): Observable<MetadataField> {
-    const isUpdate = hasValue(field.id);
-    return this.metadataFieldService.createOrUpdateMetadataField(field).pipe(
+  public createMetadataField(field: MetadataField, schema: MetadataSchema): Observable<MetadataField> {
+    return this.metadataFieldService.create(field, new RequestParam('schemaId', schema.id)).pipe(
       getFirstSucceededRemoteDataPayload(),
       hasValueOperator(),
       tap(() => {
-        const fieldString = `${field.schema.prefix}.${field.element}${field.qualifier ? `.${field.qualifier}` : ''}`;
-        this.showNotifications(true, isUpdate, true, {field: fieldString});
+        this.showNotifications(true, false, true, {field: field.toString()});
+      })
+    );
+  }
+
+  /**
+   * Update a MetadataField
+   *
+   * @param field    The MetadataField to update
+   */
+  public updateMetadataField(field: MetadataField): Observable<MetadataField> {
+    return this.metadataFieldService.put(field).pipe(
+      getFirstSucceededRemoteDataPayload(),
+      hasValueOperator(),
+      tap(() => {
+        this.showNotifications(true, true, true, {field: field.toString()});
       })
     );
   }
@@ -295,15 +300,10 @@ export class RegistryService {
    * @param query {string} The query to filter the field names by
    * @returns an observable that emits a remote data object with a page of metadata fields that match the query
    */
+  // TODO this is temporarily disabled. The performance is too bad.
+  // Querying metadatafields will need to be implemented as a search endpoint on the rest api,
+  // not by downloading everything and preforming the query client side.
   queryMetadataFields(query: string): Observable<RemoteData<PaginatedList<MetadataField>>> {
-    return this.getAllMetadataFields().pipe(
-      map((rd: RemoteData<PaginatedList<MetadataField>>) => {
-        const filteredFields: MetadataField[] = rd.payload.page.filter(
-          (field: MetadataField) => field.toString().indexOf(query) >= 0
-        );
-        const page: PaginatedList<MetadataField> = new PaginatedList<MetadataField>(new PageInfo(), filteredFields)
-        return Object.assign({}, rd, { payload: page });
-      })
-    );
+    return createSuccessfulRemoteDataObject$(new PaginatedList<MetadataField>(null, []));
   }
 }
diff --git a/src/app/core/shared/hal-resource.model.ts b/src/app/core/shared/hal-resource.model.ts
index b6ef822a23..334509007b 100644
--- a/src/app/core/shared/hal-resource.model.ts
+++ b/src/app/core/shared/hal-resource.model.ts
@@ -1,4 +1,5 @@
 import { HALLink } from './hal-link.model';
+import { deserialize } from 'cerialize';
 
 /**
  * Represents HAL resources.
@@ -6,10 +7,13 @@ import { HALLink } from './hal-link.model';
  * A HAL resource has a _links section with at least a self link.
  */
 export class HALResource {
+
   /**
    * The {@link HALLink}s for this {@link HALResource}
    */
+  @deserialize
   _links: {
+
     /**
      * The {@link HALLink} that refers to this {@link HALResource}
      */
diff --git a/src/app/core/shared/template-item.model.ts b/src/app/core/shared/template-item.model.ts
new file mode 100644
index 0000000000..bfcf941e41
--- /dev/null
+++ b/src/app/core/shared/template-item.model.ts
@@ -0,0 +1,24 @@
+import { inheritSerialization } from 'cerialize';
+import { Item } from './item.model';
+import { Observable } from 'rxjs/internal/Observable';
+import { RemoteData } from '../data/remote-data';
+import { Collection } from './collection.model';
+import { ITEM_TEMPLATE } from './template-item.resource-type';
+import { link, typedObject } from '../cache/builders/build-decorators';
+import { COLLECTION } from './collection.resource-type';
+
+/**
+ * Class representing a DSpace Template Item
+ */
+@typedObject
+@inheritSerialization(Item)
+export class TemplateItem extends Item {
+  static type = ITEM_TEMPLATE;
+
+  /**
+   * The Collection that this item is a template for
+   */
+  @link(COLLECTION)
+  templateItemOf: Observable<RemoteData<Collection>>;
+
+}
diff --git a/src/app/core/shared/template-item.resource-type.ts b/src/app/core/shared/template-item.resource-type.ts
new file mode 100644
index 0000000000..06692d8cc7
--- /dev/null
+++ b/src/app/core/shared/template-item.resource-type.ts
@@ -0,0 +1,9 @@
+import { ResourceType } from './resource-type';
+
+/**
+ * The resource type for TemplateItem.
+ *
+ * Needs to be in a separate file to prevent circular
+ * dependencies in webpack.
+ */
+export const ITEM_TEMPLATE = new ResourceType('itemtemplate');
diff --git a/src/app/core/submission/models/submission-cc-licence-link.resource-type.ts b/src/app/core/submission/models/submission-cc-licence-link.resource-type.ts
new file mode 100644
index 0000000000..b4e38970f0
--- /dev/null
+++ b/src/app/core/submission/models/submission-cc-licence-link.resource-type.ts
@@ -0,0 +1,9 @@
+import { ResourceType } from '../../shared/resource-type';
+
+/**
+ * The resource type for License
+ *
+ * Needs to be in a separate file to prevent circular
+ * dependencies in webpack.
+ */
+export const SUBMISSION_CC_LICENSE_URL = new ResourceType('submissioncclicenseUrl');
diff --git a/src/app/core/submission/models/submission-cc-licence.resource-type.ts b/src/app/core/submission/models/submission-cc-licence.resource-type.ts
new file mode 100644
index 0000000000..a15b8a0c66
--- /dev/null
+++ b/src/app/core/submission/models/submission-cc-licence.resource-type.ts
@@ -0,0 +1,9 @@
+import { ResourceType } from '../../shared/resource-type';
+
+/**
+ * The resource type for License
+ *
+ * Needs to be in a separate file to prevent circular
+ * dependencies in webpack.
+ */
+export const SUBMISSION_CC_LICENSE = new ResourceType('submissioncclicense');
diff --git a/src/app/core/submission/models/submission-cc-license-url.model.ts b/src/app/core/submission/models/submission-cc-license-url.model.ts
new file mode 100644
index 0000000000..a7c933ecb1
--- /dev/null
+++ b/src/app/core/submission/models/submission-cc-license-url.model.ts
@@ -0,0 +1,23 @@
+import { autoserialize, inheritSerialization } from 'cerialize';
+import { typedObject } from '../../cache/builders/build-decorators';
+import { excludeFromEquals } from '../../utilities/equals.decorators';
+import { ResourceType } from '../../shared/resource-type';
+import { HALResource } from '../../shared/hal-resource.model';
+import { SUBMISSION_CC_LICENSE_URL } from './submission-cc-licence-link.resource-type';
+
+@typedObject
+@inheritSerialization(HALResource)
+export class SubmissionCcLicenceUrl extends HALResource {
+
+  static type = SUBMISSION_CC_LICENSE_URL;
+
+  /**
+   * The object type
+   */
+  @excludeFromEquals
+  @autoserialize
+  type: ResourceType;
+
+  @autoserialize
+  url: string;
+}
diff --git a/src/app/core/submission/models/submission-cc-license.model.ts b/src/app/core/submission/models/submission-cc-license.model.ts
new file mode 100644
index 0000000000..92c48fdbfe
--- /dev/null
+++ b/src/app/core/submission/models/submission-cc-license.model.ts
@@ -0,0 +1,42 @@
+import { autoserialize, inheritSerialization } from 'cerialize';
+import { typedObject } from '../../cache/builders/build-decorators';
+import { excludeFromEquals } from '../../utilities/equals.decorators';
+import { ResourceType } from '../../shared/resource-type';
+import { HALResource } from '../../shared/hal-resource.model';
+import { SUBMISSION_CC_LICENSE } from './submission-cc-licence.resource-type';
+
+@typedObject
+@inheritSerialization(HALResource)
+export class SubmissionCcLicence extends HALResource {
+
+  static type = SUBMISSION_CC_LICENSE;
+
+  /**
+   * The object type
+   */
+  @excludeFromEquals
+  @autoserialize
+  type: ResourceType;
+
+  @autoserialize
+  id: string;
+
+  @autoserialize
+  name: string;
+
+  @autoserialize
+  fields: Field[];
+}
+
+export interface Field {
+  id: string;
+  label: string;
+  description: string;
+  enums: Option[];
+}
+
+export interface Option {
+  id: string;
+  label: string;
+  description: string;
+}
diff --git a/src/app/core/submission/models/workspaceitem-section-cc-license.model.ts b/src/app/core/submission/models/workspaceitem-section-cc-license.model.ts
new file mode 100644
index 0000000000..ed7d68354c
--- /dev/null
+++ b/src/app/core/submission/models/workspaceitem-section-cc-license.model.ts
@@ -0,0 +1,15 @@
+import { Option } from './submission-cc-license.model';
+
+/**
+ * An interface to represent the submission's creative commons license section data.
+ */
+export interface WorkspaceitemSectionCcLicenseObject {
+  ccLicense?: {
+    id: string;
+    fields: {
+      [fieldId: string]: Option;
+    }
+  };
+  uri?: string;
+  accepted?: boolean;
+}
diff --git a/src/app/core/submission/models/workspaceitem-sections.model.ts b/src/app/core/submission/models/workspaceitem-sections.model.ts
index 165e69869c..6ff756a323 100644
--- a/src/app/core/submission/models/workspaceitem-sections.model.ts
+++ b/src/app/core/submission/models/workspaceitem-sections.model.ts
@@ -1,6 +1,7 @@
 import { WorkspaceitemSectionFormObject } from './workspaceitem-section-form.model';
 import { WorkspaceitemSectionLicenseObject } from './workspaceitem-section-license.model';
 import { WorkspaceitemSectionUploadObject } from './workspaceitem-section-upload.model';
+import { WorkspaceitemSectionCcLicenseObject } from './workspaceitem-section-cc-license.model';
 
 /**
  * An interface to represent submission's section object.
@@ -17,4 +18,5 @@ export type WorkspaceitemSectionDataType
   = WorkspaceitemSectionUploadObject
   | WorkspaceitemSectionFormObject
   | WorkspaceitemSectionLicenseObject
+  | WorkspaceitemSectionCcLicenseObject
   | string;
diff --git a/src/app/core/submission/submission-cc-license-data.service.ts b/src/app/core/submission/submission-cc-license-data.service.ts
new file mode 100644
index 0000000000..5a3fa1ec2b
--- /dev/null
+++ b/src/app/core/submission/submission-cc-license-data.service.ts
@@ -0,0 +1,34 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { dataService } from '../cache/builders/build-decorators';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { CoreState } from '../core.reducers';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { DataService } from '../data/data.service';
+import { RequestService } from '../data/request.service';
+import { SUBMISSION_CC_LICENSE } from './models/submission-cc-licence.resource-type';
+import { SubmissionCcLicence } from './models/submission-cc-license.model';
+import { DefaultChangeAnalyzer } from '../data/default-change-analyzer.service';
+
+@Injectable()
+@dataService(SUBMISSION_CC_LICENSE)
+export class SubmissionCcLicenseDataService extends DataService<SubmissionCcLicence> {
+
+  protected linkPath = 'submissioncclicenses';
+
+  constructor(
+    protected comparator: DefaultChangeAnalyzer<SubmissionCcLicence>,
+    protected halService: HALEndpointService,
+    protected http: HttpClient,
+    protected notificationsService: NotificationsService,
+    protected objectCache: ObjectCacheService,
+    protected rdbService: RemoteDataBuildService,
+    protected requestService: RequestService,
+    protected store: Store<CoreState>,
+  ) {
+    super();
+  }
+}
diff --git a/src/app/core/submission/submission-cc-license-url-data.service.ts b/src/app/core/submission/submission-cc-license-url-data.service.ts
new file mode 100644
index 0000000000..0ec40e1403
--- /dev/null
+++ b/src/app/core/submission/submission-cc-license-url-data.service.ts
@@ -0,0 +1,76 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { dataService } from '../cache/builders/build-decorators';
+import { RemoteDataBuildService } from '../cache/builders/remote-data-build.service';
+import { ObjectCacheService } from '../cache/object-cache.service';
+import { CoreState } from '../core.reducers';
+import { HALEndpointService } from '../shared/hal-endpoint.service';
+import { DataService } from '../data/data.service';
+import { RequestService } from '../data/request.service';
+import { DefaultChangeAnalyzer } from '../data/default-change-analyzer.service';
+import { SubmissionCcLicenceUrl } from './models/submission-cc-license-url.model';
+import { SUBMISSION_CC_LICENSE_URL } from './models/submission-cc-licence-link.resource-type';
+import { Field, Option, SubmissionCcLicence } from './models/submission-cc-license.model';
+import { Observable } from 'rxjs';
+import { filter, map, switchMap } from 'rxjs/operators';
+import { getRemoteDataPayload, getSucceededRemoteData } from '../shared/operators';
+import { isNotEmpty } from '../../shared/empty.util';
+
+@Injectable()
+@dataService(SUBMISSION_CC_LICENSE_URL)
+export class SubmissionCcLicenseUrlDataService extends DataService<SubmissionCcLicenceUrl> {
+
+  protected linkPath = 'submissioncclicenseUrl-search';
+
+  constructor(
+    protected comparator: DefaultChangeAnalyzer<SubmissionCcLicenceUrl>,
+    protected halService: HALEndpointService,
+    protected http: HttpClient,
+    protected notificationsService: NotificationsService,
+    protected objectCache: ObjectCacheService,
+    protected rdbService: RemoteDataBuildService,
+    protected requestService: RequestService,
+    protected store: Store<CoreState>,
+  ) {
+    super();
+  }
+
+  /**
+   * Get the link to the Creative Commons license corresponding to the given type and options.
+   * @param ccLicense   the Creative Commons license type
+   * @param options     the selected options of the license fields
+   */
+  getCcLicenseLink(ccLicense: SubmissionCcLicence, options: Map<Field, Option>): Observable<string> {
+
+    return this.getSearchByHref(
+      'rightsByQuestions',{
+        searchParams: [
+          {
+            fieldName: 'license',
+            fieldValue: ccLicense.id
+          },
+          ...ccLicense.fields.map(
+            (field) => {
+              return {
+                fieldName: `answer_${field.id}`,
+                fieldValue: options.get(field).id,
+              }
+            }),
+        ]
+      }
+    ).pipe(
+      switchMap((href) => this.findByHref(href)),
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      map((response) => response.url),
+    );
+  }
+
+  protected getSearchEndpoint(searchMethod: string): Observable<string> {
+    return this.halService.getEndpoint(`${this.linkPath}`).pipe(
+      filter((href: string) => isNotEmpty(href)),
+      map((href: string) => `${href}/${searchMethod}`));
+  }
+}
diff --git a/src/app/process-page/detail/process-detail-field/process-detail-field.component.html b/src/app/process-page/detail/process-detail-field/process-detail-field.component.html
new file mode 100644
index 0000000000..ce26008c28
--- /dev/null
+++ b/src/app/process-page/detail/process-detail-field/process-detail-field.component.html
@@ -0,0 +1,2 @@
+<h4 class="mt-4">{{title | translate}}</h4>
+<ng-content></ng-content>
diff --git a/src/app/process-page/detail/process-detail-field/process-detail-field.component.spec.ts b/src/app/process-page/detail/process-detail-field/process-detail-field.component.spec.ts
new file mode 100644
index 0000000000..487adb2ac0
--- /dev/null
+++ b/src/app/process-page/detail/process-detail-field/process-detail-field.component.spec.ts
@@ -0,0 +1,38 @@
+import { ProcessDetailFieldComponent } from './process-detail-field.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { VarDirective } from '../../../shared/utils/var.directive';
+import { RouterTestingModule } from '@angular/router/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+describe('ProcessDetailFieldComponent', () => {
+  let component: ProcessDetailFieldComponent;
+  let fixture: ComponentFixture<ProcessDetailFieldComponent>;
+
+  let title;
+
+  beforeEach(async(() => {
+    title = 'fake.title.message';
+
+    TestBed.configureTestingModule({
+      declarations: [ProcessDetailFieldComponent, VarDirective],
+      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([])],
+      providers: [
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProcessDetailFieldComponent);
+    component = fixture.componentInstance;
+    component.title = title;
+    fixture.detectChanges();
+  });
+
+  it('should display the given title', () => {
+    const header = fixture.debugElement.query(By.css('h4')).nativeElement;
+    expect(header.textContent).toContain(title);
+  });
+});
diff --git a/src/app/process-page/detail/process-detail-field/process-detail-field.component.ts b/src/app/process-page/detail/process-detail-field/process-detail-field.component.ts
new file mode 100644
index 0000000000..f8015b6788
--- /dev/null
+++ b/src/app/process-page/detail/process-detail-field/process-detail-field.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ds-process-detail-field',
+  templateUrl: './process-detail-field.component.html',
+})
+/**
+ * A component displaying a single detail about a DSpace Process
+ */
+export class ProcessDetailFieldComponent {
+  /**
+   * I18n message for the header
+   */
+  @Input() title: string;
+}
diff --git a/src/app/process-page/detail/process-detail.component.html b/src/app/process-page/detail/process-detail.component.html
new file mode 100644
index 0000000000..9cb1f1e6af
--- /dev/null
+++ b/src/app/process-page/detail/process-detail.component.html
@@ -0,0 +1,42 @@
+<div class="container" *ngVar="(processRD$ | async)?.payload as process">
+    <div class="d-flex">
+        <h2 class="flex-grow-1">{{'process.detail.title' | translate:{id: process?.processId, name: process?.scriptName} }}</h2>
+        <div>
+            <a class="btn btn-light" [routerLink]="'/processes/new'" [queryParams]="{id: process?.processId}">{{'process.detail.create' | translate}}</a>
+        </div>
+    </div>
+    <ds-process-detail-field id="process-name" [title]="'process.detail.script'">
+        <div>{{ process?.scriptName }}</div>
+    </ds-process-detail-field>
+
+    <ds-process-detail-field *ngIf="process?.parameters && process?.parameters?.length > 0" id="process-arguments" [title]="'process.detail.arguments'">
+        <div *ngFor="let argument of process?.parameters">{{ argument?.name }} {{ argument?.value }}</div>
+    </ds-process-detail-field>
+
+    <div *ngVar="(filesRD$ | async)?.payload?.page as files">
+        <ds-process-detail-field *ngIf="files && files?.length > 0" id="process-files" [title]="'process.detail.output-files'">
+          <ds-file-download-link *ngFor="let file of files; let last=last;" [href]="file?._links?.content?.href" [download]="getFileName(file)">
+            <span>{{getFileName(file)}}</span>
+            <span>({{(file?.sizeBytes) | dsFileSize }})</span>
+          </ds-file-download-link>
+        </ds-process-detail-field>
+    </div>
+
+    <ds-process-detail-field *ngIf="process && process.startTime" id="process-start-time" [title]="'process.detail.start-time' | translate">
+        <div>{{ process.startTime }}</div>
+    </ds-process-detail-field>
+
+    <ds-process-detail-field *ngIf="process && process.endTime" id="process-end-time" [title]="'process.detail.end-time' | translate">
+        <div>{{ process.endTime }}</div>
+    </ds-process-detail-field>
+
+    <ds-process-detail-field *ngIf="process && process.processStatus" id="process-status" [title]="'process.detail.status' | translate">
+        <div>{{ process.processStatus }}</div>
+    </ds-process-detail-field>
+
+    <!--<ds-process-detail-field id="process-output" [title]="'process.detail.output'">-->
+    <!--<pre class="font-weight-bold text-secondary bg-light p-3">{{'process.detail.output.alert' | translate}}</pre>-->
+    <!--</ds-process-detail-field>-->
+
+    <a class="btn btn-light mt-3" [routerLink]="'/processes'">{{'process.detail.back' | translate}}</a>
+</div>
diff --git a/src/app/process-page/detail/process-detail.component.spec.ts b/src/app/process-page/detail/process-detail.component.spec.ts
new file mode 100644
index 0000000000..dff481fdc6
--- /dev/null
+++ b/src/app/process-page/detail/process-detail.component.spec.ts
@@ -0,0 +1,107 @@
+import { ProcessDetailComponent } from './process-detail.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { VarDirective } from '../../shared/utils/var.directive';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterTestingModule } from '@angular/router/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ProcessDetailFieldComponent } from './process-detail-field/process-detail-field.component';
+import { Process } from '../processes/process.model';
+import { ActivatedRoute } from '@angular/router';
+import { of as observableOf } from 'rxjs';
+import { By } from '@angular/platform-browser';
+import { FileSizePipe } from '../../shared/utils/file-size-pipe';
+import { Bitstream } from '../../core/shared/bitstream.model';
+import { ProcessDataService } from '../../core/data/processes/process-data.service';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+import { createSuccessfulRemoteDataObject, createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { createPaginatedList } from '../../shared/testing/utils.test';
+
+describe('ProcessDetailComponent', () => {
+  let component: ProcessDetailComponent;
+  let fixture: ComponentFixture<ProcessDetailComponent>;
+
+  let processService: ProcessDataService;
+  let nameService: DSONameService;
+
+  let process: Process;
+  let fileName: string;
+  let files: Bitstream[];
+
+  function init() {
+    process = Object.assign(new Process(), {
+      processId: 1,
+      scriptName: 'script-name',
+      parameters: [
+        {
+          name: '-f',
+          value: 'file.xml'
+        },
+        {
+          name: '-i',
+          value: 'identifier'
+        }
+      ]
+    });
+    fileName = 'fake-file-name';
+    files = [
+      Object.assign(new Bitstream(), {
+        sizeBytes: 10000,
+        metadata: {
+          'dc.title': [
+            {
+              value: fileName,
+              language: null
+            }
+          ]
+        },
+        _links: {
+          content: { href: 'file-selflink' }
+        }
+      })
+    ];
+    processService = jasmine.createSpyObj('processService', {
+      getFiles: createSuccessfulRemoteDataObject$(createPaginatedList(files))
+    });
+    nameService = jasmine.createSpyObj('nameService', {
+      getName: fileName
+    });
+  }
+
+  beforeEach(async(() => {
+    init();
+    TestBed.configureTestingModule({
+      declarations: [ProcessDetailComponent, ProcessDetailFieldComponent, VarDirective, FileSizePipe],
+      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([])],
+      providers: [
+        { provide: ActivatedRoute, useValue: { data: observableOf({ process: createSuccessfulRemoteDataObject(process) }) } },
+        { provide: ProcessDataService, useValue: processService },
+        { provide: DSONameService, useValue: nameService }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProcessDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should display the script\'s name', () => {
+    const name = fixture.debugElement.query(By.css('#process-name')).nativeElement;
+    expect(name.textContent).toContain(process.scriptName);
+  });
+
+  it('should display the process\'s parameters', () => {
+    const args = fixture.debugElement.query(By.css('#process-arguments')).nativeElement;
+    process.parameters.forEach((param) => {
+      expect(args.textContent).toContain(`${param.name} ${param.value}`)
+    });
+  });
+
+  it('should display the process\'s output files', () => {
+    const processFiles = fixture.debugElement.query(By.css('#process-files')).nativeElement;
+    expect(processFiles.textContent).toContain(fileName);
+  });
+
+});
diff --git a/src/app/process-page/detail/process-detail.component.ts b/src/app/process-page/detail/process-detail.component.ts
new file mode 100644
index 0000000000..b0e2c7e378
--- /dev/null
+++ b/src/app/process-page/detail/process-detail.component.ts
@@ -0,0 +1,69 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Observable } from 'rxjs/internal/Observable';
+import { RemoteData } from '../../core/data/remote-data';
+import { Process } from '../processes/process.model';
+import { map, switchMap } from 'rxjs/operators';
+import { getFirstSucceededRemoteDataPayload, redirectToPageNotFoundOn404 } from '../../core/shared/operators';
+import { AlertType } from '../../shared/alert/aletr-type';
+import { ProcessDataService } from '../../core/data/processes/process-data.service';
+import { PaginatedList } from '../../core/data/paginated-list';
+import { Bitstream } from '../../core/shared/bitstream.model';
+import { DSONameService } from '../../core/breadcrumbs/dso-name.service';
+
+@Component({
+  selector: 'ds-process-detail',
+  templateUrl: './process-detail.component.html',
+})
+/**
+ * A component displaying detailed information about a DSpace Process
+ */
+export class ProcessDetailComponent implements OnInit {
+
+  /**
+   * The AlertType enumeration
+   * @type {AlertType}
+   */
+  public AlertTypeEnum = AlertType;
+
+  /**
+   * The Process's Remote Data
+   */
+  processRD$: Observable<RemoteData<Process>>;
+
+  /**
+   * The Process's Output Files
+   */
+  filesRD$: Observable<RemoteData<PaginatedList<Bitstream>>>;
+
+  constructor(protected route: ActivatedRoute,
+              protected router: Router,
+              protected processService: ProcessDataService,
+              protected nameService: DSONameService) {
+  }
+
+  /**
+   * Initialize component properties
+   * Display a 404 if the process doesn't exist
+   */
+  ngOnInit(): void {
+    this.processRD$ = this.route.data.pipe(
+      map((data) => data.process as RemoteData<Process>),
+      redirectToPageNotFoundOn404(this.router)
+    );
+
+    this.filesRD$ = this.processRD$.pipe(
+      getFirstSucceededRemoteDataPayload(),
+      switchMap((process: Process) => this.processService.getFiles(process.processId))
+    );
+  }
+
+  /**
+   * Get the name of a bitstream
+   * @param bitstream
+   */
+  getFileName(bitstream: Bitstream) {
+    return this.nameService.getName(bitstream);
+  }
+
+}
diff --git a/src/app/process-page/form/process-form.component.html b/src/app/process-page/form/process-form.component.html
new file mode 100644
index 0000000000..ce6d62efec
--- /dev/null
+++ b/src/app/process-page/form/process-form.component.html
@@ -0,0 +1,25 @@
+<div class="container">
+    <div class="row">
+        <h2 class="col-12">
+            {{headerKey | translate}}
+        </h2>
+        <div class="col-12 col-md-6">
+            <form #form="ngForm" (ngSubmit)="submitForm(form)">
+                <ds-scripts-select [script]="selectedScript" (select)="selectedScript = $event; parameters = undefined"></ds-scripts-select>
+                <ds-process-parameters [initialParams]="parameters" [script]="selectedScript" (updateParameters)="parameters = $event"></ds-process-parameters>
+                <button [routerLink]="['/processes']" class="btn btn-light float-left">{{ 'process.new.cancel' | translate }}</button>
+                <button type="submit" class="btn btn-light float-right">{{ 'process.new.submit' | translate }}</button>
+            </form>
+        </div>
+        <div class="col-12 col-md-6">
+            <ds-script-help [script]="selectedScript"></ds-script-help>
+        </div>
+    </div>
+
+    <div *ngIf="missingParameters.length > 0" class="mt-3 alert alert-danger validation-error">
+        {{'process.new.parameter.required.missing' | translate}}
+        <ul>
+            <li *ngFor="let missing of missingParameters">{{missing}}</li>
+        </ul>
+    </div>
+</div>
diff --git a/src/app/process-page/form/process-form.component.scss b/src/app/process-page/form/process-form.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/form/process-form.component.spec.ts b/src/app/process-page/form/process-form.component.spec.ts
new file mode 100644
index 0000000000..12326111da
--- /dev/null
+++ b/src/app/process-page/form/process-form.component.spec.ts
@@ -0,0 +1,86 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormsModule } from '@angular/forms';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ProcessFormComponent } from './process-form.component';
+import { ScriptDataService } from '../../core/data/processes/script-data.service';
+import { ScriptParameter } from '../scripts/script-parameter.model';
+import { Script } from '../scripts/script.model';
+import { ProcessParameter } from '../processes/process-parameter.model';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { of as observableOf } from 'rxjs';
+import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
+import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
+import { RequestService } from '../../core/data/request.service';
+import { Router } from '@angular/router';
+
+describe('ProcessFormComponent', () => {
+  let component: ProcessFormComponent;
+  let fixture: ComponentFixture<ProcessFormComponent>;
+  let scriptService;
+  let parameterValues;
+  let script;
+
+  function init() {
+    const param1 = new ScriptParameter();
+    const param2 = new ScriptParameter();
+    script = Object.assign(new Script(), { parameters: [param1, param2] });
+    parameterValues = [
+      Object.assign(new ProcessParameter(), { name: '-a', value: 'bla' }),
+      Object.assign(new ProcessParameter(), { name: '-b', value: '123' }),
+      Object.assign(new ProcessParameter(), { name: '-c', value: 'value' }),
+    ];
+    scriptService = jasmine.createSpyObj(
+      'scriptService',
+      {
+        invoke: observableOf({
+          response:
+            {
+              isSuccessful: true
+            }
+        })
+      }
+    )
+  }
+
+  beforeEach(async(() => {
+    init();
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })],
+      declarations: [ProcessFormComponent],
+      providers: [
+        { provide: ScriptDataService, useValue: scriptService },
+        { provide: NotificationsService, useClass: NotificationsServiceStub },
+        { provide: RequestService, useValue: jasmine.createSpyObj('requestService', ['removeBySubstring']) },
+        { provide: Router, useValue: {} },
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProcessFormComponent);
+    component = fixture.componentInstance;
+    component.parameters = parameterValues;
+    component.selectedScript = script;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should call invoke on the scriptService on submit', () => {
+    component.submitForm({ controls: {} } as any);
+    expect(scriptService.invoke).toHaveBeenCalled();
+  });
+});
diff --git a/src/app/process-page/form/process-form.component.ts b/src/app/process-page/form/process-form.component.ts
new file mode 100644
index 0000000000..ee7d7d85d2
--- /dev/null
+++ b/src/app/process-page/form/process-form.component.ts
@@ -0,0 +1,151 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Script } from '../scripts/script.model';
+import { Process } from '../processes/process.model';
+import { ProcessParameter } from '../processes/process-parameter.model';
+import { ScriptDataService } from '../../core/data/processes/script-data.service';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { ScriptParameter } from '../scripts/script-parameter.model';
+import { RequestEntry } from '../../core/data/request.reducer';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { TranslateService } from '@ngx-translate/core';
+import { take } from 'rxjs/operators';
+import { RequestService } from '../../core/data/request.service';
+import { Router } from '@angular/router';
+
+/**
+ * Component to create a new script
+ */
+@Component({
+  selector: 'ds-process-form',
+  templateUrl: './process-form.component.html',
+  styleUrls: ['./process-form.component.scss'],
+})
+export class ProcessFormComponent implements OnInit {
+  /**
+   * The currently selected script
+   */
+  @Input() public selectedScript: Script = undefined;
+
+  /**
+   * The process to create
+   */
+  @Input() public process: Process = undefined;
+
+  /**
+   * The parameter values to use to start the process
+   */
+  @Input() public parameters: ProcessParameter[];
+
+  /**
+   * Optional files that are used as parameter values
+   */
+  public files: File[] = [];
+
+  /**
+   * Message key for the header of the form
+   */
+  @Input() public headerKey: string;
+
+  /**
+   * Contains the missing parameters on submission
+   */
+  public missingParameters = [];
+
+  constructor(
+    private scriptService: ScriptDataService,
+    private notificationsService: NotificationsService,
+    private translationService: TranslateService,
+    private requestService: RequestService,
+    private router: Router) {
+  }
+
+  ngOnInit(): void {
+    this.process = new Process();
+  }
+
+  /**
+   * Validates the form, sets the parameters to correct values and invokes the script with the correct parameters
+   * @param form
+   */
+  submitForm(form: NgForm) {
+    if (!this.validateForm(form) || this.isRequiredMissing()) {
+      return;
+    }
+
+    const stringParameters: ProcessParameter[] = this.parameters.map((parameter: ProcessParameter) => {
+        return {
+          name: parameter.name,
+          value: this.checkValue(parameter)
+        };
+      }
+    );
+    this.scriptService.invoke(this.selectedScript.id, stringParameters, this.files)
+      .pipe(take(1))
+      .subscribe((requestEntry: RequestEntry) => {
+        if (requestEntry.response.isSuccessful) {
+          const title = this.translationService.get('process.new.notification.success.title');
+          const content = this.translationService.get('process.new.notification.success.content');
+          this.notificationsService.success(title, content);
+          this.sendBack();
+        } else {
+          const title = this.translationService.get('process.new.notification.error.title');
+          const content = this.translationService.get('process.new.notification.error.content');
+          this.notificationsService.error(title, content);
+        }
+      })
+  }
+
+  /**
+   * Checks whether the parameter values are files
+   * Replaces file parameters by strings and stores the files in a separate list
+   * @param processParameter The parameter value to check
+   */
+  private checkValue(processParameter: ProcessParameter): string {
+    if (typeof processParameter.value === 'object') {
+      this.files = [...this.files, processParameter.value];
+      return processParameter.value.name;
+    }
+    return processParameter.value;
+  }
+
+  /**
+   * Validates the form
+   * Returns false if the form is invalid
+   * Returns true if the form is valid
+   * @param form The NgForm object to validate
+   */
+  private validateForm(form: NgForm) {
+    let valid = true;
+    Object.keys(form.controls).forEach((key) => {
+      if (form.controls[key].invalid) {
+        form.controls[key].markAsDirty();
+        valid = false;
+      }
+    });
+    return valid;
+  }
+
+  private isRequiredMissing() {
+    this.missingParameters = [];
+    const setParams: string[] = this.parameters
+      .map((param) => param.name);
+    const requiredParams: ScriptParameter[] = this.selectedScript.parameters.filter((param) => param.mandatory);
+    for (const rp of requiredParams) {
+      if (!setParams.includes(rp.name)) {
+        this.missingParameters.push(rp.name);
+      }
+    }
+    return this.missingParameters.length > 0;
+  }
+
+  private sendBack() {
+    this.requestService.removeByHrefSubstring('/processes');
+    /* should subscribe on the previous method to know the action is finished and then navigate,
+    will fix this when the removeByHrefSubstring changes are merged */
+    this.router.navigateByUrl('/processes');
+  }
+}
+
+export function controlContainerFactory(controlContainer?: ControlContainer) {
+  return controlContainer;
+}
diff --git a/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html
new file mode 100644
index 0000000000..4bf06bbade
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html
@@ -0,0 +1,16 @@
+<div class="form-row mb-2 mx-0">
+    <select id="process-parameters"
+            class="form-control col"
+            name="parameter-{{index}}"
+            [(ngModel)]="selectedParameter"
+            #param="ngModel">
+        <option [ngValue]="undefined">Add a parameter...</option>
+        <option *ngFor="let param of parameters" [ngValue]="param.name">
+            {{param.nameLong || param.name}}
+        </option>
+    </select>
+    <ds-parameter-value-input [initialValue]="parameterValue.value" [parameter]="selectedScriptParameter" (updateValue)="selectedParameterValue = $event" class="d-block col" [index]="index"></ds-parameter-value-input>
+    <button *ngIf="removable" class="btn btn-light col-1 remove-button" (click)="removeParameter.emit(parameterValue);"><span class="fas fa-trash"></span></button>
+    <span *ngIf="!removable" class="col-1"></span>
+</div>
+
diff --git a/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.scss b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.spec.ts b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.spec.ts
new file mode 100644
index 0000000000..97c0d7c3d0
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.spec.ts
@@ -0,0 +1,71 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ParameterSelectComponent } from './parameter-select.component';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ScriptParameter } from '../../../scripts/script-parameter.model';
+import { ScriptParameterType } from '../../../scripts/script-parameter-type.model';
+import { By } from '@angular/platform-browser';
+
+describe('ParameterSelectComponent', () => {
+  let component: ParameterSelectComponent;
+  let fixture: ComponentFixture<ParameterSelectComponent>;
+  let scriptParams: ScriptParameter[];
+
+  function init() {
+    scriptParams = [
+      Object.assign(
+        new ScriptParameter(),
+        {
+          name: '-a',
+          type: ScriptParameterType.BOOLEAN
+        }
+      ),
+      Object.assign(
+        new ScriptParameter(),
+        {
+          name: '-f',
+          type: ScriptParameterType.FILE
+        }
+      ),
+    ]
+  }
+  beforeEach(async(() => {
+    init();
+    TestBed.configureTestingModule({
+      imports: [FormsModule],
+      declarations: [ParameterSelectComponent],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ParameterSelectComponent);
+    component = fixture.componentInstance;
+
+    component.parameters = scriptParams;
+    component.removable = false;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should show the remove button when removable', () => {
+    component.removable = true;
+    fixture.detectChanges();
+
+    const button = fixture.debugElement.query(By.css('button.remove-button'));
+    expect(button).not.toBeNull();
+  });
+
+  it('should hide the remove button when not removable', () => {
+    component.removable = false;
+    fixture.detectChanges();
+
+    const button = fixture.debugElement.query(By.css('button.remove-button'));
+    expect(button).toBeNull();
+  });
+});
diff --git a/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.ts b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.ts
new file mode 100644
index 0000000000..e016d3442f
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.ts
@@ -0,0 +1,89 @@
+import { Component, EventEmitter, Input, Optional, Output } from '@angular/core';
+import { ProcessParameter } from '../../../processes/process-parameter.model';
+import { ScriptParameter } from '../../../scripts/script-parameter.model';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { controlContainerFactory } from '../../process-form.component';
+
+/**
+ * Component to select a single parameter for a process
+ */
+@Component({
+  selector: 'ds-parameter-select',
+  templateUrl: './parameter-select.component.html',
+  styleUrls: ['./parameter-select.component.scss'],
+  viewProviders: [{
+    provide: ControlContainer,
+    useFactory: controlContainerFactory,
+    deps: [[new Optional(), NgForm]]
+  }]
+})
+export class ParameterSelectComponent {
+  @Input() index: number;
+
+  /**
+   * The current parameter value of the selected parameter
+   */
+  @Input() parameterValue: ProcessParameter = new ProcessParameter();
+
+  /**
+   * The available script parameters for the script
+   */
+  @Input() parameters: ScriptParameter[];
+
+  /**
+   * Whether or not this selected parameter can be removed from the list
+   */
+  @Input() removable: boolean;
+
+  /**
+   * Emits the parameter value when it's removed
+   */
+  @Output() removeParameter: EventEmitter<ProcessParameter> = new EventEmitter<ProcessParameter>();
+
+  /**
+   * Emits the updated parameter value when it changes
+   */
+  @Output() changeParameter: EventEmitter<ProcessParameter> = new EventEmitter<ProcessParameter>();
+
+  /**
+   * Returns the script parameter based on the currently selected name
+   */
+  get selectedScriptParameter(): ScriptParameter {
+    return this.parameters.find((parameter: ScriptParameter) => parameter.name === this.selectedParameter);
+  }
+
+  /**
+   * Return the currently selected parameter name
+   */
+  get selectedParameter(): string {
+    return this.parameterValue ? this.parameterValue.name : undefined;
+  }
+
+  /**
+   * Sets the currently selected parameter based on the provided parameter name
+   * Emits the new value from the changeParameter output
+   * @param value The parameter name to set
+   */
+  set selectedParameter(value: string) {
+    this.parameterValue.name = value;
+    this.selectedParameterValue = undefined;
+    this.changeParameter.emit(this.parameterValue);
+  }
+
+  /**
+   * Returns the currently selected parameter value
+   */
+  get selectedParameterValue(): any {
+    return this.parameterValue ? this.parameterValue.value : undefined;
+  }
+
+  /**
+   * Sets the currently selected value for the parameter
+   * Emits the new value from the changeParameter output
+   * @param value The parameter value to set
+   */
+  set selectedParameterValue(value: any) {
+    this.parameterValue.value = value;
+    this.changeParameter.emit(this.parameterValue);
+  }
+}
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html b/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html
new file mode 100644
index 0000000000..914b331413
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html
@@ -0,0 +1 @@
+<input type="hidden" value="true" name="boolean-value-{{index}}" id="boolean-value-{{index}}"/>
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.scss b/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts b/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts
new file mode 100644
index 0000000000..15f09d98f0
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts
@@ -0,0 +1,32 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BooleanValueInputComponent } from './boolean-value-input.component';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+describe('BooleanValueInputComponent', () => {
+  let component: BooleanValueInputComponent;
+  let fixture: ComponentFixture<BooleanValueInputComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [BooleanValueInputComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BooleanValueInputComponent);
+    component = fixture.componentInstance;
+    spyOn(component.updateValue, 'emit');
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should emit true onInit', () => {
+    expect(component.updateValue.emit).toHaveBeenCalledWith(true);
+  });
+});
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts b/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts
new file mode 100644
index 0000000000..51b93cb6a1
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit, Optional } from '@angular/core';
+import { ValueInputComponent } from '../value-input.component';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { controlContainerFactory } from '../../../process-form.component';
+
+/**
+ * Represents the value of a boolean parameter
+ */
+@Component({
+  selector: 'ds-boolean-value-input',
+  templateUrl: './boolean-value-input.component.html',
+  styleUrls: ['./boolean-value-input.component.scss'],
+  viewProviders: [ { provide: ControlContainer,
+    useFactory: controlContainerFactory,
+    deps: [[new Optional(), NgForm]] } ]
+})
+export class BooleanValueInputComponent extends ValueInputComponent<boolean> implements OnInit {
+  ngOnInit() {
+    this.updateValue.emit(true)
+  }
+}
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html
new file mode 100644
index 0000000000..f367d3779f
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html
@@ -0,0 +1,7 @@
+<input required #string="ngModel" type="text" class="form-control" name="date-value-{{index}}" id="date-value-{{index}}" [ngModel]="value" (ngModelChange)="setValue($event)"/>
+<div *ngIf="string.invalid && (string.dirty || string.touched)"
+     class="alert alert-danger validation-error">
+    <div *ngIf="string.errors.required">
+        {{'process.new.parameter.string.required' | translate}}
+    </div>
+</div>
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts
new file mode 100644
index 0000000000..4f2212eff6
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts
@@ -0,0 +1,70 @@
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+
+import { DateValueInputComponent } from './date-value-input.component';
+import { FormsModule } from '@angular/forms';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { By } from '@angular/platform-browser';
+import { TranslateLoaderMock } from '../../../../../shared/mocks/translate-loader.mock';
+
+describe('DateValueInputComponent', () => {
+  let component: DateValueInputComponent;
+  let fixture: ComponentFixture<DateValueInputComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })],
+      declarations: [DateValueInputComponent]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DateValueInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should not show a validation error if the input field was left untouched but left empty', () => {
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeFalsy();
+  });
+
+  it('should show a validation error if the input field was touched but left empty',  fakeAsync(() => {
+    component.value = '';
+    fixture.detectChanges();
+    tick();
+
+    const input = fixture.debugElement.query(By.css('input'));
+    input.triggerEventHandler('blur', null);
+
+    fixture.detectChanges();
+
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeTruthy();
+  }));
+
+  it('should not show a validation error if the input field was touched but not left empty', fakeAsync(() => {
+    component.value = 'testValue';
+    fixture.detectChanges();
+    tick();
+
+    const input = fixture.debugElement.query(By.css('input'));
+    input.triggerEventHandler('blur', null);
+
+    fixture.detectChanges();
+
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeFalsy();
+  }));
+});
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts
new file mode 100644
index 0000000000..7a4fbc0965
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts
@@ -0,0 +1,36 @@
+import { Component, Input, Optional } from '@angular/core';
+import { ValueInputComponent } from '../value-input.component';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { controlContainerFactory } from '../../../process-form.component';
+
+/**
+ * Represents the user inputted value of a date parameter
+ */
+@Component({
+  selector: 'ds-date-value-input',
+  templateUrl: './date-value-input.component.html',
+  styleUrls: ['./date-value-input.component.scss'],
+  viewProviders: [ { provide: ControlContainer,
+    useFactory: controlContainerFactory,
+    deps: [[new Optional(), NgForm]] } ]
+})
+export class DateValueInputComponent extends ValueInputComponent<string> {
+  /**
+   * The current value of the date string
+   */
+  value: string;
+
+  /**
+   * Initial value of the field
+   */
+  @Input() initialValue;
+
+  ngOnInit() {
+    this.value = this.initialValue;
+  }
+
+  setValue(value) {
+    this.value = value;
+    this.updateValue.emit(value)
+  }
+}
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
new file mode 100644
index 0000000000..cac3fbd82d
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html
@@ -0,0 +1,13 @@
+<label for="file-upload-{{index}}" class="d-flex align-items-center m-0">
+    <span class="btn btn-light">
+        {{'process.new.parameter.file.upload-button' | translate}}
+    </span>
+    <span class="file-name ml-1">{{fileObject?.name}}</span>
+</label>
+<input requireFile #file="ngModel" type="file" name="file-upload-{{index}}" id="file-upload-{{index}}" class="form-control-file d-none" [ngModel]="fileObject" (ngModelChange)="setFile($event)"/>
+<div *ngIf="file.invalid && (file.dirty || file.touched)"
+     class="alert alert-danger validation-error">
+    <div *ngIf="file.errors.required">
+        {{'process.new.parameter.file.required' | translate}}
+    </div>
+</div>
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss
new file mode 100644
index 0000000000..29ea31add0
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss
@@ -0,0 +1,6 @@
+.file-name {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
new file mode 100644
index 0000000000..434d5e4edb
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts
@@ -0,0 +1,57 @@
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+
+import { FormsModule, NgForm, ReactiveFormsModule } from '@angular/forms';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { By } from '@angular/platform-browser';
+import { FileValueInputComponent } from './file-value-input.component';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { FileValueAccessorDirective } from '../../../../../shared/utils/file-value-accessor.directive';
+import { FileValidator } from '../../../../../shared/utils/require-file.validator';
+import { TranslateLoaderMock } from '../../../../../shared/mocks/translate-loader.mock';
+
+describe('FileValueInputComponent', () => {
+  let component: FileValueInputComponent;
+  let fixture: ComponentFixture<FileValueInputComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })],
+      declarations: [FileValueInputComponent, FileValueAccessorDirective, FileValidator],
+      schemas: [NO_ERRORS_SCHEMA]
+
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FileValueInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should not show a validation error if the input field was left untouched but left empty', () => {
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeFalsy();
+  });
+
+  it('should show a validation error if the input field was touched but left empty',  () => {
+    const input = fixture.debugElement.query(By.css('input'));
+    input.triggerEventHandler('blur', null);
+
+    fixture.detectChanges();
+
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeTruthy();
+  });
+});
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts
new file mode 100644
index 0000000000..796a5de58e
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts
@@ -0,0 +1,26 @@
+import { Component, Optional } from '@angular/core';
+import { ValueInputComponent } from '../value-input.component';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { controlContainerFactory } from '../../../process-form.component';
+
+/**
+ * Represents the user inputted value of a file parameter
+ */
+@Component({
+  selector: 'ds-file-value-input',
+  templateUrl: './file-value-input.component.html',
+  styleUrls: ['./file-value-input.component.scss'],
+  viewProviders: [ { provide: ControlContainer,
+    useFactory: controlContainerFactory,
+    deps: [[new Optional(), NgForm]] } ]
+})
+export class FileValueInputComponent extends ValueInputComponent<File> {
+  /**
+   * The current value of the file
+   */
+  fileObject: File;
+  setFile(files) {
+    this.fileObject = files.length > 0 ? files[0] : undefined;
+    this.updateValue.emit(this.fileObject);
+  }
+}
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.html b/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.html
new file mode 100644
index 0000000000..57bd4ee7e5
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.html
@@ -0,0 +1,7 @@
+<div [ngSwitch]="parameter?.type">
+  <ds-string-value-input *ngSwitchCase="parameterTypes.STRING" [initialValue]="initialValue" (updateValue)="updateValue.emit($event)" [index]="index"></ds-string-value-input>
+  <ds-string-value-input *ngSwitchCase="parameterTypes.OUTPUT" [initialValue]="initialValue" (updateValue)="updateValue.emit($event)" [index]="index"></ds-string-value-input>
+  <ds-date-value-input *ngSwitchCase="parameterTypes.DATE" [initialValue]="initialValue" (updateValue)="updateValue.emit($event)" [index]="index"></ds-date-value-input>
+  <ds-file-value-input *ngSwitchCase="parameterTypes.FILE" (updateValue)="updateValue.emit($event)" [index]="index"></ds-file-value-input>
+  <ds-boolean-value-input *ngSwitchCase="parameterTypes.BOOLEAN" (updateValue)="updateValue.emit($event)" [index]="index"></ds-boolean-value-input>
+</div>
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.scss b/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts b/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts
new file mode 100644
index 0000000000..4a89c4924d
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts
@@ -0,0 +1,105 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ParameterValueInputComponent } from './parameter-value-input.component';
+import { ScriptParameter } from '../../../scripts/script-parameter.model';
+import { ScriptParameterType } from '../../../scripts/script-parameter-type.model';
+import { By } from '@angular/platform-browser';
+import { BooleanValueInputComponent } from './boolean-value-input/boolean-value-input.component';
+import { StringValueInputComponent } from './string-value-input/string-value-input.component';
+import { FileValueInputComponent } from './file-value-input/file-value-input.component';
+import { DateValueInputComponent } from './date-value-input/date-value-input.component';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { FileValueAccessorDirective } from '../../../../shared/utils/file-value-accessor.directive';
+import { FileValidator } from '../../../../shared/utils/require-file.validator';
+import { TranslateLoaderMock } from '../../../../shared/mocks/translate-loader.mock';
+
+describe('ParameterValueInputComponent', () => {
+  let component: ParameterValueInputComponent;
+  let fixture: ComponentFixture<ParameterValueInputComponent>;
+  let booleanParameter;
+  let stringParameter;
+  let fileParameter;
+  let dateParameter;
+  let outputParameter;
+
+  function init() {
+    booleanParameter = Object.assign(new ScriptParameter(), { type: ScriptParameterType.BOOLEAN });
+    stringParameter = Object.assign(new ScriptParameter(), { type: ScriptParameterType.STRING });
+    fileParameter = Object.assign(new ScriptParameter(), { type: ScriptParameterType.FILE });
+    dateParameter = Object.assign(new ScriptParameter(), { type: ScriptParameterType.DATE });
+    outputParameter = Object.assign(new ScriptParameter(), { type: ScriptParameterType.OUTPUT });
+  }
+
+  beforeEach(async(() => {
+    init();
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })],
+      declarations: [
+        ParameterValueInputComponent,
+        BooleanValueInputComponent,
+        StringValueInputComponent,
+        FileValueInputComponent,
+        DateValueInputComponent,
+        FileValueAccessorDirective,
+        FileValidator
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ParameterValueInputComponent);
+    component = fixture.componentInstance;
+    component.parameter = stringParameter;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should show a BooleanValueInputComponent when the parameter type is boolean', () => {
+    component.parameter = booleanParameter;
+    fixture.detectChanges();
+    const valueInput = fixture.debugElement.query(By.directive(BooleanValueInputComponent));
+    expect(valueInput).toBeTruthy();
+  });
+
+  it('should show a StringValueInputComponent when the parameter type is string', () => {
+    component.parameter = stringParameter;
+    fixture.detectChanges();
+    const valueInput = fixture.debugElement.query(By.directive(StringValueInputComponent));
+    expect(valueInput).toBeTruthy();
+  });
+
+  it('should show a FileValueInputComponent when the parameter type is file', () => {
+    component.parameter = fileParameter;
+    fixture.detectChanges();
+    const valueInput = fixture.debugElement.query(By.directive(FileValueInputComponent));
+    expect(valueInput).toBeTruthy();
+  });
+
+  it('should show a DateValueInputComponent when the parameter type is date', () => {
+    component.parameter = dateParameter;
+    fixture.detectChanges();
+    const valueInput = fixture.debugElement.query(By.directive(DateValueInputComponent));
+    expect(valueInput).toBeTruthy();
+  });
+
+  it('should show a StringValueInputComponent when the parameter type is output', () => {
+    component.parameter = outputParameter;
+    fixture.detectChanges();
+    const valueInput = fixture.debugElement.query(By.directive(StringValueInputComponent));
+    expect(valueInput).toBeTruthy();
+  });
+});
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.ts b/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.ts
new file mode 100644
index 0000000000..ec29ee5e1e
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.ts
@@ -0,0 +1,39 @@
+import { Component, EventEmitter, Input, Optional, Output } from '@angular/core';
+import { ScriptParameterType } from '../../../scripts/script-parameter-type.model';
+import { ScriptParameter } from '../../../scripts/script-parameter.model';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { controlContainerFactory } from '../../process-form.component';
+
+/**
+ * Component that renders the correct parameter value input based the script parameter's type
+ */
+@Component({
+  selector: 'ds-parameter-value-input',
+  templateUrl: './parameter-value-input.component.html',
+  styleUrls: ['./parameter-value-input.component.scss'],
+  viewProviders: [ { provide: ControlContainer,
+    useFactory: controlContainerFactory,
+    deps: [[new Optional(), NgForm]] } ]
+})
+export class ParameterValueInputComponent {
+  @Input() index: number;
+
+  /**
+   * The current script parameter
+   */
+  @Input() parameter: ScriptParameter;
+
+  /**
+   * Initial value for input
+   */
+  @Input() initialValue: any;
+  /**
+   * Emits the value of the input when its updated
+   */
+  @Output() updateValue: EventEmitter<any> = new EventEmitter();
+
+  /**
+   * The available script parameter types
+   */
+  parameterTypes = ScriptParameterType;
+}
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html b/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
new file mode 100644
index 0000000000..246c62a0f6
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
@@ -0,0 +1,7 @@
+<input required #string="ngModel" type="text" name="string-value-{{index}}" class="form-control" id="string-value-{{index}}" [ngModel]="value" (ngModelChange)="setValue($event)"/>
+<div *ngIf="string.invalid && (string.dirty || string.touched)"
+     class="alert alert-danger validation-error">
+    <div *ngIf="string.errors.required">
+        {{'process.new.parameter.string.required' | translate}}
+    </div>
+</div>
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss b/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts b/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts
new file mode 100644
index 0000000000..e702746adc
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts
@@ -0,0 +1,72 @@
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+
+import { FormsModule, NgForm } from '@angular/forms';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { By } from '@angular/platform-browser';
+import { StringValueInputComponent } from './string-value-input.component';
+import { TranslateLoaderMock } from '../../../../../shared/mocks/translate-loader.mock';
+
+describe('StringValueInputComponent', () => {
+  let component: StringValueInputComponent;
+  let fixture: ComponentFixture<StringValueInputComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })],
+      declarations: [StringValueInputComponent],
+      providers: [
+      ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StringValueInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should not show a validation error if the input field was left untouched but left empty', () => {
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeFalsy();
+  });
+
+  it('should show a validation error if the input field was touched but left empty', fakeAsync(() => {
+    component.value = '';
+    fixture.detectChanges();
+    tick();
+
+    const input = fixture.debugElement.query(By.css('input'));
+    input.triggerEventHandler('blur', null);
+
+    fixture.detectChanges();
+
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeTruthy();
+  }));
+
+  it('should not show a validation error if the input field was touched but not left empty', fakeAsync(() => {
+    component.value = 'testValue';
+    fixture.detectChanges();
+    tick();
+
+    const input = fixture.debugElement.query(By.css('input'));
+    input.triggerEventHandler('blur', null);
+
+    fixture.detectChanges();
+
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeFalsy();
+  }));
+});
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts b/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
new file mode 100644
index 0000000000..0e55669432
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
@@ -0,0 +1,36 @@
+import { Component, Optional, Input } from '@angular/core';
+import { ValueInputComponent } from '../value-input.component';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { controlContainerFactory } from '../../../process-form.component';
+
+/**
+ * Represents the user inputted value of a string parameter
+ */
+@Component({
+  selector: 'ds-string-value-input',
+  templateUrl: './string-value-input.component.html',
+  styleUrls: ['./string-value-input.component.scss'],
+  viewProviders: [ { provide: ControlContainer,
+    useFactory: controlContainerFactory,
+    deps: [[new Optional(), NgForm]] } ]
+})
+export class StringValueInputComponent extends ValueInputComponent<string> {
+  /**
+   * The current value of the string
+   */
+  value: string;
+
+  /**
+   * Initial value of the field
+   */
+  @Input() initialValue;
+
+  ngOnInit() {
+    this.value = this.initialValue;
+  }
+
+  setValue(value) {
+    this.value = value;
+    this.updateValue.emit(value)
+  }
+}
diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/value-input.component.ts b/src/app/process-page/form/process-parameters/parameter-value-input/value-input.component.ts
new file mode 100644
index 0000000000..9e9a091dcd
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/parameter-value-input/value-input.component.ts
@@ -0,0 +1,12 @@
+import { EventEmitter, Input, Output } from '@angular/core';
+
+/**
+ * Abstract class that represents value input components
+ */
+export abstract class ValueInputComponent<T> {
+  @Input() index: number;
+  /**
+   * Used by the subclasses to emit the value when it's updated
+   */
+  @Output() updateValue: EventEmitter<T> = new EventEmitter<T>()
+}
diff --git a/src/app/process-page/form/process-parameters/process-parameters.component.html b/src/app/process-page/form/process-parameters/process-parameters.component.html
new file mode 100644
index 0000000000..d7bbce6779
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/process-parameters.component.html
@@ -0,0 +1,11 @@
+<div class="form-group" *ngIf="script">
+    <label>{{'process.new.select-parameters' | translate}}</label>
+    <ds-parameter-select
+            *ngFor="let value of parameterValues; let i = index; let last = last"
+            [parameters]="script.parameters"
+            [parameterValue]="value"
+            [removable]="!last"
+            [index]="i"
+            (removeParameter)="removeParameter(i)"
+            (changeParameter)="updateParameter($event, i)"></ds-parameter-select>
+</div>
diff --git a/src/app/process-page/form/process-parameters/process-parameters.component.scss b/src/app/process-page/form/process-parameters/process-parameters.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/form/process-parameters/process-parameters.component.spec.ts b/src/app/process-page/form/process-parameters/process-parameters.component.spec.ts
new file mode 100644
index 0000000000..3fc94d92a1
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/process-parameters.component.spec.ts
@@ -0,0 +1,64 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProcessParametersComponent } from './process-parameters.component';
+import { ProcessParameter } from '../../processes/process-parameter.model';
+import { By } from '@angular/platform-browser';
+import { ParameterSelectComponent } from './parameter-select/parameter-select.component';
+import { FormsModule } from '@angular/forms';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { Script } from '../../scripts/script.model';
+import { ScriptParameter } from '../../scripts/script-parameter.model';
+import { TranslateLoaderMock } from '../../../shared/mocks/translate-loader.mock';
+
+describe('ProcessParametersComponent', () => {
+  let component: ProcessParametersComponent;
+  let fixture: ComponentFixture<ProcessParametersComponent>;
+  let parameterValues;
+  let script;
+
+  function init() {
+    const param1 = new ScriptParameter();
+    const param2 = new ScriptParameter();
+    script = Object.assign(new Script(), { parameters: [param1, param2] });
+    parameterValues = [
+      Object.assign(new ProcessParameter(), { name: '-a', value: 'bla' }),
+      Object.assign(new ProcessParameter(), { name: '-b', value: '123' }),
+      Object.assign(new ProcessParameter(), { name: '-c', value: 'value' }),
+    ]
+  }
+
+  beforeEach(async(() => {
+    init();
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })],
+      declarations: [ProcessParametersComponent, ParameterSelectComponent],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProcessParametersComponent);
+    component = fixture.componentInstance;
+    component.script = script;
+    component.parameterValues = parameterValues;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render a ParameterSelectComponent for each parameter value of the component', () => {
+    const selectComponents = fixture.debugElement.queryAll(By.directive(ParameterSelectComponent));
+    expect(selectComponents.length).toBe(parameterValues.length);
+  });
+});
diff --git a/src/app/process-page/form/process-parameters/process-parameters.component.ts b/src/app/process-page/form/process-parameters/process-parameters.component.ts
new file mode 100644
index 0000000000..de55f9ebca
--- /dev/null
+++ b/src/app/process-page/form/process-parameters/process-parameters.component.ts
@@ -0,0 +1,114 @@
+import { Component, EventEmitter, Input, OnChanges, Optional, Output, SimpleChanges } from '@angular/core';
+import { Script } from '../../scripts/script.model';
+import { ProcessParameter } from '../../processes/process-parameter.model';
+import { hasValue } from '../../../shared/empty.util';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { ScriptParameter } from '../../scripts/script-parameter.model';
+import { controlContainerFactory } from '../process-form.component';
+
+/**
+ * Component that represents the selected list of parameters for a script
+ */
+@Component({
+  selector: 'ds-process-parameters',
+  templateUrl: './process-parameters.component.html',
+  styleUrls: ['./process-parameters.component.scss'],
+  viewProviders: [{
+    provide: ControlContainer,
+    useFactory: controlContainerFactory,
+    deps: [[new Optional(), NgForm]]
+  }]
+})
+export class ProcessParametersComponent implements OnChanges {
+  /**
+   * The currently selected script
+   */
+  @Input() script: Script;
+
+  /**
+   * Initial parameters on load
+   */
+  @Input() initialParams: ProcessParameter[];
+  /**
+   * Emits the parameter values when they're updated
+   */
+  @Output() updateParameters: EventEmitter<ProcessParameter[]> = new EventEmitter();
+
+  /**
+   * The current parameter values
+   */
+  parameterValues: ProcessParameter[];
+
+  ngOnInit() {
+    if (hasValue(this.initialParams)) {
+      this.parameterValues = this.initialParams;
+    }
+  }
+
+  /**
+   * Makes sure the parameters are reset when the script changes
+   * @param changes
+   */
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.script) {
+      this.initParameters()
+    }
+  }
+
+  /**
+   * Empties the parameter values
+   * Initializes the first parameter value
+   */
+  initParameters() {
+    if (hasValue(this.initialParams)) {
+      this.parameterValues = this.initialParams;
+    } else {
+      this.parameterValues = [];
+      this.initializeParameter();
+    }
+  }
+
+  /**
+   * Updates a single parameter value using its new value and index
+   * Adds a new parameter when the last of the parameter values is changed
+   * @param processParameter The new value of the parameter
+   * @param index The index of the parameter
+   */
+  updateParameter(processParameter: ProcessParameter, index: number) {
+    this.parameterValues[index] = processParameter;
+    if (index === this.parameterValues.length - 1) {
+      this.addParameter();
+    }
+    this.updateParameters.emit(this.parameterValues.filter((param: ProcessParameter) => hasValue(param.name)));
+  }
+
+  /**
+   * Removes a parameter value from the list
+   * @param index The index of the parameter to remove
+   */
+  removeParameter(index: number) {
+    this.parameterValues = this.parameterValues.filter((value, i) => i !== index);
+    this.updateParameters.emit(this.parameterValues.filter((param: ProcessParameter) => hasValue(param.name)));
+  }
+
+  /**
+   * Initializes parameter values based on the selected script
+   */
+  initializeParameter() {
+    if (hasValue(this.script)) {
+      this.parameterValues = this.script.parameters
+        .filter((param) => param.mandatory)
+        .map(
+          (parameter: ScriptParameter) => Object.assign(new ProcessParameter(), { name: parameter.name })
+        );
+    }
+    this.addParameter();
+  }
+
+  /**
+   * Adds an empty parameter value to the end of the list
+   */
+  addParameter() {
+    this.parameterValues = [...this.parameterValues, new ProcessParameter()];
+  }
+}
diff --git a/src/app/process-page/form/script-help/script-help.component.html b/src/app/process-page/form/script-help/script-help.component.html
new file mode 100644
index 0000000000..f52ae4b6b9
--- /dev/null
+++ b/src/app/process-page/form/script-help/script-help.component.html
@@ -0,0 +1,22 @@
+<div class="text-secondary">
+  <h3>{{script?.name}}</h3>
+  <span>{{script?.description}}</span>
+
+  <table class="table-borderless mt-3">
+    <tr *ngFor="let param of script?.parameters">
+      <td class="align-top text-nowrap">{{param.name}} {{param.nameLong}}
+        <ng-container *ngTemplateOutlet="type; context: param"></ng-container>
+      </td>
+      <td>{{param.description}}</td>
+    </tr>
+  </table>
+</div>
+
+<ng-template #type let-type="type">
+    <ng-container [ngSwitch]="type">
+        <span *ngSwitchCase="parameterTypes.DATE"><{{'process.new.parameter.type.value' | translate}}></span>
+        <span *ngSwitchCase="parameterTypes.STRING"><{{'process.new.parameter.type.value' | translate}}></span>
+        <span *ngSwitchCase="parameterTypes.OUTPUT"><{{'process.new.parameter.type.value' | translate}}></span>
+        <span *ngSwitchCase="parameterTypes.FILE"><{{'process.new.parameter.type.file' | translate}}></span>
+    </ng-container>
+</ng-template>
diff --git a/src/app/process-page/form/script-help/script-help.component.scss b/src/app/process-page/form/script-help/script-help.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/form/script-help/script-help.component.spec.ts b/src/app/process-page/form/script-help/script-help.component.spec.ts
new file mode 100644
index 0000000000..4e4aa48276
--- /dev/null
+++ b/src/app/process-page/form/script-help/script-help.component.spec.ts
@@ -0,0 +1,65 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScriptHelpComponent } from './script-help.component';
+import { ScriptParameter } from '../../scripts/script-parameter.model';
+import { Script } from '../../scripts/script.model';
+import { ScriptParameterType } from '../../scripts/script-parameter-type.model';
+import { By } from '@angular/platform-browser';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { FormsModule } from '@angular/forms';
+import { TranslateLoaderMock } from '../../../shared/mocks/translate-loader.mock';
+
+describe('ScriptHelpComponent', () => {
+  let component: ScriptHelpComponent;
+  let fixture: ComponentFixture<ScriptHelpComponent>;
+  let script;
+
+  function init() {
+    const param1 = Object.assign(
+      new ScriptParameter(),
+      {name: '-d', description: 'Lorem ipsum dolor sit amet,', type: ScriptParameterType.DATE}
+    );
+    const param2 = Object.assign(
+      new ScriptParameter(),
+      {name: '-f', description: 'consetetur sadipscing elitr', type: ScriptParameterType.BOOLEAN}
+    );
+    script = Object.assign(new Script(), { parameters: [param1, param2] });
+  }
+  beforeEach(async(() => {
+    init();
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })],
+      declarations: [ ScriptHelpComponent ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ScriptHelpComponent);
+    component = fixture.componentInstance;
+    component.script = script;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should show the name and description for each parameter of the script', () => {
+    const rows = fixture.debugElement.queryAll(By.css('tr'));
+    expect(rows.length).toBe(script.parameters.length);
+    script.parameters.forEach((parameter, index) => {
+      expect(rows[index].queryAll(By.css('td'))[0].nativeElement.textContent).toContain(parameter.name);
+      expect(rows[index].queryAll(By.css('td'))[1].nativeElement.textContent.trim()).toEqual(parameter.description);
+    })
+  });
+});
diff --git a/src/app/process-page/form/script-help/script-help.component.ts b/src/app/process-page/form/script-help/script-help.component.ts
new file mode 100644
index 0000000000..7e230a4a42
--- /dev/null
+++ b/src/app/process-page/form/script-help/script-help.component.ts
@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+import { Script } from '../../scripts/script.model';
+import { ScriptParameterType } from '../../scripts/script-parameter-type.model';
+
+/**
+ * Components that represents a help section for the script use and parameters
+ */
+@Component({
+  selector: 'ds-script-help',
+  templateUrl: './script-help.component.html',
+  styleUrls: ['./script-help.component.scss']
+})
+export class ScriptHelpComponent {
+  /**
+   * The current script to show the help information for
+   */
+  @Input() script: Script;
+
+  /**
+   * The available script parameter types
+   */
+  parameterTypes = ScriptParameterType;
+}
diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.html b/src/app/process-page/form/scripts-select/scripts-select.component.html
new file mode 100644
index 0000000000..9cd86d1a6d
--- /dev/null
+++ b/src/app/process-page/form/scripts-select/scripts-select.component.html
@@ -0,0 +1,20 @@
+<div class="form-group" *ngIf="scripts$ | async">
+    <label for="process-script">{{'process.new.select-script' | translate}}</label>
+    <select required id="process-script"
+            class="form-control"
+            name="script"
+            [(ngModel)]="selectedScript"
+            #script="ngModel">
+        <option [ngValue]="undefined">{{'process.new.select-script.placeholder' | translate}}</option>
+        <option *ngFor="let script of scripts$ | async" [ngValue]="script.id">
+            {{script.name}}
+        </option>
+    </select>
+
+    <div *ngIf="script.invalid && (script.dirty || script.touched)"
+         class="alert alert-danger validation-error">
+        <div *ngIf="script.errors.required">
+            {{'process.new.select-script.required' | translate}}
+        </div>
+    </div>
+</div>
diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.scss b/src/app/process-page/form/scripts-select/scripts-select.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.spec.ts b/src/app/process-page/form/scripts-select/scripts-select.component.spec.ts
new file mode 100644
index 0000000000..db6d6e85b8
--- /dev/null
+++ b/src/app/process-page/form/scripts-select/scripts-select.component.spec.ts
@@ -0,0 +1,99 @@
+import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
+
+import { FormsModule } from '@angular/forms';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { By } from '@angular/platform-browser';
+import { ScriptsSelectComponent } from './scripts-select.component';
+import { Script } from '../../scripts/script.model';
+import { ScriptDataService } from '../../../core/data/processes/script-data.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { PaginatedList } from '../../../core/data/paginated-list';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { createSuccessfulRemoteDataObject$ } from '../../../shared/remote-data.utils';
+import { TranslateLoaderMock } from '../../../shared/mocks/translate-loader.mock';
+import { RouterStub } from '../../../shared/testing/router.stub';
+import { ActivatedRouteStub } from '../../../shared/testing/active-router.stub';
+
+describe('ScriptsSelectComponent', () => {
+  let component: ScriptsSelectComponent;
+  let fixture: ComponentFixture<ScriptsSelectComponent>;
+  let scriptService;
+  let script1;
+  let script2;
+
+  function init() {
+    script1 = new Script();
+    script2 = new Script();
+    scriptService = jasmine.createSpyObj('scriptService',
+      {
+        findAll: createSuccessfulRemoteDataObject$(new PaginatedList(undefined, [script1, script2]))
+      }
+    )
+  }
+
+  beforeEach(async(() => {
+    init();
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })],
+      declarations: [ScriptsSelectComponent],
+      providers: [
+        { provide: ScriptDataService, useValue: scriptService },
+        { provide: Router, useClass: RouterStub },
+        { provide: ActivatedRoute, useValue: new ActivatedRouteStub() },
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ScriptsSelectComponent);
+    component = fixture.componentInstance;
+    (component as any)._selectedScript = new Script();
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should not show a validation error if the input field was left untouched but left empty', () => {
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeFalsy();
+  });
+
+  it('should show a validation error if the input field was touched but left empty', fakeAsync(() => {
+    (component as any)._selectedScript.id = '';
+    fixture.detectChanges();
+    tick();
+
+    const select = fixture.debugElement.query(By.css('select'));
+    select.triggerEventHandler('blur', null);
+
+    fixture.detectChanges();
+
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeTruthy();
+  }));
+
+  it('should not show a validation error if the input field was touched but not left empty', fakeAsync(() => {
+    (component as any)._selectedScript.id = 'testValue';
+    fixture.detectChanges();
+    tick();
+
+    const select = fixture.debugElement.query(By.css('select'));
+    select.triggerEventHandler('blur', null);
+
+    fixture.detectChanges();
+
+    const validationError = fixture.debugElement.query(By.css('.validation-error'));
+    expect(validationError).toBeFalsy();
+  }));
+});
diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.ts b/src/app/process-page/form/scripts-select/scripts-select.component.ts
new file mode 100644
index 0000000000..1e3ecfda0d
--- /dev/null
+++ b/src/app/process-page/form/scripts-select/scripts-select.component.ts
@@ -0,0 +1,106 @@
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Optional, Output } from '@angular/core';
+import { ScriptDataService } from '../../../core/data/processes/script-data.service';
+import { Script } from '../../scripts/script.model';
+import { Observable, Subscription } from 'rxjs';
+import { distinctUntilChanged, filter, map, switchMap, take } from 'rxjs/operators';
+import { getRemoteDataPayload, getSucceededRemoteData } from '../../../core/shared/operators';
+import { PaginatedList } from '../../../core/data/paginated-list';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { hasNoValue, hasValue } from '../../../shared/empty.util';
+import { ControlContainer, NgForm } from '@angular/forms';
+import { controlContainerFactory } from '../process-form.component';
+
+const SCRIPT_QUERY_PARAMETER = 'script';
+
+/**
+ * Component used to select a script
+ */
+@Component({
+  selector: 'ds-scripts-select',
+  templateUrl: './scripts-select.component.html',
+  styleUrls: ['./scripts-select.component.scss'],
+  viewProviders: [ { provide: ControlContainer,
+    useFactory: controlContainerFactory,
+    deps: [[new Optional(), NgForm]] } ]
+})
+export class ScriptsSelectComponent implements OnInit, OnDestroy {
+  /**
+   * Emits the selected script when the selection changes
+   */
+  @Output() select: EventEmitter<Script> = new EventEmitter<Script>();
+  /**
+   * All available scripts
+   */
+  scripts$: Observable<Script[]>;
+  private _selectedScript: Script;
+  private routeSub: Subscription;
+
+  constructor(
+    private scriptService: ScriptDataService,
+    private router: Router,
+    private route: ActivatedRoute,
+  ) {
+  }
+
+  /**
+   * Sets all available scripts
+   * Checks if the route contains a script ID and auto selects this scripts
+   */
+  ngOnInit() {
+    this.scripts$ = this.scriptService.findAll({ elementsPerPage: Number.MAX_SAFE_INTEGER })
+      .pipe(
+        getSucceededRemoteData(),
+        getRemoteDataPayload(),
+        map((paginatedList: PaginatedList<Script>) => paginatedList.page)
+      );
+
+    this.routeSub = this.route.queryParams
+      .pipe(
+        filter((params: Params) => hasNoValue(params.id)),
+        map((params: Params) => params[SCRIPT_QUERY_PARAMETER]),
+        distinctUntilChanged(),
+        switchMap((id: string) =>
+          this.scripts$
+            .pipe(
+              take(1),
+              map((scripts) =>
+                scripts.find((script) => script.id === id)
+              )
+            )
+        )
+      ).subscribe((script: Script) => {
+        this._selectedScript = script;
+        this.select.emit(script);
+      });
+  }
+
+  /**
+   * Returns the identifier of the selected script
+   */
+  get selectedScript(): string {
+    return this._selectedScript ? this._selectedScript.id : undefined;
+  }
+
+  /**
+   * Sets the currently selected script by navigating to the correct route using the scripts ID
+   * @param value The identifier of the script
+   */
+  set selectedScript(value: string) {
+    this.router.navigate([],
+      {
+        queryParams: { [SCRIPT_QUERY_PARAMETER]: value },
+      }
+    );
+  }
+
+  @Input()
+  set script(value: Script) {
+     this._selectedScript = value;
+  }
+
+  ngOnDestroy(): void {
+    if (hasValue(this.routeSub)) {
+      this.routeSub.unsubscribe();
+    }
+  }
+}
diff --git a/src/app/process-page/new/new-process.component.html b/src/app/process-page/new/new-process.component.html
new file mode 100644
index 0000000000..f61764ffd2
--- /dev/null
+++ b/src/app/process-page/new/new-process.component.html
@@ -0,0 +1,6 @@
+<ng-container *ngIf="fromExisting$ && (fromExisting$ | async)">
+    <ds-process-form *ngVar="fromExisting$ | async as process" headerKey="process.new.header" [selectedScript]="script$ | async" [parameters]="process.parameters"></ds-process-form>
+</ng-container>
+<ng-container *ngIf="!fromExisting$ || !(fromExisting$ | async)">
+    <ds-process-form headerKey="process.new.header"></ds-process-form>
+</ng-container>
diff --git a/src/app/process-page/new/new-process.component.scss b/src/app/process-page/new/new-process.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/new/new-process.component.spec.ts b/src/app/process-page/new/new-process.component.spec.ts
new file mode 100644
index 0000000000..bb3ad24ed3
--- /dev/null
+++ b/src/app/process-page/new/new-process.component.spec.ts
@@ -0,0 +1,84 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormsModule } from '@angular/forms';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NewProcessComponent } from './new-process.component';
+import { ScriptDataService } from '../../core/data/processes/script-data.service';
+import { ScriptParameter } from '../scripts/script-parameter.model';
+import { Script } from '../scripts/script.model';
+import { ProcessParameter } from '../processes/process-parameter.model';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { of as observableOf } from 'rxjs';
+import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub';
+import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock';
+import { RequestService } from '../../core/data/request.service';
+import { ActivatedRoute } from '@angular/router';
+import { LinkService } from '../../core/cache/builders/link.service';
+import { VarDirective } from '../../shared/utils/var.directive';
+import { ProcessDataService } from '../../core/data/processes/process-data.service';
+
+describe('NewProcessComponent', () => {
+  let component: NewProcessComponent;
+  let fixture: ComponentFixture<NewProcessComponent>;
+  let scriptService;
+  let parameterValues;
+  let script;
+
+  function init() {
+    const param1 = new ScriptParameter();
+    const param2 = new ScriptParameter();
+    script = Object.assign(new Script(), { parameters: [param1, param2] });
+    parameterValues = [
+      Object.assign(new ProcessParameter(), { name: '-a', value: 'bla' }),
+      Object.assign(new ProcessParameter(), { name: '-b', value: '123' }),
+      Object.assign(new ProcessParameter(), { name: '-c', value: 'value' }),
+    ];
+    scriptService = jasmine.createSpyObj(
+      'scriptService',
+      {
+        invoke: observableOf({
+          response:
+            {
+              isSuccessful: true
+            }
+        })
+      }
+    )
+  }
+
+  beforeEach(async(() => {
+    init();
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        })],
+      declarations: [NewProcessComponent, VarDirective],
+      providers: [
+        { provide: ScriptDataService, useValue: scriptService },
+        { provide: NotificationsService, useClass: NotificationsServiceStub },
+        { provide: RequestService, useValue: {} },
+        { provide: ActivatedRoute, useValue: { snapshot: { queryParams: {} } } },
+        { provide: LinkService, useValue: {} },
+        { provide: ProcessDataService, useValue: {} },
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NewProcessComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/process-page/new/new-process.component.ts b/src/app/process-page/new/new-process.component.ts
new file mode 100644
index 0000000000..f97ce1bc6b
--- /dev/null
+++ b/src/app/process-page/new/new-process.component.ts
@@ -0,0 +1,47 @@
+import { Component, OnInit } from '@angular/core';
+import { Process } from '../processes/process.model';
+import { ActivatedRoute } from '@angular/router';
+import { ProcessDataService } from '../../core/data/processes/process-data.service';
+import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
+import { Observable } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { LinkService } from '../../core/cache/builders/link.service';
+import { followLink } from '../../shared/utils/follow-link-config.model';
+import { Script } from '../scripts/script.model';
+
+/**
+ * Component to create a new script
+ */
+@Component({
+  selector: 'ds-new-process',
+  templateUrl: './new-process.component.html',
+  styleUrls: ['./new-process.component.scss'],
+})
+export class NewProcessComponent implements OnInit {
+  /**
+   * Emits preselected process if there is one
+   */
+  fromExisting$?: Observable<Process>;
+  /**
+   * Emits preselected script if there is one
+   */
+  script$?: Observable<Script>;
+
+  constructor(private route: ActivatedRoute, private processService: ProcessDataService, private linkService: LinkService) {
+  }
+
+  /**
+   * If there's an id parameter, use this the process with this identifier as presets for the form
+   */
+  ngOnInit() {
+    const id = this.route.snapshot.queryParams.id;
+    if (id) {
+      this.fromExisting$ = this.processService.findById(id).pipe(getFirstSucceededRemoteDataPayload());
+      this.script$ = this.fromExisting$.pipe(
+        map((process: Process) => this.linkService.resolveLink<Process>(process, followLink('script'))),
+        switchMap((process: Process) => process.script),
+        getFirstSucceededRemoteDataPayload()
+      );
+    }
+  }
+}
diff --git a/src/app/process-page/overview/process-overview.component.html b/src/app/process-page/overview/process-overview.component.html
new file mode 100644
index 0000000000..30eb44430e
--- /dev/null
+++ b/src/app/process-page/overview/process-overview.component.html
@@ -0,0 +1,38 @@
+<div class="container">
+    <div class="d-flex">
+        <h2 class="flex-grow-1">{{'process.overview.title' | translate}}</h2>
+        <button class="btn btn-lg btn-success " routerLink="/processes/new"><i class="fas fa-plus pr-2"></i>{{'process.overview.new' | translate}}</button>
+    </div>
+    <ds-pagination *ngIf="(processesRD$ | async)?.payload?.totalElements > 0"
+                   [paginationOptions]="pageConfig"
+                   [pageInfoState]="(processesRD$ | async)?.payload"
+                   [collectionSize]="(processesRD$ | async)?.payload?.totalElements"
+                   [hideGear]="true"
+                   [hidePagerWhenSinglePage]="true"
+                   (pageChange)="onPageChange($event)">
+        <div class="table-responsive">
+            <table class="table table-striped table-hover">
+                <thead>
+                <tr>
+                    <th scope="col">{{'process.overview.table.id' | translate}}</th>
+                    <th scope="col">{{'process.overview.table.name' | translate}}</th>
+                    <th scope="col">{{'process.overview.table.user' | translate}}</th>
+                    <th scope="col">{{'process.overview.table.start' | translate}}</th>
+                    <th scope="col">{{'process.overview.table.finish' | translate}}</th>
+                    <th scope="col">{{'process.overview.table.status' | translate}}</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr *ngFor="let process of (processesRD$ | async)?.payload?.page">
+                    <td><a [routerLink]="['/processes/', process.processId]">{{process.processId}}</a></td>
+                    <td><a [routerLink]="['/processes/', process.processId]">{{process.scriptName}}</a></td>
+                    <td *ngVar="(getEpersonName(process.userId) | async) as ePersonName">{{ePersonName}}</td>
+                    <td>{{process.startTime | date:dateFormat}}</td>
+                    <td>{{process.endTime | date:dateFormat}}</td>
+                    <td>{{process.processStatus}}</td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </ds-pagination>
+</div>
diff --git a/src/app/process-page/overview/process-overview.component.spec.ts b/src/app/process-page/overview/process-overview.component.spec.ts
new file mode 100644
index 0000000000..bbdd7d7a6c
--- /dev/null
+++ b/src/app/process-page/overview/process-overview.component.spec.ts
@@ -0,0 +1,158 @@
+import { ProcessOverviewComponent } from './process-overview.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { VarDirective } from '../../shared/utils/var.directive';
+import { TranslateModule } from '@ngx-translate/core';
+import { RouterTestingModule } from '@angular/router/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ProcessDataService } from '../../core/data/processes/process-data.service';
+import { Process } from '../processes/process.model';
+import { EPersonDataService } from '../../core/eperson/eperson-data.service';
+import { EPerson } from '../../core/eperson/models/eperson.model';
+import { By } from '@angular/platform-browser';
+import { ProcessStatus } from '../processes/process-status.model';
+import { createSuccessfulRemoteDataObject$ } from '../../shared/remote-data.utils';
+import { createPaginatedList } from '../../shared/testing/utils.test';
+
+describe('ProcessOverviewComponent', () => {
+  let component: ProcessOverviewComponent;
+  let fixture: ComponentFixture<ProcessOverviewComponent>;
+
+  let processService: ProcessDataService;
+  let ePersonService: EPersonDataService;
+
+  let processes: Process[];
+  let ePerson: EPerson;
+
+  function init() {
+    processes = [
+      Object.assign(new Process(), {
+        processId: 1,
+        scriptName: 'script-name',
+        startTime: '2020-03-19',
+        endTime: '2020-03-19',
+        processStatus: ProcessStatus.COMPLETED
+      }),
+      Object.assign(new Process(), {
+        processId: 2,
+        scriptName: 'script-name',
+        startTime: '2020-03-20',
+        endTime: '2020-03-20',
+        processStatus: ProcessStatus.FAILED
+      }),
+      Object.assign(new Process(), {
+        processId: 3,
+        scriptName: 'another-script-name',
+        startTime: '2020-03-21',
+        endTime: '2020-03-21',
+        processStatus: ProcessStatus.RUNNING
+      })
+    ];
+    ePerson = Object.assign(new EPerson(), {
+      metadata: {
+        'eperson.firstname': [
+          {
+            value: 'John',
+            language: null
+          }
+        ],
+        'eperson.lastname': [
+          {
+            value: 'Doe',
+            language: null
+          }
+        ]
+      }
+    });
+    processService = jasmine.createSpyObj('processService', {
+      findAll: createSuccessfulRemoteDataObject$(createPaginatedList(processes))
+    });
+    ePersonService = jasmine.createSpyObj('ePersonService', {
+      findById: createSuccessfulRemoteDataObject$(ePerson)
+    });
+  }
+
+  beforeEach(async(() => {
+    init();
+    TestBed.configureTestingModule({
+      declarations: [ProcessOverviewComponent, VarDirective],
+      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([])],
+      providers: [
+        { provide: ProcessDataService, useValue: processService },
+        { provide: EPersonDataService, useValue: ePersonService }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProcessOverviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  describe('table structure', () => {
+    let rowElements;
+
+    beforeEach(() => {
+      rowElements = fixture.debugElement.queryAll(By.css('tbody tr'));
+    });
+
+    it(`should contain 3 rows`, () => {
+      expect(rowElements.length).toEqual(3);
+    });
+
+    it('should display the process IDs in the first column', () => {
+      rowElements.forEach((rowElement, index) => {
+        const el = rowElement.query(By.css('td:nth-child(1)')).nativeElement;
+        expect(el.textContent).toContain(processes[index].processId);
+      });
+    });
+
+    it('should display the script names in the second column', () => {
+      rowElements.forEach((rowElement, index) => {
+        const el = rowElement.query(By.css('td:nth-child(2)')).nativeElement;
+        expect(el.textContent).toContain(processes[index].scriptName);
+      });
+    });
+
+    it('should display the eperson\'s name in the third column', () => {
+      rowElements.forEach((rowElement, index) => {
+        const el = rowElement.query(By.css('td:nth-child(3)')).nativeElement;
+        expect(el.textContent).toContain(ePerson.name);
+      });
+    });
+
+    it('should display the start time in the fourth column', () => {
+      rowElements.forEach((rowElement, index) => {
+        const el = rowElement.query(By.css('td:nth-child(4)')).nativeElement;
+        expect(el.textContent).toContain(processes[index].startTime);
+      });
+    });
+
+    it('should display the end time in the fifth column', () => {
+      rowElements.forEach((rowElement, index) => {
+        const el = rowElement.query(By.css('td:nth-child(5)')).nativeElement;
+        expect(el.textContent).toContain(processes[index].endTime);
+      });
+    });
+
+    it('should display the status in the sixth column', () => {
+      rowElements.forEach((rowElement, index) => {
+        const el = rowElement.query(By.css('td:nth-child(6)')).nativeElement;
+        expect(el.textContent).toContain(processes[index].processStatus);
+      });
+    });
+  });
+
+  describe('onPageChange', () => {
+    const toPage = 2;
+
+    beforeEach(() => {
+      component.onPageChange(toPage);
+    });
+
+    it('should call a new findAll with the corresponding page', () => {
+      expect(processService.findAll).toHaveBeenCalledWith(jasmine.objectContaining({ currentPage: toPage }));
+    });
+  });
+});
diff --git a/src/app/process-page/overview/process-overview.component.ts b/src/app/process-page/overview/process-overview.component.ts
new file mode 100644
index 0000000000..29fbb9d733
--- /dev/null
+++ b/src/app/process-page/overview/process-overview.component.ts
@@ -0,0 +1,86 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs/internal/Observable';
+import { RemoteData } from '../../core/data/remote-data';
+import { PaginatedList } from '../../core/data/paginated-list';
+import { Process } from '../processes/process.model';
+import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
+import { FindListOptions } from '../../core/data/request.models';
+import { EPersonDataService } from '../../core/eperson/eperson-data.service';
+import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
+import { EPerson } from '../../core/eperson/models/eperson.model';
+import { map } from 'rxjs/operators';
+import { ProcessDataService } from '../../core/data/processes/process-data.service';
+
+@Component({
+  selector: 'ds-process-overview',
+  templateUrl: './process-overview.component.html',
+})
+/**
+ * Component displaying a list of all processes in a paginated table
+ */
+export class ProcessOverviewComponent implements OnInit {
+
+  /**
+   * List of all processes
+   */
+  processesRD$: Observable<RemoteData<PaginatedList<Process>>>;
+
+  /**
+   * The current pagination configuration for the page used by the FindAll method
+   */
+  config: FindListOptions = Object.assign(new FindListOptions(), {
+    elementsPerPage: 20
+  });
+
+  /**
+   * The current pagination configuration for the page
+   */
+  pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
+    id: 'process-overview-pagination',
+    pageSize: 20
+  });
+
+  /**
+   * Date format to use for start and end time of processes
+   */
+  dateFormat = 'yyyy-MM-dd HH:mm:ss';
+
+  constructor(protected processService: ProcessDataService,
+              protected ePersonService: EPersonDataService) {
+  }
+
+  ngOnInit(): void {
+    this.setProcesses();
+  }
+
+  /**
+   * When the page is changed, make sure to update the list of processes to match the new page
+   * @param event The page change event
+   */
+  onPageChange(event) {
+    this.config = Object.assign(new FindListOptions(), this.config, {
+      currentPage: event,
+    });
+    this.pageConfig.currentPage = event;
+    this.setProcesses();
+  }
+
+  /**
+   * Send a request to fetch all processes for the current page
+   */
+  setProcesses() {
+    this.processesRD$ = this.processService.findAll(this.config);
+  }
+
+  /**
+   * Get the name of an EPerson by ID
+   * @param id  ID of the EPerson
+   */
+  getEpersonName(id: string): Observable<string> {
+    return this.ePersonService.findById(id).pipe(
+      getFirstSucceededRemoteDataPayload(),
+      map((eperson: EPerson) => eperson.name)
+    );
+  }
+
+}
diff --git a/src/app/process-page/process-breadcrumb.resolver.spec.ts b/src/app/process-page/process-breadcrumb.resolver.spec.ts
new file mode 100644
index 0000000000..4c2e6b8158
--- /dev/null
+++ b/src/app/process-page/process-breadcrumb.resolver.spec.ts
@@ -0,0 +1,40 @@
+import { ProcessBreadcrumbResolver } from './process-breadcrumb.resolver';
+import { Process } from './processes/process.model';
+import { ProcessDataService } from '../core/data/processes/process-data.service';
+import { createSuccessfulRemoteDataObject$ } from '../shared/remote-data.utils';
+
+describe('ProcessBreadcrumbResolver', () => {
+  describe('resolve', () => {
+    let resolver: ProcessBreadcrumbResolver;
+    let processDataService: ProcessDataService;
+    let processBreadcrumbService: any;
+    let process: Process;
+    let id: string;
+    let path: string;
+    beforeEach(() => {
+      id = '12345';
+      process = Object.assign(new Process(), { id });
+      path = 'rest.com/path/to/breadcrumb/12345';
+      processBreadcrumbService = {};
+      processDataService = {
+        findById: () => createSuccessfulRemoteDataObject$(process)
+      } as any;
+      resolver = new ProcessBreadcrumbResolver(processBreadcrumbService, processDataService);
+    });
+
+    it('should resolve the breadcrumb config', (done) => {
+      const resolvedConfig = resolver.resolve({ data: { breadcrumbKey: process }, params: { id: id} } as any, {url: path} as any);
+      const expectedConfig = { provider: processBreadcrumbService, key: process, url: path};
+      resolvedConfig.subscribe((config) => {
+        expect(config).toEqual(expectedConfig);
+        done();
+      })
+    });
+
+    it('should resolve throw an error when no breadcrumbKey is defined', () => {
+      expect(() => {
+        resolver.resolve({ data: {} } as any, undefined)
+      }).toThrow();
+    });
+  });
+});
diff --git a/src/app/process-page/process-breadcrumb.resolver.ts b/src/app/process-page/process-breadcrumb.resolver.ts
new file mode 100644
index 0000000000..a306060d20
--- /dev/null
+++ b/src/app/process-page/process-breadcrumb.resolver.ts
@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs/internal/Observable';
+import { map } from 'rxjs/operators';
+import { Process } from './processes/process.model';
+import { followLink } from '../shared/utils/follow-link-config.model';
+import { ProcessDataService } from '../core/data/processes/process-data.service';
+import { BreadcrumbConfig } from '../breadcrumbs/breadcrumb/breadcrumb-config.model';
+import { getRemoteDataPayload, getSucceededRemoteData } from '../core/shared/operators';
+import { ProcessBreadcrumbsService } from './process-breadcrumbs.service';
+
+/**
+ * This class represents a resolver that requests a specific process before the route is activated
+ */
+@Injectable()
+export class ProcessBreadcrumbResolver implements Resolve<BreadcrumbConfig<Process>> {
+  constructor(protected breadcrumbService: ProcessBreadcrumbsService, private processService: ProcessDataService) {
+  }
+
+  /**
+   * Method for resolving a process based on the parameters in the current route
+   * @param {ActivatedRouteSnapshot} route The current ActivatedRouteSnapshot
+   * @param {RouterStateSnapshot} state The current RouterStateSnapshot
+   * @returns Observable<<RemoteData<Process>> Emits the found process based on the parameters in the current route,
+   * or an error if something went wrong
+   */
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<BreadcrumbConfig<Process>> {
+    const id = route.params.id;
+
+    return this.processService.findById(route.params.id, followLink('script')).pipe(
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      map((object: Process) => {
+        const fullPath = state.url;
+        const url = fullPath.substr(0, fullPath.indexOf(id)) + id;
+        return { provider: this.breadcrumbService, key: object, url: url };
+      })
+    );
+  }
+}
diff --git a/src/app/process-page/process-breadcrumbs.service.spec.ts b/src/app/process-page/process-breadcrumbs.service.spec.ts
new file mode 100644
index 0000000000..7751c985ce
--- /dev/null
+++ b/src/app/process-page/process-breadcrumbs.service.spec.ts
@@ -0,0 +1,36 @@
+import { async, TestBed } from '@angular/core/testing';
+import { getTestScheduler } from 'jasmine-marbles';
+import { ProcessBreadcrumbsService } from './process-breadcrumbs.service';
+import { Breadcrumb } from '../breadcrumbs/breadcrumb/breadcrumb.model';
+import { Process } from './processes/process.model';
+
+describe('ProcessBreadcrumbsService', () => {
+  let service: ProcessBreadcrumbsService;
+  let exampleId;
+  let exampleScriptName;
+  let exampleProcess;
+  let exampleURL;
+
+  function init() {
+    exampleId = '12345';
+    exampleScriptName = 'Example Script';
+    exampleProcess = Object.assign(new Process(), {processId: exampleId, scriptName: exampleScriptName});
+    exampleURL = 'example.com';
+  }
+
+  beforeEach(async(() => {
+    init();
+    TestBed.configureTestingModule({}).compileComponents();
+  }));
+
+  beforeEach(() => {
+    service = new ProcessBreadcrumbsService();
+  });
+
+  describe('getBreadcrumbs', () => {
+    it('should return a breadcrumb based on a id and scriptName of the process', () => {
+      const breadcrumbs = service.getBreadcrumbs(exampleProcess, exampleURL);
+      getTestScheduler().expectObservable(breadcrumbs).toBe('(a|)', { a: [new Breadcrumb(exampleId + ' - ' + exampleScriptName, exampleURL)] });
+    })
+  });
+});
diff --git a/src/app/process-page/process-breadcrumbs.service.ts b/src/app/process-page/process-breadcrumbs.service.ts
new file mode 100644
index 0000000000..ffd289e04e
--- /dev/null
+++ b/src/app/process-page/process-breadcrumbs.service.ts
@@ -0,0 +1,21 @@
+import { Observable, of as observableOf } from 'rxjs';
+import { Injectable } from '@angular/core';
+import { BreadcrumbsService } from '../core/breadcrumbs/breadcrumbs.service';
+import { Breadcrumb } from '../breadcrumbs/breadcrumb/breadcrumb.model';
+import { Process } from './processes/process.model';
+
+/**
+ * Service to calculate process breadcrumbs for a single part of the route
+ */
+@Injectable()
+export class ProcessBreadcrumbsService implements BreadcrumbsService<Process> {
+
+  /**
+   * Method to calculate the breadcrumbs
+   * @param key The key used to resolve the breadcrumb
+   * @param url The url to use as a link for this breadcrumb
+   */
+  getBreadcrumbs(key: Process, url: string): Observable<Breadcrumb[]> {
+    return observableOf([new Breadcrumb(key.processId + ' - ' + key.scriptName, url)]);
+  }
+}
diff --git a/src/app/process-page/process-page-routing.module.ts b/src/app/process-page/process-page-routing.module.ts
new file mode 100644
index 0000000000..881ca0e853
--- /dev/null
+++ b/src/app/process-page/process-page-routing.module.ts
@@ -0,0 +1,50 @@
+import { RouterModule } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { NewProcessComponent } from './new/new-process.component';
+import { ProcessOverviewComponent } from './overview/process-overview.component';
+import { ProcessPageResolver } from './process-page.resolver';
+import { ProcessDetailComponent } from './detail/process-detail.component';
+import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
+import { ProcessBreadcrumbResolver } from './process-breadcrumb.resolver';
+import { AuthenticatedGuard } from '../core/auth/authenticated.guard';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        resolve: { breadcrumb: I18nBreadcrumbResolver },
+        data: { breadcrumbKey: 'process.overview' },
+        canActivate: [AuthenticatedGuard],
+        children: [
+          {
+            path: '',
+            component: ProcessOverviewComponent,
+            data: { title: 'process.overview.title' },
+          },
+          {
+            path: 'new',
+            component: NewProcessComponent,
+            resolve: { breadcrumb: I18nBreadcrumbResolver },
+            data: { title: 'process.new.title', breadcrumbKey: 'process.new' }
+          },
+          {
+            path: ':id',
+            component: ProcessDetailComponent,
+            resolve: {
+              process: ProcessPageResolver,
+              breadcrumb: ProcessBreadcrumbResolver
+            }
+          }
+        ]
+      },
+
+    ])
+  ],
+  providers: [
+    ProcessPageResolver
+  ]
+})
+export class ProcessPageRoutingModule {
+
+}
diff --git a/src/app/process-page/process-page.module.ts b/src/app/process-page/process-page.module.ts
new file mode 100644
index 0000000000..44e3f62701
--- /dev/null
+++ b/src/app/process-page/process-page.module.ts
@@ -0,0 +1,51 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../shared/shared.module';
+import { ProcessPageRoutingModule } from './process-page-routing.module';
+import { NewProcessComponent } from './new/new-process.component';
+import { ScriptsSelectComponent } from './form/scripts-select/scripts-select.component';
+import { ScriptHelpComponent } from './form/script-help/script-help.component';
+import { ParameterSelectComponent } from './form/process-parameters/parameter-select/parameter-select.component';
+import { ProcessParametersComponent } from './form/process-parameters/process-parameters.component';
+import { StringValueInputComponent } from './form/process-parameters/parameter-value-input/string-value-input/string-value-input.component';
+import { ParameterValueInputComponent } from './form/process-parameters/parameter-value-input/parameter-value-input.component';
+import { FileValueInputComponent } from './form/process-parameters/parameter-value-input/file-value-input/file-value-input.component';
+import { BooleanValueInputComponent } from './form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component';
+import { DateValueInputComponent } from './form/process-parameters/parameter-value-input/date-value-input/date-value-input.component';
+import { ProcessOverviewComponent } from './overview/process-overview.component';
+import { ProcessDetailComponent } from './detail/process-detail.component';
+import { ProcessDetailFieldComponent } from './detail/process-detail-field/process-detail-field.component';
+import { ProcessBreadcrumbsService } from './process-breadcrumbs.service';
+import { ProcessBreadcrumbResolver } from './process-breadcrumb.resolver';
+import { ProcessFormComponent } from './form/process-form.component';
+
+@NgModule({
+  imports: [
+    ProcessPageRoutingModule,
+    SharedModule,
+  ],
+  declarations: [
+    NewProcessComponent,
+    ScriptsSelectComponent,
+    ScriptHelpComponent,
+    ParameterSelectComponent,
+    ProcessParametersComponent,
+    StringValueInputComponent,
+    ParameterValueInputComponent,
+    FileValueInputComponent,
+    BooleanValueInputComponent,
+    DateValueInputComponent,
+    ProcessOverviewComponent,
+    ProcessDetailComponent,
+    ProcessDetailFieldComponent,
+    ProcessFormComponent
+  ],
+  providers: [
+    ProcessBreadcrumbResolver,
+    ProcessBreadcrumbsService
+  ],
+  entryComponents: []
+})
+
+export class ProcessPageModule {
+
+}
diff --git a/src/app/process-page/process-page.resolver.ts b/src/app/process-page/process-page.resolver.ts
new file mode 100644
index 0000000000..84821a2574
--- /dev/null
+++ b/src/app/process-page/process-page.resolver.ts
@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+import { RemoteData } from '../core/data/remote-data';
+import { Observable } from 'rxjs/internal/Observable';
+import { find } from 'rxjs/operators';
+import { hasValue } from '../shared/empty.util';
+import { Process } from './processes/process.model';
+import { followLink } from '../shared/utils/follow-link-config.model';
+import { ProcessDataService } from '../core/data/processes/process-data.service';
+
+/**
+ * This class represents a resolver that requests a specific process before the route is activated
+ */
+@Injectable()
+export class ProcessPageResolver implements Resolve<RemoteData<Process>> {
+  constructor(private processService: ProcessDataService) {
+  }
+
+  /**
+   * Method for resolving a process based on the parameters in the current route
+   * @param {ActivatedRouteSnapshot} route The current ActivatedRouteSnapshot
+   * @param {RouterStateSnapshot} state The current RouterStateSnapshot
+   * @returns Observable<<RemoteData<Process>> Emits the found process based on the parameters in the current route,
+   * or an error if something went wrong
+   */
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<RemoteData<Process>> {
+    return this.processService.findById(route.params.id, followLink('script')).pipe(
+      find((RD) => hasValue(RD.error) || RD.hasSucceeded),
+    );
+  }
+}
diff --git a/src/app/process-page/processes/process-parameter.model.ts b/src/app/process-page/processes/process-parameter.model.ts
new file mode 100644
index 0000000000..a3ce62c5c6
--- /dev/null
+++ b/src/app/process-page/processes/process-parameter.model.ts
@@ -0,0 +1,14 @@
+/**
+ * A parameter used for running a process
+ */
+export class ProcessParameter {
+  /**
+   * The name of the parameter Eg. '-d', '-f' etc.
+   */
+  name: string;
+
+  /**
+   * The value of the parameter
+   */
+  value: any;
+}
diff --git a/src/app/process-page/processes/process-status.model.ts b/src/app/process-page/processes/process-status.model.ts
new file mode 100644
index 0000000000..b43340bffb
--- /dev/null
+++ b/src/app/process-page/processes/process-status.model.ts
@@ -0,0 +1,9 @@
+/**
+ * List of process statuses
+ */
+export enum ProcessStatus {
+  SCHEDULED,
+  RUNNING,
+  COMPLETED,
+  FAILED
+}
diff --git a/src/app/process-page/processes/process.model.ts b/src/app/process-page/processes/process.model.ts
new file mode 100644
index 0000000000..85de5337e7
--- /dev/null
+++ b/src/app/process-page/processes/process.model.ts
@@ -0,0 +1,88 @@
+import { ProcessStatus } from './process-status.model';
+import { ProcessParameter } from './process-parameter.model';
+import { CacheableObject } from '../../core/cache/object-cache.reducer';
+import { HALLink } from '../../core/shared/hal-link.model';
+import { autoserialize, deserialize } from 'cerialize';
+import { PROCESS } from './process.resource-type';
+import { excludeFromEquals } from '../../core/utilities/equals.decorators';
+import { ResourceType } from '../../core/shared/resource-type';
+import { link, typedObject } from '../../core/cache/builders/build-decorators';
+import { Observable } from 'rxjs/internal/Observable';
+import { RemoteData } from '../../core/data/remote-data';
+import { SCRIPT } from '../scripts/script.resource-type';
+import { Script } from '../scripts/script.model';
+
+/**
+ * Object representing a process
+ */
+@typedObject
+export class Process implements CacheableObject {
+  static type = PROCESS;
+
+  /**
+   * The object type
+   */
+  @excludeFromEquals
+  @autoserialize
+  type: ResourceType;
+
+  /**
+   * The identifier for this process
+   */
+  @autoserialize
+  processId: string;
+
+  /**
+   * The UUID for the user that started the process
+   */
+  @autoserialize
+  userId: string;
+
+  /**
+   * The start time for this process
+   */
+  @autoserialize
+  startTime: string;
+
+  /**
+   * The end time for this process
+   */
+  @autoserialize
+  endTime: string;
+
+  /**
+   * The name of the script run by this process
+   */
+  @autoserialize
+  scriptName: string;
+
+  /**
+   * The status of this process
+   */
+  @autoserialize
+  processStatus: ProcessStatus;
+
+  /**
+   * The parameters for this process
+   */
+  @autoserialize
+  parameters: ProcessParameter[];
+
+  /**
+   * The {@link HALLink}s for this Process
+   */
+  @deserialize
+  _links: {
+    self: HALLink,
+    script: HALLink,
+    output: HALLink,
+    files: HALLink
+  };
+
+  /**
+   * The Script that created this Process
+   * Will be undefined unless the script {@link HALLink} has been resolved.
+   */
+  @link(SCRIPT)
+  script?: Observable<RemoteData<Script>>;
+}
diff --git a/src/app/process-page/processes/process.resource-type.ts b/src/app/process-page/processes/process.resource-type.ts
new file mode 100644
index 0000000000..47617ed4f4
--- /dev/null
+++ b/src/app/process-page/processes/process.resource-type.ts
@@ -0,0 +1,9 @@
+/**
+ * The resource type for Process
+ *
+ * Needs to be in a separate file to prevent circular
+ * dependencies in webpack.
+ */
+import { ResourceType } from '../../core/shared/resource-type';
+
+export const PROCESS = new ResourceType('process');
diff --git a/src/app/process-page/scripts/script-parameter-type.model.ts b/src/app/process-page/scripts/script-parameter-type.model.ts
new file mode 100644
index 0000000000..2b9fd358bf
--- /dev/null
+++ b/src/app/process-page/scripts/script-parameter-type.model.ts
@@ -0,0 +1,10 @@
+/**
+ * List of parameter types used for scripts
+ */
+export enum ScriptParameterType {
+  STRING = 'String',
+  DATE = 'date',
+  BOOLEAN = 'boolean',
+  FILE = 'InputStream',
+  OUTPUT = 'OutputStream'
+}
diff --git a/src/app/process-page/scripts/script-parameter.model.ts b/src/app/process-page/scripts/script-parameter.model.ts
new file mode 100644
index 0000000000..d6debe7dd7
--- /dev/null
+++ b/src/app/process-page/scripts/script-parameter.model.ts
@@ -0,0 +1,31 @@
+import { ScriptParameterType } from './script-parameter-type.model';
+
+/**
+ * A parameter that can be used when running a script
+ */
+export class ScriptParameter {
+  /**
+   * The name of the parameter Eg. '-d', '-f' etc.
+   */
+  name: string;
+
+  /**
+   * Short description about the purpose of this parameter
+   */
+  description: string;
+
+  /**
+   * The type of parameter
+   */
+  type: ScriptParameterType;
+
+  /**
+   * The long name for this parameter Eg. '--directory', '--force' etc.
+   */
+  nameLong: string;
+
+  /**
+   * Whether or not this parameter is mandatory
+   */
+  mandatory: boolean;
+}
diff --git a/src/app/process-page/scripts/script.model.ts b/src/app/process-page/scripts/script.model.ts
new file mode 100644
index 0000000000..e94d233fc2
--- /dev/null
+++ b/src/app/process-page/scripts/script.model.ts
@@ -0,0 +1,55 @@
+import { CacheableObject } from '../../core/cache/object-cache.reducer';
+import { HALLink } from '../../core/shared/hal-link.model';
+import { autoserialize, deserialize } from 'cerialize';
+import { SCRIPT } from './script.resource-type';
+import { ScriptParameter } from './script-parameter.model';
+import { typedObject } from '../../core/cache/builders/build-decorators';
+import { excludeFromEquals } from '../../core/utilities/equals.decorators';
+import { ResourceType } from '../../core/shared/resource-type';
+
+/**
+ * Object representing a script
+ */
+@typedObject
+export class Script implements CacheableObject {
+  static type = SCRIPT;
+
+  /**
+   * The object type
+   */
+  @excludeFromEquals
+  @autoserialize
+  type: ResourceType;
+
+  /**
+   * The identifier of this script
+   */
+  @autoserialize
+  id: string;
+
+  /**
+   * The name of this script
+   */
+  @autoserialize
+  name: string;
+
+  /**
+   * A short description of this script
+   */
+  @autoserialize
+  description: string;
+
+  /**
+   * The available parameters for this script
+   */
+  @autoserialize
+  parameters: ScriptParameter[];
+
+  /**
+   * The {@link HALLink}s for this Script
+   */
+  @deserialize
+  _links: {
+    self: HALLink,
+  };
+}
diff --git a/src/app/process-page/scripts/script.resource-type.ts b/src/app/process-page/scripts/script.resource-type.ts
new file mode 100644
index 0000000000..2b8c106191
--- /dev/null
+++ b/src/app/process-page/scripts/script.resource-type.ts
@@ -0,0 +1,9 @@
+/**
+ * The resource type for Script
+ *
+ * Needs to be in a separate file to prevent circular
+ * dependencies in webpack.
+ */
+import { ResourceType } from '../../core/shared/resource-type';
+
+export const SCRIPT = new ResourceType('script');
diff --git a/src/app/shared/comcol-forms/comcol-form/comcol-form.component.html b/src/app/shared/comcol-forms/comcol-form/comcol-form.component.html
index 09f7e459e4..6d0a0f90be 100644
--- a/src/app/shared/comcol-forms/comcol-form/comcol-form.component.html
+++ b/src/app/shared/comcol-forms/comcol-form/comcol-form.component.html
@@ -4,7 +4,7 @@
       <label>{{type.value + '.edit.logo.label' | translate}}</label>
     </div>
     <ng-container *ngVar="(dso?.logo | async)?.payload as logo">
-      <div class="col-12 d-inline-block alert" [ngClass]="{'alert-danger': markLogoForDeletion}" id="logo-section">
+      <div class="col-12 d-inline-block alert" [ngClass]="{'alert-danger': markLogoForDeletion}" id="logo-section" *ngIf="logo">
         <div class="row">
           <div class="col-8 d-inline-block">
             <ds-comcol-page-logo [logo]="logo"></ds-comcol-page-logo>
diff --git a/src/app/shared/ds-select/ds-select.component.html b/src/app/shared/ds-select/ds-select.component.html
new file mode 100644
index 0000000000..5a15155d4f
--- /dev/null
+++ b/src/app/shared/ds-select/ds-select.component.html
@@ -0,0 +1,31 @@
+<div>
+
+  <div ngbDropdown class="btn-group" (openChange)="toggled.emit($event)">
+
+    <div class="input-group-prepend" *ngIf="label">
+      <span id="dsSelectMenuLabel" class="input-group-text">
+        {{ label | translate }}
+      </span>
+    </div>
+
+    <button aria-describedby="dsSelectMenuLabel"
+            id="dsSelectMenuButton"
+            class="btn btn-outline-primary selection"
+            (blur)="close.emit($event)"
+            (click)="close.emit($event)"
+            [disabled]="disabled"
+            ngbDropdownToggle>
+      <ng-content select=".selection"></ng-content>
+    </button>
+
+    <div ngbDropdownMenu
+         class="dropdown-menu"
+         id="dsSelectDropdownMenu"
+         aria-labelledby="dsSelectMenuButton">
+      <div aria-labelledby="dropdownMenuButton">
+        <ng-content select=".menu"></ng-content>
+      </div>
+    </div>
+  </div>
+
+</div>
diff --git a/src/app/shared/ds-select/ds-select.component.scss b/src/app/shared/ds-select/ds-select.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/shared/ds-select/ds-select.component.spec.ts b/src/app/shared/ds-select/ds-select.component.spec.ts
new file mode 100644
index 0000000000..ddec73348c
--- /dev/null
+++ b/src/app/shared/ds-select/ds-select.component.spec.ts
@@ -0,0 +1,30 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { DsSelectComponent } from './ds-select.component';
+import { TranslateModule } from '@ngx-translate/core';
+
+describe('DsSelectComponent', () => {
+  let component: DsSelectComponent;
+  let fixture: ComponentFixture<DsSelectComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot(),
+      ],
+      declarations: [
+        DsSelectComponent,
+      ],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DsSelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/ds-select/ds-select.component.ts b/src/app/shared/ds-select/ds-select.component.ts
new file mode 100644
index 0000000000..26d1560c01
--- /dev/null
+++ b/src/app/shared/ds-select/ds-select.component.ts
@@ -0,0 +1,36 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+/**
+ * Component which represent a DSpace dropdown selector.
+ */
+@Component({
+  selector: 'ds-select',
+  templateUrl: './ds-select.component.html',
+  styleUrls: ['./ds-select.component.scss']
+})
+export class DsSelectComponent {
+
+  /**
+   * An optional label for the dropdown selector.
+   */
+  @Input()
+  label: string;
+
+  /**
+   * Whether the dropdown selector is disabled.
+   */
+  @Input()
+  disabled: boolean;
+
+  /**
+   * Emits an event when the dropdown selector is opened or closed.
+   */
+  @Output()
+  toggled = new EventEmitter();
+
+  /**
+   * Emits an event when the dropdown selector or closed.
+   */
+  @Output()
+  close = new EventEmitter();
+}
diff --git a/src/app/shared/mocks/dspace-rest-v2/endpoint-mocking-rest.service.ts b/src/app/shared/mocks/dspace-rest-v2/endpoint-mocking-rest.service.ts
index aa13b57d7b..7e6124e311 100644
--- a/src/app/shared/mocks/dspace-rest-v2/endpoint-mocking-rest.service.ts
+++ b/src/app/shared/mocks/dspace-rest-v2/endpoint-mocking-rest.service.ts
@@ -62,10 +62,10 @@ export class EndpointMockingRestService extends DSpaceRESTv2Service {
    * @return Observable<DSpaceRESTV2Response>
    *      An Observable<DSpaceRESTV2Response> containing the response from the server
    */
-  request(method: RestRequestMethod, url: string, body?: any, options?: HttpOptions): Observable<DSpaceRESTV2Response> {
+  request(method: RestRequestMethod, url: string, body?: any, options?: HttpOptions, isMultipart?: boolean): Observable<DSpaceRESTV2Response> {
     const mockData = this.getMockData(url);
     if (isEmpty(mockData)) {
-      return super.request(method, url, body, options);
+      return super.request(method, url, body, options, isMultipart);
     } else {
       return this.toMockResponse$(mockData);
     }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index d13547956a..cc61a6d868 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -189,6 +189,8 @@ import { CustomSwitchComponent } from './form/builder/ds-dynamic-form-ui/models/
 import { BundleListElementComponent } from './object-list/bundle-list-element/bundle-list-element.component';
 import { MissingTranslationHelper } from './translate/missing-translation.helper';
 import { ItemVersionsNoticeComponent } from './item/item-versions/notice/item-versions-notice.component';
+import { FileValidator } from './utils/require-file.validator';
+import { FileValueAccessorDirective } from './utils/file-value-accessor.directive';
 import { ModifyItemOverviewComponent } from '../+item-page/edit-item-page/modify-item-overview/modify-item-overview.component';
 import { ClaimedTaskActionsLoaderComponent } from './mydspace-actions/claimed-task/switcher/claimed-task-actions-loader.component';
 import { ClaimedTaskActionsDirective } from './mydspace-actions/claimed-task/switcher/claimed-task-actions.directive';
@@ -204,6 +206,7 @@ import { EpersonSearchBoxComponent } from './resource-policies/form/eperson-grou
 import { GroupSearchBoxComponent } from './resource-policies/form/eperson-group-list/group-search-box/group-search-box.component';
 import { FileDownloadLinkComponent } from './file-download-link/file-download-link.component';
 import { CollectionDropdownComponent } from './collection-dropdown/collection-dropdown.component';
+import { DsSelectComponent } from './ds-select/ds-select.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -280,6 +283,7 @@ const COMPONENTS = [
   DsDynamicFormGroupComponent,
   DsDynamicFormArrayComponent,
   DsDatePickerInlineComponent,
+  DsSelectComponent,
   ErrorComponent,
   FormComponent,
   LangSwitchComponent,
@@ -496,6 +500,9 @@ const DIRECTIVES = [
   MetadataRepresentationDirective,
   ListableObjectDirective,
   ClaimedTaskActionsDirective,
+  FileValueAccessorDirective,
+  FileValidator,
+  ClaimedTaskActionsDirective,
   NgForTrackByIdDirective
 ];
 
diff --git a/src/app/shared/testing/test-module.ts b/src/app/shared/testing/test-module.ts
index b2129435da..6721e3042b 100644
--- a/src/app/shared/testing/test-module.ts
+++ b/src/app/shared/testing/test-module.ts
@@ -22,7 +22,11 @@ import { RouterLinkDirectiveStub } from './router-link-directive.stub';
     MySimpleItemActionComponent,
     RouterLinkDirectiveStub,
     NgComponentOutletDirectiveStub
-  ], schemas: [
+  ],
+  exports: [
+    QueryParamsDirectiveStub
+  ],
+  schemas: [
     CUSTOM_ELEMENTS_SCHEMA
   ]
 })
diff --git a/src/app/shared/utils/file-value-accessor.directive.ts b/src/app/shared/utils/file-value-accessor.directive.ts
new file mode 100644
index 0000000000..bcd3381329
--- /dev/null
+++ b/src/app/shared/utils/file-value-accessor.directive.ts
@@ -0,0 +1,27 @@
+import {Directive} from '@angular/core';
+import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
+
+@Directive({
+    // tslint:disable-next-line:directive-selector
+    selector: 'input[type=file]',
+    // tslint:disable-next-line:no-host-metadata-property
+    host : {
+        '(change)' : 'onChange($event.target.files)',
+        '(blur)': 'onTouched()'
+    },
+    providers: [
+        { provide: NG_VALUE_ACCESSOR, useExisting: FileValueAccessorDirective, multi: true }
+    ]
+})
+/**
+ * Value accessor directive for inputs of type 'file'
+ */
+export class FileValueAccessorDirective implements ControlValueAccessor {
+    value: any;
+    onChange = (_) => { /* empty */ };
+    onTouched = () => { /* empty */};
+
+    writeValue(value) { /* empty */}
+    registerOnChange(fn: any) { this.onChange = fn; }
+    registerOnTouched(fn: any) { this.onTouched = fn; }
+}
diff --git a/src/app/shared/utils/require-file.validator.ts b/src/app/shared/utils/require-file.validator.ts
new file mode 100644
index 0000000000..9fa89c4188
--- /dev/null
+++ b/src/app/shared/utils/require-file.validator.ts
@@ -0,0 +1,22 @@
+import {Directive} from '@angular/core';
+import {NG_VALIDATORS, Validator, FormControl} from '@angular/forms';
+
+@Directive({
+  // tslint:disable-next-line:directive-selector
+    selector: '[requireFile]',
+    providers: [
+        { provide: NG_VALIDATORS, useExisting: FileValidator, multi: true },
+    ]
+})
+/**
+ * Validator directive to validate if a file is selected
+ */
+export class FileValidator implements Validator {
+    static validate(c: FormControl): {[key: string]: any} {
+      return c.value == null || c.value.length === 0 ? { required : true } : null;
+    }
+
+    validate(c: FormControl): {[key: string]: any} {
+      return FileValidator.validate(c);
+    }
+}
diff --git a/src/app/shared/utils/route.utils.ts b/src/app/shared/utils/route.utils.ts
index 6510fb8894..f43204930d 100644
--- a/src/app/shared/utils/route.utils.ts
+++ b/src/app/shared/utils/route.utils.ts
@@ -1,4 +1,6 @@
-import { Router } from '@angular/router';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
+import { hasValue } from '../empty.util';
+import { URLCombiner } from '../../core/url-combiner/url-combiner';
 
 /**
  * Util function to retrieve the current path (without query parameters) the user is on
@@ -8,3 +10,11 @@ export function currentPath(router: Router) {
   const urlTree = router.parseUrl(router.url);
   return '/' + urlTree.root.children.primary.segments.map((it) => it.path).join('/')
 }
+
+export function currentPathFromSnapshot(route: ActivatedRouteSnapshot): string {
+  if (hasValue(route.parent)) {
+    const parentRoute: string = currentPathFromSnapshot(route.parent);
+    return new URLCombiner(parentRoute, route.routeConfig.path).toString();
+  }
+  return route.routeConfig ? route.routeConfig.path : '';
+}
diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
new file mode 100644
index 0000000000..20743540a8
--- /dev/null
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.html
@@ -0,0 +1,144 @@
+<div class="mb-4 ccLicense-select">
+  <ds-select
+    [disabled]="!submissionCcLicenses">
+
+    <ng-container class="selection">
+      <span *ngIf="!submissionCcLicenses">
+        <ds-loading></ds-loading>
+      </span>
+      <span *ngIf="getSelectedCcLicense()">
+        {{ getSelectedCcLicense().name }}
+      </span>
+      <span *ngIf="submissionCcLicenses && !getSelectedCcLicense()">
+        <ng-container *ngIf="storedCcLicenseLink">
+          {{ 'submission.sections.ccLicense.change' | translate }}
+        </ng-container>
+        <ng-container *ngIf="!storedCcLicenseLink">
+          {{ 'submission.sections.ccLicense.select' | translate }}
+        </ng-container>
+      </span>
+    </ng-container>
+
+    <ng-container class="menu">
+      <button *ngIf="submissionCcLicenses?.length == 0"
+              class="dropdown-item disabled">
+        {{ 'submission.sections.ccLicense.none' | translate }}
+      </button>
+      <button *ngFor="let license of submissionCcLicenses"
+              class="dropdown-item"
+              (click)="selectCcLicense(license)">
+        {{ license.name }}
+      </button>
+    </ng-container>
+
+  </ds-select>
+</div>
+
+<ng-container *ngIf="getSelectedCcLicense()">
+
+  <div *ngFor="let field of getSelectedCcLicense().fields"
+       class="mb-4">
+
+    <div class="d-flex flex-row">
+      <div class="font-weight-bold {{ field.id }}">
+        {{ field.label }}
+      </div>
+      <button
+        class="btn btn-outline-info btn-sm ml-2"
+        (click)="openInfoModal(infoModal)">
+        <i class="fas fa-question"></i>
+      </button>
+    </div>
+
+    <ng-template #infoModal>
+
+      <div>
+
+        <div class="modal-header mb-4 ">
+          <div>
+            <h4>
+              {{ field.label }}
+            </h4>
+            <div [innerHTML]="field.description"></div>
+          </div>
+          <button type="button" class="close"
+                  (click)="closeInfoModal()" aria-label="Close">
+            <span aria-hidden="true">×</span>
+          </button>
+        </div>
+
+        <div class="modal-body">
+          <div *ngFor="let value of field.enums"
+               class="mb-4">
+            <h5>
+              {{ value.label }}
+            </h5>
+            <div [innerHTML]="value.description" class="font-weight-light"></div>
+          </div>
+        </div>
+
+      </div>
+
+    </ng-template>
+
+    <ds-select *ngIf="field.enums?.length > 5">
+      <ng-container class="selection" *ngVar="getSelectedOption(getSelectedCcLicense(), field) as option">
+        <span *ngIf="option">
+          {{ option.label }}
+        </span>
+        <span *ngIf="!option">
+          {{ 'submission.sections.ccLicense.option.select' | translate }}
+        </span>
+      </ng-container>
+      <ng-container class="menu">
+        <div class="options-select-menu overflow-auto">
+          <button *ngFor="let option of field.enums"
+                  class="dropdown-item"
+                  (click)="selectOption(getSelectedCcLicense(), field, option)">
+            {{ option.label }}
+          </button>
+        </div>
+      </ng-container>
+    </ds-select>
+
+    <ng-container *ngIf="field.enums?.length <= 5">
+      <div *ngFor="let option of field.enums"
+           class="d-flex flex-row m-1">
+        <div (click)="selectOption(getSelectedCcLicense(), field, option)">
+          <input type="radio"
+                 title="{{ option.label }}"
+                 class="mr-1"
+                 [checked]="isSelectedOption(getSelectedCcLicense(), field, option)">
+          <span>{{ option.label }}</span>
+        </div>
+      </div>
+    </ng-container>
+
+  </div>
+
+</ng-container>
+
+<ng-container *ngIf="getCcLicenseLink$()">
+  <ng-container *ngVar="getCcLicenseLink$() | async as licenseLink">
+    <div *ngIf="!licenseLink">
+      <ds-loading></ds-loading>
+    </div>
+    <div *ngIf="licenseLink"
+         class="mt-2 p-4 bg-light text-dark">
+      <div>
+        {{ 'submission.sections.ccLicense.link' | translate }}
+      </div>
+      <a class="license-link" href="{{ licenseLink }}" target="_blank" rel="noopener noreferrer">
+        {{ licenseLink }}
+      </a>
+      <div class="m-2">
+        <div (click)="setAccepted(!accepted)">
+          <input type="checkbox"
+                 title="accepted"
+                 [checked]="accepted">
+          <span>{{ 'submission.sections.ccLicense.confirmation' | translate }}</span>
+        </div>
+      </div>
+    </div>
+  </ng-container>
+</ng-container>
diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.scss b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.scss
new file mode 100644
index 0000000000..62a902b79a
--- /dev/null
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.scss
@@ -0,0 +1,3 @@
+.options-select-menu {
+  max-height: 25vh;
+}
diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.spec.ts b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.spec.ts
new file mode 100644
index 0000000000..230c72b522
--- /dev/null
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.spec.ts
@@ -0,0 +1,280 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { SubmissionSectionCcLicensesComponent } from './submission-section-cc-licenses.component';
+import { SUBMISSION_CC_LICENSE } from '../../../core/submission/models/submission-cc-licence.resource-type';
+import { of as observableOf } from 'rxjs';
+import { SubmissionCcLicenseDataService } from '../../../core/submission/submission-cc-license-data.service';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { SharedModule } from '../../../shared/shared.module';
+import { SectionsService } from '../sections.service';
+import { SectionDataObject } from '../models/section-data.model';
+import { SectionsType } from '../sections-type';
+import { RemoteData } from '../../../core/data/remote-data';
+import { TranslateModule } from '@ngx-translate/core';
+import { PageInfo } from '../../../core/shared/page-info.model';
+import { PaginatedList } from '../../../core/data/paginated-list';
+import { SubmissionCcLicence } from '../../../core/submission/models/submission-cc-license.model';
+import { cold } from 'jasmine-marbles';
+import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder';
+import { SubmissionCcLicenseUrlDataService } from '../../../core/submission/submission-cc-license-url-data.service';
+
+describe('SubmissionSectionCcLicensesComponent', () => {
+
+  let component: SubmissionSectionCcLicensesComponent;
+  let fixture: ComponentFixture<SubmissionSectionCcLicensesComponent>;
+  let de: DebugElement;
+
+  const sectionObject: SectionDataObject = {
+    config: 'test config',
+    mandatory: true,
+    data: {},
+    errors: [],
+    header: 'test header',
+    id: 'test section id',
+    sectionType: SectionsType.SubmissionForm
+  };
+
+  const submissionCcLicenses: SubmissionCcLicence[] = [
+    {
+      id: 'test license id 1',
+      type: SUBMISSION_CC_LICENSE,
+      name: 'test license name 1',
+      fields: [
+        {
+          id: 'test-field-id-1a',
+          label: 'test field label 1a',
+          description: 'test field description 1a',
+          enums: [
+            {
+              id: 'test enum id 1a I',
+              label: 'test enum label 1a I',
+              description: 'test enum description 1a I',
+            },
+            {
+              id: 'test enum id 1a II',
+              label: 'test enum label 1a II',
+              description: 'test enum description 1a II',
+            },
+          ],
+        },
+        {
+          id: 'test-field-id-1b',
+          label: 'test field label 1b',
+          description: 'test field description 1b',
+          enums: [
+            {
+              id: 'test enum id 1b I',
+              label: 'test enum label 1b I',
+              description: 'test enum description 1b I',
+            },
+            {
+              id: 'test enum id 1b II',
+              label: 'test enum label 1b II',
+              description: 'test enum description 1b II',
+            },
+          ],
+        },
+      ],
+      _links: {
+        self: {
+          href: 'test link',
+        },
+      },
+    },
+    {
+      id: 'test license id 2',
+      type: SUBMISSION_CC_LICENSE,
+      name: 'test license name 2',
+      fields: [
+        {
+          id: 'test-field-id-2a',
+          label: 'test field label 2a',
+          description: 'test field description 2a',
+          enums: [
+            {
+              id: 'test enum id 2a I',
+              label: 'test enum label 2a I',
+              description: 'test enum description 2a I'
+            },
+            {
+              id: 'test enum id 2a II',
+              label: 'test enum label 2a II',
+              description: 'test enum description 2a II'
+            },
+          ],
+        },
+        {
+          id: 'test-field-id-2b',
+          label: 'test field label 2b',
+          description: 'test field description 2b',
+          enums: [
+            {
+              id: 'test enum id 2b I',
+              label: 'test enum label 2b I',
+              description: 'test enum description 2b I'
+            },
+            {
+              id: 'test enum id 2b II',
+              label: 'test enum label 2b II',
+              description: 'test enum description 2b II'
+            },
+          ],
+        },
+      ],
+      _links: {
+        self: {
+          href: 'test link',
+        },
+      },
+    },
+  ];
+
+  const submissionCcLicensesDataService = jasmine.createSpyObj('submissionCcLicensesDataService', {
+    findAll: observableOf(new RemoteData(
+      false,
+      false,
+      true,
+      undefined,
+      new PaginatedList(new PageInfo(), submissionCcLicenses),
+    )),
+  });
+
+  const submissionCcLicenseUrlDataService = jasmine.createSpyObj('submissionCcLicenseUrlDataService', {
+    getCcLicenseLink: observableOf(new RemoteData(
+      false,
+      false,
+      true,
+      undefined,
+      {
+        url: 'test cc license link',
+      }
+      )),
+  });
+
+  const sectionService = {
+    getSectionState: () => {
+      return observableOf({});
+    },
+    setSectionStatus: () => undefined,
+    updateSectionData: (submissionId, sectionId, updatedData) => {
+      component.sectionData.data = updatedData;
+    }
+  };
+
+  const operationsBuilder = jasmine.createSpyObj('operationsBuilder', {
+    add: undefined,
+    remove: undefined,
+  });
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        SharedModule,
+        TranslateModule.forRoot(),
+      ],
+      declarations: [
+        SubmissionSectionCcLicensesComponent,
+      ],
+      providers: [
+        { provide: SubmissionCcLicenseDataService, useValue: submissionCcLicensesDataService },
+        { provide: SubmissionCcLicenseUrlDataService, useValue: submissionCcLicenseUrlDataService },
+        { provide: SectionsService, useValue: sectionService },
+        { provide: JsonPatchOperationsBuilder, useValue: operationsBuilder },
+        { provide: 'collectionIdProvider', useValue: 'test collection id' },
+        { provide: 'sectionDataProvider', useValue: sectionObject },
+        { provide: 'submissionIdProvider', useValue: 'test submission id' },
+      ],
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SubmissionSectionCcLicensesComponent);
+    component = fixture.componentInstance;
+    de = fixture.debugElement;
+    fixture.detectChanges();
+  });
+
+  it('should display a dropdown with the different cc licenses', () => {
+    expect(
+      de.query(By.css('.ccLicense-select ds-select .dropdown-menu button:nth-child(1)')).nativeElement.innerText
+    ).toContain('test license name 1');
+    expect(
+      de.query(By.css('.ccLicense-select ds-select .dropdown-menu button:nth-child(2)')).nativeElement.innerText
+    ).toContain('test license name 2');
+  });
+
+  describe('when a license is selected', () => {
+
+    const ccLicence = submissionCcLicenses[1];
+
+    beforeEach(() => {
+      component.selectCcLicense(ccLicence);
+      fixture.detectChanges();
+    });
+
+    it('should display the selected cc license', () => {
+      expect(
+        de.query(By.css('.ccLicense-select ds-select button.selection')).nativeElement.innerText
+      ).toContain('test license name 2');
+    });
+
+    it('should display all field labels of the selected cc license only', () => {
+      expect(de.query(By.css('div.test-field-id-1a'))).toBeNull();
+      expect(de.query(By.css('div.test-field-id-1b'))).toBeNull();
+      expect(de.query(By.css('div.test-field-id-2a'))).toBeTruthy();
+      expect(de.query(By.css('div.test-field-id-2b'))).toBeTruthy();
+    });
+
+    it('should not display a cc license link', () => {
+      expect(de.query(By.css('.license-link'))).toBeNull();
+    });
+
+    it('should have section status incomplete', () => {
+      expect(component.getSectionStatus()).toBeObservable(cold('(a|)', { a: false }));
+    });
+
+    describe('when all options have a value selected', () => {
+
+      beforeEach(() => {
+        component.selectOption(ccLicence, ccLicence.fields[0], ccLicence.fields[0].enums[1]);
+        component.selectOption(ccLicence, ccLicence.fields[1], ccLicence.fields[1].enums[0]);
+        fixture.detectChanges();
+      });
+
+      it('should call the submission cc licenses data service getCcLicenseLink method', () => {
+        expect(submissionCcLicenseUrlDataService.getCcLicenseLink).toHaveBeenCalledWith(
+          ccLicence,
+          new Map([
+            [ccLicence.fields[0], ccLicence.fields[0].enums[1]],
+            [ccLicence.fields[1], ccLicence.fields[1].enums[0]],
+          ])
+        );
+      });
+
+      it('should display a cc license link', () => {
+        expect(de.query(By.css('.license-link'))).toBeTruthy();
+      });
+
+      it('should not be accepted', () => {
+        expect(component.accepted).toBeFalse();
+      });
+
+      it('should have section status incomplete', () => {
+        expect(component.getSectionStatus()).toBeObservable(cold('(a|)', { a: false }));
+      });
+
+      describe('when the cc license is accepted', () => {
+
+        beforeEach(() => {
+          component.setAccepted(true);
+          fixture.detectChanges();
+        });
+
+        it('should have section status complete', () => {
+          expect(component.getSectionStatus()).toBeObservable(cold('(a|)', { a: true }));
+        });
+      });
+    });
+  });
+});
diff --git a/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
new file mode 100644
index 0000000000..d455bd5e22
--- /dev/null
+++ b/src/app/submission/sections/cc-license/submission-section-cc-licenses.component.ts
@@ -0,0 +1,279 @@
+import { Component, Inject } from '@angular/core';
+import { Observable, of as observableOf, Subscription } from 'rxjs';
+import { Field, Option, SubmissionCcLicence } from '../../../core/submission/models/submission-cc-license.model';
+import { getRemoteDataPayload, getSucceededRemoteData } from '../../../core/shared/operators';
+import { distinctUntilChanged, filter, map, take } from 'rxjs/operators';
+import { SubmissionCcLicenseDataService } from '../../../core/submission/submission-cc-license-data.service';
+import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
+import { renderSectionFor } from '../sections-decorator';
+import { SectionsType } from '../sections-type';
+import { SectionModelComponent } from '../models/section.model';
+import { SectionDataObject } from '../models/section-data.model';
+import { SectionsService } from '../sections.service';
+import { WorkspaceitemSectionCcLicenseObject } from '../../../core/submission/models/workspaceitem-section-cc-license.model';
+import { JsonPatchOperationPathCombiner } from '../../../core/json-patch/builder/json-patch-operation-path-combiner';
+import { isNotEmpty } from '../../../shared/empty.util';
+import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder';
+import { SubmissionCcLicenseUrlDataService } from '../../../core/submission/submission-cc-license-url-data.service';
+
+/**
+ * This component represents the submission section to select the Creative Commons license.
+ */
+@Component({
+  selector: 'ds-submission-section-cc-licenses',
+  templateUrl: './submission-section-cc-licenses.component.html',
+  styleUrls: ['./submission-section-cc-licenses.component.scss']
+})
+@renderSectionFor(SectionsType.CcLicense)
+export class SubmissionSectionCcLicensesComponent extends SectionModelComponent {
+
+  /**
+   * The form id
+   * @type {string}
+   */
+  public formId: string;
+
+  /**
+   * A boolean representing if this section is loading
+   * @type {boolean}
+   */
+  public isLoading = true;
+
+  /**
+   * The [JsonPatchOperationPathCombiner] object
+   * @type {JsonPatchOperationPathCombiner}
+   */
+  protected pathCombiner: JsonPatchOperationPathCombiner;
+
+  /**
+   * The list of Subscriptions this component subscribes to.
+   */
+  private subscriptions: Subscription[] = [];
+
+  /**
+   * Cache of the available Creative Commons licenses.
+   */
+  submissionCcLicenses: SubmissionCcLicence[];
+
+  /**
+   * Reference to NgbModal
+   */
+  protected modalRef: NgbModalRef;
+
+  /**
+   * The Creative Commons link saved in the workspace item.
+   */
+  get storedCcLicenseLink(): string {
+    return this.data.uri;
+  }
+
+  /**
+   * The accepted state for the selected Creative Commons license.
+   */
+  get accepted(): boolean {
+    if (this.data.accepted === undefined) {
+      return !!this.data.uri;
+    }
+    return this.data.accepted;
+  }
+
+  constructor(
+    protected modalService: NgbModal,
+    protected sectionService: SectionsService,
+    protected submissionCcLicensesDataService: SubmissionCcLicenseDataService,
+    protected submissionCcLicenseUrlDataService: SubmissionCcLicenseUrlDataService,
+    protected operationsBuilder: JsonPatchOperationsBuilder,
+    @Inject('collectionIdProvider') public injectedCollectionId: string,
+    @Inject('sectionDataProvider') public injectedSectionData: SectionDataObject,
+    @Inject('submissionIdProvider') public injectedSubmissionId: string
+  ) {
+    super(
+      injectedCollectionId,
+      injectedSectionData,
+      injectedSubmissionId,
+    );
+  }
+
+  /**
+   * The data of this section.
+   */
+  get data(): WorkspaceitemSectionCcLicenseObject {
+    return this.sectionData.data as WorkspaceitemSectionCcLicenseObject;
+  }
+
+  /**
+   * Select a given Creative Commons license.
+   * @param ccLicense the Creative Commons license to select.
+   */
+  selectCcLicense(ccLicense: SubmissionCcLicence) {
+    if (!!this.getSelectedCcLicense() && this.getSelectedCcLicense().id === ccLicense.id) {
+      return;
+    }
+    this.setAccepted(false);
+    this.updateSectionData({
+      ccLicense: {
+        id: ccLicense.id,
+        fields: {},
+      },
+      uri: undefined,
+    });
+  }
+
+  /**
+   * Get the selected Creative Commons license.
+   */
+  getSelectedCcLicense(): SubmissionCcLicence {
+    if (!this.submissionCcLicenses || !this.data.ccLicense) {
+      return null;
+    }
+    return this.submissionCcLicenses.filter((ccLicense) => ccLicense.id === this.data.ccLicense.id)[0];
+  }
+
+  /**
+   * Select an option for a given license field.
+   * @param ccLicense   the related Creative Commons license.
+   * @param field       the field for which to select an option.
+   * @param option      the option to select.
+   */
+  selectOption(ccLicense: SubmissionCcLicence, field: Field, option: Option) {
+    if (this.isSelectedOption(ccLicense, field, option)) {
+      return;
+    }
+    this.updateSectionData({
+      ccLicense: {
+        id: ccLicense.id,
+        fields: Object.assign({}, this.data.ccLicense.fields, {
+          [field.id]: option
+        }),
+      },
+      accepted: false,
+    });
+  }
+
+  /**
+   * Get the selected option for a given license field.
+   * @param ccLicense   the related Creative Commons license.
+   * @param field       the field for which to get the selected option value.
+   */
+  getSelectedOption(ccLicense: SubmissionCcLicence, field: Field): Option {
+    return this.data.ccLicense.fields[field.id];
+  }
+
+  /**
+   * Whether a given option is selected for a given Creative Commons license field.
+   * @param ccLicense   the related Creative Commons license.
+   * @param field       the field for which to check whether the option is selected.
+   * @param option      the option for which to check whether it is selected.
+   */
+  isSelectedOption(ccLicense: SubmissionCcLicence, field: Field, option: Option): boolean {
+    return this.getSelectedOption(ccLicense, field) && this.getSelectedOption(ccLicense, field).id === option.id;
+  }
+
+  /**
+   * Get the link to the Creative Commons license corresponding with the selected options.
+   */
+  getCcLicenseLink$(): Observable<string> {
+
+    if (!!this.storedCcLicenseLink) {
+      return observableOf(this.storedCcLicenseLink);
+    }
+    if (!this.getSelectedCcLicense() || this.getSelectedCcLicense().fields.some(
+      (field) => !this.getSelectedOption(this.getSelectedCcLicense(), field))) {
+      return undefined;
+    }
+    const selectedCcLicense = this.getSelectedCcLicense();
+    return this.submissionCcLicenseUrlDataService.getCcLicenseLink(
+      selectedCcLicense,
+      new Map(selectedCcLicense.fields.map(
+        (field) => [field, this.getSelectedOption(selectedCcLicense, field)]
+      )),
+    );
+  }
+
+  /**
+   * Open a given info modal.
+   * @param content   the modal content.
+   */
+  openInfoModal(content) {
+    this.modalRef = this.modalService.open(content);
+  }
+
+  /**
+   * Close the info modal.
+   */
+  closeInfoModal() {
+    this.modalRef.close();
+  }
+
+  /**
+   * Get section status
+   *
+   * @return Observable<boolean>
+   *     the section status
+   */
+  getSectionStatus(): Observable<boolean> {
+    return observableOf(this.accepted);
+  }
+
+  /**
+   * Unsubscribe from all subscriptions
+   */
+  onSectionDestroy(): void {
+    this.subscriptions.forEach((subscription) => subscription.unsubscribe());
+  }
+
+  /**
+   * Initialize the section.
+   */
+  onSectionInit(): void {
+    this.pathCombiner = new JsonPatchOperationPathCombiner('sections', this.sectionData.id);
+    this.subscriptions.push(
+      this.sectionService.getSectionState(this.submissionId, this.sectionData.id).pipe(
+        filter((sectionState) => {
+          return isNotEmpty(sectionState) && (isNotEmpty(sectionState.data) || isNotEmpty(sectionState.errors))
+        }),
+        distinctUntilChanged(),
+        map((sectionState) => sectionState.data as WorkspaceitemSectionCcLicenseObject),
+      ).subscribe((data) => {
+        if (this.data.accepted !== data.accepted) {
+          const path = this.pathCombiner.getPath('uri');
+          if (data.accepted) {
+            this.getCcLicenseLink$().pipe(
+              take(1),
+            ).subscribe((link) => {
+              this.operationsBuilder.add(path, link.toString(), false, true);
+            });
+          } else if (!!this.data.uri) {
+            this.operationsBuilder.remove(path);
+          }
+        }
+        this.sectionData.data = data;
+      }),
+      this.submissionCcLicensesDataService.findAll({elementsPerPage: Number.MAX_SAFE_INTEGER}).pipe(
+        getSucceededRemoteData(),
+        getRemoteDataPayload(),
+        map((list) => list.page),
+      ).subscribe(
+        (licenses) => this.submissionCcLicenses = licenses
+      ),
+    );
+  }
+
+  /**
+   * Set the accepted state for the Creative Commons license.
+   * @param accepted  the accepted state for the cc license.
+   */
+  setAccepted(accepted: boolean) {
+    this.updateSectionData({
+      accepted
+    });
+    this.updateSectionStatus();
+  }
+
+  /**
+   * Update the section data for this section.
+   */
+  updateSectionData(data: WorkspaceitemSectionCcLicenseObject) {
+    this.sectionService.updateSectionData(this.submissionId, this.sectionData.id, Object.assign({}, this.data, data));
+  }
+}
diff --git a/src/app/submission/submission.module.ts b/src/app/submission/submission.module.ts
index 806258baa8..93bf06b193 100644
--- a/src/app/submission/submission.module.ts
+++ b/src/app/submission/submission.module.ts
@@ -28,7 +28,7 @@ import { SubmissionSectionUploadFileViewComponent } from './sections/upload/file
 import { SubmissionSectionUploadAccessConditionsComponent } from './sections/upload/accessConditions/submission-section-upload-access-conditions.component';
 import { SubmissionSubmitComponent } from './submit/submission-submit.component';
 import { storeModuleConfig } from '../app.reducer';
-import { CoreState } from '../core/core.reducers';
+import { SubmissionSectionCcLicensesComponent } from './sections/cc-license/submission-section-cc-licenses.component';
 
 @NgModule({
   imports: [
@@ -44,8 +44,8 @@ import { CoreState } from '../core/core.reducers';
     SubmissionSectionUploadComponent,
     SubmissionSectionformComponent,
     SubmissionSectionLicenseComponent,
+    SubmissionSectionCcLicensesComponent,
     SectionsDirective,
-    SubmissionSectionContainerComponent,
     SubmissionEditComponent,
     SubmissionFormSectionAddComponent,
     SubmissionFormCollectionComponent,
@@ -53,6 +53,7 @@ import { CoreState } from '../core/core.reducers';
     SubmissionFormFooterComponent,
     SubmissionSubmitComponent,
     SubmissionUploadFilesComponent,
+    SubmissionSectionContainerComponent,
     SubmissionSectionUploadFileComponent,
     SubmissionSectionUploadFileEditComponent,
     SubmissionSectionUploadFileViewComponent
@@ -61,7 +62,9 @@ import { CoreState } from '../core/core.reducers';
     SubmissionSectionUploadComponent,
     SubmissionSectionformComponent,
     SubmissionSectionLicenseComponent,
-    SubmissionSectionContainerComponent],
+    SubmissionSectionContainerComponent,
+    SubmissionSectionCcLicensesComponent,
+  ],
   exports: [
     SubmissionEditComponent,
     SubmissionFormComponent,
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 7121fd2580..7fb4a13bea 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -690,6 +690,28 @@
 
 
 
+  "collection.edit.template.add-button": "Add",
+
+  "collection.edit.template.breadcrumbs": "Item template",
+
+  "collection.edit.template.cancel": "Cancel",
+
+  "collection.edit.template.delete-button": "Delete",
+
+  "collection.edit.template.edit-button": "Edit",
+
+  "collection.edit.template.head": "Edit Template Item for Collection \"{{ collection }}\"",
+
+  "collection.edit.template.label": "Template item",
+
+  "collection.edit.template.notifications.delete.error": "Failed to delete the item template",
+
+  "collection.edit.template.notifications.delete.success": "Successfully deleted the item template",
+
+  "collection.edit.template.title": "Edit Template Item",
+
+
+
   "collection.form.abstract": "Short Description",
 
   "collection.form.description": "Introductory text (HTML)",
@@ -1232,6 +1254,8 @@
 
   "item.edit.metadata.edit.buttons.unedit": "Stop editing",
 
+  "item.edit.metadata.empty": "The item currently doesn't contain any metadata. Click Add to start adding a metadata value.",
+
   "item.edit.metadata.headers.edit": "Edit",
 
   "item.edit.metadata.headers.field": "Field",
@@ -1741,6 +1765,8 @@
 
   "menu.section.icon.pin": "Pin sidebar",
 
+  "menu.section.icon.processes": "Processes menu section",
+
   "menu.section.icon.registries": "Registries menu section",
 
   "menu.section.icon.statistics_task": "Statistics Task menu section",
@@ -1767,6 +1793,8 @@
 
   "menu.section.new_item_version": "Item Version",
 
+  "menu.section.new_process": "Process",
+
 
 
   "menu.section.pin": "Pin sidebar",
@@ -1775,6 +1803,10 @@
 
 
 
+  "menu.section.processes": "Processes",
+
+
+
   "menu.section.registries": "Registries",
 
   "menu.section.registries_format": "Format",
@@ -1963,6 +1995,93 @@
 
 
 
+  "process.new.select-parameters": "Parameters",
+
+  "process.new.cancel": "Cancel",
+
+  "process.new.submit": "Submit",
+
+  "process.new.select-script": "Script",
+
+  "process.new.select-script.placeholder": "Choose a script...",
+
+  "process.new.select-script.required": "Script is required",
+
+  "process.new.parameter.file.upload-button": "Select file...",
+
+  "process.new.parameter.file.required": "Please select a file",
+
+  "process.new.parameter.string.required": "Parameter value is required",
+
+  "process.new.parameter.type.value": "value",
+
+  "process.new.parameter.type.file": "file",
+
+  "process.new.parameter.required.missing": "The following parameters are required but still missing:",
+
+  "process.new.notification.success.title": "Success",
+
+  "process.new.notification.success.content": "The process was successfully created",
+
+  "process.new.notification.error.title": "Error",
+
+  "process.new.notification.error.content": "An error occurred while creating this process",
+
+  "process.new.header": "Create a new process",
+
+  "process.new.title": "Create a new process",
+
+  "process.new.breadcrumbs": "Create a new process",
+
+
+
+  "process.detail.arguments" : "Arguments",
+
+  "process.detail.arguments.empty" : "This process doesn't contain any arguments",
+
+  "process.detail.back" : "Back",
+
+  "process.detail.output" : "Process Output",
+
+  "process.detail.output.alert" : "Work in progress - Process output is not available yet",
+
+  "process.detail.output-files" : "Output Files",
+
+  "process.detail.output-files.empty" : "This process doesn't contain any output files",
+
+  "process.detail.script" : "Script",
+
+  "process.detail.title" : "Process: {{ id }} - {{ name }}",
+
+  "process.detail.start-time" : "Start time",
+
+  "process.detail.end-time" : "Finish time",
+
+  "process.detail.status" : "Status",
+
+  "process.detail.create" : "Create similar process",
+
+
+
+  "process.overview.table.finish" : "Finish time",
+
+  "process.overview.table.id" : "Process ID",
+
+  "process.overview.table.name" : "Name",
+
+  "process.overview.table.start" : "Start time",
+
+  "process.overview.table.status" : "Status",
+
+  "process.overview.table.user" : "User",
+
+  "process.overview.title": "Processes Overview",
+
+  "process.overview.breadcrumbs": "Processes Overview",
+
+  "process.overview.new": "New",
+
+
   "profile.breadcrumbs": "Update Profile",
 
   "profile.card.identify": "Identify",
@@ -2681,6 +2800,20 @@
 
   "submission.sections.describe.relationship-lookup.name-variant.notification.decline": "Use only for this submission",
 
+  "submission.sections.ccLicense.type": "License Type",
+
+  "submission.sections.ccLicense.select": "Select a license type…",
+
+  "submission.sections.ccLicense.change": "Change your license type…",
+
+  "submission.sections.ccLicense.none": "No licenses available",
+
+  "submission.sections.ccLicense.option.select": "Select an option…",
+
+  "submission.sections.ccLicense.link": "You’ve selected the following license:",
+
+  "submission.sections.ccLicense.confirmation": "I grant the license above",
+
   "submission.sections.general.add-more": "Add more",
 
   "submission.sections.general.collection": "Collection",
@@ -2711,7 +2844,7 @@
 
 
 
-  "submission.sections.submit.progressbar.cclicense": "Creative commons license",
+  "submission.sections.submit.progressbar.CClicense": "Creative commons license",
 
   "submission.sections.submit.progressbar.describe.recycle": "Recycle",
 
diff --git a/src/main.browser.ts b/src/main.browser.ts
index 783f6d7d06..5149014d88 100644
--- a/src/main.browser.ts
+++ b/src/main.browser.ts
@@ -50,3 +50,5 @@ if (hasValue(environment.universal) && environment.universal.preboot === false)
 } else {
   document.addEventListener('DOMContentLoaded', () => bootloader(main));
 }
+
+import 'zone.js/dist/zone';
diff --git a/yarn.lock b/yarn.lock
index 12346a8e51..c48e53a226 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6813,10 +6813,12 @@ ng-mocks@^8.1.0:
   resolved "https://registry.yarnpkg.com/ng-mocks/-/ng-mocks-8.1.0.tgz#d00a5e53ae53587f35c68147826590fab71a1658"
   integrity sha512-/314nyU6UrONCUKfvFRuJPLpNBxqocwJmQBlPy4he5Vueu6gObXjy+KLUlbbENuA7zTeBjp//RA6w/Fa1yQ4Fw==
 
-ng2-file-upload@1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/ng2-file-upload/-/ng2-file-upload-1.2.1.tgz#5563c5dfd6f43fbfbe815c206e343464a0a6a197"
-  integrity sha1-VWPF39b0P7++gVwgbjQ0ZKCmoZc=
+ng2-file-upload@1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/ng2-file-upload/-/ng2-file-upload-1.4.0.tgz#8dea28d573234c52af474ad2a4001b335271e5c4"
+  integrity sha512-3J/KPU/tyh/ad6TFeUbrxX+SihUj0iOEt2Zsg4EX7mB3GFiQscXOfcUOxCkBtPWWWaqt3azrYbVGzsYa3/7NzQ==
+  dependencies:
+    tslib "^1.9.0"
 
 ng2-nouislider@^1.8.2:
   version "1.8.2"
@@ -10958,9 +10960,9 @@ websocket-driver@>=0.5.1:
     websocket-extensions ">=0.1.1"
 
 websocket-extensions@>=0.1.1:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
-  integrity sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
+  integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
 
 when@~3.6.x:
   version "3.6.4"