diff --git a/ui/src/app/metadata/domain/component/preview-dialog.component.spec.ts b/ui/src/app/metadata/domain/component/preview-dialog.component.spec.ts
new file mode 100644
index 000000000..d08b873ba
--- /dev/null
+++ b/ui/src/app/metadata/domain/component/preview-dialog.component.spec.ts
@@ -0,0 +1,46 @@
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { ViewChild, Component } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { PreviewDialogComponent } from './preview-dialog.component';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { NgbActiveModalStub } from '../../../../testing/modal.stub';
+
+@Component({
+    template: ``
+})
+class TestHostComponent {
+    @ViewChild(PreviewDialogComponent)
+    public formUnderTest: PreviewDialogComponent;
+}
+
+
+describe('Advanced Info Form Component', () => {
+    let fixture: ComponentFixture;
+    let instance: TestHostComponent;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            providers: [
+                { provide: NgbActiveModal, useClass: NgbActiveModalStub }
+            ],
+            imports: [
+                NoopAnimationsModule,
+                ReactiveFormsModule
+            ],
+            declarations: [
+                PreviewDialogComponent,
+                TestHostComponent
+            ],
+        });
+
+        fixture = TestBed.createComponent(TestHostComponent);
+        instance = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should compile', () => {
+        expect(fixture).toBeDefined();
+    });
+});
diff --git a/ui/src/app/metadata/domain/model/metadata-order.ts b/ui/src/app/metadata/domain/model/metadata-order.ts
new file mode 100644
index 000000000..b365af3b0
--- /dev/null
+++ b/ui/src/app/metadata/domain/model/metadata-order.ts
@@ -0,0 +1,3 @@
+export interface ProviderOrder {
+    resourceIds: string[];
+}
diff --git a/ui/src/app/metadata/domain/service/provider.service.ts b/ui/src/app/metadata/domain/service/provider.service.ts
index 39258be42..3d83d3c55 100644
--- a/ui/src/app/metadata/domain/service/provider.service.ts
+++ b/ui/src/app/metadata/domain/service/provider.service.ts
@@ -4,11 +4,13 @@ import { Observable } from 'rxjs';
 
 import { MetadataProvider } from '../../domain/model';
 import { FileBackedHttpMetadataProvider } from '../model/providers';
+import { ProviderOrder } from '../model/metadata-order';
 
 @Injectable()
 export class MetadataProviderService {
 
     readonly endpoint = '/MetadataResolvers';
+    readonly order = '/MetadataResolversPositionOrder';
     readonly base = '/api';
 
     constructor(
@@ -29,4 +31,12 @@ export class MetadataProviderService {
     save(provider: MetadataProvider): Observable {
         return this.http.post(`${this.base}${this.endpoint}`, provider);
     }
+
+    getOrder(): Observable {
+        return this.http.get(`${this.base}${this.order}`);
+    }
+
+    setOrder(order: ProviderOrder): Observable {
+        return this.http.post(`${this.base}${this.order}`, order);
+    }
 }
diff --git a/ui/src/app/metadata/manager/component/provider-item.component.html b/ui/src/app/metadata/manager/component/provider-item.component.html
index f8441c696..1ca8f575b 100644
--- a/ui/src/app/metadata/manager/component/provider-item.component.html
+++ b/ui/src/app/metadata/manager/component/provider-item.component.html
@@ -2,11 +2,11 @@