power-apps-codeapps-blog-part2/README.md

# Power Apps Code Apps — Part 2: Connectors & Outlook

> Full email client in a code app, built with React + Fluent UI v9, powered by the Outlook connector.

This is the companion repo for [Part 2 of the blog series](https://www.thatsagoodquestion.info/power-apps-code-apps). Make sure you've completed Part 1 before continuing.

---

## What you'll build

An Outlook-like email client with:

- **Folder navigation** — Inbox, Sent, Drafts, Trash
- **Email list** — unread indicators, avatar colors, relative timestamps
- **Reading pane** — full email body with Reply / Forward / Delete
- **Compose dialog** — Fluent UI v9 dialog with validation
- **Connections panel** — visual reference of connectors + PAC CLI commands
- **Real-time search** — filter messages instantly by sender or subject

All built with **Fluent UI v9** (`@fluentui/react-components`) and the **Outlook connector** — the same connector available to 1,400+ Power Platform integrations.

---

## Prerequisites

| Requirement | Version |
|---|---|
| **Node.js** | 18+ |
| **npm** | 9+ |
| **PAC CLI** | 2.6+ (`dotnet tool install -g Microsoft.PowerApps.CLI`) |
| **Power Apps environment** | Licensed user |
| **Microsoft 365 account** | For the Outlook connector |

---

## Quick start

```bash
# 1. Clone & install
git clone <this-repo>
cd power-apps-codeapps-blog-part2
npm install

# 2. Run locally
npm run dev
# → opens at http://localhost:5173

# 3. Build for production
npm run build
```

> The app uses mock data by default. To connect to real Outlook data, follow the connector setup below.

---

## Project structure

```
power-apps-codeapps-blog-part2/
├── index.html               HTML shell
├── package.json              Dependencies & scripts
├── tsconfig.json             TypeScript config
├── vite.config.ts            Vite dev server & build
├── power.config.json         Power Platform app manifest (required by PAC CLI)
└── src/
    ├── main.tsx              Entry point — FluentProvider + theme
    ├── App.tsx               Main UI: nav rail, folders, email list, reading pane
    ├── index.css             Minimal reset (Fluent handles all component styles)
    ├── types/
    │   └── index.ts          Shared TypeScript types (Email, Folder, UserProfile)
    └── services/
        └── OutlookService.ts Mock connector (mirrors real generated service API)
```

---

## Architecture

```
┌──────────────────────────────────────────────────────┐
│                    Your Code App                      │
│                                                       │
│   React + Fluent UI  →  Service Layer  →  Connector   │
│                                              ↕        │
│              ┌───────────────────────────────────┐    │
│              │    Power Platform Connectors       │    │
│              │  ───────────────────────────────── │    │
│              │  Outlook  │  Dataverse  │  Custom  │    │
│              └───────────────────────────────────┘    │
└──────────────────────────────────────────────────────┘
```

The app talks to connectors through a **typed service layer**. In development, `OutlookService.ts` returns mock data. In production, swap it for the auto-generated service from `pac code add-data-source`.

---

## Connecting to real data

### 1. Check your connections

```bash
pac connection list
```

Example output:

```
Connected as lago@powerplatform.top
Id                               Name        API Id                                              Status
4839c34829284206bf6a11d4ce577491 Outlook.com /providers/Microsoft.PowerApps/apis/shared_outlook  Connected
```

### 2. Add the connector

```bash
pac code add-data-source \
  -a shared_outlook \
  -c 4839c34829284206bf6a11d4ce577491
```

This auto-generates typed TypeScript files:

```
src/connectors/shared_outlook/
  ├── OutlookModel.ts      ← request/response types
  └── OutlookService.ts    ← typed service with all connector actions
```

### 3. (Optional) Add Dataverse

```bash
pac code add-data-source \
  -a shared_commondataservice \
  -c <connection-id> \
  -t accounts \
  -d default
```

### 4. Swap mock for real service

Replace the import in `App.tsx`:

```diff
- import { OutlookService } from './services/OutlookService';
+ import { OutlookService } from './connectors/shared_outlook/OutlookService';
```

The method signatures are identical — no other changes needed.

---

## Connection references (theory)

Code apps use **connection references** instead of binding directly to a user-specific connection. Benefits:

| Benefit | Description |
|---|---|
| **Environment promotion** | Connections change per environment (dev → staging → prod) without code changes |
| **Managed identity** | Use system-assigned identities instead of user credentials |
| **Governance** | IT can audit which apps use which connectors via DLP policies |

---

## Fluent UI v9

This project uses [Fluent UI v9](https://react.fluentui.dev/) — the same design system that powers Microsoft 365:

- `FluentProvider` with `webLightTheme` / `webDarkTheme` (auto-detected)
- `makeStyles` for zero-runtime CSS-in-JS
- Design tokens (`tokens.colorBrandBackground`, etc.) for consistent theming
- All components: `Avatar`, `Badge`, `Button`, `Dialog`, `Input`, `Textarea`, `Spinner`, `Tooltip`, `Divider`, `ToolbarButton`

---

## NPM scripts

| Script | Description |
|---|---|
| `npm run dev` | Start Vite dev server at `http://localhost:5173` |
| `npm run build` | Type-check + production build |
| `npm run preview` | Preview the production build locally |

---

## Deploy to Power Platform

```bash
pac code deploy
```

This packages the app and registers it in your environment. Then add it to a solution and publish.

---

## Key differences from Canvas Apps

| Aspect | Canvas Apps | Code Apps |
|---|---|---|
| **UI Framework** | Power Fx formula bar | React / Vue / Svelte |
| **Connector access** | Built-in connector picker | PAC CLI + typed client library |
| **Data model** | Implicit, delegation-based | Explicit TypeScript types |
| **Styling** | Themed controls | Fluent UI / any CSS framework |
| **Deployment** | Packaged by Power Platform | `pac code deploy` + solution |
| **Source control** | Limited | Full git-native workflow |

---

## Supported connectors

Code apps support **1,400+ connectors**:

| Category | Examples |
|---|---|
| **Microsoft 365** | Outlook, Teams, SharePoint, OneDrive, Planner |
| **Dataverse** | Common Data Service (Dataverse) |
| **Data** | SQL Server, OData |
| **SaaS** | Salesforce, SAP, ServiceNow, Slack |
| **Custom** | Any standard REST connector |

**Not yet supported:** Excel Online (Business), Excel Online (OneDrive).

---

## References

- [How to: Connect your code app to data](https://learn.microsoft.com/en-us/power-apps/developer/code-apps/how-to/connect-to-data) — Microsoft Learn
- [Power Apps code apps overview](https://learn.microsoft.com/en-us/power-apps/developer/code-apps/overview) — Microsoft Learn
- [Code apps architecture](https://learn.microsoft.com/en-us/power-apps/developer/code-apps/architecture) — Microsoft Learn
- [Use CLI to discover, create, and wire connectors](https://learn.microsoft.com/en-us/power-platform/release-plan/2026wave1/power-apps/use-cli-discover-create-wire-connectors-code-apps) — Microsoft Learn
- [pac connection list](https://learn.microsoft.com/en-us/power-platform/developer/cli/reference/connection#pac-connection-list) — PAC CLI reference
- [pac code add-data-source](https://learn.microsoft.com/en-us/power-platform/developer/cli/reference/code#pac-code-add-data-source) — PAC CLI reference
- [Connector classification (DLP)](https://learn.microsoft.com/en-us/power-platform/admin/dlp-connector-classification) — Microsoft Learn
- [Fluent UI v9 — React components](https://react.fluentui.dev/) — Microsoft
- [Part 1: Power Apps code apps tutorial](https://www.thatsagoodquestion.info/power-apps-code-apps) — That's a good question