Skip to content

Power Apps Code Apps updates #700

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
1 commit merged into from
Feb 11, 2026
+38 −49
Merged

Power Apps Code Apps updates #700

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 38 additions & 49 deletions instructions/power-apps-code-apps.instructions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,

## Project Context

- **Power Apps Code Apps (Preview)**: Code-first web app development with Power Platform integration
- **Power Apps Code Apps**: Code-first web app development with Power Platform integration
- **TypeScript + React**: Recommended frontend stack with Vite bundler
- **Power Platform SDK**: @microsoft/power-apps (current version ^0.3.1) for connector integration
- **Power Platform SDK**: @microsoft/power-apps (current version ^1.0.3) for connector integration
Copy link

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This instruction now states the Power Apps SDK “current version” is @microsoft/power-apps ^1.0.3, but other Power Apps Code Apps assets in this repo still reference ^0.3.1 (e.g., prompts/power-apps-code-app-scaffold.prompt.md and agents/power-platform-expert.agent.md). This creates conflicting guidance within the same collection—please align the version (and any associated guidance) across the related prompt/agent or avoid calling a specific version “current” here.

Suggested change
- **Power Platform SDK**: @microsoft/power-apps (current version ^1.0.3) for connector integration
- **Power Platform SDK**: @microsoft/power-apps for connector integration

Copilot uses AI. Check for mistakes.
- **PAC CLI**: Power Platform CLI for project management and deployment
- **Port 3000**: Required for local development with Power Platform SDK
- **Power Apps Premium**: End-user licensing requirement for production use
Expand All @@ -25,14 +25,15 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
src/
├── components/ # Reusable UI components
├── hooks/ # Custom React hooks for Power Platform
├── services/ # Generated connector services (PAC CLI)
├── models/ # Generated TypeScript models (PAC CLI)
├── generated/
│ ├── services/ # Generated connector services (PAC CLI)
│ └── models/ # Generated TypeScript models (PAC CLI)
├── utils/ # Utility functions and helpers
├── types/ # TypeScript type definitions
├── PowerProvider.tsx # Power Platform initialization
├── PowerProvider.tsx # Power Platform context wrapper
└── main.tsx # Application entry point
```
- Keep generated files (`services/`, `models/`) separate from custom code
- Keep generated files (`generated/services/`, `generated/models/`) separate from custom code
- Use consistent naming conventions (kebab-case for files, PascalCase for components)

### TypeScript Configuration
Expand Down Expand Up @@ -77,7 +78,7 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
```typescript
// Example: Using custom PCF control for data visualization
import { PCFControlWrapper } from './components/PCFControlWrapper';

