diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/karma.conf.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/karma.conf.js
index 5ffa7d98cb..568ec857ed 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/karma.conf.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/karma.conf.js
@@ -19,38 +19,35 @@
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 
 module.exports = function (config) {
-  config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      jasmine: {
-        // you can add configuration options for Jasmine here
-        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
-        // for example, you can disable the random execution with `random: false`
-        // or set a specific seed with `seed: 4321`
-      },
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
-    jasmineHtmlReporter: {
-      suppressAll: true // removes the duplicated traces
-    },
-    coverageReporter: {
-      dir: require('path').join(__dirname, './coverage/nifi'),
-      subdir: '.',
-      reporters: [
-        { type: 'html' },
-        { type: 'text-summary' }
-      ]
-    },
-    reporters: ['progress', 'kjhtml'],
-    browsers: ['ChromeHeadless'],
-    restartOnFileChange: true
-  });
+    config.set({
+        basePath: '',
+        frameworks: ['jasmine', '@angular-devkit/build-angular'],
+        plugins: [
+            require('karma-jasmine'),
+            require('karma-chrome-launcher'),
+            require('karma-jasmine-html-reporter'),
+            require('karma-coverage'),
+            require('@angular-devkit/build-angular/plugins/karma')
+        ],
+        client: {
+            jasmine: {
+                // you can add configuration options for Jasmine here
+                // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+                // for example, you can disable the random execution with `random: false`
+                // or set a specific seed with `seed: 4321`
+            },
+            clearContext: false // leave Jasmine Spec Runner output visible in browser
+        },
+        jasmineHtmlReporter: {
+            suppressAll: true // removes the duplicated traces
+        },
+        coverageReporter: {
+            dir: require('path').join(__dirname, './coverage/nifi'),
+            subdir: '.',
+            reporters: [{ type: 'html' }, { type: 'text-summary' }]
+        },
+        reporters: ['progress', 'kjhtml'],
+        browsers: ['ChromeHeadless'],
+        restartOnFileChange: true
+    });
 };
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json
index 7f54077afd..1f33078257 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/package.json
@@ -43,11 +43,11 @@
         "@angular-devkit/build-angular": "^16.2.0",
         "@angular/cli": "~16.2.0",
         "@angular/compiler-cli": "^16.2.0",
+        "@types/codemirror": "^5.60.13",
         "@types/d3": "^7.4.0",
         "@types/humanize-duration": "^3.27.1",
         "@types/jasmine": "~4.3.0",
         "@types/webfontloader": "^1.6.35",
-        "@types/codemirror": "^5.60.13",
         "autoprefixer": "^10.4.15",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-prettier": "^5.0.0",
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/canvas/ui/header/search/search.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/canvas/ui/header/search/search.component.html
index da09c7b8ce..4249a64961 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/canvas/ui/header/search/search.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/canvas/ui/header/search/search.component.html
@@ -190,7 +190,7 @@
                 </a>
                 <ng-template #resultLink>
                     <a [routerLink]="['/process-groups', result.parentGroup.id, path, result.id]">
-                        {{ result.name }}
+                        {{ result.name ? result.name : result.id }}
                     </a>
                 </ng-template>
             </li>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/shared/index.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/shared/index.ts
