Some progress

src/Squidex/app/features/schemas/declarations.ts

@@ -17,6 +17,8 @@ export * from './pages/schema/types/json-ui.component';
 export * from './pages/schema/types/json-validation.component';
 export * from './pages/schema/types/number-ui.component';
 export * from './pages/schema/types/number-validation.component';
+export * from './pages/schema/types/references-ui.component';
+export * from './pages/schema/types/references-validation.component';
 export * from './pages/schema/types/string-ui.component';
 export * from './pages/schema/types/string-validation.component';
 export * from './pages/schema/field.component';

src/Squidex/app/features/schemas/module.ts

@@ -33,6 +33,8 @@ import {
     JsonValidationComponent,
     NumberUIComponent,
     NumberValidationComponent,
+    ReferencesUIComponent,
+    ReferencesValidationComponent,
     SchemaEditFormComponent,
     SchemaFormComponent,
     SchemaPageComponent,
@@ -96,6 +98,8 @@ const routes: Routes = [
         JsonValidationComponent,
         NumberUIComponent,
         NumberValidationComponent,
+        ReferencesUIComponent,
+        ReferencesValidationComponent,
         SchemaEditFormComponent,
         SchemaFormComponent,
         SchemaPageComponent,

src/Squidex/app/features/schemas/pages/schema/field.component.html

@@ -146,6 +146,9 @@
                     <div *ngSwitchCase="'Assets'">
                         <sqx-assets-validation [editForm]="editForm" [properties]="field.properties"></sqx-assets-validation>
                     </div>
+                    <div *ngSwitchCase="'References'">
+                        <sqx-references-validation [editForm]="editForm" [properties]="field.properties"></sqx-references-validation>
+                    </div>
                 </div>
             </div>
 
@@ -172,6 +175,9 @@
                     <div *ngSwitchCase="'Assets'">
                         <sqx-assets-ui [editForm]="editForm" [properties]="field.properties"></sqx-assets-ui>
                     </div>
+                    <div *ngSwitchCase="'References'">
+                        <sqx-references-ui [editForm]="editForm" [properties]="field.properties" [schemas]="schemas"></sqx-references-ui>
+                    </div>
                 </div>
             </div>
         </form> 

src/Squidex/app/features/schemas/pages/schema/field.component.ts

@@ -12,7 +12,8 @@ import {
     createProperties,
     fadeAnimation,
     FieldDto,
-    ModalView
+    ModalView,
+    SchemaDto
 } from 'shared';
 
 @Component({
@@ -29,6 +30,9 @@ export class FieldComponent implements OnInit {
     @Input()
     public field: FieldDto;
 
+    @Input()
+    public schemas: SchemaDto[];
+
     @Output()
     public hiding = new EventEmitter<FieldDto>();
 

src/Squidex/app/features/schemas/pages/schema/schema-page.component.html

@@ -42,7 +42,7 @@
     <div class="panel-main">
         <div class="panel-content panel-content-scroll" dnd-sortable-container [sortableData]="schemaFields.mutableValues">
             <div *ngFor="let field of schemaFields; let i = index" dnd-sortable [sortableIndex]="i" (sorted)="sortFields($event)">
-                <sqx-field [field]="field"
+                <sqx-field [field]="field" [schemas]="schemas"
                     (disabling)="disableField(field)"
                     (deleting)="deleteField(field)"
                     (enabling)="enableField(field)"

src/Squidex/app/features/schemas/pages/schema/schema-page.component.ts

@@ -22,6 +22,7 @@ import {
     ModalView,
     NotificationService,
     SchemaDetailsDto,
+    SchemaDto,
     SchemaPropertiesDto,
     SchemasService,
     UpdateFieldDto,
@@ -47,6 +48,7 @@ export class SchemaPageComponent extends AppComponentBase implements OnInit {
         'Geolocation',
         'Json',
         'Number',
+        'References',
         'String'
     ];
 
@@ -56,6 +58,7 @@ export class SchemaPageComponent extends AppComponentBase implements OnInit {
     public schemaVersion = new Version('');
     public schemaProperties: SchemaPropertiesDto;
     public schemaInformation: any;
+    public schemas: SchemaDto[];
 
     public confirmDeleteDialog = new ModalView();
 
@@ -108,6 +111,18 @@ export class SchemaPageComponent extends AppComponentBase implements OnInit {
 
                 this.export();
             });
+
+        this.load();
+    }
+
+    private load() {
+        this.appNameOnce()
+            .switchMap(app => this.schemasService.getSchemas(app))
+            .subscribe(dtos => {
+                this.schemas = dtos;
+            }, error => {
+                this.notifyError(error);
+            });
     }
 
     public publish() {

src/Squidex/app/features/schemas/pages/schema/types/references-ui.component.html

@@ -0,0 +1,3 @@
+<div [formGroup]="editForm">
+    <span>Nothing to setup</span>    
+<div>

src/Squidex/app/features/schemas/pages/schema/types/references-ui.component.scss

@@ -0,0 +1,2 @@
+@import '_vars';
+@import '_mixins';

src/Squidex/app/features/schemas/pages/schema/types/references-ui.component.ts

@@ -0,0 +1,28 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Sebastian Stehle. All rights reserved
+ */
+
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { ReferencesFieldPropertiesDto, SchemaDto } from 'shared';
+
+@Component({
+    selector: 'sqx-references-ui',
+    styleUrls: ['references-ui.component.scss'],
+    templateUrl: 'references-ui.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ReferencesUIComponent {
+    @Input()
+    public editForm: FormGroup;
+
+    @Input()
+    public properties: ReferencesFieldPropertiesDto;
+
+    @Input()
+    public schems: SchemaDto[];
+}

src/Squidex/app/features/schemas/pages/schema/types/references-validation.component.html

@@ -0,0 +1,9 @@
+<div [formGroup]="editForm">
+    <div class="form-group row">
+        <label class="col col-3 col-form-checkbox-label" for="field-required">Required</label>
+
+        <div class="col col-6">
+            <input type="checkbox" class="form-check-input" id="field-required" formControlName="isRequired" />
+        </div>
+    </div>
+</div>

src/Squidex/app/features/schemas/pages/schema/types/references-validation.component.scss

@@ -0,0 +1,10 @@
+@import '_vars';
+@import '_mixins';
+
+.form-check-input {
+    margin: 0;
+}
+
+.form-group {
+    margin-top: .5rem;
+}

src/Squidex/app/features/schemas/pages/schema/types/references-validation.component.ts

@@ -0,0 +1,25 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Sebastian Stehle. All rights reserved
+ */
+
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+import { ReferencesFieldPropertiesDto } from 'shared';
+
+@Component({
+    selector: 'sqx-references-validation',
+    styleUrls: ['references-validation.component.scss'],
+    templateUrl: 'references-validation.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ReferencesValidationComponent {
+    @Input()
+    public editForm: FormGroup;
+
+    @Input()
+    public properties: ReferencesFieldPropertiesDto;
+}

src/Squidex/app/shared/services/schemas.service.ts

@@ -41,6 +41,9 @@ export function createProperties(fieldType: string, values: Object | null = null
         case 'Json':
             properties = new JsonFieldPropertiesDto(null, null, null, false, false);
             break;
+        case 'References':
+            properties = new ReferencesFieldPropertiesDto(null, null, null, false, false);
+            break;
         case 'Assets':
             properties = new AssetsFieldPropertiesDto(null, null, null, false, false);
             break;
@@ -175,6 +178,16 @@ export class GeolocationFieldPropertiesDto extends FieldPropertiesDto {
     }
 }
 
+export class ReferencesFieldPropertiesDto extends FieldPropertiesDto {
+    constructor(label: string | null, hints: string | null, placeholder: string | null,
+        isRequired: boolean,
+        isListField: boolean,
+        public readonly schemaId?: string
+    ) {
+        super('References', label, hints, placeholder, isRequired, isListField);
+    }
+}
+
 export class AssetsFieldPropertiesDto extends FieldPropertiesDto {
     constructor(label: string | null, hints: string | null, placeholder: string | null,
         isRequired: boolean,