diff --git a/src/app/admin/admin-ldn-services/admin-ldn-services-routing.module.ts b/src/app/admin/admin-ldn-services/admin-ldn-services-routing.module.ts
index 43dc4f34624..282ca430a23 100644
--- a/src/app/admin/admin-ldn-services/admin-ldn-services-routing.module.ts
+++ b/src/app/admin/admin-ldn-services/admin-ldn-services-routing.module.ts
@@ -1,34 +1,34 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { I18nBreadcrumbResolver } from 'src/app/core/breadcrumbs/i18n-breadcrumb.resolver';
-import { LdnServicesOverviewComponent } from './ldn-services-directory/ldn-services-directory.component';
-import { LdnServiceNewComponent } from './ldn-service-new/ldn-service-new.component';
-import { LdnServiceFormEditComponent } from './ldn-service-form-edit/ldn-service-form-edit.component';
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {I18nBreadcrumbResolver} from 'src/app/core/breadcrumbs/i18n-breadcrumb.resolver';
+import {LdnServicesOverviewComponent} from './ldn-services-directory/ldn-services-directory.component';
+import {LdnServiceNewComponent} from './ldn-service-new/ldn-service-new.component';
+import {LdnServiceFormEditComponent} from './ldn-service-form-edit/ldn-service-form-edit.component';
 
 @NgModule({
-    imports: [
-        RouterModule.forChild([
-            {
-                path: '',
-                pathMatch: 'full',
-                component: LdnServicesOverviewComponent,
-                resolve: {breadcrumb: I18nBreadcrumbResolver},
-                data: {title: 'ldn-registered-services.title', breadcrumbKey: 'ldn-registered-services.new'},
-            },
-            {
-                path: 'new',
-                resolve: {breadcrumb: I18nBreadcrumbResolver},
-                component: LdnServiceNewComponent,
-                data: {title: 'ldn-register-new-service.title', breadcrumbKey: 'ldn-register-new-service'}
-            },
-            {
-                path: 'edit/:serviceId',
-                resolve: {breadcrumb: I18nBreadcrumbResolver},
-                component: LdnServiceFormEditComponent,
-                data: {title: 'ldn-edit-service.title', breadcrumbKey: 'ldn-edit-service'}
-            },
-        ]),
-    ]
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        pathMatch: 'full',
+        component: LdnServicesOverviewComponent,
+        resolve: {breadcrumb: I18nBreadcrumbResolver},
+        data: {title: 'ldn-registered-services.title', breadcrumbKey: 'ldn-registered-services.new'},
+      },
+      {
+        path: 'new',
+        resolve: {breadcrumb: I18nBreadcrumbResolver},
+        component: LdnServiceNewComponent,
+        data: {title: 'ldn-register-new-service.title', breadcrumbKey: 'ldn-register-new-service'}
+      },
+      {
+        path: 'edit/:serviceId',
+        resolve: {breadcrumb: I18nBreadcrumbResolver},
+        component: LdnServiceFormEditComponent,
+        data: {title: 'ldn-edit-service.title', breadcrumbKey: 'ldn-edit-service'}
+      },
+    ]),
+  ]
 })
 export class AdminLdnServicesRoutingModule {
 
diff --git a/src/app/admin/admin-ldn-services/admin-ldn-services.module.ts b/src/app/admin/admin-ldn-services/admin-ldn-services.module.ts
index 9ca3775a9ea..48ad89fdccc 100644
--- a/src/app/admin/admin-ldn-services/admin-ldn-services.module.ts
+++ b/src/app/admin/admin-ldn-services/admin-ldn-services.module.ts
@@ -1,29 +1,29 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { AdminLdnServicesRoutingModule } from './admin-ldn-services-routing.module';
-import { LdnServicesOverviewComponent } from './ldn-services-directory/ldn-services-directory.component';
-import { SharedModule } from '../../shared/shared.module';
-import { LdnServiceNewComponent } from './ldn-service-new/ldn-service-new.component';
-import { LdnServiceFormComponent } from './ldn-service-form/ldn-service-form.component';
-import { LdnServiceFormEditComponent } from './ldn-service-form-edit/ldn-service-form-edit.component';
-import { FormsModule } from '@angular/forms';
-import { LdnItemfiltersService } from './ldn-services-data/ldn-itemfilters-data.service';
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {AdminLdnServicesRoutingModule} from './admin-ldn-services-routing.module';
+import {LdnServicesOverviewComponent} from './ldn-services-directory/ldn-services-directory.component';
+import {SharedModule} from '../../shared/shared.module';
+import {LdnServiceNewComponent} from './ldn-service-new/ldn-service-new.component';
+import {LdnServiceFormComponent} from './ldn-service-form/ldn-service-form.component';
+import {LdnServiceFormEditComponent} from './ldn-service-form-edit/ldn-service-form-edit.component';
+import {FormsModule} from '@angular/forms';
+import {LdnItemfiltersService} from './ldn-services-data/ldn-itemfilters-data.service';
 
 
 @NgModule({
-    imports: [
-        CommonModule,
-        SharedModule,
-        AdminLdnServicesRoutingModule,
-        FormsModule
-    ],
-    declarations: [
-        LdnServicesOverviewComponent,
-        LdnServiceNewComponent,
-        LdnServiceFormComponent,
-        LdnServiceFormEditComponent,
-    ],
-    providers: [LdnItemfiltersService]
+  imports: [
+    CommonModule,
+    SharedModule,
+    AdminLdnServicesRoutingModule,
+    FormsModule
+  ],
+  declarations: [
+    LdnServicesOverviewComponent,
+    LdnServiceNewComponent,
+    LdnServiceFormComponent,
+    LdnServiceFormEditComponent,
+  ],
+  providers: [LdnItemfiltersService]
 })
 export class AdminLdnServicesModule {
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.html b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.html
index 67eada6b7be..794923b42f8 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.html
+++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.html
@@ -13,11 +13,13 @@ <h2 class="flex-grow-1">{{ 'ldn-edit-registered-service.title' | translate }}</h
         </div>
       </div>
     </div>
-
+    <!-- In the Name section -->
     <div class="mb-5">
       <label for="name">{{ 'ldn-new-service.form.label.name' | translate }}</label>
       <input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
-             [placeholder]="'ldn-new-service.form.placeholder.name' | translate" formControlName="name" id="name"
+             [placeholder]="'ldn-new-service.form.placeholder.name' | translate" class="form-control"
+             formControlName="name"
+             id="name"
              name="name"
              type="text">
       <div *ngIf="formModel.get('name').invalid && formModel.get('name').touched" class="error-text">
@@ -29,14 +31,16 @@ <h2 class="flex-grow-1">{{ 'ldn-edit-registered-service.title' | translate }}</h
     <div class="mb-5 mt-5 d-flex flex-column">
       <label for="description">{{ 'ldn-new-service.form.label.description' | translate }}</label>
       <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
-                formControlName="description" id="description" name="description"></textarea>
+                class="form-control" formControlName="description" id="description" name="description"></textarea>
     </div>
 
     <!-- In the url section -->
     <div class="mb-5 mt-5">
       <label for="url">{{ 'ldn-new-service.form.label.url' | translate }}</label>
       <input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
-             [placeholder]="'ldn-new-service.form.placeholder.url' | translate" formControlName="url" id="url"
+             [placeholder]="'ldn-new-service.form.placeholder.url' | translate" class="form-control"
+             formControlName="url"
+             id="url"
              name="url"
              type="text">
       <div *ngIf="formModel.get('url').invalid && formModel.get('url').touched" class="error-text">
@@ -44,12 +48,12 @@ <h2 class="flex-grow-1">{{ 'ldn-edit-registered-service.title' | translate }}</h
       </div>
     </div>
 
-
     <!-- In the ldnUrl section -->
     <div class="mb-5 mt-5">
       <label for="ldnUrl">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
       <input [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
-             [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" formControlName="ldnUrl"
+             [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" class="form-control"
+             formControlName="ldnUrl"
              id="ldnUrl"
              name="ldnUrl"
              type="text">
@@ -71,21 +75,24 @@ <h2 class="flex-grow-1">{{ 'ldn-edit-registered-service.title' | translate }}</h
       </div>
     </div>
 
-
+    <!-- In the Inbound Patterns Labels section -->
     <div class="row mb-1 mt-5">
       <div class="col">
         <label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
       </div>
-      <div class="col">
-        <label class="label-box">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
-      </div>
-      <div class="col-sm1 ">
-        <label class="label-box-2">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
-      </div>
+      <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][0]?.value?.pattern)">
+        <div class="col">
+          <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+        </div>
+        <div class="col-sm-1">
+          <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
+        </div>
+      </ng-container>
       <div class="col-sm-2">
       </div>
     </div>
 
+    <!-- In the Inbound Patterns section -->
     <div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index"
          [class.marked-for-deletion]="markedForDeletionInboundPattern.includes(i)"
          formGroupName="notifyServiceInboundPatterns">
@@ -95,25 +102,80 @@ <h2 class="flex-grow-1">{{ 'ldn-edit-registered-service.title' | translate }}</h
 
         <div class="row mb-1">
           <div class="col">
-            <select #inboundPattern formControlName="pattern" id="additionalInboundPattern{{i}}"
-                    name="additionalInboundPattern{{i}}" required>
-              <option value="">{{ 'ldn-new-service.form.label.placeholder.inboundPattern' | translate }}</option>
-              <option *ngFor="let pattern of inboundPatterns"
-                      [value]="pattern">{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }} </option>
-            </select>
+            <div #inboundPatternDropdown="ngbDropdown" class="w-80" display="dynamic"
+                 id="additionalInboundPattern{{i}}"
+                 ngbDropdown placement="bottom-start">
+              <div class="position-relative right-addon" role="combobox">
+                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                   ngbDropdownToggle></i>
+                <input
+                  (click)="inboundPatternDropdown.open();"
+                  [readonly]="true"
+                  class="form-control w-80 scrollable-dropdown-input"
+                  formControlName="patternLabel"
+                  id="inboundPatternDropdownButton"
+                  ngbDropdownAnchor
+                  type="text"
+                />
+                <div aria-labelledby="inboundPatternDropdownButton"
+                     class="dropdown-menu scrollable-dropdown-menu w-100 "
+                     ngbDropdownMenu>
+                  <div class="scrollable-menu" role="listbox">
+                    <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
+                            *ngFor="let pattern of inboundPatterns; let internalIndex = index"
+                            [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate"
+                            class="dropdown-item collection-item text-truncate w-100"
+                            ngbDropdownItem
+                            type="button">
+                      <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
+                      <div
+                        class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
 
           <div class="col">
-            <ng-container *ngIf="inboundPattern.value">
-              <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
-                <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
-                <option *ngFor="let itemFilter of (itemfiltersRD$ | async)?.payload?.page"
-                        [value]="itemFilter.id">{{ itemFilter.id }}</option>
-              </select>
+            <ng-container
+              *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
+              <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
+                   placement="bottom-start">
+                <div class="position-relative right-addon" role="combobox">
+                  <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                     ngbDropdownToggle></i>
+                  <input
+                    (click)="inboundItemfilterDropdown.open();"
+                    [readonly]="true"
+                    [value]="selectedInboundItemfilters"
+                    class="form-control w-100 scrollable-dropdown-input"
+                    formControlName="constraint"
+                    id="inboundItemfilterDropdown"
+                    ngbDropdownAnchor
+                    type="text"
+                  />
+                  <div aria-labelledby="inboundItemfilterDropdownButton"
+                       class="dropdown-menu scrollable-dropdown-menu w-100 "
+                       ngbDropdownMenu>
+                    <div class="scrollable-menu" role="listbox">
+                      <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()"
+                              *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
+                              class="dropdown-item collection-item text-truncate w-100"
+                              ngbDropdownItem
+                              type="button">
+                        <div>{{ constraint.id }}</div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </ng-container>
           </div>
 
-          <div [style.visibility]="inboundPattern.value ? 'visible' : 'hidden'" class="col-sm1">
+          <div
+            [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern ? 'visible' : 'hidden'"
+            class="col-sm-1">
             <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
                    type="checkbox">
             <div (click)="toggleAutomatic(i)"
@@ -130,8 +192,11 @@ <h2 class="flex-grow-1">{{ 'ldn-edit-registered-service.title' | translate }}</h
                       type="button">
                 <i class="fas fa-trash"></i>
               </button>
-              <button (click)="unmarkForInboundPatternDeletion(i)" *ngIf="markedForDeletionInboundPattern.includes(i)"
-                      class="btn btn-warning"
+
+
+              <button (click)="unmarkForInboundPatternDeletion(i)"
+                      *ngIf="markedForDeletionInboundPattern.includes(i)"
+                      class="btn btn-warning "
                       type="button">
                 <i class="fas fa-undo"></i>
               </button>
@@ -145,51 +210,107 @@ <h2 class="flex-grow-1">{{ 'ldn-edit-registered-service.title' | translate }}</h
     <span (click)="addInboundPattern()"
           class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
 
-
+    <!-- In the Outbound Patterns Labels section -->
     <div class="row mb-1 mt-5">
       <div class="col">
         <label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }} </label>
       </div>
-      <div class="col">
-        <label class="label-box">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
-      </div>
-      <div class="col-sm1 ">
+      <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][0]?.value?.pattern)">
+        <div class="col">
+          <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+        </div>
+      </ng-container>
+      <div class="col-sm-1 ">
         <label class="label-box-2" style="visibility: hidden;">
           {{ 'ldn-new-service.form.label.automatic' | translate }}
         </label>
       </div>
-      <div class="col-sm-2">
+      <div class="col-sm-2 ">
       </div>
     </div>
 
+    <!-- In the Outbound Patterns section -->
     <div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index"
          [class.marked-for-deletion]="markedForDeletionOutboundPattern.includes(i)"
          formGroupName="notifyServiceOutboundPatterns">
 
       <ng-container [formGroupName]="i">
 
-        <!-- Input elements in a separate row -->
         <div class="row mb-1">
           <div class="col">
-            <select #outboundPattern formControlName="pattern" id="additionalOutboundPattern{{i}}"
-                    name="additionalOutboundPattern{{i}}"
-                    required>
-              <option value="">{{ 'ldn-new-service.form.label.placeholder.outboundPattern' | translate }}</option>
-              <option *ngFor="let pattern of outboundPatterns"
-                      [value]="pattern">{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }} </option>
-            </select>
+            <div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}"
+                 ngbDropdown
+                 placement="bottom-start">
+              <div class="position-relative right-addon" role="combobox">
+                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                   ngbDropdownToggle></i>
+                <input
+                  (click)="outboundPatternDropdown.open();"
+                  [readonly]="true"
+                  [value]="selectedOutboundPatterns"
+                  class="form-control w-100 scrollable-dropdown-input"
+                  formControlName="patternLabel"
+                  id="outboundPatternDropdownButton"
+                  ngbDropdownAnchor
+                  type="text"
+                />
+                <div aria-labelledby="outboundPatternDropdownButton"
+                     class="dropdown-menu scrollable-dropdown-menu w-100 "
+                     ngbDropdownMenu>
+                  <div class="scrollable-menu" role="listbox">
+                    <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()"
+                            *ngFor="let pattern of outboundPatterns; let internalIndex = index"
+                            [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate"
+                            class="dropdown-item collection-item text-truncate w-100"
+                            ngbDropdownItem
+                            type="button">
+                      <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
+                      <div
+                        class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
           <div class="col">
-            <ng-container *ngIf="outboundPattern.value">
-              <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
-                <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
-                <option *ngFor="let itemFilter of (itemfiltersRD$ | async)?.payload?.page"
-                        [value]="itemFilter.id">{{ itemFilter.id }}</option>
-              </select>
+            <ng-container
+              *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
+              <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}"
+                   ngbDropdown
+                   placement="bottom-start">
+                <div class="position-relative right-addon" role="combobox">
+                  <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                     ngbDropdownToggle></i>
+                  <input
+                    (click)="outboundItemfilterDropdown.open();"
+                    [readonly]="true"
+                    [value]="selectedOutboundItemfilters"
+                    class="form-control w-100 scrollable-dropdown-input"
+                    formControlName="constraint"
+                    id="outboundItemfilterDropdown"
+                    ngbDropdownAnchor
+                    type="text"
+                  />
+                  <div aria-labelledby="outboundItemfilterDropdownButton"
+                       class="dropdown-menu scrollable-dropdown-menu w-100 "
+                       ngbDropdownMenu>
+                    <div class="scrollable-menu" role="listbox">
+                      <button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"
+                              *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
+                              class="dropdown-item collection-item text-truncate w-100"
+                              ngbDropdownItem
+                              type="button">
+                        <div>{{ constraint.id }}</div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </ng-container>
           </div>
 
-          <div [style.visibility]="'hidden'" class="col-sm1">
+          <div [style.visibility]="'hidden'" class="col-sm-1">
             <input hidden id="automatic{{i}}" name="automatic{{i}}" type="checkbox">
             <div
               class="toggle-switch">
@@ -199,12 +320,13 @@ <h2 class="flex-grow-1">{{ 'ldn-edit-registered-service.title' | translate }}</h
 
           <div class="col-sm-2">
             <div class="btn-group">
-              <button (click)="markForOutboundPatternDeletion(i)" class="btn btn-outline-dark trash-button"
-                      type="button">
+              <button (click)="markForOutboundPatternDeletion(i)"
+                      class="btn btn-outline-dark trash-button" type="button">
                 <i class="fas fa-trash"></i>
               </button>
-              <button (click)="unmarkForOutboundPatternDeletion(i)" *ngIf="markedForDeletionOutboundPattern.includes(i)"
-                      class="btn btn-warning"
+              <button (click)="unmarkForOutboundPatternDeletion(i)"
+                      *ngIf="markedForDeletionOutboundPattern.includes(i)"
+                      class="btn btn-warning "
                       type="button">
                 <i class="fas fa-undo"></i>
               </button>