index 21f7077bc3..90d9490fa7 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/shared/index.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/state/shared/index.ts
@@ -171,6 +171,8 @@ export interface ParameterContextReference {
 
 export interface AffectedComponentEntity {
     permissions: Permissions;
+    id: string;
+    revision: Revision;
     bulletins: BulletinEntity[];
     component: AffectedComponent;
     processGroup: ProcessGroupName;
@@ -289,8 +291,8 @@ export interface PropertyDescriptor {
     name: string;
     displayName: string;
     description: string;
-    defaultValue: string;
-    allowableValues: AllowableValueEntity[];
+    defaultValue?: string;
+    allowableValues?: AllowableValueEntity[];
     required: boolean;
     sensitive: boolean;
     dynamic: boolean;
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.html
index dd28ec7df7..502d7693f4 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.html
@@ -24,7 +24,8 @@
                     formControlName="value"
                     [placeholder]="getComboPlaceholder()"
                     [panelClass]="'combo-panel'"
-                    (mousedown)="preventDrag($event)">
+                    (mousedown)="preventDrag($event)"
+                    (selectionChange)="allowableValueChanged($event.value)">
                     <ng-container *ngFor="let allowableValue of allowableValues">
                         <ng-container *ngIf="allowableValue.description; else noDescription">
                             <mat-option
@@ -49,6 +50,41 @@
                     </ng-container>
                 </mat-select>
             </div>
+            <div *ngIf="showParameterAllowableValues">
+                <div *ngIf="!parametersLoaded; else showParameters">
+                    <ngx-skeleton-loader count="1"></ngx-skeleton-loader>
+                </div>
+                <ng-template #showParameters>
+                    <mat-select
+                        class="combo"
+                        formControlName="parameterReference"
+                        [panelClass]="'combo-panel'"
+                        (mousedown)="preventDrag($event)">
+                        <ng-container *ngFor="let parameterAllowableValue of parameterAllowableValues">
+                            <ng-container *ngIf="parameterAllowableValue.description; else noDescription">
+                                <mat-option
+                                    [value]="parameterAllowableValue.id"
+                                    (mousedown)="preventDrag($event)"
+                                    nifiTooltip
+                                    [tooltipComponentType]="TextTip"
+                                    [tooltipInputData]="getAllowableValueOptionTipData(parameterAllowableValue)"
+                                    [delayClose]="false">
+                                    <span class="option-text" [class.unset]="parameterAllowableValue.value == null">{{
+                                        parameterAllowableValue.displayName
+                                    }}</span>
+                                </mat-option>
+                            </ng-container>
+                            <ng-template #noDescription>
+                                <mat-option [value]="parameterAllowableValue.id" (mousedown)="preventDrag($event)">
+                                    <span class="option-text" [class.unset]="parameterAllowableValue.value == null">{{
+                                        parameterAllowableValue.displayName
+                                    }}</span>
+                                </mat-option>
+                            </ng-template>
+                        </ng-container>
+                    </mat-select>
+                </ng-template>
+            </div>
             <div class="flex justify-end items-center gap-x-2">
                 <button
                     color="accent"
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.spec.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.spec.ts
index 8397e0a0a4..a54496db20 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.spec.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.spec.ts
@@ -18,19 +18,67 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ComboEditor } from './combo-editor.component';
+import { PropertyItem } from '../../property-table.component';
+import { Parameter } from '../../../../../state/shared';
+import { of } from 'rxjs';
 
 describe('ComboEditor', () => {
     let component: ComboEditor;
     let fixture: ComponentFixture<ComboEditor>;
 
+    let item: PropertyItem | null = null;
+    let parameters: Parameter[] = [
+        {
+            name: 'one',
+            description: 'Description for one.',
+            sensitive: false,
+            value: 'value',
+            provided: false,
+            referencingComponents: [],
+            parameterContext: {
+                id: '95d4f3d2-018b-1000-b7c7-b830c49a8026',
+                permissions: {
+                    canRead: true,
+                    canWrite: true
+                },
+                component: {
+                    id: '95d4f3d2-018b-1000-b7c7-b830c49a8026',
+                    name: 'params 1'
+                }
+            },
+            inherited: false
+        },
+        {
+            name: 'two',
+            description: 'Description for two.',
+            sensitive: false,
+            value: 'value',
+            provided: false,
+            referencingComponents: [],
+            parameterContext: {
+                id: '95d4f3d2-018b-1000-b7c7-b830c49a8026',
+                permissions: {
+                    canRead: true,
+                    canWrite: true
+                },
+                component: {
+                    id: '95d4f3d2-018b-1000-b7c7-b830c49a8026',
+                    name: 'params 1'
+                }
+            },
+            inherited: false
+        }
+    ];
+
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [ComboEditor]
         });
         fixture = TestBed.createComponent(ComboEditor);
         component = fixture.componentInstance;
-        component.supportsParameters = false;
-        component.item = {
+
+        // re-establish the item before each test execution
+        item = {
             property: 'Destination',
             value: 'flowfile-attribute',
             descriptor: {
@@ -69,10 +117,114 @@ describe('ComboEditor', () => {
             dirty: false,
             type: 'required'
         };
-        fixture.detectChanges();
     });
 
     it('should create', () => {
-        expect(component).toBeTruthy();
+        if (item) {
+            component.item = item;
+            fixture.detectChanges();
+
+            expect(component).toBeTruthy();
+        }
+    });
+
+    it('verify combo value', () => {
+        if (item) {
+            component.item = item;
+            fixture.detectChanges();
+
+            const formValue = component.comboEditorForm.get('value')?.value;
+            expect(component.itemLookup.get(formValue)?.value).toEqual(item.value);
+            expect(component.comboEditorForm.get('parameterReference')).toBeNull();
+
+            spyOn(component.ok, 'next');
+            component.okClicked();
+            expect(component.ok.next).toHaveBeenCalledWith(item.value);
+        }
+    });
+
+    it('verify combo not required with null value and default', () => {
+        if (item) {
+            item.value = null;
+            item.descriptor.required = false;
+
+            component.item = item;
+            fixture.detectChanges();
+
+            const formValue = component.comboEditorForm.get('value')?.value;
+            expect(component.itemLookup.get(formValue)?.value).toEqual(item.descriptor.defaultValue);
+            expect(component.comboEditorForm.get('parameterReference')).toBeNull();
+
+            spyOn(component.ok, 'next');
+            component.okClicked();
+            expect(component.ok.next).toHaveBeenCalledWith(item.descriptor.defaultValue);
+        }
+    });
+
+    it('verify combo not required with null value and no default', () => {
+        if (item) {
+            item.value = null;
+            item.descriptor.required = false;
+            item.descriptor.defaultValue = undefined;
+
+            component.item = item;
+            fixture.detectChanges();
+
+            const formValue = component.comboEditorForm.get('value')?.value;
+            expect(component.itemLookup.get(formValue)?.value).toEqual(item.value);
+            expect(component.comboEditorForm.get('parameterReference')).toBeNull();
+
+            spyOn(component.ok, 'next');
+            component.okClicked();
+            expect(component.ok.next).toHaveBeenCalledWith(item.value);
+        }
+    });
+
+    it('verify combo with parameter reference', () => {
+        if (item) {
+            item.value = '#{one}';
+
+            component.item = item;
+            component.getParameters = (sensitive: boolean) => {
+                return of(parameters);
+            };
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                const formValue = component.comboEditorForm.get('value')?.value;
+                expect(component.itemLookup.get(formValue)?.value).toEqual(item?.value);
+                expect(component.comboEditorForm.get('parameterReference')).toBeDefined();
+
+                const parameterReferenceValue = component.comboEditorForm.get('parameterReference')?.value;
+                expect(component.itemLookup.get(parameterReferenceValue)?.value).toEqual(item?.value);
+
+                spyOn(component.ok, 'next');
+                component.okClicked();
+                expect(component.ok.next).toHaveBeenCalledWith(item?.value);
+            });
+        }
+    });
+
+    it('verify combo with missing parameter reference', () => {
+        if (item) {
+            item.value = '#{three}';
+
+            component.item = item;
+            component.getParameters = (sensitive: boolean) => {
+                return of(parameters);
+            };
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                const formValue = component.comboEditorForm.get('value')?.value;
+                expect(component.itemLookup.get(formValue)?.value).toEqual('#{' + parameters[0].value + '}');
+                expect(component.comboEditorForm.get('parameterReference')).toBeDefined();
+
+                const parameterReferenceValue = component.comboEditorForm.get('parameterReference')?.value;
+                expect(component.itemLookup.get(parameterReferenceValue)?.value).toEqual(item?.value);
+
+                spyOn(component.ok, 'next');
+                component.okClicked();
+                expect(component.ok.next).toHaveBeenCalledWith('#{' + parameters[0].value + '}');
+            });
+        }
     });
 });
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.ts
index 8750382e8e..574c2e6d34 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/combo-editor/combo-editor.component.ts
@@ -25,12 +25,14 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
 import { NifiTooltipDirective } from '../../../tooltips/nifi-tooltip.directive';
