PCF Control: Hardcoded Dropdown with Multi-Language Support

 The HardcodedDropdownControl is a Power Apps Component Framework (PCF) control that renders a dropdown list with predefined rejection or review reasons.

It supports English and Arabic UI text while storing a stable English value in Dataverse.

What the control does

• Displays a dropdown (<select>) with a placeholder and fixed options.

• Automatically switches the display language based on the user’s Power Apps language setting.

• Saves the selected value back to Dataverse.

• Restores the selected value when the record is reopened.

User-facing behavior

• If the user language is Arabic (languageId === 1025), all labels appear in Arabic.

• If the user language is not Arabic, English is used.

• The placeholder guides the user to make a selection.

• Clearing the selection resets the value to empty.

---

Technical Description

1. Control Definition

export class HardcodedDropdownControl
  implements ComponentFramework.StandardControl<IInputs, IOutputs>

• Implements StandardControl, meaning it follows the PCF lifecycle:

  • init

  • updateView

  • getOutputs

  • destroy

• Uses generated types from ManifestTypes to ensure type safety for inputs and outputs.

---

2. Private Members

private container!: HTMLDivElement;
private select!: HTMLSelectElement;
private notifyOutputChanged!: () => void;
private selectedValue: string | undefined;

• container: Root element provided by the PCF framework.

• select: Native HTML <select> element.

• notifyOutputChanged: Callback to inform Power Apps that data has changed.

• selectedValue: Stores the currently selected option for output binding.

---

3. init() – Control Initialization

This method runs once when the control is created.

Key steps:

a. Store framework references

this.notifyOutputChanged = notifyOutputChanged;
this.container = container;

These are needed later to trigger updates and render UI.

b. Create the dropdown

this.select = document.createElement("select");
this.select.style.width = "100%";

Uses plain HTML instead of any external UI library for simplicity and performance.

c. Detect user language

const isArabic = context.userSettings.languageId === 1025;

• 1025 is the LCID for Arabic.

• This flag controls which text is displayed.

d. Add placeholder option

placeholder.value = "";

• An empty value represents “no selection”.

• Text changes based on language.

• Ensures the field can be cleared.

e. Define hardcoded options

const options = [{ en, ar }, ...];

• English text is used as the stored value.

• Arabic text is only for display.

• This avoids data inconsistency and makes reporting easier.

f. Populate dropdown

opt.value = item.en;
opt.text = isArabic ? item.ar : item.en;

• Value saved to Dataverse is always English.

• UI language is dynamic.

g. Handle user selection

this.select.onchange = () => {
  this.selectedValue = value === "" ? undefined : value;
  this.notifyOutputChanged();
};

• Converts empty selection to undefined.

• Triggers Power Apps to call getOutputs().

---

4. updateView() – Sync UI with Data

Runs whenever Power Apps updates the control (record load, refresh, etc.).

const rawValue = context.parameters.sampleProperty.raw;

• PCF inputs can be string | null.

Logic:

• If a string exists, it is applied to the dropdown.

• If null, the dropdown resets to the placeholder.

This ensures:

• Existing data is shown correctly.

• No invalid value is assigned to the HTML control.

---

5. getOutputs() – Return Value to Power Apps

return {
  sampleProperty: this.selectedValue
};

• Returns the selected English value.

• If nothing is selected, returns undefined, which clears the field in Dataverse.

---

6. destroy() – Cleanup

public destroy(): void {
  // No cleanup required
}

• No event listeners or external resources to dispose.

• Safe to leave empty.

---

Design Notes

• No external dependencies: Uses native HTML for stability and speed.

• Language-safe storage: UI language can change without affecting saved data.

• Dataverse-friendly: Handles null, empty, and string values correctly.

• Maintainable: Options are centralized and easy to update.

Output

• Arabic

•   English