diff --git a/demo-shell/resources/i18n/en.json b/demo-shell/resources/i18n/en.json
index 0aace31066..a725c10ed6 100644
--- a/demo-shell/resources/i18n/en.json
+++ b/demo-shell/resources/i18n/en.json
@@ -292,7 +292,8 @@
   "PEOPLE_GROUPS_CLOUD": {
     "SINGLE": "Single",
     "MULTI": "Multi",
-    "PRESELECTED_VALUE": "Preselected value"
+    "PRESELECTED_VALUE": "Preselect value",
+    "ROLE": "Preselect roles"
   },
   "ABOUT": {
     "TITLE": "Plugins",
diff --git a/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.html b/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.html
index 66f2f4deb0..d3d0854560 100644
--- a/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.html
+++ b/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.html
@@ -1,4 +1,4 @@
-<mat-card class="adf-people-groups-section">
+<mat-card class="adf-section">
     <mat-card-title>
         {{ 'APP_LAYOUT.PEOPLE_CLOUD' | translate}}
     </mat-card-title>
@@ -6,16 +6,22 @@
     <mat-card-content>
         <div class="people-control-options">
             <mat-radio-group (change)="onChangePeopleMode($event)">
-                <mat-radio-button class="adf-people-single-mode" value="{{ peopleSingleMode }}">{{ 'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
-                <mat-radio-button class="adf-people-multiple-mode" value="{{ peopleMultipleMode }}">{{ 'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
+                <mat-radio-button class="adf-people-single-mode" value="{{ peopleSingleMode }}">{{
+                    'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
+                <mat-radio-button class="adf-people-multiple-mode" value="{{ peopleMultipleMode }}">{{
+                    'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
             </mat-radio-group>
+            <mat-form-field class="adf-preselect-value">
+                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }}</mat-label>
+                <input matInput (input)="setPeopleRoles($event)" placeholder="['ACTIVITI_ADMIN']" />
+            </mat-form-field>
             <mat-form-field class="adf-preselect-value">
                 <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.PRESELECTED_VALUE' | translate }}</mat-label>
-                <input matInput (input)="setPeoplePreselectValue($event.target.value)" />
+                <input matInput (input)="setPeoplePreselectValue($event)" />
             </mat-form-field>
         </div>
         <div>
-            <adf-cloud-people [preSelectUsers]="preSelectUsers" [mode]="peopleMode"></adf-cloud-people>
+            <adf-cloud-people [preSelectUsers]="preSelectUsers" [roles]="peopleRoles" [mode]="peopleMode"></adf-cloud-people>
         </div>
 
         <div class="adf-people-list" *ngIf="canShowPeopleList()">
@@ -29,7 +35,7 @@
     </mat-card-content>
 </mat-card>
 
-<mat-card class="adf-people-groups-section">
+<mat-card class="adf-section">
     <mat-card-title>
         {{ 'APP_LAYOUT.GROUPS_CLOUD' | translate}}
     </mat-card-title>
@@ -37,12 +43,18 @@
     <mat-card-content>
         <div class="groups-control-options">
             <mat-radio-group (change)="onChangeGroupsMode($event)">
-                <mat-radio-button class="adf-people-single-mode" value="{{ groupSingleMode }}">{{ 'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
-                <mat-radio-button class="adf-people-multiple-mode" value="{{ groupMultipleMode }}">{{ 'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
+                <mat-radio-button class="adf-people-single-mode" value="{{ groupSingleMode }}">{{
+                    'PEOPLE_GROUPS_CLOUD.SINGLE' | translate }}</mat-radio-button>
+                <mat-radio-button class="adf-people-multiple-mode" value="{{ groupMultipleMode }}">{{
+                    'PEOPLE_GROUPS_CLOUD.MULTI' | translate }}</mat-radio-button>
             </mat-radio-group>
+            <mat-form-field class="adf-preselect-value">
+                <mat-label>{{ 'PEOPLE_GROUPS_CLOUD.ROLE' | translate }}</mat-label>
+                <input matInput (input)="setGroupRoles($event)" placeholder="['ACTIVITI_ADMIN']" />
+            </mat-form-field>
         </div>
         <div>
-            <adf-cloud-group [mode]="groupMode" [preSelectGroups]="preSelectGroup" (selectGroup)="onSelectGroup($event)"
+            <adf-cloud-group [mode]="groupMode" [roles]="groupRoles" [preSelectGroups]="preSelectGroup" (selectGroup)="onSelectGroup($event)"
                 (removeGroup)="onRemoveGroup($event)"></adf-cloud-group>
         </div>
 
diff --git a/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.scss b/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.scss
index d47134a4a0..935416075e 100644
--- a/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.scss
+++ b/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.scss
@@ -1,5 +1,5 @@
 .adf {
-    &-people-groups-section {
+    &-section {
         mat-card-title {
             font-size:18px;
             font-weight: bold;
@@ -12,8 +12,11 @@
             }
         }
 
-        mat-card-content .adf-preselect-value {
-            width: calc(100% - 160px);
+        mat-card-content {
+
+            .adf-preselect-value {
+                margin-right: 15px;
+            }
         }
     }
 }
diff --git a/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.ts b/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.ts
index c96643d99c..524ab507cb 100644
--- a/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.ts
+++ b/demo-shell/src/app/components/app-layout/cloud/people-groups-cloud-demo.component.ts
@@ -28,26 +28,28 @@ import { MatRadioChange } from '@angular/material';
 export class PeopleGroupCloudDemoComponent {
 
     peopleMode: string = PeopleCloudComponent.MODE_SINGLE;
-    preSelectUsers: any = [];
+    preSelectUsers: string[] = [];
+    peopleRoles: string[] = [];
 
     groupMode: string = GroupCloudComponent.MODE_SINGLE;
-    preSelectGroup: any = [];
-    selectedGroupList: any = [];
+    preSelectGroup: string[] = [];
+    selectedGroupList: GroupModel[] = [];
+    groupRoles: string[];
 
-    setPeoplePreselectValue(value: string) {
-        if (this.isStringArray(value)) {
-            this.preSelectUsers = JSON.parse(value);
-        } else if (value.length === 0) {
-            this.preSelectUsers = [];
-        }
+    setPeoplePreselectValue(event: any) {
+        this.preSelectUsers = this.getArrayFromString(event.target.value);
     }
 
-    setGroupsPreselectValue(value: string) {
-        if (this.isStringArray(value)) {
-            this.preSelectGroup = JSON.parse(value);
-        } else if (value.length === 0) {
-            this.preSelectGroup = [];
-        }
+    setGroupsPreselectValue(event: any) {
+        this.preSelectGroup = this.getArrayFromString(event.target.value);
+    }
+
+    setPeopleRoles(event: any) {
+        this.peopleRoles = this.getArrayFromString(event.target.value);
+    }
+
+    setGroupRoles(event: any) {
+        this.groupRoles = this.getArrayFromString(event.target.value);
     }
 
     onChangePeopleMode(event: MatRadioChange) {
@@ -67,6 +69,15 @@ export class PeopleGroupCloudDemoComponent {
         }
     }
 
+    private getArrayFromString(value: string) {
+
+        if (this.isStringArray(value)) {
+            return JSON.parse(value);
+        } else {
+            return [];
+        }
+    }
+
     canShowPeopleList() {
         return this.peopleMode === GroupCloudComponent.MODE_MULTIPLE;
     }