const MyComponent = () => {
return (
<PCFControlWrapper
Expand All @@ -95,7 +96,7 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
- **Embed Power BI reports**: Integrate interactive dashboards and reports
```typescript
import { PowerBIEmbed } from 'powerbi-client-react';

const DashboardComponent = () => {
return (
<PowerBIEmbed
Expand Down Expand Up @@ -123,12 +124,12 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
const processDocument = async (file: File) => {
const formData = new FormData();
formData.append('file', file);

const result = await AIBuilderService.ProcessDocument({
modelId: 'document-processing-model-id',
document: formData
});

return result.extractedFields;
};
```
Expand All @@ -141,12 +142,12 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
```typescript
import { DirectLine } from 'botframework-directlinejs';
import { WebChat } from 'botframework-webchat';

const ChatbotComponent = () => {
const directLine = new DirectLine({
token: chatbotToken
});

return (
<div style={{ height: '400px', width: '100%' }}>
<WebChat directLine={directLine} />
Expand All @@ -159,23 +160,11 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
- Use generated TypeScript services from PAC CLI for connector operations
- Implement proper authentication flows with Microsoft Entra ID
- Handle connector consent dialogs and permission management
- PowerProvider implementation pattern:
- PowerProvider implementation pattern (no SDK initialization required in v1.0):
```typescript
import { initialize } from "@microsoft/power-apps/app";
import { useEffect, type ReactNode } from "react";
import type { ReactNode } from "react";

export default function PowerProvider({ children }: { children: ReactNode }) {
useEffect(() => {
const initApp = async () => {
try {
await initialize();
console.log('Power Platform SDK initialized successfully');
} catch (error) {
console.error('Failed to initialize Power Platform SDK:', error);
}
};
initApp();
}, []);
return <>{children}</>;
}
Comment on lines +163 to 169
Copy link

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The PowerProvider example is described as a “context wrapper”, but the sample implementation is only a fragment passthrough and provides no context/value. Either update the example to demonstrate the intended provider/context responsibilities (or where SDK setup occurs), or adjust the wording so readers don’t assume this component sets up Power Platform context.

Copilot uses AI. Check for mistakes.
```
Expand Down Expand Up @@ -221,7 +210,7 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
// Handle polymorphic customer lookup (Account or Contact)
const customerType = record.customerType; // 'account' or 'contact'
const customerId = record.customerId;
const customer = customerType === 'account'
const customer = customerType === 'account'
? await AccountService.get(customerId)
: await ContactService.get(customerId);
```
Expand Down Expand Up @@ -257,7 +246,7 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
const transaction = db.transaction(['data'], 'readwrite');
transaction.objectStore('data').put({ id: key, data, timestamp: Date.now() });
}

async loadData(key: string) {
const db = await this.openDB();
const transaction = db.transaction(['data'], 'readonly');
Expand Down Expand Up @@ -397,9 +386,9 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
onClick: () => void;
children: React.ReactNode;
}
export const Button: React.FC<ButtonProps> = ({
variant, size, disabled, onClick, children

export const Button: React.FC<ButtonProps> = ({
variant, size, disabled, onClick, children
}) => {
const classes = `btn btn-${variant} btn-${size} ${disabled ? 'btn-disabled' : ''}`;
return <button className={classes} onClick={onClick} disabled={disabled}>{children}</button>;
Expand All @@ -416,14 +405,14 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
theme: 'light',
toggleTheme: () => {}
});

export const ThemeProvider: React.FC<{children: ReactNode}> = ({ children }) => {
const [theme, setTheme] = useState<'light' | 'dark'>('light');

const toggleTheme = () => {
setTheme(prev => prev === 'light' ? 'dark' : 'light');
};

return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
<div className={`theme-${theme}`}>{children}</div>
Expand All @@ -441,7 +430,7 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
.card-container {
container-type: inline-size;
}

@container (min-width: 400px) {
.card {
display: grid;
Expand All @@ -456,7 +445,7 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
- **Framer Motion integration**: Smooth animations and transitions
```typescript
import { motion, AnimatePresence } from 'framer-motion';

const AnimatedCard = () => {
return (
<motion.div
Expand All @@ -480,8 +469,8 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
- **ARIA implementation**: Proper semantic markup and ARIA attributes
```typescript
// Example: Accessible modal component
const Modal: React.FC<{isOpen: boolean, onClose: () => void, children: ReactNode}> = ({
isOpen, onClose, children
const Modal: React.FC<{isOpen: boolean, onClose: () => void, children: ReactNode}> = ({
isOpen, onClose, children
}) => {
useEffect(() => {
if (isOpen) {
Expand All @@ -491,11 +480,11 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
}
return () => { document.body.style.overflow = 'unset'; };
}, [isOpen]);

return (
<div
role="dialog"
aria-modal="true"
<div
role="dialog"
aria-modal="true"
aria-labelledby="modal-title"
className={isOpen ? 'modal-open' : 'modal-hidden'}
>
Expand All @@ -512,10 +501,10 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
- **React-intl integration**: Multi-language support
```typescript
import { FormattedMessage, useIntl } from 'react-intl';

const WelcomeMessage = ({ userName }: { userName: string }) => {
const intl = useIntl();

return (
<h1>
<FormattedMessage
Expand All @@ -539,8 +528,8 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
- Content Security Policy (CSP) not yet supported
- Storage SAS IP restrictions not supported
- No Power Platform Git integration
- No Dataverse solutions support
- No native Azure Application Insights integration
- Dataverse solutions supported, but solution packager and source code integration are limited
- Application Insights supported through SDK logger configuration (no built-in native integration)
Copy link

Copilot AI Feb 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These updated “Known Limitations” entries (Dataverse solutions + Application Insights support) now diverge from the limitations listed in agents/power-platform-expert.agent.md (which still says “no native Application Insights”). To avoid confusing users who install the whole collection, please reconcile the limitations wording across the related agent/prompt/instructions or add a pointer to the authoritative source/version these statements apply to.

Suggested change
- Application Insights supported through SDK logger configuration (no built-in native integration)
- Application Insights has no native built-in integration; only limited, non-native wiring via SDK logger configuration is possible (see `agents/power-platform-expert.agent.md` for canonical limitations)

Copilot uses AI. Check for mistakes.

### Workarounds

Expand All @@ -567,7 +556,7 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
- **Package installation failures**: Clear npm cache with `npm cache clean --force` and reinstall
- **TypeScript compilation errors**: Check verbatimModuleSyntax setting and SDK compatibility
- **Connector permission errors**: Ensure proper consent flow and admin permissions
- **PowerProvider initialization errors**: Check console for SDK initialization failures
- **PowerProvider issues**: Ensure v1.0 apps do not wait on SDK initialization
- **Vite dev server issues**: Ensure host and port configuration match requirements

### Deployment Issues
Expand All @@ -577,11 +566,11 @@ Instructions for generating high-quality Power Apps Code Apps using TypeScript,
- **Connector unavailable**: Verify connector setup in Power Platform and connection status
- **Performance issues**: Optimize bundle size with `npm run build --report` and implement caching
- **Environment mismatch**: Confirm correct environment selection with `pac env list`
- **App timeout errors**: Check PowerProvider.tsx implementation and network connectivity
- **App timeout errors**: Check build output and network connectivity

### Runtime Issues

- **"App timed out" errors**: Verify npm run build was executed and PowerProvider is error-free
- **"App timed out" errors**: Verify npm run build was executed and the deployment output is valid
- **Connector authentication prompts**: Ensure proper consent flow implementation
- **Data loading failures**: Check network requests and connector permissions
- **UI rendering issues**: Verify Fluent UI compatibility and responsive design implementation
Expand Down
Loading