-import { PropertyDescriptor, AllowableValue, TextTipInput } from '../../../../../state/shared';
+import { AllowableValue, Parameter, PropertyDescriptor, TextTipInput } from '../../../../../state/shared';
 import { MatOptionModule } from '@angular/material/core';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TextTip } from '../../../tooltips/text-tip/text-tip.component';
 import { A11yModule } from '@angular/cdk/a11y';
+import { Observable, take } from 'rxjs';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 export interface AllowableValueItem extends AllowableValue {
     id: number;
@@ -55,57 +57,32 @@ export interface AllowableValueItem extends AllowableValue {
         NgForOf,
         MatTooltipModule,
         NgIf,
-        A11yModule
+        A11yModule,
+        NgxSkeletonLoaderModule
     ],
     styleUrls: ['./combo-editor.component.scss']
 })
 export class ComboEditor {
     @Input() set item(item: PropertyItem) {
-        this.itemLookup.clear();
+        if (item.value != null) {
+            this.configuredValue = item.value;
+        } else if (item.descriptor.defaultValue != null) {
+            this.configuredValue = item.descriptor.defaultValue;
+        }
+
         this.descriptor = item.descriptor;
-        this.allowableValues = [];
+        this.sensitive = item.descriptor.sensitive;
 
-        let i: number = 0;
-        let selectedItem: AllowableValueItem | null = null;
-
-        if (!this.descriptor.required) {
-            const noValue: AllowableValueItem = {
-                id: i++,
-                displayName: 'No value',
-                value: null
-            };
-            this.itemLookup.set(noValue.id, noValue);
-            this.allowableValues.push(noValue);
-
-            if (noValue.value == item.value) {
-                selectedItem = noValue;
-            }
-        }
-
-        const allowableValueItems: AllowableValueItem[] = this.descriptor.allowableValues.map(
-            (allowableValueEntity) => {
-                const allowableValue: AllowableValueItem = {
-                    ...allowableValueEntity.allowableValue,
-                    id: i++
-                };
-                this.itemLookup.set(allowableValue.id, allowableValue);
-
-                if (allowableValue.value == item.value) {
-                    selectedItem = allowableValue;
-                }
-
-                return allowableValue;
-            }
-        );
-        this.allowableValues.push(...allowableValueItems);
-
-        if (selectedItem) {
-            // mat-select does not have good support for options with null value so we've
-            // introduced a mapping to work around the shortcoming
-            this.comboEditorForm.get('value')?.setValue(selectedItem.id);
-        }
+        this.itemSet = true;
+        this.initialAllowableValues();
+    }
+
+    @Input() set getParameters(getParameters: (sensitive: boolean) => Observable<Parameter[]>) {
+        this._getParameters = getParameters;
+
+        this.supportsParameters = getParameters != null;
+        this.initialAllowableValues();
     }
-    @Input() supportsParameters: boolean = false;
 
     @Output() ok: EventEmitter<any> = new EventEmitter<any>();
     @Output() cancel: EventEmitter<void> = new EventEmitter<void>();
@@ -113,21 +90,172 @@ export class ComboEditor {
     protected readonly TextTip = TextTip;
 
     itemLookup: Map<number, AllowableValueItem> = new Map<number, AllowableValueItem>();
+    referencesParametersId: number = -1;
+    configuredParameterId: number = -1;
 
     comboEditorForm: FormGroup;
     descriptor!: PropertyDescriptor;
     allowableValues!: AllowableValueItem[];
 
+    showParameterAllowableValues: boolean = false;
+    parameterAllowableValues!: AllowableValueItem[];
+
+    sensitive: boolean = false;
+    supportsParameters: boolean = false;
+    parametersLoaded: boolean = false;
+
+    itemSet: boolean = false;
+    configuredValue: string | null = null;
+    _getParameters!: (sensitive: boolean) => Observable<Parameter[]>;
+
     constructor(private formBuilder: FormBuilder) {
         this.comboEditorForm = this.formBuilder.group({
             value: new FormControl(null, Validators.required)
         });
     }
 
+    initialAllowableValues(): void {
+        if (this.itemSet) {
+            this.itemLookup.clear();
+            this.allowableValues = [];
+            this.referencesParametersId = -1;
+
+            let i: number = 0;
+            let selectedItem: AllowableValueItem | null = null;
+
+            if (!this.descriptor.required) {
+                const noValue: AllowableValueItem = {
+                    id: i++,
+                    displayName: 'No value',
+                    value: null
+                };
+                this.itemLookup.set(noValue.id, noValue);
+                this.allowableValues.push(noValue);
+
+                if (noValue.value == this.configuredValue) {
+                    selectedItem = noValue;
+                }
+            }
+
+            if (this.descriptor.allowableValues) {
+                const allowableValueItems: AllowableValueItem[] = this.descriptor.allowableValues.map(
+                    (allowableValueEntity) => {
+                        const allowableValue: AllowableValueItem = {
+                            ...allowableValueEntity.allowableValue,
+                            id: i++
+                        };
+                        this.itemLookup.set(allowableValue.id, allowableValue);
+
+                        if (allowableValue.value == this.configuredValue) {
+                            selectedItem = allowableValue;
+                        }
+
+                        return allowableValue;
+                    }
+                );
+                this.allowableValues.push(...allowableValueItems);
+            }
+
+            if (this.supportsParameters) {
+                this.parametersLoaded = false;
+
+                // parameters are supported so add the item to support showing
+                // and hiding the parameter options select
+                const referencesParameterOption: AllowableValueItem = {
+                    id: i++,
+                    displayName: 'Reference Parameter...',
+                    value: null
+                };
+                this.allowableValues.push(referencesParameterOption);
+                this.itemLookup.set(referencesParameterOption.id, referencesParameterOption);
+
+                // record the item of the item to more easily identify this item
+                this.referencesParametersId = referencesParameterOption.id;
+
+                // if the current value references a parameter auto select the
+                // references parameter item
+                if (this.referencesParameter(this.configuredValue)) {
+                    selectedItem = referencesParameterOption;
+
+                    // trigger allowable value changed to show the parameters
+                    this.allowableValueChanged(this.referencesParametersId);
+                }
+
+                this._getParameters(this.sensitive)
+                    .pipe(take(1))
+                    .subscribe((parameters) => {
+                        if (parameters.length > 0) {
+                            // capture the value of i which will be the id of the first
+                            // parameter
+                            this.configuredParameterId = i;
+
+                            // create allowable values for each parameter
+                            parameters.forEach((parameter) => {
+                                const parameterItem: AllowableValueItem = {
+                                    id: i++,
+                                    displayName: parameter.name,
+                                    value: '#{' + parameter.name + '}',
+                                    description: parameter.description
+                                };
+                                this.parameterAllowableValues.push(parameterItem);
+                                this.itemLookup.set(parameterItem.id, parameterItem);
+
+                                // if the configured parameter is still available,
+                                // capture the id, so we can auto select it
+                                if (parameterItem.value === this.configuredValue) {
+                                    this.configuredParameterId = parameterItem.id;
+                                }
+                            });
+
+                            // if combo still set to reference a parameter, set the default value
+                            if (this.comboEditorForm.get('value')?.value == this.referencesParametersId) {
+                                this.comboEditorForm.get('parameterReference')?.setValue(this.configuredParameterId);
+                            }
+                        }
+
+                        this.parametersLoaded = true;
+                    });
+            } else {
+                this.parameterAllowableValues = [];
+            }
+
+            if (selectedItem) {
+                // mat-select does not have good support for options with null value so we've
+                // introduced a mapping to work around the shortcoming
+                this.comboEditorForm.get('value')?.setValue(selectedItem.id);
+            }
+        }
+    }
+
+    referencesParameter(value: string | null): boolean {
+        if (value) {
+            return value.startsWith('#{') && value.endsWith('}');
+        }
+
+        return false;
+    }
+
     preventDrag(event: MouseEvent): void {
         event.stopPropagation();
     }
 
+    allowableValueChanged(value: number): void {
+        this.showParameterAllowableValues = value === this.referencesParametersId;
+
+        if (this.showParameterAllowableValues) {
+            if (this.configuredParameterId === -1) {
+                this.comboEditorForm.addControl('parameterReference', new FormControl(null, Validators.required));
+            } else {
+                this.comboEditorForm.addControl(
+                    'parameterReference',
+                    new FormControl(this.configuredParameterId, Validators.required)
+                );
+            }
+        } else {
+            this.comboEditorForm.removeControl('parameterReference');
+        }
+    }
+
     getComboPlaceholder(): string {
         const valueControl: AbstractControl | null = this.comboEditorForm.get('value');
         if (valueControl) {
@@ -150,7 +278,21 @@ export class ComboEditor {
         if (valueControl) {
             const selectedItem: AllowableValueItem | undefined = this.itemLookup.get(valueControl.value);
             if (selectedItem) {
-                this.ok.next(selectedItem.value);
+                // if the value currently references a parameter emit the parameter, get the parameter reference control and emit that value
+                if (selectedItem.id == this.referencesParametersId) {
+                    const parameterReferenceControl: AbstractControl | null =
+                        this.comboEditorForm.get('parameterReference');
+                    if (parameterReferenceControl) {
+                        const selectedParameterItem: AllowableValueItem | undefined = this.itemLookup.get(
+                            parameterReferenceControl.value
+                        );
+                        if (selectedParameterItem) {
+                            this.ok.next(selectedParameterItem.value);
+                        }
+                    }
+                } else {
+                    this.ok.next(selectedItem.value);
+                }
             }
         }
     }
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.spec.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.spec.ts
index d28d0a96a7..083a591e6b 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.spec.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.spec.ts
@@ -19,6 +19,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { NfEditor } from './nf-editor.component';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { PropertyItem } from '../../property-table.component';
 
 describe('NfEditor', () => {
     let component: NfEditor;
@@ -30,10 +31,84 @@ describe('NfEditor', () => {
         });
         fixture = TestBed.createComponent(NfEditor);
         component = fixture.componentInstance;
-        fixture.detectChanges();
     });
 
     it('should create', () => {
+        fixture.detectChanges();
         expect(component).toBeTruthy();
     });
+
+    it('verify value set', () => {
+        const value: string = 'my-group-id';
+        const item: PropertyItem = {
+            property: 'group.id',
+            value,
+            descriptor: {
+                name: 'group.id',
+                displayName: 'Group ID',
+                description:
+                    "A Group ID is used to identify consumers that are within the same consumer group. Corresponds to Kafka's 'group.id' property.",
+                required: true,
+                sensitive: false,
+                dynamic: false,
+                supportsEl: true,
+                expressionLanguageScope: 'Environment variables defined at JVM level and system properties',
+                dependencies: []
+            },
+            id: 3,
+            triggerEdit: false,
+            deleted: false,
+            added: false,
+            dirty: false,
+            type: 'required'
+        };
+
+        component.item = item;
+        fixture.detectChanges();
+
+        expect(component.nfEditorForm.get('value')?.value).toEqual(value);
+        expect(component.nfEditorForm.get('value')?.disabled).toBeFalse();
+        expect(component.nfEditorForm.get('setEmptyString')?.value).toBeFalse();
+
+        spyOn(component.ok, 'next');
+        component.okClicked();
+        expect(component.ok.next).toHaveBeenCalledWith(value);
+    });
+
+    it('verify empty value set', () => {
+        const value: string = '';
+        const item: PropertyItem = {
+            property: 'group.id',
+            value,
+            descriptor: {
+                name: 'group.id',
+                displayName: 'Group ID',
+                description:
+                    "A Group ID is used to identify consumers that are within the same consumer group. Corresponds to Kafka's 'group.id' property.",
+                required: true,
+                sensitive: false,
+                dynamic: false,
+                supportsEl: true,
+                expressionLanguageScope: 'Environment variables defined at JVM level and system properties',
+                dependencies: []
+            },
+            id: 3,
+            triggerEdit: false,
+            deleted: false,
+            added: false,
+            dirty: false,
+            type: 'required'
+        };
+
+        component.item = item;
+        fixture.detectChanges();
+
+        expect(component.nfEditorForm.get('value')?.value).toEqual(value);
+        expect(component.nfEditorForm.get('value')?.disabled).toBeTruthy();
+        expect(component.nfEditorForm.get('setEmptyString')?.value).toBeTruthy();
+
+        spyOn(component.ok, 'next');
+        component.okClicked();
+        expect(component.ok.next).toHaveBeenCalledWith(value);
+    });
 });
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.ts
index 6086b635f5..acf4feec45 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/editors/nf-editor/nf-editor.component.ts
@@ -15,18 +15,7 @@
  * limitations under the License.
  */
 
-import {
-    AfterViewInit,
-    Component,
-    ElementRef,
-    EventEmitter,
-    Input,
-    OnDestroy,
-    Output,
-    Renderer2,
-    ViewChild,
-    ViewContainerRef
-} from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, Output, Renderer2, ViewContainerRef } from '@angular/core';
 import { PropertyItem } from '../../property-table.component';
 import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
 import { AbstractControl, FormBuilder, FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html
index c069eb5ad9..563f9cc304 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html
@@ -145,6 +145,7 @@
             <combo-editor
                 *ngIf="hasAllowableValues(editorItem); else nfEditor"
                 [item]="editorItem"
+                [getParameters]="getParameters"
                 (ok)="savePropertyValue(editorItem, $event)"
                 (cancel)="closeEditor()"></combo-editor>
             <ng-template #nfEditor>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.ts b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.ts
index 36af490253..0900ead04d 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.ts
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.ts
@@ -347,8 +347,8 @@ export class PropertyTable implements AfterViewInit, ControlValueAccessor {
     }
 
     resolvePropertyValue(property: Property): string | null {
-        const allowableValues: AllowableValueEntity[] = property.descriptor.allowableValues;
-        if (this.nifiCommon.isEmpty(allowableValues)) {
+        const allowableValues: AllowableValueEntity[] | undefined = property.descriptor.allowableValues;
+        if (allowableValues == null || this.nifiCommon.isEmpty(allowableValues)) {
             return property.value;
         } else {
             const allowableValue: AllowableValueEntity | undefined = allowableValues.find(
@@ -392,7 +392,7 @@ export class PropertyTable implements AfterViewInit, ControlValueAccessor {
         // TODO - add Input() for supportsGoTo? currently only false in summary table
 
         const descriptor: PropertyDescriptor = item.descriptor;
-        if (item.value && descriptor.identifiesControllerService) {
+        if (item.value && descriptor.identifiesControllerService && descriptor.allowableValues) {
             return descriptor.allowableValues.some(
                 (entity: AllowableValueEntity) => entity.allowableValue.value == item.value
             );