` (for text outputs like scan result), or `` (for status). Preview reads from the success-output field and updates in `updateView` when the underlying value changes. | | `inline-surface` | Custom — the PCF renders an interactive surface itself rather than triggering a native modal. v0 emits a `// TODO: design the inline surface` placeholder and STOPs with `DONE_WITH_CONCERNS`. | The skeleton below is **for `minimal` mode**. Adapt for `with-preview` by adding a preview element and a `renderPreview()` method called from `updateView` + after `setSuccess`. For `inline-surface`, the skeleton doesn't apply — see the v1+ guidance. **Generate complete working code, not a skeleton with placeholders.** Every line in `index.ts` is derived from a specific source — and dispatch args / response shapes come from the **native ground-truth contract resolved in Step 1.5**, not directly from the PRD. PRD describes intent; `manifest.json` + native source is what the running app actually exchanges. | Block in `index.ts` | Derived from | |---|---| | `COMPOSITE_KEY` + `METHOD` constants | `manifest.json` → `COMPOSITE_KEY = "/"` (composite routing key) and `METHOD = ""`. The composite key MUST match the receiver the manifest registers. | | Types | `Request`, `Response` defined inline in this file (the native-only bundle ships no shared TS `src/types.ts` to import — model the args the `@ReactMethod` parses and the `{status, result, error}` it resolves). | | Private output-field declarations | ARCHITECTURE §6.1 (output properties) (one private field per output, typed from §8.3's `Type` column, initialized to a safe default — `""` for text, `0` for numbers, `false` for boolean) — plus the `Json` raw-response diagnostic field. | | `applyStyles()` body | ARCHITECTURE §6.1 (configurable inputs) (one assignment per configurable input — button text, background, foreground, padding, etc.) using the actual property names from §8.2 | | `onTrigger()` payload-build (dispatch args) | **`Request`** (the object the `@ReactMethod` / `RCT_EXPORT_METHOD` reads as its one `ReadableMap`/`NSDictionary` param). ARCHITECTURE §6.1 (bound input) names which configurable/bound input flows into which field. It rides in the `sendAsync` envelope **`{ method: METHOD, args: [request] }`** — a **RAW object** (the PCF does NOT stringify it; `sendAsync` does) AND the inner `args` MUST be an array (§2). | | `onTrigger()` outcome branch | Single nested if/else covering four cases of the two-level error model, **each passing both a code AND a message to `setError`**: ① bridge OK + `payload.status === "ok"` → `setSuccess(payload.result)`. ② bridge OK + `payload.status === "error"` → `setError(payload.error, payload.message ?? "")` (the native-supplied human-readable reason). ③ bridge OK + payload shape unrecognized (even after `extractResponse` unwraps the wrap `message` container) → `setError("UNEXPECTED_PAYLOAD", "native response shape not recognized: " + this.Json.slice(0, 200))` — surface the RAW wire string, not the post-parse object. ④ `sendAsync` status !== "ok" / parse-fail / no host global → `setError("BRIDGE_FAILED", )` / `setError("PARSE", )` / `setError("NOT_IN_WRAP", )`. The RAW wire response is ALSO surfaced via the `Json` output. Single `notifyOutputChanged()` at the end. | | `setSuccess(result)` body | `Response["result"]` → ARCHITECTURE §6.1 (output properties). One assignment per §8.3 output, sourced from the corresponding response field. Sets `status="ok"` and **clears `errorCode=""` and `errorMessage=""`**. | | `setError(code, message)` body | ARCHITECTURE §5 (codes) + ARCHITECTURE §6.3 (error UX mapping) (UX per code). Simplest form: zero out result fields, set `status="error"`, `errorCode=code`, **`errorMessage=message`** (the human-readable reason — never drop it). If ARCHITECTURE §6.3 says specific codes need different output UX (e.g. USER_CANCELLED → status="cancelled"), branch inside `setError`; still set `errorMessage`. | | `getOutputs()` body | ARCHITECTURE §6.1 (output properties) — one returned entry per output, reading the private field. **MUST include `Status`, `ErrorCode`, and `ErrorMessage`** (and the `Json` raw output) so the failure is visible in Power Fx with no native debugger. | ### The skeleton (with derivation rules inline) Replace the default scaffolded `pcf/PCF/PCF/index.ts` with this structure, **substituting every value from the PRD**: ```ts import { IInputs, IOutputs } from "./generated/ManifestTypes"; // Domain contract — modeled INLINE. A native-only .ppmplugin ships NO shared TS layer, // so there's nothing to import: Request is the args the @ReactMethod parses, // Response is the {status, result, error} object it resolves. Mirror the module. interface Request { /* one field per dispatch arg the @ReactMethod parses */ } interface Response { status: "ok" | "error"; result?: Record; error?: string; message?: string; } // error — machine code (present when status === "error"); the PCF branches on it. // message — HUMAN-READABLE failure reason (present when status === "error"); the PCF surfaces it as ErrorMessage. // Bridge declaration — the wrap host injects `window.PowerApps.NativeExtension` // onto the Canvas WebView at boot (when CordovaV2 is enabled). The PCF dispatches // through its `sendAsync` global — it must NEVER call `cordova.exec` directly (the // raw `cordova` global is NOT exposed to the PCF sandbox, so a direct call is a // silent no-op on device, worst on Android). See shared/ppmplugin-format.md §2. // // Type it with a local ambient declaration in PowerAppsNativeExtension.d.ts (emitted // alongside this file) so the PCF stays host-agnostic and pins no SDK package. // deepParse: the wrap host double-/triple-stringifies the bridge response, so peel string // layers (bounded) until we reach an object. This is a BOUNDED helper used by extractResponse // to reach the container/payload — NOT a blind transport walk used on its own. // See shared/ppmplugin-format.md §2 "Wrap-bridge response quirks". function deepParse(v: unknown, max = 4): unknown { let cur = v; for (let i = 0; i < max && typeof cur === "string"; i++) { try { cur = JSON.parse(cur); } catch { break; } } return cur; } // extractResponse: the wrap transport ALSO wraps the module's JSON in a container object, // nesting it (still stringified) under a `message` key: // {"isUpdate":false,"message":"{\"status\":\"ok\",\"result\":{…}}"} // A bare parse lands on {isUpdate, message} (no top-level `status`) → UNEXPECTED_PAYLOAD // even though native succeeded. So peel string layers, THEN unwrap the container: probe // `message` (the confirmed wrap key) first, then defensive fallbacks, accepting the first // nested value that has a top-level `status`. When result.data already IS the {status,…} // object (the simple already-unwrapped case), the first check returns it directly — so this // is a strict superset of a single guarded parse. See shared/ppmplugin-format.md §2. function extractResponse(raw: unknown): unknown { const top = deepParse(raw); if (top && typeof top === "object" && "status" in top) return top; if (top && typeof top === "object") { for (const k of ["message", "result", "data", "value", "response", "body", "payload"]) { if (k in (top as Record)) { const inner = deepParse((top as Record)[k]); if (inner && typeof inner === "object" && "status" in inner) return inner; } } } return top; // fall through — UNEXPECTED_PAYLOAD surfaces the raw string for diagnosis } const COMPOSITE_KEY = "/"; // manifest.json — composite routing key; MUST match the receiver the manifest registers const METHOD = ""; // manifest.json receivers[].methods — a real @ReactMethod / RCT_EXPORT_METHOD name export class PCF implements ComponentFramework.StandardControl { private container!: HTMLDivElement; private notifyOutputChanged!: () => void; private context!: ComponentFramework.Context