@@ -218,12 +340,14 @@ <h2 class="flex-grow-1">{{ 'ldn-edit-registered-service.title' | translate }}</h
       (click)="addOutboundPattern()"
       class="add-pattern-link mb-2">{{ 'ldn-new-service.form.label.addPattern' | translate }}
     </span>
+
+
     <div aria-label="Basic example" class="submission-form-footer mt-1 mb-1 position-sticky" role="group">
       <button class="btn btn-primary" type="submit">
         <span><i class="fas fa-save"></i> {{ 'ldn-new-service.form.label.submit' | translate }}</span>
       </button>
       <div class="d-flex">
-        <button (click)="this.openResetFormModal(this.resetFormModal)" class="btn btn-danger" type="button">
+        <button (click)="openResetFormModal(resetFormModal)" class="btn btn-danger" type="button">
           <span><i class="fas fa-trash"></i> {{ 'submission.general.discard.submit' | translate }}</span>
         </button>
       </div>
@@ -252,7 +376,7 @@ <h4>{{'service.overview.edit.modal' | translate }}</h4>
         <button (click)="closeModal()" class="btn btn-danger mr-2"
                 id="delete-confirm">{{ 'service.detail.return' | translate }}
         </button>
-        <button (click)="this.patchService()"
+        <button (click)="patchService()"
                 class="btn btn-primary custom-btn">{{ 'service.detail.update' | translate }}
         </button>
       </div>
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.scss b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.scss
index d2bdbaeea26..c43c3807dd9 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.scss
+++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.scss
@@ -1,3 +1,6 @@
+@import '../../../shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.scss';
+@import '../../../shared/form/form.component.scss';
+
 form {
   font-size: 14px;
   position: relative;
@@ -28,7 +31,6 @@ textarea {
 .add-pattern-link {
   color: #0048ff;
   cursor: pointer;
-  margin-left: 10px;
 }
 
 .remove-pattern-link {
@@ -99,6 +101,11 @@ textarea {
   margin-top: 10px;
 }
 
+.small-text {
+  font-size: 0.7em;
+  color: #888;
+}
+
 .toggle-switch {
   cursor: pointer;
   margin-top: 3px;
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts
index 74a4fb4aba2..a2fa801e6d7 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.spec.ts
@@ -1,21 +1,21 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { LdnServiceFormEditComponent } from './ldn-service-form-edit.component';
-import { ChangeDetectorRef, EventEmitter } from '@angular/core';
-import { ReactiveFormsModule, FormBuilder } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { PaginationService } from 'ngx-pagination';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { LdnItemfiltersService } from '../ldn-services-data/ldn-itemfilters-data.service';
-import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service';
-import { RouterStub } from '../../../shared/testing/router.stub';
-import { MockActivatedRoute } from '../../../shared/mocks/active-router.mock';
-import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
-import { of } from 'rxjs';
-import { RouteService } from '../../../core/services/route.service';
-import { provideMockStore } from '@ngrx/store/testing';
+import {NgbDropdownModule, NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {LdnServiceFormEditComponent} from './ldn-service-form-edit.component';
+import {ChangeDetectorRef, EventEmitter} from '@angular/core';
+import {FormBuilder, ReactiveFormsModule} from '@angular/forms';
+import {ActivatedRoute, Router} from '@angular/router';
+import {TranslateModule, TranslateService} from '@ngx-translate/core';
+import {PaginationService} from 'ngx-pagination';
+import {NotificationsService} from '../../../shared/notifications/notifications.service';
+import {LdnItemfiltersService} from '../ldn-services-data/ldn-itemfilters-data.service';
+import {LdnServicesService} from '../ldn-services-data/ldn-services-data.service';
+import {RouterStub} from '../../../shared/testing/router.stub';
+import {MockActivatedRoute} from '../../../shared/mocks/active-router.mock';
+import {NotificationsServiceStub} from '../../../shared/testing/notifications-service.stub';
+import {of} from 'rxjs';
+import {RouteService} from '../../../core/services/route.service';
+import {provideMockStore} from '@ngrx/store/testing';
 
 describe('LdnServiceFormEditComponent', () => {
   let component: LdnServiceFormEditComponent;
@@ -38,7 +38,7 @@ describe('LdnServiceFormEditComponent', () => {
       update: () => ({}),
     };
     ldnItemfiltersService = {
-       findAll: () => of(['item1', 'item2']),
+      findAll: () => of(['item1', 'item2']),
     };
     cdRefStub = Object.assign({
       detectChanges: () => fixture.detectChanges()
@@ -49,21 +49,21 @@ describe('LdnServiceFormEditComponent', () => {
     };
 
     await TestBed.configureTestingModule({
-      imports: [ReactiveFormsModule, TranslateModule.forRoot()],
+      imports: [ReactiveFormsModule, TranslateModule.forRoot(), NgbDropdownModule],
       declarations: [LdnServiceFormEditComponent],
       providers: [
-        { provide: LdnServicesService, useValue: ldnServicesService },
-        { provide: LdnItemfiltersService, useValue: ldnItemfiltersService },
-        { provide: Router, useValue: new RouterStub() },
-        { provide: ActivatedRoute, useValue: new MockActivatedRoute() },
-        { provide: ChangeDetectorRef, useValue: cdRefStub },
-        { provide: NgbModal, useValue: modalService },
-        { provide: NotificationsService, useValue: NotificationsServiceStub },
-        { provide: TranslateService, useValue: translateServiceStub },
-        { provide: PaginationService, useValue: {} },
+        {provide: LdnServicesService, useValue: ldnServicesService},
+        {provide: LdnItemfiltersService, useValue: ldnItemfiltersService},
+        {provide: Router, useValue: new RouterStub()},
+        {provide: ActivatedRoute, useValue: new MockActivatedRoute()},
+        {provide: ChangeDetectorRef, useValue: cdRefStub},
+        {provide: NgbModal, useValue: modalService},
+        {provide: NotificationsService, useValue: NotificationsServiceStub},
+        {provide: TranslateService, useValue: translateServiceStub},
+        {provide: PaginationService, useValue: {}},
         FormBuilder,
         RouteService,
-        provideMockStore({ }),
+        provideMockStore({}),
       ]
     })
       .compileComponents();
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
index d4592a0d18b..002aaf68122 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
@@ -1,416 +1,458 @@
-import { ChangeDetectorRef, Component, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type';
-import { ActivatedRoute, Router } from '@angular/router';
-import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service';
-import { notifyPatterns } from '../ldn-services-patterns/ldn-service-coar-patterns';
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { TranslateService } from '@ngx-translate/core';
-import { LdnService } from '../ldn-services-model/ldn-services.model';
-import { RemoteData } from 'src/app/core/data/remote-data';
-import { Operation } from 'fast-json-patch';
-import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
-import { LdnItemfiltersService } from '../ldn-services-data/ldn-itemfilters-data.service';
-import { Itemfilter } from '../ldn-services-model/ldn-service-itemfilters';
-import { PaginatedList } from '../../../core/data/paginated-list.model';
-import { Observable } from 'rxjs';
-import { PaginationService } from '../../../core/pagination/pagination.service';
-import { FindListOptions } from '../../../core/data/find-list-options.model';
-import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
+import {ChangeDetectorRef, Component, Input, OnInit, TemplateRef, ViewChild} from '@angular/core';
+import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {LDN_SERVICE} from '../ldn-services-model/ldn-service.resource-type';
+import {ActivatedRoute, Router} from '@angular/router';
+import {LdnServicesService} from '../ldn-services-data/ldn-services-data.service';
+import {notifyPatterns} from '../ldn-services-patterns/ldn-service-coar-patterns';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {NotificationsService} from '../../../shared/notifications/notifications.service';
+import {TranslateService} from '@ngx-translate/core';
+import {LdnService} from '../ldn-services-model/ldn-services.model';
+import {RemoteData} from 'src/app/core/data/remote-data';
+import {Operation} from 'fast-json-patch';
+import {getFirstCompletedRemoteData} from '../../../core/shared/operators';
+import {LdnItemfiltersService} from '../ldn-services-data/ldn-itemfilters-data.service';
+import {Itemfilter} from '../ldn-services-model/ldn-service-itemfilters';
+import {PaginatedList} from '../../../core/data/paginated-list.model';
+import {Observable} from 'rxjs';
+import {PaginationService} from '../../../core/pagination/pagination.service';
+import {FindListOptions} from '../../../core/data/find-list-options.model';
+import {PaginationComponentOptions} from '../../../shared/pagination/pagination-component-options.model';
+import {NotifyServicePattern} from "../ldn-services-model/ldn-service-patterns.model";
 
 @Component({
-    selector: 'ds-ldn-service-form-edit',
-    templateUrl: './ldn-service-form-edit.component.html',
-    styleUrls: ['./ldn-service-form-edit.component.scss'],
-    animations: [
-        trigger('toggleAnimation', [
-            state('true', style({})),
-            state('false', style({})),
-            transition('true <=> false', animate('300ms ease-in')),
-        ]),
-    ],
+  selector: 'ds-ldn-service-form-edit',
+  templateUrl: './ldn-service-form-edit.component.html',
+  styleUrls: ['./ldn-service-form-edit.component.scss'],
+  animations: [
+    trigger('toggleAnimation', [
+      state('true', style({})),
+      state('false', style({})),
+      transition('true <=> false', animate('300ms ease-in')),
+    ]),
+  ],
 })
 export class LdnServiceFormEditComponent implements OnInit {
-    formModel: FormGroup;
-    @ViewChild('confirmModal', {static: true}) confirmModal: TemplateRef<any>;
-    @ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
-
-    public inboundPatterns: object[] = notifyPatterns;
-    public outboundPatterns: object[] = notifyPatterns;
-    itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
-    config: FindListOptions = Object.assign(new FindListOptions(), {
-        elementsPerPage: 20
+  formModel: FormGroup;
+  @ViewChild('confirmModal', {static: true}) confirmModal: TemplateRef<any>;
+  @ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
+
+  public inboundPatterns: string[] = notifyPatterns;
+  public outboundPatterns: string[] = notifyPatterns;
+  itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
+  config: FindListOptions = Object.assign(new FindListOptions(), {
+    elementsPerPage: 20
+  });
+  pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
+    id: 'po',
+    pageSize: 20
+  });
+  @Input() public name: string;
+  @Input() public description: string;
+  @Input() public url: string;
+  @Input() public ldnUrl: string;
+  @Input() public score: number;
+  @Input() public inboundPattern: string;
+  @Input() public outboundPattern: string;
+  @Input() public constraint: string;
+  @Input() public automatic: boolean;
+  @Input() public headerKey: string;
+  markedForDeletionInboundPattern: number[] = [];
+  markedForDeletionOutboundPattern: number[] = [];
+  selectedOutboundPatterns: string[];
+  selectedInboundItemfilters: string[];
+  selectedOutboundItemfilters: string[];
+  selectedInboundPatterns: string[];
+  protected serviceId: string;
+  private deletedInboundPatterns: number[] = [];
+  private deletedOutboundPatterns: number[] = [];
+  private modalRef: any;
+  private service: LdnService;
+
+  constructor(
+    protected ldnServicesService: LdnServicesService,
+    private ldnItemfiltersService: LdnItemfiltersService,
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private route: ActivatedRoute,
+    private cdRef: ChangeDetectorRef,
+    protected modalService: NgbModal,
+    private notificationService: NotificationsService,
+    private translateService: TranslateService,
+    protected paginationService: PaginationService
+  ) {
+
+    this.formModel = this.formBuilder.group({
+      id: [''],
+      name: ['', Validators.required],
+      description: ['', Validators.required],
+      url: ['', Validators.required],
+      ldnUrl: ['', Validators.required],
+      score: ['', [Validators.required, Validators.pattern('^0*(\.[0-9]+)?$|^1(\.0+)?$')]], inboundPattern: [''],
+      outboundPattern: [''],
+      constraintPattern: [''],
+      enabled: [''],
+      notifyServiceInboundPatterns: this.formBuilder.array([this.createInboundPatternFormGroup()]),
+      notifyServiceOutboundPatterns: this.formBuilder.array([this.createOutboundPatternFormGroup()]),
+      type: LDN_SERVICE.value,
     });
-    pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
-        id: 'po',
-        pageSize: 20
+  }
+
+  ngOnInit(): void {
+    this.route.params.subscribe((params) => {
+      this.serviceId = params.serviceId;
+      if (this.serviceId) {
+        this.fetchServiceData(this.serviceId);
+      }
     });
-    @Input() public name: string;
-    @Input() public description: string;
-    @Input() public url: string;
-    @Input() public ldnUrl: string;
-    @Input() public score: number;
-    @Input() public inboundPattern: string;
-    @Input() public outboundPattern: string;
-    @Input() public constraint: string;
-    @Input() public automatic: boolean;
-    @Input() public headerKey: string;
-    markedForDeletionInboundPattern: number[] = [];
-    markedForDeletionOutboundPattern: number[] = [];
-    protected serviceId: string;
-    private originalInboundPatterns: any[] = [];
-    private originalOutboundPatterns: any[] = [];
-    private deletedInboundPatterns: number[] = [];
-    private deletedOutboundPatterns: number[] = [];
-    private modalRef: any;
-    private service: LdnService;
-
-    constructor(
-        protected ldnServicesService: LdnServicesService,
-        private ldnItemfiltersService: LdnItemfiltersService,
-        private formBuilder: FormBuilder,
-        private router: Router,
-        private route: ActivatedRoute,
-        private cdRef: ChangeDetectorRef,
-        protected modalService: NgbModal,
-        private notificationService: NotificationsService,
-        private translateService: TranslateService,
-        protected paginationService: PaginationService
-    ) {
-
-        this.formModel = this.formBuilder.group({
-            id: [''],
-            name: ['', Validators.required],
-            description: ['', Validators.required],
-            url: ['', Validators.required],
-            ldnUrl: ['', Validators.required],
-            score: ['', [Validators.required, Validators.pattern('^0*(\.[0-9]+)?$|^1(\.0+)?$')]],
-            inboundPattern: [''],
-            outboundPattern: [''],
-            constraintPattern: [''],
-            enabled: [''],
-            notifyServiceInboundPatterns: this.formBuilder.array([this.createInboundPatternFormGroup()]),
-            notifyServiceOutboundPatterns: this.formBuilder.array([this.createOutboundPatternFormGroup()]),
-            type: LDN_SERVICE.value,
-        });
-    }
-
-    ngOnInit(): void {
-        this.route.params.subscribe((params) => {
-            this.serviceId = params.serviceId;
-            if (this.serviceId) {
-                this.fetchServiceData(this.serviceId);
-            }
-        });
-        this.setItemfilters();
-    }
-
-    setItemfilters() {
-        this.itemfiltersRD$ = this.ldnItemfiltersService.findAll().pipe(
-            getFirstCompletedRemoteData());
+    this.setItemfilters();
+  }
+
+  setItemfilters() {
+    this.itemfiltersRD$ = this.ldnItemfiltersService.findAll().pipe(
+      getFirstCompletedRemoteData());
+  }
+
+
+  fetchServiceData(serviceId: string): void {
+    this.ldnServicesService.findById(serviceId).pipe(
+      getFirstCompletedRemoteData()
+    ).subscribe(
+      (data: RemoteData<LdnService>) => {
+        if (data.hasSucceeded) {
+          this.service = data.payload;
+
+          this.formModel.patchValue({
+            id: this.service.id,
+            name: this.service.name,
+            description: this.service.description,
+            url: this.service.url,
+            score: this.service.score, ldnUrl: this.service.ldnUrl,
+            type: this.service.type,
+            enabled: this.service.enabled
+          });
+          this.filterPatternObjectsAndPickLabel('notifyServiceInboundPatterns', false)
+          this.filterPatternObjectsAndPickLabel('notifyServiceOutboundPatterns', true)
+        }
+      },
+    );
+  }
+
+  filterPatternObjectsAndPickLabel(formArrayName: string, isOutbound: boolean) {
+    const PatternsArray = this.formModel.get(formArrayName) as FormArray;
+    PatternsArray.clear();
+    let servicesToUse;
+    if (isOutbound) {
+      servicesToUse = this.service.notifyServiceOutboundPatterns
+    } else {
+      servicesToUse = this.service.notifyServiceInboundPatterns
     }
 
+    servicesToUse.forEach((patternObj: NotifyServicePattern) => {
+      let patternFormGroup;
+      if (isOutbound) {
+        patternFormGroup = this.initializeOutboundPatternFormGroup();
+      } else {
+        patternFormGroup = this.initializeInboundPatternFormGroup();
+      }
+      const newPatternObjWithLabel = Object.assign(new NotifyServicePattern(), {
+        ...patternObj,
+        patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternObj?.pattern + '.label')
+      })
+      patternFormGroup.patchValue(newPatternObjWithLabel);
+
+      PatternsArray.push(patternFormGroup);
+      this.cdRef.detectChanges();
+    })
+
+
+  }
+
+  generatePatchOperations(): any[] {
+    const patchOperations: any[] = [];
+
+    this.createReplaceOperation(patchOperations, 'name', '/name');
+    this.createReplaceOperation(patchOperations, 'description', '/description');
+    this.createReplaceOperation(patchOperations, 'ldnUrl', '/ldnurl');
+    this.createReplaceOperation(patchOperations, 'url', '/url');
+    this.createReplaceOperation(patchOperations, 'score', '/score');
+
+    this.handlePatterns(patchOperations, 'notifyServiceInboundPatterns');
+    this.handlePatterns(patchOperations, 'notifyServiceOutboundPatterns');
+
+
+    this.deletedInboundPatterns.forEach(index => {
+      const removeOperation: Operation = {
+        op: 'remove',
+        path: `notifyServiceInboundPatterns[${index}]`
+      };
+      patchOperations.push(removeOperation);
+    });
 
-    fetchServiceData(serviceId: string): void {
-        this.ldnServicesService.findById(serviceId).pipe(
-            getFirstCompletedRemoteData()
-        ).subscribe(
-            (data: RemoteData<LdnService>) => {
-                if (data.hasSucceeded) {
-                    this.service = data.payload;
-
-                    this.formModel.patchValue({
-                        id: this.service.id,
-                        name: this.service.name,
-                        description: this.service.description,
-                        url: this.service.url,
-                        score: this.service.score,
-                        ldnUrl: this.service.ldnUrl,
-                        type: this.service.type,
-                        enabled: this.service.enabled
-                    });
-
-                    const inboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
-                    inboundPatternsArray.clear();
-
-                    this.service.notifyServiceInboundPatterns.forEach((pattern: any) => {
-                        const patternFormGroup = this.initializeInboundPatternFormGroup();
-                        patternFormGroup.patchValue(pattern);
-                        inboundPatternsArray.push(patternFormGroup);
-                        this.cdRef.detectChanges();
-                    });
-
-                    const outboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-                    outboundPatternsArray.clear();
-
-                    this.service.notifyServiceOutboundPatterns.forEach((pattern: any) => {
-                        const patternFormGroup = this.initializeOutboundPatternFormGroup();
-                        patternFormGroup.patchValue(pattern);
-                        outboundPatternsArray.push(patternFormGroup);
-
-                        this.cdRef.detectChanges();
-                    });
-                    this.originalInboundPatterns = [...this.service.notifyServiceInboundPatterns];
-                    this.originalOutboundPatterns = [...this.service.notifyServiceOutboundPatterns];
-                }
-            },
-        );
-    }
-
-    generatePatchOperations(): any[] {
-        const patchOperations: any[] = [];
+    this.deletedOutboundPatterns.forEach(index => {
+      const removeOperation: Operation = {
+        op: 'remove',
+        path: `notifyServiceOutboundPatterns[${index}]`
+      };
+      patchOperations.push(removeOperation);
+    });
 
-        this.createReplaceOperation(patchOperations, 'name', '/name');
-        this.createReplaceOperation(patchOperations, 'description', '/description');
-        this.createReplaceOperation(patchOperations, 'ldnUrl', '/ldnurl');
-        this.createReplaceOperation(patchOperations, 'url', '/url');
-        this.createReplaceOperation(patchOperations, 'score', '/score');
+    return patchOperations;
+  }
 
+  onSubmit() {
+    this.openConfirmModal(this.confirmModal);
+  }
 
-        this.handlePatterns(patchOperations, 'notifyServiceInboundPatterns');
-        this.handlePatterns(patchOperations, 'notifyServiceOutboundPatterns');
+  addInboundPattern() {
+    const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+    notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup());
+  }
 
-        this.deletedInboundPatterns.forEach(index => {
-            const removeOperation: Operation = {
-                op: 'remove',
-                path: `notifyServiceInboundPatterns[${index}]`
-            };
-            patchOperations.push(removeOperation);
-        });
+  addOutboundPattern() {
+    const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+    notifyServiceOutboundPatternsArray.push(this.createOutboundPatternFormGroup());
+  }
 
-        this.deletedOutboundPatterns.forEach(index => {
-            const removeOperation: Operation = {
-                op: 'remove',
-                path: `notifyServiceOutboundPatterns[${index}]`
-            };
-            patchOperations.push(removeOperation);
-        });
 
-        return patchOperations;
-    }
+  selectOutboundPattern(patternValue: string, index: number): void {
+    const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
+    patternArray.controls[index].patchValue({pattern: patternValue})
+    patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
 
-    onSubmit() {
-        this.openConfirmModal(this.confirmModal);
-    }
+  }
 
-    addInboundPattern() {
-        const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
-        notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup());
-    }
+  selectOutboundItemFilter(filterValue: string, index: number) {
+    const filterArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
+    filterArray.controls[index].patchValue({constraint: filterValue})
+  }
 
-    addOutboundPattern() {
-        const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-        notifyServiceOutboundPatternsArray.push(this.createOutboundPatternFormGroup());
-    }
+  selectInboundPattern(patternValue: string, index: number): void {
+    const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
+    patternArray.controls[index].patchValue({pattern: patternValue})
+    patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
+  }
 
+  selectInboundItemFilter(filterValue: string, index: number): void {
+    const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
+    filterArray.controls[index].patchValue({constraint: filterValue})
+  }
 
-    toggleAutomatic(i: number) {
-        const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
-        if (automaticControl) {
-            automaticControl.setValue(!automaticControl.value);
-        }
+  toggleAutomatic(i: number) {
+    const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
+    if (automaticControl) {
+      automaticControl.setValue(!automaticControl.value);
     }
+  }
 
-    toggleEnabled() {
-        const newStatus = !this.formModel.get('enabled').value;
+  toggleEnabled() {
+    const newStatus = !this.formModel.get('enabled').value;
 
-        const patchOperation: Operation = {
-            op: 'replace',
-            path: '/enabled',
-            value: newStatus,
-        };
-
-        this.ldnServicesService.patch(this.service, [patchOperation]).pipe(
-            getFirstCompletedRemoteData()
-        ).subscribe(
-            () => {
-
-                this.formModel.get('enabled').setValue(newStatus);
-                this.cdRef.detectChanges();
-            }
-        );
-    }
+    const patchOperation: Operation = {
+      op: 'replace',
+      path: '/enabled',
+      value: newStatus,
+    };
 
+    this.ldnServicesService.patch(this.service, [patchOperation]).pipe(
+      getFirstCompletedRemoteData()
+    ).subscribe(
+      () => {
 
-    closeModal() {
-        this.modalRef.close();
+        this.formModel.get('enabled').setValue(newStatus);
         this.cdRef.detectChanges();
-    }
+      }
+    );
+  }
+
+
+  closeModal() {
+    this.modalRef.close();
+    this.cdRef.detectChanges();
+  }
+
+  openConfirmModal(content) {
+    this.modalRef = this.modalService.open(content);
+  }
+
+  openResetFormModal(content) {
+    this.modalRef = this.modalService.open(content);
+  }
+
+  patchService() {
+    this.deleteMarkedInboundPatterns();
+    this.deleteMarkedOutboundPatterns();
+
+    const patchOperations = this.generatePatchOperations();
+
+
+    this.ldnServicesService.patch(this.service, patchOperations).pipe(
+      getFirstCompletedRemoteData()
+    ).subscribe(
+      (rd: RemoteData<LdnService>) => {
+        if (rd.hasSucceeded) {
+          this.closeModal();
+          this.sendBack();
+          this.notificationService.success(this.translateService.get('admin.registries.services-formats.modify.success.head'),
+            this.translateService.get('admin.registries.services-formats.modify.success.content'));
+        } else {
+          this.notificationService.error(this.translateService.get('admin.registries.services-formats.modify.failure.head'),
+            this.translateService.get('admin.registries.services-formats.modify.failure.content'));
+          this.closeModal();
+        }
+      });
+  }
 
-    openConfirmModal(content) {
-        this.modalRef = this.modalService.open(content);
-    }
+  resetFormAndLeave() {
+    this.sendBack();
+    this.closeModal();
+  }
 
-    openResetFormModal(content) {
-        this.modalRef = this.modalService.open(content);
+  markForInboundPatternDeletion(index: number) {
+    if (!this.markedForDeletionInboundPattern.includes(index)) {
+      this.markedForDeletionInboundPattern.push(index);
     }
+  }
 
-    patchService() {
-        this.deleteMarkedInboundPatterns();
-        this.deleteMarkedOutboundPatterns();
-        const patchOperations = this.generatePatchOperations();
-
-
-        this.ldnServicesService.patch(this.service, patchOperations).pipe(
-            getFirstCompletedRemoteData()
-        ).subscribe((rd: RemoteData<LdnService>) => {
-          if (rd.hasSucceeded) {
-            this.closeModal();
-            this.sendBack();
-            this.notificationService.success(this.translateService.get('admin.registries.services-formats.modify.success.head'),
-              this.translateService.get('admin.registries.services-formats.modify.success.content'));
-          } else {
-            this.notificationService.error(this.translateService.get('admin.registries.services-formats.modify.failure.head'),
-              this.translateService.get('admin.registries.services-formats.modify.failure.content'));
-            this.closeModal();
-          }
-        });
+  unmarkForInboundPatternDeletion(index: number) {
+    const i = this.markedForDeletionInboundPattern.indexOf(index);
+    if (i !== -1) {
+      this.markedForDeletionInboundPattern.splice(i, 1);
     }
+  }
 
-    resetFormAndLeave() {
-        this.sendBack();
-        this.closeModal();
+  markForOutboundPatternDeletion(index: number) {
+    if (!this.markedForDeletionOutboundPattern.includes(index)) {
+      this.markedForDeletionOutboundPattern.push(index);
     }
+  }
 
-    markForInboundPatternDeletion(index: number) {
-        if (!this.markedForDeletionInboundPattern.includes(index)) {
-            this.markedForDeletionInboundPattern.push(index);
-        }
+  unmarkForOutboundPatternDeletion(index: number) {
+    const i = this.markedForDeletionOutboundPattern.indexOf(index);
+    if (i !== -1) {
+      this.markedForDeletionOutboundPattern.splice(i, 1);
     }
-
-    unmarkForInboundPatternDeletion(index: number) {
-        const i = this.markedForDeletionInboundPattern.indexOf(index);
-        if (i !== -1) {
-            this.markedForDeletionInboundPattern.splice(i, 1);
+  }
+
+  deleteMarkedInboundPatterns() {
+    this.markedForDeletionInboundPattern.sort((a, b) => b - a);
+    const patternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+
+    for (const index of this.markedForDeletionInboundPattern) {
+      if (index >= 0 && index < patternsArray.length) {
+        const patternGroup = patternsArray.at(index) as FormGroup;
+        const patternValue = patternGroup.value;
+        if (patternValue.isNew) {
+          patternsArray.removeAt(index);
+        } else {
+          this.deletedInboundPatterns.push(index);
         }
+      }
     }
 
-    markForOutboundPatternDeletion(index: number) {
-        if (!this.markedForDeletionOutboundPattern.includes(index)) {
-            this.markedForDeletionOutboundPattern.push(index);
-        }
-    }
-
-    unmarkForOutboundPatternDeletion(index: number) {
-        const i = this.markedForDeletionOutboundPattern.indexOf(index);
-        if (i !== -1) {
-            this.markedForDeletionOutboundPattern.splice(i, 1);
-        }
-    }
-
-    deleteMarkedInboundPatterns() {
-        this.markedForDeletionInboundPattern.sort((a, b) => b - a);
-        const patternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
-
-        for (const index of this.markedForDeletionInboundPattern) {
-            if (index >= 0 && index < patternsArray.length) {
-                const patternGroup = patternsArray.at(index) as FormGroup;
-                const patternValue = patternGroup.value;
-                if (patternValue.isNew) {
-                    patternsArray.removeAt(index);
-                } else {
-                    this.deletedInboundPatterns.push(index);
-                }
-            }
-        }
-
-        this.markedForDeletionInboundPattern = [];
-    }
+    this.markedForDeletionInboundPattern = [];
+  }
 
 
-    deleteMarkedOutboundPatterns() {
-        this.markedForDeletionOutboundPattern.sort((a, b) => b - a);
-        const patternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+  deleteMarkedOutboundPatterns() {
+    this.markedForDeletionOutboundPattern.sort((a, b) => b - a);
+    const patternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
 
-        for (const index of this.markedForDeletionOutboundPattern) {
-            if (index >= 0 && index < patternsArray.length) {
-                const patternGroup = patternsArray.at(index) as FormGroup;
-                const patternValue = patternGroup.value;
-                if (patternValue.isNew) {
-                    patternsArray.removeAt(index);
-                } else {
+    for (const index of this.markedForDeletionOutboundPattern) {
+      if (index >= 0 && index < patternsArray.length) {
+        const patternGroup = patternsArray.at(index) as FormGroup;
+        const patternValue = patternGroup.value;
+        if (patternValue.isNew) {
+          patternsArray.removeAt(index);
+        } else {
 
-                    this.deletedOutboundPatterns.push(index);
-                }
-            }
+          this.deletedOutboundPatterns.push(index);
         }
-
-        this.markedForDeletionOutboundPattern = [];
+      }
     }
 
-    private createReplaceOperation(patchOperations: any[], formControlName: string, path: string): void {
-        if (this.formModel.get(formControlName).dirty) {
-            patchOperations.push({
-                op: 'replace',
-                path,
-                value: this.formModel.get(formControlName).value,
-            });
-        }
-    }
+    this.markedForDeletionOutboundPattern = [];
+  }
 
-    private handlePatterns(patchOperations: any[], formArrayName: string): void {
-        const patternsArray = this.formModel.get(formArrayName) as FormArray;
-
-        for (let i = 0; i < patternsArray.length; i++) {
-            const patternGroup = patternsArray.at(i) as FormGroup;
-            const patternValue = patternGroup.value;
-
-            if (patternGroup.dirty) {
-                if (patternValue.isNew) {
-                    delete patternValue.isNew;
-                    const addOperation = {
-                        op: 'add',
-                        path: `${formArrayName}/-`,
-                        value: patternValue,
-                    };
-                    patchOperations.push(addOperation);
-                } else {
-                    const replaceOperation = {
-                        op: 'replace',
-                        path: `${formArrayName}[${i}]`,
-                        value: patternValue,
-                    };
-                    patchOperations.push(replaceOperation);
-                }
-            }
-        }
-    }
 
-    private sendBack() {
-        this.router.navigateByUrl('admin/ldn/services');
+  private createReplaceOperation(patchOperations: any[], formControlName: string, path: string): void {
+    if (this.formModel.get(formControlName).dirty) {
+      patchOperations.push({
+        op: 'replace',
+        path,
+        value: this.formModel.get(formControlName).value,
+      });
     }
-
-    private createOutboundPatternFormGroup(): FormGroup {
-        return this.formBuilder.group({
-            pattern: '',
-            constraint: '',
-            isNew: true,
-        });
-    }
-
-    private createInboundPatternFormGroup(): FormGroup {
-        return this.formBuilder.group({
-            pattern: '',
-            constraint: '',
-            automatic: false,
-            isNew: true
-        });
-    }
-
-    private initializeOutboundPatternFormGroup(): FormGroup {
-        return this.formBuilder.group({
-            pattern: '',
-            constraint: '',
-        });
+  }
+
+  private handlePatterns(patchOperations: any[], formArrayName: string): void {
+    const patternsArray = this.formModel.get(formArrayName) as FormArray
+
+
+    for (let i = 0; i < patternsArray.length; i++) {
+      const patternGroup = patternsArray.at(i) as FormGroup;
+
+      const patternValue = patternGroup.value;
+      if (patternGroup.touched) {
+        delete patternValue?.patternLabel;
+        if (patternValue.isNew) {
+          delete patternValue.isNew;
+          const addOperation = {
+            op: 'add',
+            path: `${formArrayName}/-`,
+            value: patternValue,
+          };
+          patchOperations.push(addOperation);
+        } else {
+          const replaceOperation = {
+            op: 'replace',
+            path: `${formArrayName}[${i}]`,
+            value: patternValue,
+          };
+          patchOperations.push(replaceOperation);
+        }
+      }
     }
+  }
+
+  private sendBack() {
+    this.router.navigateByUrl('admin/ldn/services');
+  }
+
+  private createOutboundPatternFormGroup(): FormGroup {
+    return this.formBuilder.group({
+      pattern: '',
+      patternLabel: 'Select a pattern',
+      constraint: '',
+      isNew: true,
+    });
+  }
+
+  private createInboundPatternFormGroup(): FormGroup {
+    return this.formBuilder.group({
+      pattern: '',
+      patternLabel: 'Select a pattern',
+      constraint: '',
+      automatic: false,
+      isNew: true
+    });
+  }
 
-    private initializeInboundPatternFormGroup(): FormGroup {
-        return this.formBuilder.group({
-            pattern: '',
-            constraint: '',
-            automatic: '',
-        });
-    }
+  private initializeOutboundPatternFormGroup(): FormGroup {
+    return this.formBuilder.group({
+      pattern: '',
+      patternLabel: '',
+      constraint: '',
+    });
+  }
+
+  private initializeInboundPatternFormGroup(): FormGroup {
+    return this.formBuilder.group({
+      pattern: '',
+      patternLabel: '',
+      constraint: '',
+      automatic: '',
+    });
+  }
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html
index 1baa5c50664..bc71eda994f 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html
+++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.html
@@ -4,10 +4,12 @@
       <h2 class="flex-grow-1">{{ 'ldn-create-service.title' | translate }}</h2>
     </div>
     <!-- In the name section -->
-    <div class="mb-5">
+    <div class="mb-5 ">
       <label for="name">{{ 'ldn-new-service.form.label.name' | translate }}</label>
       <input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
-             [placeholder]="'ldn-new-service.form.placeholder.name' | translate" formControlName="name" id="name"
+             [placeholder]="'ldn-new-service.form.placeholder.name' | translate" class="form-control"
+             formControlName="name"
+             id="name"
              name="name"
              type="text">
       <div *ngIf="formModel.get('name').invalid && formModel.get('name').touched" class="error-text">
@@ -15,12 +17,11 @@ <h2 class="flex-grow-1">{{ 'ldn-create-service.title' | translate }}</h2>
       </div>
     </div>
 
-
     <!-- In the description section -->
     <div class="mb-5 mt-5 d-flex flex-column">
       <label for="description">{{ 'ldn-new-service.form.label.description' | translate }}</label>
       <textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
-                formControlName="description" id="description" name="description"></textarea>
+                class="form-control" formControlName="description" id="description" name="description"></textarea>
     </div>
 
 
@@ -28,7 +29,9 @@ <h2 class="flex-grow-1">{{ 'ldn-create-service.title' | translate }}</h2>
     <div class="mb-5 mt-5">
       <label for="url">{{ 'ldn-new-service.form.label.url' | translate }}</label>
       <input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
-             [placeholder]="'ldn-new-service.form.placeholder.url' | translate" formControlName="url" id="url"
+             [placeholder]="'ldn-new-service.form.placeholder.url' | translate" class="form-control"
+             formControlName="url"
+             id="url"
              name="url"
              type="text">
       <div *ngIf="formModel.get('url').invalid && formModel.get('url').touched" class="error-text">
@@ -41,7 +44,8 @@ <h2 class="flex-grow-1">{{ 'ldn-create-service.title' | translate }}</h2>
     <div class="mb-5 mt-5">
       <label for="ldnUrl">{{ 'ldn-new-service.form.label.ldnUrl' | translate }}</label>
       <input [class.invalid-field]="formModel.get('ldnUrl').invalid && formModel.get('ldnUrl').touched"
-             [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" formControlName="ldnUrl"
+             [placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" class="form-control"
+             formControlName="ldnUrl"
              id="ldnUrl"
              name="ldnUrl"
              type="text">
@@ -62,21 +66,24 @@ <h2 class="flex-grow-1">{{ 'ldn-create-service.title' | translate }}</h2>
       </div>
     </div>
 
-    <!-- In the Inbound Patterns section -->
+    <!-- In the Inbound Patterns Labels section -->
     <div class="row mb-2 mt-5">
       <div class="col">
         <label>{{ 'ldn-new-service.form.label.inboundPattern' | translate }} </label>
       </div>
-      <div class="col">
-        <label class="label-box">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
-      </div>
-      <div class="col-sm1 ">
-        <label class="label-box-2">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
-      </div>
+      <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][0]?.value?.pattern)">
+        <div class="col">
+          <label>{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+        </div>
+        <div class="col-sm-1">
+          <label class="">{{ 'ldn-new-service.form.label.automatic' | translate }}</label>
+        </div>
+      </ng-container>
       <div class="col-sm-2">
       </div>
     </div>
 
+    <!-- In the Inbound Patterns section -->
     <div *ngFor="let patternGroup of formModel.get('notifyServiceInboundPatterns')['controls']; let i = index"
          formGroupName="notifyServiceInboundPatterns">
 
@@ -85,29 +92,83 @@ <h2 class="flex-grow-1">{{ 'ldn-create-service.title' | translate }}</h2>
 
         <div class="row mb-1">
           <div class="col">
-            <select #inboundPattern formControlName="pattern" id="additionalInboundPattern{{i}}"
-                    name="additionalInboundPattern{{i}}" required>
-              <option value="">{{ 'ldn-new-service.form.label.placeholder.inboundPattern' | translate }}</option>
-              <option *ngFor="let pattern of inboundPatterns"
-                      [value]="pattern">{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }} </option>
-            </select>
-            <div *ngIf="!patternSelected()" class="error-text">
-              {{ 'ldn-new-service.form.error.patterns' | translate }}
+            <div #inboundPatternDropdown="ngbDropdown" class="w-100" id="additionalInboundPattern{{i}}" ngbDropdown
+                 placement="bottom-start">
+              <div class="position-relative right-addon" role="combobox">
+                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                   ngbDropdownToggle>
+
+                </i>
+                <input
+                  (click)="inboundPatternDropdown.open();"
+                  [readonly]="true"
+                  [value]="selectedInboundPatterns"
+                  class="form-control w-100 scrollable-dropdown-input"
+                  formControlName="patternLabel"
+                  id="inboundPatternDropdownButton"
+                  ngbDropdownAnchor
+                  type="text"
+                />
+                <div aria-labelledby="inboundPatternDropdownButton"
+                     class="dropdown-menu scrollable-dropdown-menu w-100 "
+                     ngbDropdownMenu>
+                  <div class="scrollable-menu" role="listbox">
+                    <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
+                            *ngFor="let pattern of inboundPatterns"
+                            [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate"
+                            class="dropdown-item collection-item text-truncate w-100"
+                            ngbDropdownItem
+                            type="button">
+                      <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
+                      <div
+                        class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
+                    </button>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
 
 
           <div class="col">
-            <ng-container *ngIf="inboundPattern.value">
-              <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
-                <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
-                <option *ngFor="let itemFilter of (itemfiltersRD$ | async)?.payload?.page"
-                        [value]="itemFilter.id">{{ itemFilter.id }}</option>
-              </select>
+            <ng-container
+              *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
+              <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
+                   placement="bottom-start">
+                <div class="position-relative right-addon" role="combobox">
+                  <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                     ngbDropdownToggle></i>
+                  <input
+                    (click)="inboundItemfilterDropdown.open();"
+                    [readonly]="true"
+                    [value]="selectedInboundItemfilters"
+                    class="form-control w-100 scrollable-dropdown-input"
+                    formControlName="constraint"
+                    id="inboundItemfilterDropdown"
+                    ngbDropdownAnchor
+                    type="text"
+                  />
+                  <div aria-labelledby="inboundItemfilterDropdownButton"
+                       class="dropdown-menu scrollable-dropdown-menu w-100 "
+                       ngbDropdownMenu>
+                    <div class="scrollable-menu" role="listbox">
+                      <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation() "
+                              *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
+                              class="dropdown-item collection-item text-truncate w-100"
+                              ngbDropdownItem
+                              type="button">
+                        <div>{{ constraint.id }}</div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </ng-container>
           </div>
 
-          <div [style.visibility]="inboundPattern.value ? 'visible' : 'hidden'" class="col-sm-1">
+          <div
+            [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i]?.value?.pattern ? 'visible' : 'hidden'"
+            class="col-sm-1">
             <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
                    type="checkbox">
             <div (click)="toggleAutomatic(i)"
@@ -122,6 +183,7 @@ <h2 class="flex-grow-1">{{ 'ldn-create-service.title' | translate }}</h2>
               <i class="fas fa-trash"></i>
             </button>
           </div>
+
         </div>
       </ng-container>
     </div>
@@ -129,54 +191,110 @@ <h2 class="flex-grow-1">{{ 'ldn-create-service.title' | translate }}</h2>
     <span (click)="addInboundPattern()"
           class="add-pattern-link mb-4">{{ 'ldn-new-service.form.label.addPattern' | translate }}</span>
 
-    <!-- In the Outbound Patterns section -->
+
+    <!-- In the Outbound Patterns Labels section -->
     <div class="row mb-1 mt-5">
       <div class="col">
-        <label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }} </label>
-      </div>
-      <div class="col">
-        <label class="label-box">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+        <label>{{ 'ldn-new-service.form.label.outboundPattern' | translate }}</label>
       </div>
+      <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][0]?.value?.pattern)">
+        <div class="col">
+          <label class="">{{ 'ldn-new-service.form.label.ItemFilter' | translate }}</label>
+        </div>
+      </ng-container>
       <div class="col-sm1 ">
         <label class="label-box-2" style="visibility: hidden;">
           {{ 'ldn-new-service.form.label.automatic' | translate }}
         </label>
       </div>
-      <div class="col-sm-2">
+      <div class="col-sm-2 ">
       </div>
     </div>
 
+    <!-- In the Outbound Patterns section -->
     <div *ngFor="let patternGroup of formModel.get('notifyServiceOutboundPatterns')['controls']; let i = index"
          formGroupName="notifyServiceOutboundPatterns">
 
       <ng-container [formGroupName]="i">
 
-        <!-- Input elements in a separate row -->
         <div class="row mb-1">
           <div class="col">
-            <select #outboundPattern formControlName="pattern" id="additionalOutboundPattern{{i}}"
-                    name="additionalOutboundPattern{{i}}"
-                    required>
-              <option value="">{{ 'ldn-new-service.form.label.placeholder.outboundPattern' | translate }}</option>
-              <option *ngFor="let pattern of outboundPatterns"
-                      [value]="pattern">{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</option>
-            </select>
-            <div *ngIf="!patternSelected()" class="error-text">
-              {{ 'ldn-new-service.form.error.patterns' | translate }}
+            <div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}"
+                 ngbDropdown
+                 placement="bottom-start">
+              <div class="position-relative right-addon" role="combobox">
+                <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                   ngbDropdownToggle></i>
+                <input
+                  (click)="outboundPatternDropdown.open();"
+                  [readonly]="true"
+                  [value]="selectedOutboundPatterns"
+                  class="form-control w-100 scrollable-dropdown-input"
+                  formControlName="patternLabel"
+                  id="outboundPatternDropdownButton"
+                  ngbDropdownAnchor
+                  type="text"
+                />
+                <div aria-labelledby="outboundPatternDropdownButton"
+                     class="dropdown-menu scrollable-dropdown-menu w-100 "
+                     ngbDropdownMenu>
+                  <div class="scrollable-menu" role="listbox">
+                    <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()"
+                            *ngFor="let pattern of outboundPatterns"
+                            [title]="'ldn-service.form.pattern.' + pattern + '.description' | translate"
+                            class="dropdown-item collection-item text-truncate w-100"
+                            ngbDropdownItem
+                            type="button">
+                      <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
+                      <div
+                        class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
+                    </button>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
+
           <div class="col">
-            <ng-container *ngIf="outboundPattern.value">
-              <select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
-                <option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
-                <option *ngFor="let itemFilter of (itemfiltersRD$ | async)?.payload?.page"
-                        [value]="itemFilter.id">{{ itemFilter.id }}</option>
-              </select>
+            <ng-container
+              *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
+              <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}"
+                   ngbDropdown
+                   placement="bottom-start">
+                <div class="position-relative right-addon" role="combobox">
+                  <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
+                     ngbDropdownToggle></i>
+                  <input
+                    (click)="outboundItemfilterDropdown.open();"
+                    [readonly]="true"
+                    [value]="selectedOutboundItemfilters"
+                    class="form-control w-100 scrollable-dropdown-input"
+                    formControlName="constraint"
+                    id="outboundItemfilterDropdown"
+                    ngbDropdownAnchor
+                    type="text"
+                  />
+                  <div aria-labelledby="outboundItemfilterDropdownButton"
+                       class="dropdown-menu scrollable-dropdown-menu w-100 "
+                       ngbDropdownMenu>
+                    <div class="scrollable-menu" role="listbox">
+                      <button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"
+                              *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
+                              class="dropdown-item collection-item text-truncate w-100"
+                              ngbDropdownItem
+                              type="button">
+                        <div>{{ constraint.id }}</div>
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </ng-container>
           </div>
 
-          <div [style.visibility]="'hidden'" class="col-sm1">
-            <input hidden id="automatic{{i}}" name="automatic{{i}}" type="checkbox">
+          <div [style.visibility]="'hidden'" class="col-sm-1">
+            <input hidden id="automatic{{i}}" name="automatic{{i}}"
+                   type="checkbox">
             <div
               class="toggle-switch">
               <div class="slider"></div>
@@ -196,6 +314,9 @@ <h2 class="flex-grow-1">{{ 'ldn-create-service.title' | translate }}</h2>
     <span (click)="addOutboundPattern()"
           class="add-pattern-link mb-4">{{ 'ldn-new-service.form.label.addPattern' | translate }}
     </span>
+    <div class="mb-4">
+      &nbsp;
+    </div>
 
     <div aria-label="Basic example" class="submission-form-footer mt-1 mb-1 position-sticky" role="group">
       <button class="btn btn-primary" type="submit">
@@ -207,6 +328,8 @@ <h2 class="flex-grow-1">{{ 'ldn-create-service.title' | translate }}</h2>
         </button>
       </div>
     </div>
+
+
   </form>
 </div>
 <ng-template #confirmModal>
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.scss b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.scss
index eb5a70c7ee2..3b1cead16ef 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.scss
+++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.scss
@@ -1,8 +1,15 @@
+@import '../../../shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.scss';
+@import '../../../shared/form/form.component.scss';
+
 form {
   font-size: 14px;
   position: relative;
 }
 
+label {
+  font-weight: bold;
+}
+
 input[type="text"],
 select {
   max-width: 100%;
@@ -28,7 +35,6 @@ textarea {
 .add-pattern-link {
   color: #0048ff;
   cursor: pointer;
-  margin-left: 10px;
 }
 
 .remove-pattern-link {
@@ -37,6 +43,11 @@ textarea {
   margin-left: 10px;
 }
 
+.small-text {
+  font-size: 0.7em;
+  color: #888;
+}
+
 .status-checkbox {
   margin-top: 5px;
 }
@@ -103,18 +114,6 @@ textarea {
   cursor: pointer;
 }
 
-.label-box {
-  margin-left: 11px;
-}
-
-.label-box-2 {
-  margin-left: 14px;
-}
-
-.label-box-3 {
-  margin-left: 5px;
-}
-
 form button.btn.btn-primary[type="submit"] {
   position: absolute;
   bottom: 0;
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts
index c5c9f118178..70a4b76ed3a 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts
@@ -1,20 +1,20 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { LdnServiceFormComponent } from './ldn-service-form.component';
-import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
-import { RouterTestingModule } from '@angular/router/testing';
-import { NgbModal, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { LdnItemfiltersService } from '../ldn-services-data/ldn-itemfilters-data.service';
-import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service';
-import { NotificationsService } from 'src/app/shared/notifications/notifications.service';
-import { Router } from '@angular/router';
-import { RouterStub } from 'src/app/shared/testing/router.stub';
-import { createPaginatedList } from 'src/app/shared/testing/utils.test';
-import { Itemfilter } from '../ldn-services-model/ldn-service-itemfilters';
-import { createSuccessfulRemoteDataObject$ } from 'src/app/shared/remote-data.utils';
-import { of } from 'rxjs';
-import { EventEmitter } from '@angular/core';
+import {LdnServiceFormComponent} from './ldn-service-form.component';
+import {FormBuilder, ReactiveFormsModule} from '@angular/forms';
+import {RouterTestingModule} from '@angular/router/testing';
+import {NgbDropdownModule, NgbModal, NgbModalModule} from '@ng-bootstrap/ng-bootstrap';
+import {TranslateModule, TranslateService} from '@ngx-translate/core';
+import {LdnItemfiltersService} from '../ldn-services-data/ldn-itemfilters-data.service';
+import {LdnServicesService} from '../ldn-services-data/ldn-services-data.service';
+import {NotificationsService} from 'src/app/shared/notifications/notifications.service';
+import {Router} from '@angular/router';
+import {RouterStub} from 'src/app/shared/testing/router.stub';
+import {createPaginatedList} from 'src/app/shared/testing/utils.test';
+import {Itemfilter} from '../ldn-services-model/ldn-service-itemfilters';
+import {createSuccessfulRemoteDataObject$} from 'src/app/shared/remote-data.utils';
+import {of} from 'rxjs';
+import {EventEmitter} from '@angular/core';
 
 describe('LdnServiceFormComponent', () => {
   let component: LdnServiceFormComponent;
@@ -51,15 +51,21 @@ describe('LdnServiceFormComponent', () => {
         ReactiveFormsModule,
         RouterTestingModule,
         NgbModalModule,
-        TranslateModule.forRoot()
+        TranslateModule.forRoot(),
+        NgbDropdownModule
       ],
       providers: [
-        { provide: LdnItemfiltersService, useValue: ldnItemfiltersService },
-        { provide: LdnServicesService, useValue: ldnServicesService },
-        { provide: NotificationsService, useValue: notificationsService },
-        { provide: TranslateService, useValue: translateServiceStub },
-        { provide: Router, useValue: new RouterStub() },
-        { provide: NgbModal, useValue: { open: () => {/*comment*/ } } },
+        {provide: LdnItemfiltersService, useValue: ldnItemfiltersService},
+        {provide: LdnServicesService, useValue: ldnServicesService},
+        {provide: NotificationsService, useValue: notificationsService},
+        {provide: TranslateService, useValue: translateServiceStub},
+        {provide: Router, useValue: new RouterStub()},
+        {
+          provide: NgbModal, useValue: {
+            open: () => {/*comment*/
+            }
+          }
+        },
         FormBuilder
       ],
       declarations: [LdnServiceFormComponent]
diff --git a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
index 6a37880ff79..2d589547bc7 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.ts
@@ -1,254 +1,274 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  Input,
-  OnInit,
-  Output,
-  TemplateRef,
-  ViewChild
-} from '@angular/core';
-import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
-
-import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service';
-import { notifyPatterns } from '../ldn-services-patterns/ldn-service-coar-patterns';
-import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type';
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
-import { RemoteData } from '../../../core/data/remote-data';
-import { LdnService } from '../ldn-services-model/ldn-services.model';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { TranslateService } from '@ngx-translate/core';
-import { PaginatedList } from '../../../core/data/paginated-list.model';
-import { Itemfilter } from '../ldn-services-model/ldn-service-itemfilters';
-import { Observable } from 'rxjs';
-import { FindListOptions } from '../../../core/data/find-list-options.model';
-import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
-import { LdnItemfiltersService } from '../ldn-services-data/ldn-itemfilters-data.service';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import {ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, TemplateRef, ViewChild} from '@angular/core';
+import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {Router} from '@angular/router';
+
+import {LdnServicesService} from '../ldn-services-data/ldn-services-data.service';
+import {notifyPatterns} from '../ldn-services-patterns/ldn-service-coar-patterns';
+import {LDN_SERVICE} from '../ldn-services-model/ldn-service.resource-type';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+import {getFirstCompletedRemoteData} from '../../../core/shared/operators';
+import {RemoteData} from '../../../core/data/remote-data';
+import {LdnService} from '../ldn-services-model/ldn-services.model';
+import {NotificationsService} from '../../../shared/notifications/notifications.service';
+import {TranslateService} from '@ngx-translate/core';
+import {PaginatedList} from '../../../core/data/paginated-list.model';
+import {Itemfilter} from '../ldn-services-model/ldn-service-itemfilters';
+import {Observable} from 'rxjs';
+import {FindListOptions} from '../../../core/data/find-list-options.model';
+import {PaginationComponentOptions} from '../../../shared/pagination/pagination-component-options.model';
+import {LdnItemfiltersService} from '../ldn-services-data/ldn-itemfilters-data.service';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 
 
 @Component({
-    selector: 'ds-ldn-service-form',
-    templateUrl: './ldn-service-form.component.html',
-    styleUrls: ['./ldn-service-form.component.scss'],
-    animations: [
-        trigger('toggleAnimation', [
-            state('true', style({})),
-            state('false', style({})),
-            transition('true <=> false', animate('300ms ease-in')),
-        ]),
-    ],
+  selector: 'ds-ldn-service-form',
+  templateUrl: './ldn-service-form.component.html',
+  styleUrls: ['./ldn-service-form.component.scss'],
+  animations: [
+    trigger('toggleAnimation', [
+      state('true', style({})),
+      state('false', style({})),
+      transition('true <=> false', animate('300ms ease-in')),
+    ]),
+  ],
 })
 export class LdnServiceFormComponent implements OnInit {
-    formModel: FormGroup;
-    @ViewChild('confirmModal', {static: true}) confirmModal: TemplateRef<any>;
-    @ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
-    public inboundPatterns: object[] = notifyPatterns;
-    public outboundPatterns: object[] = notifyPatterns;
-    itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
-    config: FindListOptions = Object.assign(new FindListOptions(), {
-        elementsPerPage: 20
+  formModel: FormGroup;
+  @ViewChild('confirmModal', {static: true}) confirmModal: TemplateRef<any>;
+  @ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
+  public inboundPatterns: string[] = notifyPatterns;
+  public outboundPatterns: string[] = notifyPatterns;
+  itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
+  config: FindListOptions = Object.assign(new FindListOptions(), {
+    elementsPerPage: 20
+  });
+  pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
+    id: 'po',
+    pageSize: 20
+  });
+  @Input() public name: string;
+  @Input() public description: string;
+  @Input() public url: string;
+  @Input() public score: string;
+  @Input() public ldnUrl: string;
+  @Input() public inboundPattern: string;
+  @Input() public outboundPattern: string;
+  @Input() public constraint: string;
+  @Input() public automatic: boolean;
+  @Input() public headerKey: string;
+  @Output() submitForm: EventEmitter<any> = new EventEmitter();
+  @Output() cancelForm: EventEmitter<any> = new EventEmitter();
+  selectedOutboundPatterns: string[];
+  selectedInboundPatterns: string[];
+  selectedInboundItemfilters: string[];
+  selectedOutboundItemfilters: string[];
+  hasInboundPattern: boolean;
+  hasOutboundPattern: boolean;
+  isScoreValid: boolean;
+  private modalRef: any;
+
+  constructor(
+    private ldnServicesService: LdnServicesService,
+    private ldnItemfiltersService: LdnItemfiltersService,
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private notificationsService: NotificationsService,
+    private translateService: TranslateService,
+    private cdRef: ChangeDetectorRef,
+    protected modalService: NgbModal,
+  ) {
+
+    this.formModel = this.formBuilder.group({
+      enabled: true,
+      id: [''],
+      name: ['', Validators.required],
+      description: [''],
+      url: ['', Validators.required],
+      score: ['', [Validators.required, Validators.pattern('^0*(\.[0-9]+)?$|^1(\.0+)?$')]],
+      ldnUrl: ['', Validators.required],
+      inboundPattern: [''],
+      outboundPattern: [''],
+      constraintPattern: [''],
+      notifyServiceInboundPatterns: this.formBuilder.array([this.createInboundPatternFormGroup()]),
+      notifyServiceOutboundPatterns: this.formBuilder.array([this.createOutboundPatternFormGroup()]),
+      type: LDN_SERVICE.value,
     });
-    pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
-        id: 'po',
-        pageSize: 20
-    });
-    @Input() public name: string;
-    @Input() public description: string;
-    @Input() public url: string;
-    @Input() public score: string;
-    @Input() public ldnUrl: string;
-    @Input() public inboundPattern: string;
-    @Input() public outboundPattern: string;
-    @Input() public constraint: string;
-    @Input() public automatic: boolean;
-    @Input() public headerKey: string;
-    @Output() submitForm: EventEmitter<any> = new EventEmitter();
-    @Output() cancelForm: EventEmitter<any> = new EventEmitter();
-    private modalRef: any;
-    hasInboundPattern: boolean;
-    hasOutboundPattern: boolean;
-    isScoreValid: boolean;
-
-    constructor(
-        private ldnServicesService: LdnServicesService,
-        private ldnItemfiltersService: LdnItemfiltersService,
-        private formBuilder: FormBuilder,
-        private router: Router,
-        private notificationsService: NotificationsService,
-        private translateService: TranslateService,
-        private cdRef: ChangeDetectorRef,
-        protected modalService: NgbModal,
-    ) {
-
-        this.formModel = this.formBuilder.group({
-            enabled: true,
-            id: [''],
-            name: ['', Validators.required],
-            description: [''],
-            url: ['', Validators.required],
-            score: ['', [Validators.required, Validators.pattern('^0*(\.[0-9]+)?$|^1(\.0+)?$')]],
-            ldnUrl: ['', Validators.required],
-            inboundPattern: [''],
-            outboundPattern: [''],
-            constraintPattern: [''],
-            notifyServiceInboundPatterns: this.formBuilder.array([this.createInboundPatternFormGroup()]),
-            notifyServiceOutboundPatterns: this.formBuilder.array([this.createOutboundPatternFormGroup()]),
-            type: LDN_SERVICE.value,
-        });
-    }
+  }
 
-    ngOnInit(): void {
-        this.setItemfilters();
+  ngOnInit(): void {
+    this.setItemfilters();
 
-    }
+  }
 
-    setItemfilters() {
-        this.itemfiltersRD$ = this.ldnItemfiltersService.findAll().pipe(
-            getFirstCompletedRemoteData());
-    }
+  setItemfilters() {
+    this.itemfiltersRD$ = this.ldnItemfiltersService.findAll().pipe(
+      getFirstCompletedRemoteData());
+  }
 
-    onSubmit() {
-        this.openConfirmModal(this.confirmModal);
-    }
+  onSubmit() {
+    this.openConfirmModal(this.confirmModal);
+  }
 
-    openConfirmModal(content) {
-        this.modalRef = this.modalService.open(content);
-    }
+  openConfirmModal(content) {
+    this.modalRef = this.modalService.open(content);
+  }
 
-    openResetFormModal(content) {
-        this.modalRef = this.modalService.open(content);
-    }
+  openResetFormModal(content) {
+    this.modalRef = this.modalService.open(content);
+  }
 
-    createService() {
-        this.formModel.get('name').markAsTouched();
-        this.formModel.get('score').markAsTouched();
-        this.formModel.get('url').markAsTouched();
-        this.formModel.get('ldnUrl').markAsTouched();
-        this.formModel.get('notifyServiceInboundPatterns').markAsTouched();
-        this.formModel.get('notifyServiceOutboundPatterns').markAsTouched();
-
-        const name = this.formModel.get('name').value;
-        const url = this.formModel.get('url').value;
-        const score = this.formModel.get('score').value;
-        const ldnUrl = this.formModel.get('ldnUrl').value;
-
-        const hasInboundPattern = this.checkPatterns(this.formModel.get('notifyServiceInboundPatterns') as FormArray);
-        const hasOutboundPattern = this.checkPatterns(this.formModel.get('notifyServiceOutboundPatterns') as FormArray);
-
-        if (!name || !url || !ldnUrl || !score || (!hasInboundPattern && !hasOutboundPattern)) {
-            this.closeModal();
-            return;
-        }
-
-        this.formModel.value.notifyServiceInboundPatterns = this.formModel.value.notifyServiceInboundPatterns.filter((pattern: { pattern: string; }) => pattern.pattern !== '');
-        this.formModel.value.notifyServiceOutboundPatterns = this.formModel.value.notifyServiceOutboundPatterns.filter((pattern: { pattern: string; }) => pattern.pattern !== '');
-
-        const values = this.formModel.value;
-
-        const ldnServiceData = this.ldnServicesService.create(values);
-
-        ldnServiceData.pipe(
-            getFirstCompletedRemoteData()
-        ).subscribe((rd: RemoteData<LdnService>) => {
-            if (rd.hasSucceeded) {
-                this.notificationsService.success(this.translateService.get('ldn-service-notification.created.success.title'),
-                this.translateService.get('ldn-service-notification.created.success.body'));
-                this.sendBack();
-                this.closeModal();
-            } else {
-                this.notificationsService.error(this.translateService.get('ldn-service-notification.created.failure.title'),
-                this.translateService.get('ldn-service-notification.created.failure.body'));
-                this.closeModal();
-            }
-        });
-    }
+  createService() {
+    this.formModel.get('name').markAsTouched();
+    this.formModel.get('score').markAsTouched();
+    this.formModel.get('url').markAsTouched();
+    this.formModel.get('ldnUrl').markAsTouched();
+    this.formModel.get('notifyServiceInboundPatterns').markAsTouched();
+    this.formModel.get('notifyServiceOutboundPatterns').markAsTouched();
 
-    checkPatterns(formArray: FormArray): boolean {
-        for (let i = 0; i < formArray.length; i++) {
-            const pattern = formArray.at(i).get('pattern').value;
-            if (pattern) {
-                return true;
-            }
-        }
-        return false;
-    }
+    const name = this.formModel.get('name').value;
+    const url = this.formModel.get('url').value;
+    const score = this.formModel.get('score').value;
+    const ldnUrl = this.formModel.get('ldnUrl').value;
 
+    const hasInboundPattern = this.checkPatterns(this.formModel.get('notifyServiceInboundPatterns') as FormArray);
+    const hasOutboundPattern = this.checkPatterns(this.formModel.get('notifyServiceOutboundPatterns') as FormArray);
 
-    resetFormAndLeave() {
-        this.sendBack();
-        this.closeModal();
+    if (!name || !url || !ldnUrl || !score || (!hasInboundPattern && !hasOutboundPattern)) {
+      this.closeModal();
+      return;
     }
 
-    closeModal() {
-        this.modalRef.close();
-        this.cdRef.detectChanges();
-    }
+    this.formModel.value.notifyServiceInboundPatterns = this.formModel.value.notifyServiceInboundPatterns.map((pattern: {
+      pattern: string;
+      patternLabel: string
+    }) => {
+      const {patternLabel, ...rest} = pattern;
+      return rest;
+    });
 
-    addInboundPattern() {
-        const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
-        notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup());
-    }
+    this.formModel.value.notifyServiceOutboundPatterns = this.formModel.value.notifyServiceOutboundPatterns.map((pattern: {
+      pattern: string;
+      patternLabel: string
+    }) => {
+      const {patternLabel, ...rest} = pattern;
+      return rest;
+    });
 
-    removeInboundPattern(index: number) {
-        const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
-        notifyServiceInboundPatternsArray.removeAt(index);
-    }
+    const values = this.formModel.value;
 
-    addOutboundPattern() {
-        const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-        notifyServiceOutboundPatternsArray.push(this.createOutboundPatternFormGroup());
-    }
+    const ldnServiceData = this.ldnServicesService.create(values);
 
-    removeOutboundPattern(index: number) {
-        const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
-        notifyServiceOutboundPatternsArray.removeAt(index);
-    }
+    ldnServiceData.pipe(
+      getFirstCompletedRemoteData()
+    ).subscribe((rd: RemoteData<LdnService>) => {
+      if (rd.hasSucceeded) {
+        this.notificationsService.success(this.translateService.get('ldn-service-notification.created.success.title'),
+          this.translateService.get('ldn-service-notification.created.success.body'));
 
-    toggleAutomatic(i: number) {
-        const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
-        if (automaticControl) {
-            automaticControl.setValue(!automaticControl.value);
-        }
+        this.sendBack();
+        this.closeModal();
+      } else {
+        this.notificationsService.error(this.translateService.get('ldn-service-notification.created.failure.title'),
+          this.translateService.get('ldn-service-notification.created.failure.body'));
+        this.closeModal();
+      }
+    });
+  }
+
+  checkPatterns(formArray: FormArray): boolean {
+    for (let i = 0; i < formArray.length; i++) {
+      const pattern = formArray.at(i).get('pattern').value;
+      if (pattern) {
+        return true;
+      }
     }
+    return false;
+  }
+
+
+  resetFormAndLeave() {
+    this.sendBack();
+    this.closeModal();
+  }
+
+  closeModal() {
+    this.modalRef.close();
+    this.cdRef.detectChanges();
+  }
+
+  addInboundPattern() {
+    const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+    notifyServiceInboundPatternsArray.push(this.createInboundPatternFormGroup());
+  }
+
+  removeInboundPattern(index: number) {
+    const notifyServiceInboundPatternsArray = this.formModel.get('notifyServiceInboundPatterns') as FormArray;
+    notifyServiceInboundPatternsArray.removeAt(index);
+  }
+
+  addOutboundPattern() {
+    const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+    notifyServiceOutboundPatternsArray.push(this.createOutboundPatternFormGroup());
+  }
+
+  removeOutboundPattern(index: number) {
+    const notifyServiceOutboundPatternsArray = this.formModel.get('notifyServiceOutboundPatterns') as FormArray;
+    notifyServiceOutboundPatternsArray.removeAt(index);
+  }
+
+  toggleAutomatic(i: number) {
+    const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
+    if (automaticControl) {
+      automaticControl.setValue(!automaticControl.value);
+    }
+  }
 
-    patternSelected(): boolean {
-        for (let pattern of this.formModel.get('notifyServiceInboundPatterns').value) {
-            if (pattern.pattern !== '') {
-                return true;
-            }
-        }
 
-        for (let pattern of this.formModel.get('notifyServiceOutboundPatterns').value) {
-            if (pattern.pattern !== '') {
-                return true;
-            }
-        }
+  selectOutboundPattern(patternValue: string, index: number): void {
+    const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
+    patternArray.controls[index].patchValue({pattern: patternValue})
+    patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
 
-        return false;
-    }
+  }
 
-    private sendBack() {
-        this.router.navigateByUrl('admin/ldn/services');
-    }
+  selectInboundPattern(patternValue: string, index: number): void {
+    const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
+    patternArray.controls[index].patchValue({pattern: patternValue})
+    patternArray.controls[index].patchValue({patternLabel: this.translateService.instant('ldn-service.form.pattern.' + patternValue + '.label')})
 
+  }
 
-    private createOutboundPatternFormGroup(): FormGroup {
-        return this.formBuilder.group({
-            pattern: [''],
-            constraint: [''],
-        });
-    }
+  selectInboundItemFilter(filterValue: string, index: number): void {
+    const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
+    filterArray.controls[index].patchValue({constraint: filterValue})
+  }
 
-    private createInboundPatternFormGroup(): FormGroup {
-        return this.formBuilder.group({
-            pattern: [''],
-            constraint: [''],
-            automatic: false
-        });
-    }
+  selectOutboundItemFilter(filterValue: string, index: number) {
+    const filterArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
+    filterArray.controls[index].patchValue({constraint: filterValue})
+  }
+
+  private sendBack() {
+    this.router.navigateByUrl('admin/ldn/services');
+  }
+
+
+  private createOutboundPatternFormGroup(): FormGroup {
+    return this.formBuilder.group({
+      pattern: [''],
+      constraint: [''],
+      patternLabel: 'Select a Pattern',
+    });
+  }
+
+  private createInboundPatternFormGroup(): FormGroup {
+    return this.formBuilder.group({
+      pattern: [''],
+      constraint: [''],
+      automatic: false,
+      patternLabel: 'Select a Pattern',
+    });
+  }
 
 
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.spec.ts b/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.spec.ts
index d49d3931958..ced13716232 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.spec.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.spec.ts
@@ -1,25 +1,25 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { LdnServiceNewComponent } from './ldn-service-new.component';
+import {LdnServiceNewComponent} from './ldn-service-new.component';
 
 describe('LdnServiceNewComponent', () => {
-    let component: LdnServiceNewComponent;
-    let fixture: ComponentFixture<LdnServiceNewComponent>;
+  let component: LdnServiceNewComponent;
+  let fixture: ComponentFixture<LdnServiceNewComponent>;
 
-    beforeEach(async () => {
-        await TestBed.configureTestingModule({
-            declarations: [LdnServiceNewComponent]
-        })
-            .compileComponents();
-    });
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [LdnServiceNewComponent]
+    })
+      .compileComponents();
+  });
 
-    beforeEach(() => {
-        fixture = TestBed.createComponent(LdnServiceNewComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
-    });
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LdnServiceNewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
 
-    it('should create', () => {
-        expect(component).toBeTruthy();
-    });
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
 });
diff --git a/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.ts b/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.ts
index d3ad155e0d6..773f042d114 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-new/ldn-service-new.component.ts
@@ -1,9 +1,9 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
-    selector: 'ds-ldn-service-new',
-    templateUrl: './ldn-service-new.component.html',
-    styleUrls: ['./ldn-service-new.component.scss']
+  selector: 'ds-ldn-service-new',
+  templateUrl: './ldn-service-new.component.html',
+  styleUrls: ['./ldn-service-new.component.scss']
 })
 export class LdnServiceNewComponent {
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-service-serviceMock/ldnServicesRD$-mock.ts b/src/app/admin/admin-ldn-services/ldn-service-serviceMock/ldnServicesRD$-mock.ts
index b1a954b9d62..3bd1bf249f8 100644
--- a/src/app/admin/admin-ldn-services/ldn-service-serviceMock/ldnServicesRD$-mock.ts
+++ b/src/app/admin/admin-ldn-services/ldn-service-serviceMock/ldnServicesRD$-mock.ts
@@ -1,67 +1,67 @@
-import { LdnService } from '../ldn-services-model/ldn-services.model';
-import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type';
-import { RemoteData } from '../../../core/data/remote-data';
-import { PaginatedList } from '../../../core/data/paginated-list.model';
-import { Observable, of } from 'rxjs';
+import {LdnService} from '../ldn-services-model/ldn-services.model';
+import {LDN_SERVICE} from '../ldn-services-model/ldn-service.resource-type';
+import {RemoteData} from '../../../core/data/remote-data';
+import {PaginatedList} from '../../../core/data/paginated-list.model';
+import {Observable, of} from 'rxjs';
 // Create a mock data object for a single LDN notify service
 export const mockLdnService: LdnService = {
-    id: 1,
-    name: 'Service Name',
-    description: 'Service Description',
-    url: 'Service URL',
-    ldnUrl: 'Service LDN URL',
-    notifyServiceInboundPatterns: [
-        {
-            pattern: 'patternA',
-            constraint: 'itemFilterA',
-            automatic: false,
-        },
-        {
-            pattern: 'patternB',
-            constraint: 'itemFilterB',
-            automatic: true,
-        },
-    ],
-    notifyServiceOutboundPatterns: [
-        {
-            pattern: 'patternC',
-            constraint: 'itemFilterC',
-        },
-    ],
-    type: LDN_SERVICE,
-    _links: {
-        self: {
-            href: 'http://localhost/api/ldn/ldnservices/1',
-        },
+  id: 1,
+  name: 'Service Name',
+  description: 'Service Description',
+  url: 'Service URL',
+  ldnUrl: 'Service LDN URL',
+  notifyServiceInboundPatterns: [
+    {
+      pattern: 'patternA',
+      constraint: 'itemFilterA',
+      automatic: false,
+    },
+    {
+      pattern: 'patternB',
+      constraint: 'itemFilterB',
+      automatic: true,
+    },
+  ],
+  notifyServiceOutboundPatterns: [
+    {
+      pattern: 'patternC',
+      constraint: 'itemFilterC',
     },
+  ],
+  type: LDN_SERVICE,
+  _links: {
+    self: {
+      href: 'http://localhost/api/ldn/ldnservices/1',
+    },
+  },
 };
 
 
 const mockLdnServices = {
-    payload: {
-        elementsPerPage: 20,
-        totalPages: 1,
-        totalElements: 1,
-        currentPage: 1,
-        first: undefined,
-        prev: undefined,
-        next: undefined,
-        last: undefined,
-        page: [mockLdnService],
-        type: LDN_SERVICE,
-        self: undefined,
-        getPageLength: function () {
-            return this.page.length;
-        },
-        _links: {
-            self: {
-                href: 'http://localhost/api/ldn/ldnservices/1',
-            },
-            page: [],
-        },
+  payload: {
+    elementsPerPage: 20,
+    totalPages: 1,
+    totalElements: 1,
+    currentPage: 1,
+    first: undefined,
+    prev: undefined,
+    next: undefined,
+    last: undefined,
+    page: [mockLdnService],
+    type: LDN_SERVICE,
+    self: undefined,
+    getPageLength: function () {
+      return this.page.length;
+    },
+    _links: {
+      self: {
+        href: 'http://localhost/api/ldn/ldnservices/1',
+      },
+      page: [],
     },
-    hasSucceeded: true,
-    msToLive: 0,
+  },
+  hasSucceeded: true,
+  msToLive: 0,
 };
 
 
diff --git a/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service.ts b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service.ts
index babb00c9594..7aa6231b4d4 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-itemfilters-data.service.ts
@@ -1,20 +1,20 @@
-import { Injectable } from '@angular/core';
-import { dataService } from '../../../core/data/base/data-service.decorator';
-import { LDN_SERVICE_CONSTRAINT_FILTERS } from '../ldn-services-model/ldn-service.resource-type';
-import { IdentifiableDataService } from '../../../core/data/base/identifiable-data.service';
-import { FindAllData, FindAllDataImpl } from '../../../core/data/base/find-all-data';
+import {Injectable} from '@angular/core';
+import {dataService} from '../../../core/data/base/data-service.decorator';
+import {LDN_SERVICE_CONSTRAINT_FILTERS} from '../ldn-services-model/ldn-service.resource-type';
+import {IdentifiableDataService} from '../../../core/data/base/identifiable-data.service';
+import {FindAllData, FindAllDataImpl} from '../../../core/data/base/find-all-data';
 
-import { RequestService } from '../../../core/data/request.service';
-import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service';
-import { ObjectCacheService } from '../../../core/cache/object-cache.service';
-import { HALEndpointService } from '../../../core/shared/hal-endpoint.service';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { FindListOptions } from '../../../core/data/find-list-options.model';
-import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model';
-import { Observable } from 'rxjs';
-import { RemoteData } from '../../../core/data/remote-data';
-import { Itemfilter } from '../ldn-services-model/ldn-service-itemfilters';
-import { PaginatedList } from '../../../core/data/paginated-list.model';
+import {RequestService} from '../../../core/data/request.service';
+import {RemoteDataBuildService} from '../../../core/cache/builders/remote-data-build.service';
+import {ObjectCacheService} from '../../../core/cache/object-cache.service';
+import {HALEndpointService} from '../../../core/shared/hal-endpoint.service';
+import {NotificationsService} from '../../../shared/notifications/notifications.service';
+import {FindListOptions} from '../../../core/data/find-list-options.model';
+import {FollowLinkConfig} from '../../../shared/utils/follow-link-config.model';
+import {Observable} from 'rxjs';
+import {RemoteData} from '../../../core/data/remote-data';
+import {Itemfilter} from '../ldn-services-model/ldn-service-itemfilters';
+import {PaginatedList} from '../../../core/data/paginated-list.model';
 
 
 /**
@@ -23,25 +23,25 @@ import { PaginatedList } from '../../../core/data/paginated-list.model';
 @Injectable()
 @dataService(LDN_SERVICE_CONSTRAINT_FILTERS)
 export class LdnItemfiltersService extends IdentifiableDataService<Itemfilter> implements FindAllData<Itemfilter> {
-    private findAllData: FindAllDataImpl<Itemfilter>;
+  private findAllData: FindAllDataImpl<Itemfilter>;
 
-    constructor(
-        protected requestService: RequestService,
-        protected rdbService: RemoteDataBuildService,
-        protected objectCache: ObjectCacheService,
-        protected halService: HALEndpointService,
-        protected notificationsService: NotificationsService,
-    ) {
-        super('itemfilters', requestService, rdbService, objectCache, halService);
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+  ) {
+    super('itemfilters', requestService, rdbService, objectCache, halService);
 
-        this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
-    }
+    this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
+  }
 
-    getEndpoint() {
-        return this.halService.getEndpoint(this.linkPath);
-    }
+  getEndpoint() {
+    return this.halService.getEndpoint(this.linkPath);
+  }
 
-    findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<Itemfilter>[]): Observable<RemoteData<PaginatedList<Itemfilter>>> {
-        return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
-    }
+  findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<Itemfilter>[]): Observable<RemoteData<PaginatedList<Itemfilter>>> {
+    return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts
index 8e3e3a27470..b8d28f08869 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service.ts
@@ -1,38 +1,38 @@
-import { Injectable } from '@angular/core';
-import { dataService } from '../../../core/data/base/data-service.decorator';
-import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type';
-import { IdentifiableDataService } from '../../../core/data/base/identifiable-data.service';
-import { FindAllData, FindAllDataImpl } from '../../../core/data/base/find-all-data';
-import { DeleteData, DeleteDataImpl } from '../../../core/data/base/delete-data';
-import { RequestService } from '../../../core/data/request.service';
-import { RemoteDataBuildService } from '../../../core/cache/builders/remote-data-build.service';
-import { ObjectCacheService } from '../../../core/cache/object-cache.service';
-import { HALEndpointService } from '../../../core/shared/hal-endpoint.service';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { FindListOptions } from '../../../core/data/find-list-options.model';
-import { FollowLinkConfig } from '../../../shared/utils/follow-link-config.model';
-import { Observable } from 'rxjs';
-import { RemoteData } from '../../../core/data/remote-data';
-import { PaginatedList } from '../../../core/data/paginated-list.model';
-import { NoContent } from '../../../core/shared/NoContent.model';
-import { map, take } from 'rxjs/operators';
-import { URLCombiner } from '../../../core/url-combiner/url-combiner';
-import { MultipartPostRequest } from '../../../core/data/request.models';
-import { RestRequest } from '../../../core/data/rest-request.model';
-
-
-import { LdnService } from '../ldn-services-model/ldn-services.model';
-
-import { PatchData, PatchDataImpl } from '../../../core/data/base/patch-data';
-import { ChangeAnalyzer } from '../../../core/data/change-analyzer';
-import { Operation } from 'fast-json-patch';
-import { RestRequestMethod } from '../../../core/data/rest-request-method';
-import { CreateData, CreateDataImpl } from '../../../core/data/base/create-data';
-import { LdnServiceConstrain } from '../ldn-services-model/ldn-service.constrain.model';
-import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
-import { hasValue } from '../../../shared/empty.util';
-import { SearchDataImpl } from '../../../core/data/base/search-data';
-import { RequestParam } from '../../../core/cache/models/request-param.model';
+import {Injectable} from '@angular/core';
+import {dataService} from '../../../core/data/base/data-service.decorator';
+import {LDN_SERVICE} from '../ldn-services-model/ldn-service.resource-type';
+import {IdentifiableDataService} from '../../../core/data/base/identifiable-data.service';
+import {FindAllData, FindAllDataImpl} from '../../../core/data/base/find-all-data';
+import {DeleteData, DeleteDataImpl} from '../../../core/data/base/delete-data';
+import {RequestService} from '../../../core/data/request.service';
+import {RemoteDataBuildService} from '../../../core/cache/builders/remote-data-build.service';
+import {ObjectCacheService} from '../../../core/cache/object-cache.service';
+import {HALEndpointService} from '../../../core/shared/hal-endpoint.service';
+import {NotificationsService} from '../../../shared/notifications/notifications.service';
+import {FindListOptions} from '../../../core/data/find-list-options.model';
+import {FollowLinkConfig} from '../../../shared/utils/follow-link-config.model';
+import {Observable} from 'rxjs';
+import {RemoteData} from '../../../core/data/remote-data';
+import {PaginatedList} from '../../../core/data/paginated-list.model';
+import {NoContent} from '../../../core/shared/NoContent.model';
+import {map, take} from 'rxjs/operators';
+import {URLCombiner} from '../../../core/url-combiner/url-combiner';
+import {MultipartPostRequest} from '../../../core/data/request.models';
+import {RestRequest} from '../../../core/data/rest-request.model';
+
+
+import {LdnService} from '../ldn-services-model/ldn-services.model';
+
+import {PatchData, PatchDataImpl} from '../../../core/data/base/patch-data';
+import {ChangeAnalyzer} from '../../../core/data/change-analyzer';
+import {Operation} from 'fast-json-patch';
+import {RestRequestMethod} from '../../../core/data/rest-request-method';
+import {CreateData, CreateDataImpl} from '../../../core/data/base/create-data';
+import {LdnServiceConstrain} from '../ldn-services-model/ldn-service.constrain.model';
+import {getFirstCompletedRemoteData} from '../../../core/shared/operators';
+import {hasValue} from '../../../shared/empty.util';
+import {SearchDataImpl} from '../../../core/data/base/search-data';
+import {RequestParam} from '../../../core/cache/models/request-param.model';
 
 /**
  * A service responsible for fetching/sending data from/to the REST API on the ldnservices endpoint
@@ -40,99 +40,99 @@ import { RequestParam } from '../../../core/cache/models/request-param.model';
 @Injectable()
 @dataService(LDN_SERVICE)
 export class LdnServicesService extends IdentifiableDataService<LdnService> implements FindAllData<LdnService>, DeleteData<LdnService>, PatchData<LdnService>, CreateData<LdnService> {
-    createData: CreateDataImpl<LdnService>;
-    private findAllData: FindAllDataImpl<LdnService>;
-    private deleteData: DeleteDataImpl<LdnService>;
-    private patchData: PatchDataImpl<LdnService>;
-    private comparator: ChangeAnalyzer<LdnService>;
-    private searchData: SearchDataImpl<LdnService>;
-
-    private findByPatternEndpoint = 'byInboundPattern';
-
-    constructor(
-        protected requestService: RequestService,
-        protected rdbService: RemoteDataBuildService,
-        protected objectCache: ObjectCacheService,
-        protected halService: HALEndpointService,
-        protected notificationsService: NotificationsService,
-    ) {
-        super('ldnservices', requestService, rdbService, objectCache, halService);
-
-        this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
-        this.searchData = new SearchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
-        this.deleteData = new DeleteDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive, this.constructIdEndpoint);
-        this.patchData = new PatchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.comparator, this.responseMsToLive, this.constructIdEndpoint);
-        this.createData = new CreateDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive);
-    }
-
-
-    create(object: LdnService): Observable<RemoteData<LdnService>> {
-        return this.createData.create(object);
-    }
-
-    patch(object: LdnService, operations: Operation[]): Observable<RemoteData<LdnService>> {
-        return this.patchData.patch(object, operations);
-    }
-
-    update(object: LdnService): Observable<RemoteData<LdnService>> {
-        return this.patchData.update(object);
-    }
-
-    commitUpdates(method?: RestRequestMethod): void {
-        return this.patchData.commitUpdates(method);
-    }
-
-    createPatchFromCache(object: LdnService): Observable<Operation[]> {
-        return this.patchData.createPatchFromCache(object);
-    }
-
-    findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
-        return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
-    }
-
-    findByInboundPattern(pattern: string, options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
-      const params = [new RequestParam('pattern', pattern)];
-      const findListOptions = Object.assign(new FindListOptions(), options, { searchParams: params });
-      return this.searchData.searchBy(this.findByPatternEndpoint, findListOptions, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
-    }
-
-    public delete(objectId: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
-        return this.deleteData.delete(objectId, copyVirtualMetadata);
-    }
-
-    public deleteByHref(href: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
-        return this.deleteData.deleteByHref(href, copyVirtualMetadata);
-    }
-
-    public invoke(serviceName: string, serviceId: string, parameters: LdnServiceConstrain[], files: File[]): Observable<RemoteData<LdnService>> {
-        const requestId = this.requestService.generateRequestId();
-        this.getBrowseEndpoint().pipe(
-            take(1),
-            map((endpoint: string) => new URLCombiner(endpoint, serviceName, 'processes', serviceId).toString()),
-            map((endpoint: string) => {
-                const body = this.getInvocationFormData(parameters, files);
-                return new MultipartPostRequest(requestId, endpoint, body);
-            })
-        ).subscribe((request: RestRequest) => this.requestService.send(request));
-
-        return this.rdbService.buildFromRequestUUID<LdnService>(requestId);
-    }
-
-    public ldnServiceWithNameExistsAndCanExecute(scriptName: string): Observable<boolean> {
-        return this.findById(scriptName).pipe(
-            getFirstCompletedRemoteData(),
-            map((rd: RemoteData<LdnService>) => {
-                return hasValue(rd.payload);
-            }),
-        );
-    }
-
-    private getInvocationFormData(constrain: LdnServiceConstrain[], files: File[]): FormData {
-        const form: FormData = new FormData();
-        form.set('properties', JSON.stringify(constrain));
-        files.forEach((file: File) => {
-            form.append('file', file);
-        });
-        return form;
-    }
+  createData: CreateDataImpl<LdnService>;
+  private findAllData: FindAllDataImpl<LdnService>;
+  private deleteData: DeleteDataImpl<LdnService>;
+  private patchData: PatchDataImpl<LdnService>;
+  private comparator: ChangeAnalyzer<LdnService>;
+  private searchData: SearchDataImpl<LdnService>;
+
+  private findByPatternEndpoint = 'byInboundPattern';
+
+  constructor(
+    protected requestService: RequestService,
+    protected rdbService: RemoteDataBuildService,
+    protected objectCache: ObjectCacheService,
+    protected halService: HALEndpointService,
+    protected notificationsService: NotificationsService,
+  ) {
+    super('ldnservices', requestService, rdbService, objectCache, halService);
+
+    this.findAllData = new FindAllDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
+    this.searchData = new SearchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.responseMsToLive);
+    this.deleteData = new DeleteDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive, this.constructIdEndpoint);
+    this.patchData = new PatchDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, this.comparator, this.responseMsToLive, this.constructIdEndpoint);
+    this.createData = new CreateDataImpl(this.linkPath, requestService, rdbService, objectCache, halService, notificationsService, this.responseMsToLive);
+  }
+
+
+  create(object: LdnService): Observable<RemoteData<LdnService>> {
+    return this.createData.create(object);
+  }
+
+  patch(object: LdnService, operations: Operation[]): Observable<RemoteData<LdnService>> {
+    return this.patchData.patch(object, operations);
+  }
+
+  update(object: LdnService): Observable<RemoteData<LdnService>> {
+    return this.patchData.update(object);
+  }
+
+  commitUpdates(method?: RestRequestMethod): void {
+    return this.patchData.commitUpdates(method);
+  }
+
+  createPatchFromCache(object: LdnService): Observable<Operation[]> {
+    return this.patchData.createPatchFromCache(object);
+  }
+
+  findAll(options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
+    return this.findAllData.findAll(options, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
+
+  findByInboundPattern(pattern: string, options?: FindListOptions, useCachedVersionIfAvailable?: boolean, reRequestOnStale?: boolean, ...linksToFollow: FollowLinkConfig<LdnService>[]): Observable<RemoteData<PaginatedList<LdnService>>> {
+    const params = [new RequestParam('pattern', pattern)];
+    const findListOptions = Object.assign(new FindListOptions(), options, {searchParams: params});
+    return this.searchData.searchBy(this.findByPatternEndpoint, findListOptions, useCachedVersionIfAvailable, reRequestOnStale, ...linksToFollow);
+  }
+
+  public delete(objectId: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
+    return this.deleteData.delete(objectId, copyVirtualMetadata);
+  }
+
+  public deleteByHref(href: string, copyVirtualMetadata?: string[]): Observable<RemoteData<NoContent>> {
+    return this.deleteData.deleteByHref(href, copyVirtualMetadata);
+  }
+
+  public invoke(serviceName: string, serviceId: string, parameters: LdnServiceConstrain[], files: File[]): Observable<RemoteData<LdnService>> {
+    const requestId = this.requestService.generateRequestId();
+    this.getBrowseEndpoint().pipe(
+      take(1),
+      map((endpoint: string) => new URLCombiner(endpoint, serviceName, 'processes', serviceId).toString()),
+      map((endpoint: string) => {
+        const body = this.getInvocationFormData(parameters, files);
+        return new MultipartPostRequest(requestId, endpoint, body);
+      })
+    ).subscribe((request: RestRequest) => this.requestService.send(request));
+
+    return this.rdbService.buildFromRequestUUID<LdnService>(requestId);
+  }
+
+  public ldnServiceWithNameExistsAndCanExecute(scriptName: string): Observable<boolean> {
+    return this.findById(scriptName).pipe(
+      getFirstCompletedRemoteData(),
+      map((rd: RemoteData<LdnService>) => {
+        return hasValue(rd.payload);
+      }),
+    );
+  }
+
+  private getInvocationFormData(constrain: LdnServiceConstrain[], files: File[]): FormData {
+    const form: FormData = new FormData();
+    form.set('properties', JSON.stringify(constrain));
+    files.forEach((file: File) => {
+      form.append('file', file);
+    });
+    return form;
+  }
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html
index 45c2106468d..e19f986e1a5 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html
+++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html
@@ -1,83 +1,84 @@
 <div class="container">
-    <div class="d-flex">
-        <h2 class="flex-grow-1">{{ 'ldn-registered-services.title' | translate }}</h2>
-    </div>
-    <div class="d-flex justify-content-end">
-        <button class="btn btn-success" routerLink="/admin/ldn/services/new"><i
-                class="fas fa-plus pr-2"></i>{{ 'process.overview.new' | translate }}</button>
-    </div>
-    <ds-pagination *ngIf="(ldnServicesRD$ | async)?.payload?.totalElements > 0"
-                   [collectionSize]="(ldnServicesRD$ | async)?.payload?.totalElements"
-                   [hideGear]="true"
-                   [hidePagerWhenSinglePage]="true"
-                   [pageInfoState]="(ldnServicesRD$ | async)?.payload"
-                   [paginationOptions]="pageConfig">
-        <div class="table-responsive">
-            <table class="table table-striped table-hover">
-                <thead>
-                <tr>
-                    <th scope="col">{{ 'service.overview.table.name' | translate }}</th>
-                    <th scope="col">{{ 'service.overview.table.description' | translate }}</th>
-                    <th scope="col">{{ 'service.overview.table.status' | translate }}</th>
-                    <th scope="col">{{ 'service.overview.table.actions' | translate }}</th>
-                </tr>
-                </thead>
-                <tbody>
-                <tr *ngFor="let ldnService of (ldnServicesRD$ | async)?.payload?.page">
-                    <td>{{ ldnService.name }}</td>
-                    <td>{{ ldnService.description }}</td>
-                    <td>
+  <div class="d-flex">
+    <h2 class="flex-grow-1">{{ 'ldn-registered-services.title' | translate }}</h2>
+  </div>
+  <div class="d-flex justify-content-end">
+    <button class="btn btn-success" routerLink="/admin/ldn/services/new"><i
+      class="fas fa-plus pr-2"></i>{{ 'process.overview.new' | translate }}</button>
+  </div>
+  <ds-pagination *ngIf="(ldnServicesRD$ | async)?.payload?.totalElements > 0"
+                 [collectionSize]="(ldnServicesRD$ | async)?.payload?.totalElements"
+                 [hideGear]="true"
+                 [hidePagerWhenSinglePage]="true"
+                 [pageInfoState]="(ldnServicesRD$ | async)?.payload"
+                 [paginationOptions]="pageConfig">
+    <div class="table-responsive">
+      <table class="table table-striped table-hover">
+        <thead>
+        <tr>
+          <th scope="col">{{ 'service.overview.table.name' | translate }}</th>
+          <th scope="col">{{ 'service.overview.table.description' | translate }}</th>
+          <th scope="col">{{ 'service.overview.table.status' | translate }}</th>
+          <th scope="col">{{ 'service.overview.table.actions' | translate }}</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr *ngFor="let ldnService of (ldnServicesRD$ | async)?.payload?.page">
+          <td>{{ ldnService.name }}</td>
+          <td>{{ ldnService.description }}</td>
+          <td>
                         <span (click)="toggleStatus(ldnService, ldnServicesService)"
-                              [ngClass]="{ 'status-enabled': ldnService.enabled, 'status-disabled': !ldnService.enabled }" [title]="ldnService.enabled ? ('ldn-service.overview.table.clickToDisable' | translate) : ('ldn-service.overview.table.clickToEnable' | translate)"
+                              [ngClass]="{ 'status-enabled': ldnService.enabled, 'status-disabled': !ldnService.enabled }"
+                              [title]="ldnService.enabled ? ('ldn-service.overview.table.clickToDisable' | translate) : ('ldn-service.overview.table.clickToEnable' | translate)"
                               class="status-indicator">
                             {{ ldnService.enabled ? ('ldn-service.overview.table.enabled' | translate) : ('ldn-service.overview.table.disabled' | translate) }}
                         </span>
-                    </td>
-                    <td>
-                        <div class="btn-group">
-                            <button (click)="selectServiceToDelete(ldnService.id)" class="btn btn-outline-danger">
-                                <i class="fas fa-trash"></i>
-                            </button>
-                            <button [routerLink]="['/admin/ldn/services/edit/', ldnService.id]"
-                                    class="btn btn-outline-dark">
-                                <i class="fas fa-edit"></i>
-                            </button>
-                        </div>
-                    </td>
-                </tr>
-                </tbody>
-            </table>
-        </div>
-    </ds-pagination>
+          </td>
+          <td>
+            <div class="btn-group">
+              <button (click)="selectServiceToDelete(ldnService.id)" class="btn btn-outline-danger">
+                <i class="fas fa-trash"></i>
+              </button>
+              <button [routerLink]="['/admin/ldn/services/edit/', ldnService.id]"
+                      class="btn btn-outline-dark">
+                <i class="fas fa-edit"></i>
+              </button>
+            </div>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+  </ds-pagination>
 </div>
 
 <ng-template #deleteModal>
 
-    <div>
+  <div>
 
-        <div class="modal-header">
-            <div>
-                <h4>{{'service.overview.delete.header' | translate }}</h4>
-            </div>
-            <button (click)="closeModal()" aria-label="Close"
-                    class="close" type="button">
-                <span aria-hidden="true">×</span>
-            </button>
-        </div>
+    <div class="modal-header">
+      <div>
+        <h4>{{'service.overview.delete.header' | translate }}</h4>
+      </div>
+      <button (click)="closeModal()" aria-label="Close"
+              class="close" type="button">
+        <span aria-hidden="true">×</span>
+      </button>
+    </div>
 
-        <div class="modal-body">
-            <div>
-                {{ 'service.overview.delete.body' | translate }}
-            </div>
-            <div class="mt-4">
-                <button (click)="closeModal()"
-                        class="btn btn-primary mr-2">{{ 'service.detail.delete.cancel' | translate }}</button>
-                <button (click)="deleteSelected(this.selectedServiceId.toString(), ldnServicesService)"
-                        class="btn btn-danger"
-                        id="delete-confirm">{{ 'service.overview.delete' | translate }}
-                </button>
-            </div>
-        </div>
+    <div class="modal-body">
+      <div>
+        {{ 'service.overview.delete.body' | translate }}
+      </div>
+      <div class="mt-4">
+        <button (click)="closeModal()"
+                class="btn btn-primary mr-2">{{ 'service.detail.delete.cancel' | translate }}</button>
+        <button (click)="deleteSelected(this.selectedServiceId.toString(), ldnServicesService)"
+                class="btn btn-danger"
+                id="delete-confirm">{{ 'service.overview.delete' | translate }}
+        </button>
+      </div>
     </div>
+  </div>
 </ng-template>
 
diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.spec.ts b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.spec.ts
index 4efa29bce89..87a1da27a1c 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.spec.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.spec.ts
@@ -1,14 +1,14 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { LdnServicesOverviewComponent } from './ldn-services-directory.component';
-import { ChangeDetectorRef, EventEmitter } from '@angular/core';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { NotificationsServiceStub } from '../../../shared/testing/notifications-service.stub';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service';
-import { PaginationService } from '../../../core/pagination/pagination.service';
-import { PaginationServiceStub } from '../../../shared/testing/pagination-service.stub';
-import { of } from 'rxjs';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {LdnServicesOverviewComponent} from './ldn-services-directory.component';
+import {ChangeDetectorRef, EventEmitter} from '@angular/core';
+import {NotificationsService} from '../../../shared/notifications/notifications.service';
+import {NotificationsServiceStub} from '../../../shared/testing/notifications-service.stub';
+import {TranslateModule, TranslateService} from '@ngx-translate/core';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {LdnServicesService} from '../ldn-services-data/ldn-services-data.service';
+import {PaginationService} from '../../../core/pagination/pagination.service';
+import {PaginationServiceStub} from '../../../shared/testing/pagination-service.stub';
+import {of} from 'rxjs';
 
 describe('LdnServicesOverviewComponent', () => {
   let component: LdnServicesOverviewComponent;
@@ -26,17 +26,17 @@ describe('LdnServicesOverviewComponent', () => {
       imports: [TranslateModule.forRoot()],
       declarations: [LdnServicesOverviewComponent],
       providers: [
-        { provide: LdnServicesService, useValue: {} },
-        { provide: PaginationService, useValue: new PaginationServiceStub() },
+        {provide: LdnServicesService, useValue: {}},
+        {provide: PaginationService, useValue: new PaginationServiceStub()},
         {
           provide: NgbModal, useValue: {
             open: () => {/*comment*/
             }
           }
         },
-        { provide: ChangeDetectorRef, useValue: {} },
-        { provide: NotificationsService, useValue: NotificationsServiceStub },
-        { provide: TranslateService, useValue: translateServiceStub },
+        {provide: ChangeDetectorRef, useValue: {}},
+        {provide: NotificationsService, useValue: NotificationsServiceStub},
+        {provide: TranslateService, useValue: translateServiceStub},
       ]
     })
       .compileComponents();
diff --git a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts
index 3db9231ac2e..ac9354a3e48 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.ts
@@ -7,140 +7,141 @@ import {
   TemplateRef,
   ViewChild
 } from '@angular/core';
-import { Observable, Subscription } from 'rxjs';
-import { RemoteData } from '../../../core/data/remote-data';
-import { PaginatedList } from '../../../core/data/paginated-list.model';
-import { FindListOptions } from '../../../core/data/find-list-options.model';
-import { LdnService } from '../ldn-services-model/ldn-services.model';
-import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
-import { map, switchMap } from 'rxjs/operators';
-import { LdnServicesService } from 'src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service';
-import { PaginationService } from 'src/app/core/pagination/pagination.service';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { hasValue } from '../../../shared/empty.util';
-import { Operation } from 'fast-json-patch';
-import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
-import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import { TranslateService } from '@ngx-translate/core';
+import {Observable, Subscription} from 'rxjs';
+import {RemoteData} from '../../../core/data/remote-data';
+import {PaginatedList} from '../../../core/data/paginated-list.model';
+import {FindListOptions} from '../../../core/data/find-list-options.model';
+import {LdnService} from '../ldn-services-model/ldn-services.model';
+import {PaginationComponentOptions} from '../../../shared/pagination/pagination-component-options.model';
+import {map, switchMap} from 'rxjs/operators';
+import {LdnServicesService} from 'src/app/admin/admin-ldn-services/ldn-services-data/ldn-services-data.service';
+import {PaginationService} from 'src/app/core/pagination/pagination.service';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+import {hasValue} from '../../../shared/empty.util';
+import {Operation} from 'fast-json-patch';
+import {getFirstCompletedRemoteData} from '../../../core/shared/operators';
+import {NotificationsService} from '../../../shared/notifications/notifications.service';
+import {TranslateService} from '@ngx-translate/core';
 
 
 @Component({
-    selector: 'ds-ldn-services-directory',
-    templateUrl: './ldn-services-directory.component.html',
-    styleUrls: ['./ldn-services-directory.component.scss'],
-    changeDetection: ChangeDetectionStrategy.Default
+  selector: 'ds-ldn-services-directory',
+  templateUrl: './ldn-services-directory.component.html',
+  styleUrls: ['./ldn-services-directory.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Default
 })
 export class LdnServicesOverviewComponent implements OnInit, OnDestroy {
 
-    selectedServiceId: string | number | null = null;
-    servicesData: any[] = [];
-    @ViewChild('deleteModal', {static: true}) deleteModal: TemplateRef<any>;
-    ldnServicesRD$: Observable<RemoteData<PaginatedList<LdnService>>>;
-    config: FindListOptions = Object.assign(new FindListOptions(), {
-        elementsPerPage: 20
-    });
-    pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
-        id: 'po',
-        pageSize: 20
-    });
-    isProcessingSub: Subscription;
-    private modalRef: any;
-
-
-    constructor(
-        protected ldnServicesService: LdnServicesService,
-        protected paginationService: PaginationService,
-        protected modalService: NgbModal,
-        private cdRef: ChangeDetectorRef,
-        private notificationService: NotificationsService,
-        private translateService: TranslateService,
-    ) {
+  selectedServiceId: string | number | null = null;
+  servicesData: any[] = [];
+  @ViewChild('deleteModal', {static: true}) deleteModal: TemplateRef<any>;
+  ldnServicesRD$: Observable<RemoteData<PaginatedList<LdnService>>>;
+  config: FindListOptions = Object.assign(new FindListOptions(), {
+    elementsPerPage: 20
+  });
+  pageConfig: PaginationComponentOptions = Object.assign(new PaginationComponentOptions(), {
+    id: 'po',
+    pageSize: 20
+  });
+  isProcessingSub: Subscription;
+  private modalRef: any;
+
+
+  constructor(
+    protected ldnServicesService: LdnServicesService,
+    protected paginationService: PaginationService,
+    protected modalService: NgbModal,
+    private cdRef: ChangeDetectorRef,
+    private notificationService: NotificationsService,
+    private translateService: TranslateService,
+  ) {
+  }
+
+  ngOnInit(): void {
+    this.setLdnServices();
+  }
+
+  setLdnServices() {
+    this.ldnServicesRD$ = this.paginationService.getFindListOptions(this.pageConfig.id, this.config).pipe(
+      switchMap((config) => this.ldnServicesService.findAll(config, false, false).pipe(
+        getFirstCompletedRemoteData()
+      ))
+
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.paginationService.clearPagination(this.pageConfig.id);
+    if (hasValue(this.isProcessingSub)) {
+      this.isProcessingSub.unsubscribe();
     }
-
-    ngOnInit(): void {
-        this.setLdnServices();
-    }
-
-    setLdnServices() {
-        this.ldnServicesRD$ = this.paginationService.getFindListOptions(this.pageConfig.id, this.config).pipe(
-            switchMap((config) => this.ldnServicesService.findAll(config, false, false).pipe(
-                getFirstCompletedRemoteData()
-            ))
-        );
-    }
-
-    ngOnDestroy(): void {
-        this.paginationService.clearPagination(this.pageConfig.id);
-        if (hasValue(this.isProcessingSub)) {
-            this.isProcessingSub.unsubscribe();
+  }
+
+  openDeleteModal(content) {
+    this.modalRef = this.modalService.open(content);
+  }
+
+  closeModal() {
+    this.modalRef.close();
+    this.cdRef.detectChanges();
+  }
+
+  selectServiceToDelete(serviceId: number) {
+    this.selectedServiceId = serviceId;
+    this.openDeleteModal(this.deleteModal);
+  }
+
+  deleteSelected(serviceId: string, ldnServicesService: LdnServicesService): void {
+    if (this.selectedServiceId !== null) {
+      ldnServicesService.delete(serviceId).pipe(getFirstCompletedRemoteData()).subscribe((rd: RemoteData<LdnService>) => {
+        if (rd.hasSucceeded) {
+          this.servicesData = this.servicesData.filter(service => service.id !== serviceId);
+          this.ldnServicesRD$ = this.ldnServicesRD$.pipe(
+            map((remoteData: RemoteData<PaginatedList<LdnService>>) => {
+              if (remoteData.hasSucceeded) {
+                remoteData.payload.page = remoteData.payload.page.filter(service => service.id.toString() !== serviceId);
+              }
+              return remoteData;
+            })
+          );
+          this.cdRef.detectChanges();
+          this.closeModal();
+          this.notificationService.success(this.translateService.get('ldn-service-delete.notification.success.title'),
+            this.translateService.get('ldn-service-delete.notification.success.content'));
+        } else {
+          this.notificationService.error(this.translateService.get('ldn-service-delete.notification.error.title'),
+            this.translateService.get('ldn-service-delete.notification.error.content'));
+          this.cdRef.detectChanges();
         }
+      });
     }
-
-    openDeleteModal(content) {
-        this.modalRef = this.modalService.open(content);
-    }
-
-    closeModal() {
-        this.modalRef.close();
-        this.cdRef.detectChanges();
-    }
-
-    selectServiceToDelete(serviceId: number) {
-        this.selectedServiceId = serviceId;
-        this.openDeleteModal(this.deleteModal);
-    }
-
-    deleteSelected(serviceId: string, ldnServicesService: LdnServicesService): void {
-        if (this.selectedServiceId !== null) {
-            ldnServicesService.delete(serviceId).pipe(getFirstCompletedRemoteData()).subscribe((rd: RemoteData<LdnService>) => {
-                if (rd.hasSucceeded) {
-                    this.servicesData = this.servicesData.filter(service => service.id !== serviceId);
-                    this.ldnServicesRD$ = this.ldnServicesRD$.pipe(
-                        map((remoteData: RemoteData<PaginatedList<LdnService>>) => {
-                            if (remoteData.hasSucceeded) {
-                                remoteData.payload.page = remoteData.payload.page.filter(service => service.id.toString() !== serviceId);
-                            }
-                            return remoteData;
-                        })
-                    );
-                    this.cdRef.detectChanges();
-                    this.closeModal();
-                    this.notificationService.success(this.translateService.get('ldn-service-delete.notification.success.title'),
-                        this.translateService.get('ldn-service-delete.notification.success.content'));
-                } else {
-                    this.notificationService.error(this.translateService.get('ldn-service-delete.notification.error.title'),
-                        this.translateService.get('ldn-service-delete.notification.error.content'));
-                    this.cdRef.detectChanges();
-                }
-            });
+  }
+
+
+  toggleStatus(ldnService: any, ldnServicesService: LdnServicesService): void {
+    const newStatus = !ldnService.enabled;
+    const originalStatus = ldnService.enabled;
+
+    const patchOperation: Operation = {
+      op: 'replace',
+      path: '/enabled',
+      value: newStatus,
+    };
+
+    ldnServicesService.patch(ldnService, [patchOperation]).pipe(getFirstCompletedRemoteData()).subscribe(
+      (rd: RemoteData<LdnService>) => {
+        if (rd.hasSucceeded) {
+          ldnService.enabled = newStatus;
+          this.notificationService.success(this.translateService.get('ldn-enable-service.notification.success.title'),
+            this.translateService.get('ldn-enable-service.notification.success.content'));
+        } else {
+          ldnService.enabled = originalStatus;
+          this.notificationService.error(this.translateService.get('ldn-enable-service.notification.error.title'),
+            this.translateService.get('ldn-enable-service.notification.error.content'));
         }
-    }
-
-
-    toggleStatus(ldnService: any, ldnServicesService: LdnServicesService): void {
-        const newStatus = !ldnService.enabled;
-        const originalStatus = ldnService.enabled;
-
-        const patchOperation: Operation = {
-            op: 'replace',
-            path: '/enabled',
-            value: newStatus,
-        };
-
-        ldnServicesService.patch(ldnService, [patchOperation]).pipe(getFirstCompletedRemoteData()).subscribe(
-            (rd: RemoteData<LdnService>) => {
-                if (rd.hasSucceeded) {
-                    ldnService.enabled = newStatus;
-                    this.notificationService.success(this.translateService.get('ldn-enable-service.notification.success.title'),
-                        this.translateService.get('ldn-enable-service.notification.success.content'));
-                } else {
-                    ldnService.enabled = originalStatus;
-                    this.notificationService.error(this.translateService.get('ldn-enable-service.notification.error.title'),
-                        this.translateService.get('ldn-enable-service.notification.error.content'));
-                }
-            }
-        );
-    }
+      }
+    );
+  }
 
 
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-itemfilters.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-itemfilters.ts
index 6aceada3df9..55b7ad8b982 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-itemfilters.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-itemfilters.ts
@@ -1,31 +1,31 @@
-import { autoserialize, deserialize, inheritSerialization } from 'cerialize';
-import { LDN_SERVICE_CONSTRAINT_FILTER } from './ldn-service.resource-type';
-import { CacheableObject } from '../../../core/cache/cacheable-object.model';
-import { typedObject } from '../../../core/cache/builders/build-decorators';
-import { excludeFromEquals } from '../../../core/utilities/equals.decorators';
-import { ResourceType } from '../../../core/shared/resource-type';
+import {autoserialize, deserialize, inheritSerialization} from 'cerialize';
+import {LDN_SERVICE_CONSTRAINT_FILTER} from './ldn-service.resource-type';
+import {CacheableObject} from '../../../core/cache/cacheable-object.model';
+import {typedObject} from '../../../core/cache/builders/build-decorators';
+import {excludeFromEquals} from '../../../core/utilities/equals.decorators';
+import {ResourceType} from '../../../core/shared/resource-type';
 
 /** A single filter value and its properties. */
 @typedObject
 @inheritSerialization(CacheableObject)
 export class Itemfilter extends CacheableObject {
-    static type = LDN_SERVICE_CONSTRAINT_FILTER;
+  static type = LDN_SERVICE_CONSTRAINT_FILTER;
 
-    @excludeFromEquals
-    @autoserialize
-    type: ResourceType;
+  @excludeFromEquals
+  @autoserialize
+  type: ResourceType;
 
-    @autoserialize
-    id: string;
+  @autoserialize
+  id: string;
 
-    @deserialize
-    _links: {
-        self: {
-            href: string;
-        };
+  @deserialize
+  _links: {
+    self: {
+      href: string;
     };
+  };
 
-    get self(): string {
-        return this._links.self.href;
-    }
+  get self(): string {
+    return this._links.self.href;
+  }
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-patterns.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-patterns.model.ts
index 1103056e471..7fb8072a6f3 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-patterns.model.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-patterns.model.ts
@@ -1,13 +1,13 @@
-import { autoserialize } from 'cerialize';
+import {autoserialize} from 'cerialize';
 
 /**
  * notify service patterns
  */
 export class NotifyServicePattern {
-    @autoserialize
-    pattern: string;
-    @autoserialize
-    constraint: string;
-    @autoserialize
-    automatic: string;
+  @autoserialize
+  pattern: string;
+  @autoserialize
+  constraint: string;
+  @autoserialize
+  automatic: string;
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-status.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-status.model.ts
index d9e45d91a9c..040e4d37b8a 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-status.model.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service-status.model.ts
@@ -2,7 +2,7 @@
  * List of services statuses
  */
 export enum LdnServiceStatus {
-    UNKOWN,
-    DISABLED,
-    ENABLED,
+  UNKOWN,
+  DISABLED,
+  ENABLED,
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.constrain.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.constrain.model.ts
index 500cefbd526..5121e47f69d 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.constrain.model.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.constrain.model.ts
@@ -1,3 +1,3 @@
 export class LdnServiceConstrain {
-    void: any;
+  void: any;
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.resource-type.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.resource-type.ts
index 05a881e7e74..4fb510c032e 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.resource-type.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-service.resource-type.ts
@@ -4,7 +4,7 @@
  * Needs to be in a separate file to prevent circular
  * dependencies in webpack.
  */
-import { ResourceType } from '../../../core/shared/resource-type';
+import {ResourceType} from '../../../core/shared/resource-type';
 
 export const LDN_SERVICE = new ResourceType('ldnservice');
 export const LDN_SERVICE_CONSTRAINT_FILTERS = new ResourceType('itemfilters');
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-services.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-services.model.ts
index 26163f6234c..f3e421c9a2c 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/ldn-services.model.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/ldn-services.model.ts
@@ -1,60 +1,60 @@
-import { ResourceType } from '../../../core/shared/resource-type';
-import { CacheableObject } from '../../../core/cache/cacheable-object.model';
-import { autoserialize, deserialize, deserializeAs, inheritSerialization } from 'cerialize';
-import { LDN_SERVICE } from './ldn-service.resource-type';
-import { excludeFromEquals } from '../../../core/utilities/equals.decorators';
-import { typedObject } from '../../../core/cache/builders/build-decorators';
-import { NotifyServicePattern } from './ldn-service-patterns.model';
+import {ResourceType} from '../../../core/shared/resource-type';
+import {CacheableObject} from '../../../core/cache/cacheable-object.model';
+import {autoserialize, deserialize, deserializeAs, inheritSerialization} from 'cerialize';
+import {LDN_SERVICE} from './ldn-service.resource-type';
+import {excludeFromEquals} from '../../../core/utilities/equals.decorators';
+import {typedObject} from '../../../core/cache/builders/build-decorators';
+import {NotifyServicePattern} from './ldn-service-patterns.model';
 
 
 /** An LdnService  and its properties. */
 @typedObject
 @inheritSerialization(CacheableObject)
 export class LdnService extends CacheableObject {
-    static type = LDN_SERVICE;
+  static type = LDN_SERVICE;
 
-    @excludeFromEquals
-    @autoserialize
-    type: ResourceType;
+  @excludeFromEquals
+  @autoserialize
+  type: ResourceType;
 
-    @autoserialize
-    id: number;
+  @autoserialize
+  id: number;
 
-    @deserializeAs('id')
-    uuid: string;
+  @deserializeAs('id')
+  uuid: string;
 
-    @autoserialize
-    name: string;
+  @autoserialize
+  name: string;
 
-    @autoserialize
-    description: string;
+  @autoserialize
+  description: string;
 
-    @autoserialize
-    url: string;
+  @autoserialize
+  url: string;
 
-    @autoserialize
-    score: number;
+  @autoserialize
+  score: number;
 
-    @autoserialize
-    enabled: boolean;
+  @autoserialize
+  enabled: boolean;
 
-    @autoserialize
-    ldnUrl: string;
+  @autoserialize
+  ldnUrl: string;
 
-    @autoserialize
-    notifyServiceInboundPatterns?: NotifyServicePattern[];
+  @autoserialize
+  notifyServiceInboundPatterns?: NotifyServicePattern[];
 
-    @autoserialize
-    notifyServiceOutboundPatterns?: NotifyServicePattern[];
+  @autoserialize
+  notifyServiceOutboundPatterns?: NotifyServicePattern[];
 
-    @deserialize
-    _links: {
-        self: {
-            href: string;
-        };
+  @deserialize
+  _links: {
+    self: {
+      href: string;
     };
+  };
 
-    get self(): string {
-        return this._links.self.href;
-    }
+  get self(): string {
+    return this._links.self.href;
+  }
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-model/service-constrain-type.model.ts b/src/app/admin/admin-ldn-services/ldn-services-model/service-constrain-type.model.ts
index d3f55c815ef..c734503d951 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-model/service-constrain-type.model.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-model/service-constrain-type.model.ts
@@ -2,9 +2,9 @@
  * List of parameter types used for scripts
  */
 export enum LdnServiceConstrainType {
-    STRING = 'String',
-    DATE = 'date',
-    BOOLEAN = 'boolean',
-    FILE = 'InputStream',
-    OUTPUT = 'OutputStream'
+  STRING = 'String',
+  DATE = 'date',
+  BOOLEAN = 'boolean',
+  FILE = 'InputStream',
+  OUTPUT = 'OutputStream'
 }
diff --git a/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts b/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts
index 7b0c25e832e..8620bfc80c5 100644
--- a/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts
+++ b/src/app/admin/admin-ldn-services/ldn-services-patterns/ldn-service-coar-patterns.ts
@@ -1,69 +1,31 @@
 export const notifyPatterns = [
-    {
-        name: 'Acknowledge and Accept',
-        description: 'This pattern is used to acknowledge and accept a request (offer). It implies an intention to act on the request.',
-        category: 'Acknowledgements'
-    },
-    {
-        name: 'Acknowledge and Reject',
-        description: 'This pattern is used to acknowledge and reject a request (offer). It signifies no further action regarding the request.',
-        category: 'Acknowledgements'
-    },
-    {
-        name: 'Acknowledge and Tentatively Accept',
-        description: 'This pattern is used to acknowledge and tentatively accept a request (offer). It implies an intention to act, which may change.',
-        category: 'Acknowledgements'
-    },
-    {
-        name: 'Acknowledge and Tentatively Reject',
-        description: 'This pattern is used to acknowledge and tentatively reject a request (offer). It signifies no further action, subject to change.',
-        category: 'Acknowledgements'
-    },
-    {
-        name: 'Announce Endorsement',
-        description: 'This pattern is used to announce the existence of an endorsement, referencing the endorsed resource.',
-        category: 'Announcements'
-    },
-    {
-        name: 'Announce Ingest',
-        description: 'This pattern is used to announce that a resource has been ingested.',
-        category: 'Announcements'
-    },
-    {
-        name: 'Announce Relationship',
-        description: 'This pattern is used to announce a relationship between two resources.',
-        category: 'Announcements'
-    },
-    {
-        name: 'Announce Review',
-        description: 'This pattern is used to announce the existence of a review, referencing the reviewed resource.',
-        category: 'Announcements'
-    },
-    {
-        name: 'Announce Service Result',
-        description: 'This pattern is used to announce the existence of a "service result", referencing the relevant resource.',
-        category: 'Announcements'
-    },
-    {
-        name: 'Request Endorsement',
-        description: 'This pattern is used to request endorsement of a resource owned by the origin system.',
-        category: 'Requests'
-    },
-    {
-        name: 'Request Ingest',
-        description: 'This pattern is used to request that the target system ingest a resource.',
-        category: 'Requests'
-    },
-    {
-        name: 'Request Review',
-        description: 'This pattern is used to request a review of a resource owned by the origin system.',
-        category: 'Requests'
-    },
-    {
-        name: 'Undo Offer',
-        description: 'This pattern is used to undo (retract) an offer previously made.',
-        category: 'Undo'
-    }
+
+  'ack-accept',
+
+  'ack-reject',
+
+  'ack-tentative-accept',
+
+  'ack-tentative-reject',
+
+  'announce-endorsement',
+
+  'announce-ingest',
+
+  'announce-relationship',
+
+  'announce-review',
+
+  'announce-service-result',
+
+  'request-endorsement',
+
+  'request-ingest',
+
+  'request-review',
+
+  'undo-offer',
+
 ];
 
 
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index e5fd97e6305..fecd9113d64 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -938,6 +938,59 @@
   "ldn-new-service.form.placeholder.score": "Please enter a value between 0 and 1. Use the “.” as decimal separator",
   "ldn-new-service.form.label.inboundPattern": "Inbound Patterns",
   "ldn-new-service.form.label.placeholder.inboundPattern": "Select an Inbound Pattern",
+
+  "ldn-service.form.pattern.ack-accept.label": "Acknowledge and Accept",
+  "ldn-service.form.pattern.ack-accept.description": "This pattern is used to acknowledge and accept a request (offer). It implies an intention to act on the request.",
+  "ldn-service.form.pattern.ack-accept.category": "Acknowledgements",
+
+  "ldn-service.form.pattern.ack-reject.label": "Acknowledge and Reject",
+  "ldn-service.form.pattern.ack-reject.description": "This pattern is used to acknowledge and reject a request (offer). It signifies no further action regarding the request.",
+  "ldn-service.form.pattern.ack-reject.category": "Acknowledgements",
+
+  "ldn-service.form.pattern.ack-tentative-accept.label": "Acknowledge and Tentatively Accept",
+  "ldn-service.form.pattern.ack-tentative-accept.description": "This pattern is used to acknowledge and tentatively accept a request (offer). It implies an intention to act, which may change.",
+  "ldn-service.form.pattern.ack-tentative-accept.category": "Acknowledgements",
+
+  "ldn-service.form.pattern.ack-tentative-reject.label": "Acknowledge and Tentatively Reject",
+  "ldn-service.form.pattern.ack-tentative-reject.description": "This pattern is used to acknowledge and tentatively reject a request (offer). It signifies no further action, subject to change.",
+  "ldn-service.form.pattern.ack-tentative-reject.category": "Acknowledgements",
+
+  "ldn-service.form.pattern.announce-endorsement.label": "Announce Endorsement",
+  "ldn-service.form.pattern.announce-endorsement.description": "This pattern is used to announce the existence of an endorsement, referencing the endorsed resource.",
+  "ldn-service.form.pattern.announce-endorsement.category": "Announcements",
+
+  "ldn-service.form.pattern.announce-ingest.label": "Announce Ingest",
+  "ldn-service.form.pattern.announce-ingest.description": "This pattern is used to announce that a resource has been ingested.",
+  "ldn-service.form.pattern.announce-ingest.category": "Announcements",
+
+  "ldn-service.form.pattern.announce-relationship.label": "Announce Relationship",
+  "ldn-service.form.pattern.announce-relationship.description": "This pattern is used to announce a relationship between two resources.",
+  "ldn-service.form.pattern.announce-relationship.category": "Announcements",
+
+  "ldn-service.form.pattern.announce-review.label": "Announce Review",
+  "ldn-service.form.pattern.announce-review.description": "This pattern is used to announce the existence of a review, referencing the reviewed resource.",
+  "ldn-service.form.pattern.announce-review.category": "Announcements",
+
+  "ldn-service.form.pattern.announce-service-result.label": "Announce Service Result",
+  "ldn-service.form.pattern.announce-service-result.description": "This pattern is used to announce the existence of a 'service result', referencing the relevant resource.",
+  "ldn-service.form.pattern.announce-service-result.category": "Announcements",
+
+  "ldn-service.form.pattern.request-endorsement.label": "Request Endorsement",
+  "ldn-service.form.pattern.request-endorsement.description": "This pattern is used to request endorsement of a resource owned by the origin system.",
+  "ldn-service.form.pattern.request-endorsement.category": "Requests",
+
+  "ldn-service.form.pattern.request-ingest.label": "Request Ingest",
+  "ldn-service.form.pattern.request-ingest.description": "This pattern is used to request that the target system ingest a resource.",
+  "ldn-service.form.pattern.request-ingest.category": "Requests",
+
+  "ldn-service.form.pattern.request-review.label": "Request Review",
+  "ldn-service.form.pattern.request-review.description": "This pattern is used to request a review of a resource owned by the origin system.",
+  "ldn-service.form.pattern.request-review.category": "Requests",
+
+  "ldn-service.form.pattern.undo-offer.label": "Undo Offer",
+  "ldn-service.form.pattern.undo-offer.description": "This pattern is used to undo (retract) an offer previously made.",
+  "ldn-service.form.pattern.undo-offer.category": "Undo",
+
   "ldn-new-service.form.label.placeholder.selectedItemFilter": "No Item Filter Selected",
   "ldn-new-service.form.label.ItemFilter": "Item Filter",
   "ldn-new-service.form.label.automatic": "Automatic",