UI improved.

src/Squidex/app/features/rules/pages/rules/rule-wizard.component.html

@@ -63,7 +63,7 @@
     
         <ng-container *ngIf="step === 4">
             <form [formGroup]="actionForm.form" (ngSubmit)="saveAction()">
-                    <h3 class="wizard-title">{{ruleActions[actionType].display}}</h3>
+                <h3 class="wizard-title">{{ruleActions[actionType].display}}</h3>
 
                 <ng-container [ngSwitch]="actionType">
                     <ng-container *ngSwitchCase="'Algolia'">

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

@@ -32,6 +32,7 @@ export * from './pages/schema/field.component';
 export * from './pages/schema/field-wizard.component';
 export * from './pages/schema/schema-edit-form.component';
 export * from './pages/schema/schema-page.component';
+export * from './pages/schema/schema-preview-urls-form.component';
 export * from './pages/schema/schema-scripts-form.component';
 
 export * from './pages/schemas/schema-form.component';

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

@@ -39,6 +39,7 @@ import {
     SchemaEditFormComponent,
     SchemaFormComponent,
     SchemaPageComponent,
+    SchemaPreviewUrlsFormComponent,
     SchemaScriptsFormComponent,
     SchemasPageComponent,
     StringUIComponent,
@@ -102,6 +103,7 @@ const routes: Routes = [
         SchemaEditFormComponent,
         SchemaFormComponent,
         SchemaPageComponent,
+        SchemaPreviewUrlsFormComponent,
         SchemaScriptsFormComponent,
         SchemasPageComponent,
         StringUIComponent,

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

@@ -25,12 +25,19 @@
             </button>
             <div class="dropdown-menu" *sqxModalView="editOptionsDropdown" [sqxModalTarget]="buttonOptions" @fade>
                 <a class="dropdown-item" (click)="configureScriptsDialog.show()">
-                    Scripts
+                    Edit Scripts
                 </a>
+                <a class="dropdown-item" (click)="configurePreviewUrlsDialog.show()">
+                    Edit Preview Urls
+                </a>
+                
+                <div class="dropdown-divider"></div>
 
                 <a class="dropdown-item" (click)="cloneSchema()">
                     Clone
                 </a>
+                
+                <div class="dropdown-divider"></div>
 
                 <a class="dropdown-item dropdown-item-delete" 
                     (sqxConfirmClick)="deleteSchema()" 
@@ -101,6 +108,12 @@
     </sqx-schema-scripts-form>
 </ng-container>
 
+<ng-container *sqxModalView="configurePreviewUrlsDialog;onRoot:true">
+    <sqx-schema-preview-urls-form [schema]="schema"
+        (completed)="configurePreviewUrlsDialog.hide()">
+    </sqx-schema-preview-urls-form>
+</ng-container>
+
 <ng-container *sqxModalView="exportSchemaDialog;onRoot:true">
     <sqx-modal-dialog (closed)="exportSchemaDialog.hide()" large="true">
         <ng-container title>

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

@@ -49,6 +49,7 @@ export class SchemaPageComponent implements OnDestroy, OnInit {
     public exportSchemaDialog = new DialogModel();
 
     public configureScriptsDialog = new DialogModel();
+    public configurePreviewUrlsDialog = new DialogModel();
 
     public editOptionsDropdown = new ModalModel();
     public editSchemaDialog = new DialogModel();

src/Squidex/app/features/schemas/pages/schema/schema-preview-urls-form.component.html

@@ -0,0 +1,65 @@
+<form [formGroup]="editForm.form" (ngSubmit)="saveSchema()">
+    <sqx-modal-dialog (closed)="complete()" large="true">
+        <ng-container title>
+            Preview Urls
+        </ng-container>
+
+        <ng-container content>
+            <h3 class="wizard-title">Preview Urls define where the content is used</h3>
+
+            <div class="content">
+                <div class="form-group row no-gutters" *ngFor="let form of editForm.form.controls; let i = index">
+                    <div class="col pr-1">
+                        <sqx-control-errors [for]="form.get('name')" fieldName="Name" [submitted]="editForm.submitted | async"></sqx-control-errors>
+    
+                        <input type="text" class="form-control" maxlength="1000" [formControl]="form.get('name')" placeholder="Name, e.g. Web, Mobile" />
+                    </div>
+    
+                    <div class="col pr-1">
+                        <sqx-control-errors [for]="form.get('url')" fieldName="Url" [submitted]="editForm.submitted | async"></sqx-control-errors>
+    
+                        <input type="text" class="form-control" maxlength="1000" [formControl]="form.get('url')" placeholder="Url" />
+                    </div>
+
+                    <div class="col-auto col-options">
+                        <button type="button" class="btn btn-link btn-delete btn-danger"
+                            (sqxConfirmClick)="editForm.remove(i)"
+                            confirmTitle="Remove url" 
+                            confirmText="Do you really want to remove this url?">
+                            <i class="icon-bin2"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="form-group row no-gutters" [formGroup]="addForm.form">
+                    <div class="col pr-1">
+                        <sqx-control-errors for="name" fieldName="Name" [submitted]="addForm.submitted | async"></sqx-control-errors>
+
+                        <input type="text" class="form-control" maxlength="1000" formControlName="name" placeholder="Name, e.g. Web, Mobile" />
+                    </div>
+
+                    <div class="col pr-1">
+                        <sqx-control-errors for="url" fieldName="Url" [submitted]="addForm.submitted | async"></sqx-control-errors>
+
+                        <input type="text" class="form-control" maxlength="1000" formControlName="url" placeholder="Url" />
+                    </div>
+
+                    <div class="col-auto col-options">
+                        <button type="button" class="btn btn-success" (click)="add()">
+                            <i class="icon-add"></i>
+                        </button>
+
+                        <button type="button" class="btn btn-link btn-secondary" (click)="cancelAdd()">
+                            <i class="icon-close"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </ng-container>
+
+        <ng-container footer>
+            <button type="reset" class="float-left btn btn-secondary" (click)="complete()" [disabled]="editForm.submitted | async">Cancel</button>
+            <button type="submit" class="float-right btn btn-primary">Save</button>
+        </ng-container>
+    </sqx-modal-dialog>
+</form>

src/Squidex/app/features/schemas/pages/schema/schema-preview-urls-form.component.scss

@@ -0,0 +1,23 @@
+@import '_vars';
+@import '_mixins';
+
+.content {
+    min-height: 200px;
+}
+
+.col-options {
+    min-width: 6rem;
+}
+
+.btn-delete {
+    margin-left: 42px;
+}
+
+.wizard-title {
+    background: $color-border;
+    margin: -1rem;
+    margin-bottom: 1rem;
+    font-weight: 400;
+    font-size: 1.05rem;
+    padding: 1rem;
+}

src/Squidex/app/features/schemas/pages/schema/schema-preview-urls-form.component.ts

@@ -0,0 +1,74 @@
+/*
+ * Squidex Headless CMS
+ *
+ * @license
+ * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
+ */
+
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+
+import {
+    AddPreviewUrlForm,
+    ConfigurePreviewUrlsForm,
+    SchemaDetailsDto,
+    SchemasState
+} from '@app/shared';
+
+@Component({
+    selector: 'sqx-schema-preview-urls-form',
+    styleUrls: ['./schema-preview-urls-form.component.scss'],
+    templateUrl: './schema-preview-urls-form.component.html'
+})
+export class SchemaPreviewUrlsFormComponent implements OnInit {
+    @Output()
+    public completed = new EventEmitter();
+
+    @Input()
+    public schema: SchemaDetailsDto;
+
+    public addForm = new AddPreviewUrlForm(this.formBuilder);
+
+    public editForm = new ConfigurePreviewUrlsForm(this.formBuilder);
+
+    constructor(
+        private readonly formBuilder: FormBuilder,
+        private readonly schemasState: SchemasState
+    ) {
+    }
+
+    public ngOnInit() {
+        this.editForm.load(this.schema.previewUrls);
+    }
+
+    public complete() {
+        this.completed.emit();
+    }
+
+    public cancelAdd() {
+        this.addForm.submitCompleted({});
+    }
+
+    public add() {
+        const value = this.addForm.submit();
+
+        if (value) {
+            this.editForm.add(value);
+
+            this.addForm.submitCompleted({});
+        }
+    }
+
+    public saveSchema() {
+        const value = this.editForm.submit();
+
+        if (value) {
+            this.schemasState.configurePreviewUrls(this.schema, value)
+                .subscribe(() => {
+                    this.complete();
+                }, error => {
+                    this.editForm.submitFailed(error);
+                });
+        }
+    }
+}

src/Squidex/app/features/settings/pages/patterns/pattern.component.html

@@ -7,7 +7,7 @@
             
         </div>
 
-        <div class="col pl-2 pr-2">
+        <div class="col pl-1 pr-1">
             <sqx-control-errors for="pattern" [submitted]="editForm.submitted | async"></sqx-control-errors>
 
             <input type="text" class="form-control" id="pattern-pattern" maxlength="1000" formControlName="pattern" placeholder="Pattern" />
@@ -19,7 +19,7 @@
             <input type="text" class="form-control" id="pattern-message" maxlength="1000" formControlName="message" placeholder="Message" />
         </div>
 
-        <div class="col-auto pl-2 col-options" *ngIf="pattern">
+        <div class="col-auto pl-1 col-options" *ngIf="pattern">
             <button type="submit" class="btn btn-primary" [class.disabled]="!editForm.form.dirty">
                 <i class="icon-checkmark"></i>
             </button>
@@ -32,7 +32,7 @@
             </button>
         </div>
         
-        <div class="col-auto pl-2 col-options" *ngIf="!pattern">
+        <div class="col-auto pl-1 col-options" *ngIf="!pattern">
             <button type="submit" class="btn btn-success">
                 <i class="icon-add"></i>
             </button>

src/Squidex/app/shared/state/schemas.forms.ts

@@ -5,10 +5,14 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { map, startWith } from 'rxjs/operators';
 
-import { Form, ValidatorsEx } from '@app/framework';
+import {
+    Form,
+    Types,
+    ValidatorsEx
+} from '@app/framework';
 
 import { createProperties } from './../services/schemas.types';
 
@@ -42,6 +46,93 @@ export class CreateSchemaForm extends Form<FormGroup> {
     }
 }
 
+export class AddPreviewUrlForm extends Form<FormGroup> {
+    constructor(formBuilder: FormBuilder) {
+        super(formBuilder.group({
+            name: ['',
+                [
+                    Validators.required
+                ]
+            ],
+            url: ['',
+                [
+                    Validators.required
+                ]
+            ]
+        }));
+    }
+}
+
+export class ConfigurePreviewUrlsForm extends Form<FormArray> {
+    constructor(
+        private readonly formBuilder: FormBuilder
+    ) {
+        super(formBuilder.array([]));
+    }
+
+    public add(value: any) {
+        this.form.push(
+            this.formBuilder.group({
+                name: [value.name,
+                    [
+                        Validators.required
+                    ]
+                ],
+                url: [value.url,
+                    [
+                        Validators.required
+                    ]
+                ]
+            }));
+    }
+
+    public remove(index: number) {
+        this.form.removeAt(index);
+    }
+
+    public load(value?: any) {
+        if (Types.isObject(value)) {
+            const length = Object.keys(value).length;
+
+            while (this.form.controls.length < length) {
+                this.add({});
+            }
+
+            while (this.form.controls.length > length) {
+                this.remove(this.form.controls.length - 1);
+            }
+
+            const array: any[] = [];
+
+            for (let key in value) {
+                if (value.hasOwnProperty(key)) {
+                    array.push({ name: key, url: value[key] });
+                }
+            }
+
+            value = array;
+        }
+
+        super.load(value);
+    }
+
+    public submit() {
+        let result = super.submit();
+
+        if (result) {
+            const hash: { [name: string]: string } = {};
+
+            for (let item of result) {
+                hash[item.name] = item.url;
+            }
+
+            result = hash;
+        }
+
+        return result;
+    }
+}
+
 export class EditScriptsForm extends Form<FormGroup> {
     constructor(formBuilder: FormBuilder) {
         super(formBuilder.group({