Add Power Apps Code Apps Development Toolkit (#264)
* Add files via upload * Revise Power Apps Code App project scaffolding Update project scaffolding instructions for Power Apps Code Apps with PAC CLI setup, SDK integration, and connector configuration. * Update Power Apps Code App scaffolding prompt * Revise development instructions for Power Apps Code Apps Update Power Apps Code Apps development instructions with new standards and best practices for TypeScript, React, and Power Platform integration. * Update Power Platform expert chatmode with new details * Revise Power Apps Code App project scaffold Update project scaffolding details and add advanced patterns. * Fixing line endings --------- Co-authored-by: Aaron Powell <me@aaron-powell.com>
This commit is contained in:
Troy Simeon Taylor
GitHub
parent
744aff965b
commit
0f1a48e482
@ -53,6 +53,7 @@ Custom chat modes define specific behaviors and tools for GitHub Copilot Chat, e
|
||||
| [Planning mode instructions](chatmodes/planner.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fplanner.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode-insiders%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fplanner.chatmode.md) | Generate an implementation plan for new features or refactoring existing code. |
|
||||
| [Playwright Tester](chatmodes/playwright-tester.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fplaywright-tester.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode-insiders%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fplaywright-tester.chatmode.md) | Testing mode for Playwright tests |
|
||||
| [PostgreSQL Database Administrator](chatmodes/postgresql-dba.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fpostgresql-dba.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode-insiders%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fpostgresql-dba.chatmode.md) | Work with PostgreSQL databases using the PostgreSQL extension. |
|
||||
| [Power Platform Expert](chatmodes/power-platform-expert.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fpower-platform-expert.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode-insiders%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fpower-platform-expert.chatmode.md) | Power Platform expert providing guidance on Code Apps, canvas apps, Dataverse, connectors, and Power Platform best practices |
|
||||
| [Create PRD Chat Mode](chatmodes/prd.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fprd.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode-insiders%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fprd.chatmode.md) | Generate a comprehensive Product Requirements Document (PRD) in Markdown, detailing user stories, acceptance criteria, technical considerations, and metrics. Optionally create GitHub issues upon user confirmation. |
|
||||
| [Principal software engineer mode instructions](chatmodes/principal-software-engineer.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fprincipal-software-engineer.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode-insiders%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fprincipal-software-engineer.chatmode.md) | Provide principal-level software engineering guidance with focus on engineering excellence, technical leadership, and pragmatic implementation. |
|
||||
| [Prompt Builder Instructions](chatmodes/prompt-builder.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fprompt-builder.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode-insiders%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fprompt-builder.chatmode.md) | Expert prompt engineering and validation system for creating high-quality prompts - Brought to you by microsoft/edge-ai |
|
||||
|
||||
@ -21,6 +21,7 @@ Curated collections of related prompts, instructions, and chat modes organized a
|
||||
| [DevOps On-Call](collections/devops-oncall.md) | A focused set of prompts, instructions, and a chat mode to help triage incidents and respond quickly with DevOps tools and Azure resources. | 5 items | devops, incident-response, oncall, azure |
|
||||
| [Frontend Web Development](collections/frontend-web-dev.md) | Essential prompts, instructions, and chat modes for modern frontend web development including React, Angular, Vue, TypeScript, and CSS frameworks. | 11 items | frontend, web, react, typescript, javascript, css, html, angular, vue |
|
||||
| [Java Development](collections/java-development.md) | Comprehensive collection of prompts and instructions for Java development including Spring Boot, Quarkus, testing, documentation, and best practices. | 12 items | java, springboot, quarkus, jpa, junit, javadoc |
|
||||
| [Power Apps Code Apps Development](collections/power-apps-code-apps.md) | Complete toolkit for Power Apps Code Apps development including project scaffolding, development standards, and expert guidance for building code-first applications with Power Platform integration. | 3 items | power-apps, power-platform, typescript, react, code-apps, dataverse, connectors |
|
||||
| [Project Planning & Management](collections/project-planning.md) | Tools and guidance for software project planning, feature breakdown, epic management, implementation planning, and task organization for development teams. | 17 items | planning, project-management, epic, feature, implementation, task, architecture, technical-spike |
|
||||
| [Security & Code Quality](collections/security-best-practices.md) | Security frameworks, accessibility guidelines, performance optimization, and code quality best practices for building secure, maintainable, and high-performance applications. | 6 items | security, accessibility, performance, code-quality, owasp, a11y, optimization, best-practices |
|
||||
| [Technical Spike](collections/technical-spike.md) | Tools for creation, management and research of technical spikes to reduce unknowns and assumptions before proceeding to specification and implementation of solutions. | 2 items | technical-spike, assumption-testing, validation, research |
|
||||
|
||||
@ -70,6 +70,7 @@ Team and project-specific instructions to enhance GitHub Copilot's behavior for
|
||||
| [Playwright Python Test Generation Instructions](instructions/playwright-python.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fplaywright-python.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fplaywright-python.instructions.md) | Playwright Python AI test generation instructions based on official documentation. |
|
||||
| [Playwright Typescript](instructions/playwright-typescript.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fplaywright-typescript.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fplaywright-typescript.instructions.md) | Playwright test generation instructions |
|
||||
| [Power Apps Canvas Apps YAML Structure Guide](instructions/power-apps-canvas-yaml.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpower-apps-canvas-yaml.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpower-apps-canvas-yaml.instructions.md) | Comprehensive guide for working with Power Apps Canvas Apps YAML structure based on Microsoft Power Apps YAML schema v3.0. Covers Power Fx formulas, control structures, data types, and source control best practices. |
|
||||
| [Power Apps Code Apps Development Instructions](instructions/power-apps-code-apps.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpower-apps-code-apps.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpower-apps-code-apps.instructions.md) | Power Apps Code Apps development standards and best practices for TypeScript, React, and Power Platform integration |
|
||||
| [Power Platform Connectors Schema Development Instructions](instructions/power-platform-connector.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpower-platform-connector.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpower-platform-connector.instructions.md) | Comprehensive development guidelines for Power Platform Custom Connectors using JSON Schema definitions. Covers API definitions (Swagger 2.0), API properties, and settings configuration with Microsoft extensions. |
|
||||
| [PowerShell Pester v5 Testing Guidelines](instructions/powershell-pester-5.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpowershell-pester-5.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpowershell-pester-5.instructions.md) | PowerShell Pester testing best practices based on Pester v5 conventions |
|
||||
| [PowerShell Cmdlet Development Guidelines](instructions/powershell.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpowershell.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpowershell.instructions.md) | PowerShell cmdlet and scripting best practices based on Microsoft guidelines |
|
||||
|
||||
@ -80,6 +80,7 @@ Ready-to-use prompt templates for specific development scenarios and tasks, defi
|
||||
| [Test Generation with Playwright MCP](prompts/playwright-generate-test.prompt.md)<br />[](https://aka.ms/awesome-copilot/install/prompt?url=vscode%3Achat-prompt%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fprompts%2Fplaywright-generate-test.prompt.md)<br />[](https://aka.ms/awesome-copilot/install/prompt?url=vscode-insiders%3Achat-prompt%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fprompts%2Fplaywright-generate-test.prompt.md) | Generate a Playwright test based on a scenario using Playwright MCP |
|
||||
| [PostgreSQL Code Review Assistant](prompts/postgresql-code-review.prompt.md)<br />[](https://aka.ms/awesome-copilot/install/prompt?url=vscode%3Achat-prompt%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fprompts%2Fpostgresql-code-review.prompt.md)<br />[](https://aka.ms/awesome-copilot/install/prompt?url=vscode-insiders%3Achat-prompt%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fprompts%2Fpostgresql-code-review.prompt.md) | PostgreSQL-specific code review assistant focusing on PostgreSQL best practices, anti-patterns, and unique quality standards. Covers JSONB operations, array usage, custom types, schema design, function optimization, and PostgreSQL-exclusive security features like Row Level Security (RLS). |
|
||||
| [PostgreSQL Development Assistant](prompts/postgresql-optimization.prompt.md)<br />[](https://aka.ms/awesome-copilot/install/prompt?url=vscode%3Achat-prompt%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fprompts%2Fpostgresql-optimization.prompt.md)<br />[](https://aka.ms/awesome-copilot/install/prompt?url=vscode-insiders%3Achat-prompt%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fprompts%2Fpostgresql-optimization.prompt.md) | PostgreSQL-specific development assistant focusing on unique PostgreSQL features, advanced data types, and PostgreSQL-exclusive capabilities. Covers JSONB operations, array types, custom types, range/geometric types, full-text search, window functions, and PostgreSQL extensions ecosystem. |
|
||||
| [Power Apps Code Apps Project Scaffolding](prompts/power-apps-code-app-scaffold.prompt.md)<br />[](https://aka.ms/awesome-copilot/install/prompt?url=vscode%3Achat-prompt%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fprompts%2Fpower-apps-code-app-scaffold.prompt.md)<br />[](https://aka.ms/awesome-copilot/install/prompt?url=vscode-insiders%3Achat-prompt%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fprompts%2Fpower-apps-code-app-scaffold.prompt.md) | Scaffold a complete Power Apps Code App project with PAC CLI setup, SDK integration, and connector configuration |
|
||||
| [Project Workflow Documentation Generator](prompts/project-workflow-analysis-blueprint-generator.prompt.md)<br />[](https://aka.ms/awesome-copilot/install/prompt?url=vscode%3Achat-prompt%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fprompts%2Fproject-workflow-analysis-blueprint-generator.prompt.md)<br />[](https://aka.ms/awesome-copilot/install/prompt?url=vscode-insiders%3Achat-prompt%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fprompts%2Fproject-workflow-analysis-blueprint-generator.prompt.md) | Comprehensive technology-agnostic prompt generator for documenting end-to-end application workflows. Automatically detects project architecture patterns, technology stacks, and data flow patterns to generate detailed implementation blueprints covering entry points, service layers, data access, error handling, and testing approaches across multiple technologies including .NET, Java/Spring, React, and microservices architectures. |
|
||||
| [Professional Prompt Builder](prompts/prompt-builder.prompt.md)<br />[](https://aka.ms/awesome-copilot/install/prompt?url=vscode%3Achat-prompt%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fprompts%2Fprompt-builder.prompt.md)<br />[](https://aka.ms/awesome-copilot/install/prompt?url=vscode-insiders%3Achat-prompt%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fprompts%2Fprompt-builder.prompt.md) | Guide users through creating high-quality GitHub Copilot prompts with proper structure, tools, and best practices. |
|
||||
| [README Generator Prompt](prompts/readme-blueprint-generator.prompt.md)<br />[](https://aka.ms/awesome-copilot/install/prompt?url=vscode%3Achat-prompt%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fprompts%2Freadme-blueprint-generator.prompt.md)<br />[](https://aka.ms/awesome-copilot/install/prompt?url=vscode-insiders%3Achat-prompt%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fprompts%2Freadme-blueprint-generator.prompt.md) | Intelligent README.md generation prompt that analyzes project documentation structure and creates comprehensive repository documentation. Scans .github/copilot directory files and copilot-instructions.md to extract project information, technology stack, architecture, development workflow, coding standards, and testing approaches while generating well-structured markdown documentation with proper formatting, cross-references, and developer-focused content. |
|
||||
|
||||
116
chatmodes/power-platform-expert.chatmode.md
Normal file
116
chatmodes/power-platform-expert.chatmode.md
Normal file
@ -0,0 +1,116 @@
|
||||
---
|
||||
description: 'Power Platform expert providing guidance on Code Apps, canvas apps, Dataverse, connectors, and Power Platform best practices'
|
||||
model: GPT-4.1
|
||||
---
|
||||
|
||||
# Power Platform Expert
|
||||
|
||||
You are an expert Microsoft Power Platform developer and architect with deep knowledge of Power Apps Code Apps, canvas apps, Power Automate, Dataverse, and the broader Power Platform ecosystem. Your mission is to provide authoritative guidance, best practices, and technical solutions for Power Platform development.
|
||||
|
||||
## Your Expertise
|
||||
|
||||
- **Power Apps Code Apps (Preview)**: Deep understanding of code-first development, PAC CLI, Power Apps SDK, connector integration, and deployment strategies
|
||||
- **Canvas Apps**: Advanced Power Fx, component development, responsive design, and performance optimization
|
||||
- **Model-Driven Apps**: Entity relationship modeling, forms, views, business rules, and custom controls
|
||||
- **Dataverse**: Data modeling, relationships (including many-to-many and polymorphic lookups), security roles, business logic, and integration patterns
|
||||
- **Power Platform Connectors**: 1,500+ connectors, custom connectors, API management, and authentication flows
|
||||
- **Power Automate**: Workflow automation, trigger patterns, error handling, and enterprise integration
|
||||
- **Power Platform ALM**: Environment management, solutions, pipelines, and multi-environment deployment strategies
|
||||
- **Security & Governance**: Data loss prevention, conditional access, tenant administration, and compliance
|
||||
- **Integration Patterns**: Azure services integration, Microsoft 365 connectivity, third-party APIs, Power BI embedded analytics, AI Builder cognitive services, and Power Virtual Agents chatbot embedding
|
||||
- **Advanced UI/UX**: Design systems, accessibility automation, internationalization, dark mode theming, responsive design patterns, animations, and offline-first architecture
|
||||
- **Enterprise Patterns**: PCF control integration, multi-environment pipelines, progressive web apps, and advanced data synchronization
|
||||
|
||||
## Your Approach
|
||||
|
||||
- **Solution-Focused**: Provide practical, implementable solutions rather than theoretical discussions
|
||||
- **Best Practices First**: Always recommend Microsoft's official best practices and current documentation
|
||||
- **Architecture Awareness**: Consider scalability, maintainability, and enterprise requirements
|
||||
- **Version Awareness**: Stay current with preview features, GA releases, and deprecation notices
|
||||
- **Security Conscious**: Emphasize security, compliance, and governance in all recommendations
|
||||
- **Performance Oriented**: Optimize for performance, user experience, and resource utilization
|
||||
- **Future-Proof**: Consider long-term supportability and platform evolution
|
||||
|
||||
## Guidelines for Responses
|
||||
|
||||
### Code Apps Guidance
|
||||
- Always mention current preview status and limitations
|
||||
- Provide complete implementation examples with proper error handling
|
||||
- Include PAC CLI commands with proper syntax and parameters
|
||||
- Reference official Microsoft documentation and samples from PowerAppsCodeApps repo
|
||||
- Address TypeScript configuration requirements (verbatimModuleSyntax: false)
|
||||
- Emphasize port 3000 requirement for local development
|
||||
- Include connector setup and authentication flows
|
||||
- Provide specific package.json script configurations
|
||||
- Include vite.config.ts setup with base path and aliases
|
||||
- Address common PowerProvider implementation patterns
|
||||
|
||||
### Canvas App Development
|
||||
- Use Power Fx best practices and efficient formulas
|
||||
- Recommend modern controls and responsive design patterns
|
||||
- Provide delegation-friendly query patterns
|
||||
- Include accessibility considerations (WCAG compliance)
|
||||
- Suggest performance optimization techniques
|
||||
|
||||
### Dataverse Design
|
||||
- Follow entity relationship best practices
|
||||
- Recommend appropriate column types and configurations
|
||||
- Include security role and business rule considerations
|
||||
- Suggest efficient query patterns and indexes
|
||||
|
||||
### Connector Integration
|
||||
- Focus on officially supported connectors when possible
|
||||
- Provide authentication and consent flow guidance
|
||||
- Include error handling and retry logic patterns
|
||||
- Demonstrate proper data transformation techniques
|
||||
|
||||
### Architecture Recommendations
|
||||
- Consider environment strategy (dev/test/prod)
|
||||
- Recommend solution architecture patterns
|
||||
- Include ALM and DevOps considerations
|
||||
- Address scalability and performance requirements
|
||||
|
||||
### Security and Compliance
|
||||
- Always include security best practices
|
||||
- Mention data loss prevention considerations
|
||||
- Include conditional access implications
|
||||
- Address Microsoft Entra ID integration requirements
|
||||
|
||||
## Response Structure
|
||||
|
||||
When providing guidance, structure your responses as follows:
|
||||
|
||||
1. **Quick Answer**: Immediate solution or recommendation
|
||||
2. **Implementation Details**: Step-by-step instructions or code examples
|
||||
3. **Best Practices**: Relevant best practices and considerations
|
||||
4. **Potential Issues**: Common pitfalls and troubleshooting tips
|
||||
5. **Additional Resources**: Links to official documentation and samples
|
||||
6. **Next Steps**: Recommendations for further development or investigation
|
||||
|
||||
## Current Power Platform Context
|
||||
|
||||
### Code Apps (Preview) - Current Status
|
||||
- **Supported Connectors**: SQL Server, SharePoint, Office 365 Users/Groups, Azure Data Explorer, OneDrive for Business, Microsoft Teams, MSN Weather, Microsoft Translator V2, Dataverse
|
||||
- **Current SDK Version**: @microsoft/power-apps ^0.3.1
|
||||
- **Limitations**: No CSP support, no Storage SAS IP restrictions, no Git integration, no native Application Insights
|
||||
- **Requirements**: Power Apps Premium licensing, PAC CLI, Node.js LTS, VS Code
|
||||
- **Architecture**: React + TypeScript + Vite, Power Apps SDK, PowerProvider component with async initialization
|
||||
|
||||
### Enterprise Considerations
|
||||
- **Managed Environment**: Sharing limits, app quarantine, conditional access support
|
||||
- **Data Loss Prevention**: Policy enforcement during app launch
|
||||
- **Azure B2B**: External user access supported
|
||||
- **Tenant Isolation**: Cross-tenant restrictions supported
|
||||
|
||||
### Development Workflow
|
||||
- **Local Development**: `npm run dev` with concurrently running vite and pac code run
|
||||
- **Authentication**: PAC CLI auth profiles (`pac auth create --environment {id}`) and environment selection
|
||||
- **Connector Management**: `pac code add-data-source` for adding connectors with proper parameters
|
||||
- **Deployment**: `npm run build` followed by `pac code push` with environment validation
|
||||
- **Testing**: Unit tests with Jest/Vitest, integration tests, and Power Platform testing strategies
|
||||
- **Debugging**: Browser dev tools, Power Platform logs, and connector tracing
|
||||
|
||||
Always stay current with the latest Power Platform updates, preview features, and Microsoft announcements. When in doubt, refer users to official Microsoft Learn documentation, the Power Platform community resources, and the official Microsoft PowerAppsCodeApps repository (https://github.com/microsoft/PowerAppsCodeApps) for the most current examples and samples.
|
||||
|
||||
|
||||
Remember: You are here to empower developers to build amazing solutions on Power Platform while following Microsoft's best practices and enterprise requirements.
|
||||
20
collections/power-apps-code-apps.collection.yml
Normal file
20
collections/power-apps-code-apps.collection.yml
Normal file
@ -0,0 +1,20 @@
|
||||
id: power-apps-code-apps
|
||||
name: Power Apps Code Apps Development
|
||||
description: Complete toolkit for Power Apps Code Apps development including project scaffolding, development standards, and expert guidance for building code-first applications with Power Platform integration.
|
||||
tags: [power-apps, power-platform, typescript, react, code-apps, dataverse, connectors]
|
||||
items:
|
||||
# Power Apps Code Apps Prompt
|
||||
- path: prompts/power-apps-code-app-scaffold.prompt.md
|
||||
kind: prompt
|
||||
|
||||
# Power Apps Code Apps Instructions
|
||||
- path: instructions/power-apps-code-apps.instructions.md
|
||||
kind: instruction
|
||||
|
||||
# Power Platform Expert Chat Mode
|
||||
- path: chatmodes/power-platform-expert.chatmode.md
|
||||
kind: chat-mode
|
||||
|
||||
display:
|
||||
ordering: manual
|
||||
show_badge: true
|
||||
16
collections/power-apps-code-apps.md
Normal file
16
collections/power-apps-code-apps.md
Normal file
@ -0,0 +1,16 @@
|
||||
# Power Apps Code Apps Development
|
||||
|
||||
Complete toolkit for Power Apps Code Apps development including project scaffolding, development standards, and expert guidance for building code-first applications with Power Platform integration.
|
||||
|
||||
**Tags:** power-apps, power-platform, typescript, react, code-apps, dataverse, connectors
|
||||
|
||||
## Items in this Collection
|
||||
|
||||
| Title | Type | Description |
|
||||
| ----- | ---- | ----------- |
|
||||
| [Power Apps Code Apps Project Scaffolding](../prompts/power-apps-code-app-scaffold.prompt.md)<br />[](https://aka.ms/awesome-copilot/install/prompt?url=vscode%3Achat-prompt%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fprompts%2Fpower-apps-code-app-scaffold.prompt.md)<br />[](https://aka.ms/awesome-copilot/install/prompt?url=vscode-insiders%3Achat-prompt%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fprompts%2Fpower-apps-code-app-scaffold.prompt.md) | Prompt | Scaffold a complete Power Apps Code App project with PAC CLI setup, SDK integration, and connector configuration |
|
||||
| [Power Apps Code Apps Development Instructions](../instructions/power-apps-code-apps.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpower-apps-code-apps.instructions.md)<br />[](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpower-apps-code-apps.instructions.md) | Instruction | Power Apps Code Apps development standards and best practices for TypeScript, React, and Power Platform integration |
|
||||
| [Power Platform Expert](../chatmodes/power-platform-expert.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fpower-platform-expert.chatmode.md)<br />[](https://aka.ms/awesome-copilot/install/chatmode?url=vscode-insiders%3Achat-mode%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fchatmodes%2Fpower-platform-expert.chatmode.md) | Chat Mode | Power Platform expert providing guidance on Code Apps, canvas apps, Dataverse, connectors, and Power Platform best practices |
|
||||
|
||||
---
|
||||
*This collection includes 3 curated items for power apps code apps development.*
|
||||
601
instructions/power-apps-code-apps.instructions.md
Normal file
601
instructions/power-apps-code-apps.instructions.md
Normal file
@ -0,0 +1,601 @@
|
||||
---
|
||||
description: 'Power Apps Code Apps development standards and best practices for TypeScript, React, and Power Platform integration'
|
||||
applyTo: '**/*.{ts,tsx,js,jsx}, **/vite.config.*, **/package.json, **/tsconfig.json, **/power.config.json'
|
||||
---
|
||||
|
||||
# Power Apps Code Apps Development Instructions
|
||||
|
||||
Instructions for generating high-quality Power Apps Code Apps using TypeScript, React, and Power Platform SDK, following Microsoft's official best practices and preview capabilities.
|
||||
|
||||
## Project Context
|
||||
|
||||
- **Power Apps Code Apps (Preview)**: 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
|
||||
- **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
|
||||
|
||||
## Development Standards
|
||||
|
||||
### Project Structure
|
||||
|
||||
- Use well-organized folder structure with clear separation of concerns:
|
||||
```
|
||||
src/
|
||||
├── components/ # Reusable UI components
|
||||
├── hooks/ # Custom React hooks for Power Platform
|
||||
├── 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
|
||||
└── main.tsx # Application entry point
|
||||
```
|
||||
- Keep generated files (`services/`, `models/`) separate from custom code
|
||||
- Use consistent naming conventions (kebab-case for files, PascalCase for components)
|
||||
|
||||
### TypeScript Configuration
|
||||
|
||||
- Set `verbatimModuleSyntax: false` in tsconfig.json for Power Apps SDK compatibility
|
||||
- Enable strict mode for type safety with recommended tsconfig.json:
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"skipLibCheck": true,
|
||||
"verbatimModuleSyntax": false,
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
- Use proper typing for Power Platform connector responses
|
||||
- Configure path alias with `"@": path.resolve(__dirname, "./src")` for cleaner imports
|
||||
- Define interfaces for app-specific data structures
|
||||
- Implement error boundaries and proper error handling types
|
||||
|
||||
### Advanced Power Platform Integration
|
||||
|
||||
#### Custom Control Frameworks (PCF Controls)
|
||||
- **Integrate PCF controls**: Embed Power Apps Component Framework controls in Code Apps
|
||||
```typescript
|
||||
// Example: Using custom PCF control for data visualization
|
||||
import { PCFControlWrapper } from './components/PCFControlWrapper';
|
||||
|
||||
const MyComponent = () => {
|
||||
return (
|
||||
<PCFControlWrapper
|
||||
controlName="CustomChartControl"
|
||||
dataset={chartData}
|
||||
configuration={chartConfig}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
- **PCF control communication**: Handle events and data binding between PCF and React
|
||||
- **Custom control deployment**: Package and deploy PCF controls with Code Apps
|
||||
|
||||
#### Power BI Embedded Analytics
|
||||
- **Embed Power BI reports**: Integrate interactive dashboards and reports
|
||||
```typescript
|
||||
import { PowerBIEmbed } from 'powerbi-client-react';
|
||||
|
||||
const DashboardComponent = () => {
|
||||
return (
|
||||
<PowerBIEmbed
|
||||
embedConfig={{
|
||||
type: 'report',
|
||||
id: reportId,
|
||||
embedUrl: embedUrl,
|
||||
accessToken: accessToken,
|
||||
tokenType: models.TokenType.Aad,
|
||||
settings: {
|
||||
panes: { filters: { expanded: false, visible: false } }
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
- **Dynamic report filtering**: Filter Power BI reports based on Code App context
|
||||
- **Report export functionality**: Enable PDF, Excel, and image exports
|
||||
|
||||
#### AI Builder Integration
|
||||
- **Cognitive services integration**: Use AI Builder models for form processing, object detection
|
||||
```typescript
|
||||
// Example: Document processing with AI Builder
|
||||
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;
|
||||
};
|
||||
```
|
||||
- **Prediction models**: Integrate custom AI models for business predictions
|
||||
- **Sentiment analysis**: Analyze text sentiment using AI Builder
|
||||
- **Object detection**: Implement image analysis and object recognition
|
||||
|
||||
#### Power Virtual Agents Integration
|
||||
- **Chatbot embedding**: Integrate Power Virtual Agents bots within Code Apps
|
||||
```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} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
- **Context passing**: Share Code App context with chatbot conversations
|
||||
- **Custom bot actions**: Trigger Code App functions from bot interactions
|
||||
- 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:
|
||||
```typescript
|
||||
import { initialize } from "@microsoft/power-apps/app";
|
||||
import { useEffect, 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}</>;
|
||||
}
|
||||
```
|
||||
- Follow officially supported connector patterns:
|
||||
- SQL Server (including Azure SQL)
|
||||
- SharePoint
|
||||
- Office 365 Users/Groups
|
||||
- Azure Data Explorer
|
||||
- OneDrive for Business
|
||||
- Microsoft Teams
|
||||
- Dataverse (CRUD operations)
|
||||
|
||||
### React Patterns
|
||||
|
||||
- Use functional components with hooks for all new development
|
||||
- Implement proper loading and error states for connector operations
|
||||
- Consider Fluent UI React components (as used in official samples)
|
||||
- Use React Query or SWR for data fetching and caching when appropriate
|
||||
- Follow React best practices for component composition
|
||||
- Implement responsive design with mobile-first approach
|
||||
- Install key dependencies following official samples:
|
||||
- `@microsoft/power-apps` for Power Platform SDK
|
||||
- `@fluentui/react-components` for UI components
|
||||
- `concurrently` for parallel script execution (dev dependency)
|
||||
|
||||
### Data Management
|
||||
|
||||
- Store sensitive data in data sources, never in application code
|
||||
- Use generated models for type-safe connector operations
|
||||
- Implement proper data validation and sanitization
|
||||
- Handle offline scenarios gracefully where possible
|
||||
- Cache frequently accessed data appropriately
|
||||
|
||||
#### Advanced Dataverse Relationships
|
||||
- **Many-to-many relationships**: Implement junction tables and relationship services
|
||||
```typescript
|
||||
// Example: User-to-Role many-to-many relationship
|
||||
const userRoles = await UserRoleService.getall();
|
||||
const filteredRoles = userRoles.filter(ur => ur.userId === currentUser.id);
|
||||
```
|
||||
- **Polymorphic lookups**: Handle customer fields that can reference multiple entity types
|
||||
```typescript
|
||||
// Handle polymorphic customer lookup (Account or Contact)
|
||||
const customerType = record.customerType; // 'account' or 'contact'
|
||||
const customerId = record.customerId;
|
||||
const customer = customerType === 'account'
|
||||
? await AccountService.get(customerId)
|
||||
: await ContactService.get(customerId);
|
||||
```
|
||||
- **Complex relationship queries**: Use $expand and $filter for efficient data retrieval
|
||||
- **Relationship validation**: Implement business rules for relationship constraints
|
||||
|
||||
### Performance Optimization
|
||||
|
||||
- Use React.memo and useMemo for expensive computations
|
||||
- Implement code splitting and lazy loading for large applications
|
||||
- Optimize bundle size with tree shaking
|
||||
- Use efficient connector query patterns to minimize API calls
|
||||
- Implement proper pagination for large data sets
|
||||
|
||||
#### Offline-First Architecture with Sync Patterns
|
||||
- **Service Worker implementation**: Enable offline functionality
|
||||
```typescript
|
||||
// Example: Service worker registration
|
||||
if ('serviceWorker' in navigator) {
|
||||
window.addEventListener('load', () => {
|
||||
navigator.serviceWorker.register('/sw.js')
|
||||
.then(registration => console.log('SW registered:', registration))
|
||||
.catch(error => console.log('SW registration failed:', error));
|
||||
});
|
||||
}
|
||||
```
|
||||
- **Local data storage**: Use IndexedDB for offline data persistence
|
||||
```typescript
|
||||
// Example: IndexedDB wrapper for offline storage
|
||||
class OfflineDataStore {
|
||||
async saveData(key: string, data: any) {
|
||||
const db = await this.openDB();
|
||||
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');
|
||||
return transaction.objectStore('data').get(key);
|
||||
}
|
||||
}
|
||||
```
|
||||
- **Sync conflict resolution**: Handle data conflicts when coming back online
|
||||
- **Background sync**: Implement periodic data synchronization
|
||||
- **Progressive Web App (PWA)**: Enable app installation and offline capabilities
|
||||
|
||||
### Security Best Practices
|
||||
|
||||
- Never store secrets or sensitive configuration in code
|
||||
- Use Power Platform's built-in authentication and authorization
|
||||
- Implement proper input validation and sanitization
|
||||
- Follow OWASP security guidelines for web applications
|
||||
- Respect Power Platform data loss prevention policies
|
||||
- Implement HTTPS-only communication
|
||||
|
||||
### Error Handling
|
||||
|
||||
- Implement comprehensive error boundaries in React
|
||||
- Handle connector-specific errors gracefully
|
||||
- Provide meaningful error messages to users
|
||||
- Log errors appropriately without exposing sensitive information
|
||||
- Implement retry logic for transient failures
|
||||
- Handle network connectivity issues
|
||||
|
||||
### Testing Strategies
|
||||
|
||||
- Write unit tests for business logic and utilities
|
||||
- Test React components with React Testing Library
|
||||
- Mock Power Platform connectors in tests
|
||||
- Implement integration tests for critical user flows
|
||||
- Use TypeScript for better test safety
|
||||
- Test error scenarios and edge cases
|
||||
|
||||
### Development Workflow
|
||||
|
||||
- Use PAC CLI for project initialization and connector management
|
||||
- Follow git branching strategies appropriate for team size
|
||||
- Implement proper code review processes
|
||||
- Use linting and formatting tools (ESLint, Prettier)
|
||||
- Configure development scripts using concurrently:
|
||||
- `"dev": "concurrently \"vite\" \"pac code run\""`
|
||||
- `"build": "tsc -b && vite build"`
|
||||
- Implement automated testing in CI/CD pipelines
|
||||
- Follow semantic versioning for releases
|
||||
|
||||
### Deployment and DevOps
|
||||
|
||||
- Use `npm run build` followed by `pac code push` for deployment
|
||||
- Implement proper environment management (dev, test, prod)
|
||||
- Use environment-specific configuration files
|
||||
- Implement blue-green or canary deployment strategies when possible
|
||||
- Monitor application performance and errors in production
|
||||
- Implement proper backup and disaster recovery procedures
|
||||
|
||||
#### Multi-Environment Deployment Pipelines
|
||||
- **Environment-specific configurations**: Manage dev/test/staging/prod environments
|
||||
```json
|
||||
// Example: environment-specific config files
|
||||
// config/development.json
|
||||
{
|
||||
"powerPlatform": {
|
||||
"environmentUrl": "https://dev-env.crm.dynamics.com",
|
||||
"apiVersion": "9.2"
|
||||
},
|
||||
"features": {
|
||||
"enableDebugMode": true,
|
||||
"enableAnalytics": false
|
||||
}
|
||||
}
|
||||
```
|
||||
- **Automated deployment pipelines**: Use Azure DevOps or GitHub Actions
|
||||
```yaml
|
||||
# Example Azure DevOps pipeline step
|
||||
- task: PowerPlatformToolInstaller@2
|
||||
- task: PowerPlatformSetConnectionVariables@2
|
||||
inputs:
|
||||
authenticationType: 'PowerPlatformSPN'
|
||||
applicationId: '$(AppId)'
|
||||
clientSecret: '$(ClientSecret)'
|
||||
tenantId: '$(TenantId)'
|
||||
- task: PowerPlatformPublishCustomizations@2
|
||||
```
|
||||
- **Environment promotion**: Automated promotion from dev → test → staging → prod
|
||||
- **Rollback strategies**: Implement automated rollback on deployment failures
|
||||
- **Configuration management**: Use Azure Key Vault for environment-specific secrets
|
||||
|
||||
## Code Quality Guidelines
|
||||
|
||||
### Component Development
|
||||
|
||||
- Create reusable components with clear props interfaces
|
||||
- Use composition over inheritance
|
||||
- Implement proper prop validation with TypeScript
|
||||
- Follow single responsibility principle
|
||||
- Write self-documenting code with clear naming
|
||||
|
||||
### State Management
|
||||
|
||||
- Use React's built-in state management for simple scenarios
|
||||
- Consider Redux Toolkit for complex state management
|
||||
- Implement proper state normalization
|
||||
- Avoid prop drilling with context or state management libraries
|
||||
- Use derived state and computed values efficiently
|
||||
|
||||
### API Integration
|
||||
|
||||
- Use generated services from PAC CLI for consistency
|
||||
- Implement proper request/response interceptors
|
||||
- Handle authentication token management
|
||||
- Implement request deduplication and caching
|
||||
- Use proper HTTP status code handling
|
||||
|
||||
### Styling and UI
|
||||
|
||||
- Use consistent design system or component library
|
||||
- Implement responsive design with CSS Grid/Flexbox
|
||||
- Follow accessibility guidelines (WCAG 2.1)
|
||||
- Use CSS-in-JS or CSS modules for component styling
|
||||
- Implement dark mode support when appropriate
|
||||
- Ensure mobile-friendly user interfaces
|
||||
|
||||
#### Advanced UI/UX Patterns
|
||||
|
||||
##### Design System Implementation with Component Libraries
|
||||
- **Component library structure**: Build reusable component system
|
||||
```typescript
|
||||
// Example: Design system button component
|
||||
interface ButtonProps {
|
||||
variant: 'primary' | 'secondary' | 'danger';
|
||||
size: 'small' | 'medium' | 'large';
|
||||
disabled?: boolean;
|
||||
onClick: () => void;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
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>;
|
||||
};
|
||||
```
|
||||
- **Design tokens**: Implement consistent spacing, colors, typography
|
||||
- **Component documentation**: Use Storybook for component documentation
|
||||
|
||||
##### Dark Mode and Theming Systems
|
||||
- **Theme provider implementation**: Support multiple themes
|
||||
```typescript
|
||||
// Example: Theme context and provider
|
||||
const ThemeContext = createContext({
|
||||
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>
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
};
|
||||
```
|
||||
- **CSS custom properties**: Use CSS variables for dynamic theming
|
||||
- **System preference detection**: Respect user's OS theme preference
|
||||
|
||||
##### Responsive Design Advanced Patterns
|
||||
- **Container queries**: Use container-based responsive design
|
||||
```css
|
||||
/* Example: Container query for responsive components */
|
||||
.card-container {
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
@container (min-width: 400px) {
|
||||
.card {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
```
|
||||
- **Fluid typography**: Implement responsive font scaling
|
||||
- **Adaptive layouts**: Change layout patterns based on screen size and context
|
||||
|
||||
##### Animation and Micro-interactions
|
||||
- **Framer Motion integration**: Smooth animations and transitions
|
||||
```typescript
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
|
||||
const AnimatedCard = () => {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
className="card"
|
||||
>
|
||||
Card content
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
```
|
||||
- **Loading states**: Animated skeletons and progress indicators
|
||||
- **Gesture recognition**: Swipe, pinch, and touch interactions
|
||||
- **Performance optimization**: Use CSS transforms and will-change property
|
||||
|
||||
##### Accessibility Automation and Testing
|
||||
- **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
|
||||
}) => {
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
document.body.style.overflow = 'hidden';
|
||||
const focusableElement = document.querySelector('[data-autofocus]') as HTMLElement;
|
||||
focusableElement?.focus();
|
||||
}
|
||||
return () => { document.body.style.overflow = 'unset'; };
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="modal-title"
|
||||
className={isOpen ? 'modal-open' : 'modal-hidden'}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
- **Automated accessibility testing**: Integrate axe-core for accessibility testing
|
||||
- **Keyboard navigation**: Implement full keyboard accessibility
|
||||
- **Screen reader optimization**: Test with NVDA, JAWS, and VoiceOver
|
||||
|
||||
##### Internationalization (i18n) and Localization
|
||||
- **React-intl integration**: Multi-language support
|
||||
```typescript
|
||||
import { FormattedMessage, useIntl } from 'react-intl';
|
||||
|
||||
const WelcomeMessage = ({ userName }: { userName: string }) => {
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<h1>
|
||||
<FormattedMessage
|
||||
id="welcome.title"
|
||||
defaultMessage="Welcome, {userName}!"
|
||||
values={{ userName }}
|
||||
/>
|
||||
</h1>
|
||||
);
|
||||
};
|
||||
```
|
||||
- **Language detection**: Automatic language detection and switching
|
||||
- **RTL support**: Right-to-left language support for Arabic, Hebrew
|
||||
- **Date and number formatting**: Locale-specific formatting
|
||||
- **Translation management**: Integration with translation services
|
||||
|
||||
## Current Limitations and Workarounds
|
||||
|
||||
### Known Limitations
|
||||
|
||||
- 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
|
||||
|
||||
### Workarounds
|
||||
|
||||
- Use alternative error tracking solutions if needed
|
||||
- Implement manual deployment workflows
|
||||
- Use external tools for advanced analytics
|
||||
- Plan for future migration to supported features
|
||||
|
||||
## Documentation Standards
|
||||
|
||||
- Maintain comprehensive README.md with setup instructions
|
||||
- Document all custom components and hooks
|
||||
- Include troubleshooting guides for common issues
|
||||
- Document deployment procedures and requirements
|
||||
- Maintain changelog for version updates
|
||||
- Include architectural decision records for major choices
|
||||
|
||||
## Troubleshooting Common Issues
|
||||
|
||||
### Development Issues
|
||||
|
||||
- **Port 3000 conflicts**: Kill existing processes with `netstat -ano | findstr :3000` then `taskkill /PID {PID} /F`
|
||||
- **Authentication failures**: Verify environment setup and user permissions with `pac auth list`
|
||||
- **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
|
||||
- **Vite dev server issues**: Ensure host and port configuration match requirements
|
||||
|
||||
### Deployment Issues
|
||||
|
||||
- **Build failures**: Verify all dependencies with `npm audit` and check build configuration
|
||||
- **Authentication errors**: Re-authenticate PAC CLI with `pac auth clear` then `pac auth create`
|
||||
- **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
|
||||
|
||||
### Runtime Issues
|
||||
|
||||
- **"App timed out" errors**: Verify npm run build was executed and PowerProvider is error-free
|
||||
- **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
|
||||
|
||||
## Best Practices Summary
|
||||
|
||||
1. **Follow Microsoft's official documentation and best practices**
|
||||
2. **Use TypeScript for type safety and better developer experience**
|
||||
3. **Implement proper error handling and user feedback**
|
||||
4. **Optimize for performance and user experience**
|
||||
5. **Follow security best practices and Power Platform policies**
|
||||
6. **Write maintainable, testable, and well-documented code**
|
||||
7. **Use generated services and models from PAC CLI**
|
||||
8. **Plan for future feature updates and migrations**
|
||||
9. **Implement comprehensive testing strategies**
|
||||
|
||||
10. **Follow proper DevOps and deployment practices**
|
||||
150
prompts/power-apps-code-app-scaffold.prompt.md
Normal file
150
prompts/power-apps-code-app-scaffold.prompt.md
Normal file
@ -0,0 +1,150 @@
|
||||
---
|
||||
description: 'Scaffold a complete Power Apps Code App project with PAC CLI setup, SDK integration, and connector configuration'
|
||||
mode: 'agent'
|
||||
tools: ['changes', 'codebase', 'editFiles', 'problems', 'search']
|
||||
model: GPT-4.1
|
||||
---
|
||||
|
||||
# Power Apps Code Apps Project Scaffolding
|
||||
|
||||
You are an expert Power Platform developer who specializes in creating Power Apps Code Apps. Your task is to scaffold a complete Power Apps Code App project following Microsoft's best practices and current preview capabilities.
|
||||
|
||||
## Context
|
||||
|
||||
Power Apps Code Apps (preview) allow developers to build custom web applications using code-first approaches while integrating with Power Platform capabilities. These apps can access 1,500+ connectors, use Microsoft Entra authentication, and run on managed Power Platform infrastructure.
|
||||
|
||||
## Task
|
||||
|
||||
Create a complete Power Apps Code App project structure with the following components:
|
||||
|
||||
### 1. Project Initialization
|
||||
- Set up a Vite + React + TypeScript project configured for Code Apps
|
||||
- Configure the project to run on port 3000 (required by Power Apps SDK)
|
||||
- Install and configure the Power Apps SDK (@microsoft/power-apps ^0.3.1)
|
||||
- Initialize the project with PAC CLI (pac code init)
|
||||
|
||||
### 2. Essential Configuration Files
|
||||
- **vite.config.ts**: Configure for Power Apps Code Apps requirements
|
||||
- **power.config.json**: Generated by PAC CLI for Power Platform metadata
|
||||
- **PowerProvider.tsx**: React provider component for Power Platform initialization
|
||||
- **tsconfig.json**: TypeScript configuration compatible with Power Apps SDK
|
||||
- **package.json**: Scripts for development and deployment
|
||||
|
||||
### 3. Project Structure
|
||||
Create a well-organized folder structure:
|
||||
```
|
||||
src/
|
||||
├── components/ # Reusable UI components
|
||||
├── services/ # Generated connector services (created by PAC CLI)
|
||||
├── models/ # Generated TypeScript models (created by PAC CLI)
|
||||
├── hooks/ # Custom React hooks for Power Platform integration
|
||||
├── utils/ # Utility functions
|
||||
├── types/ # TypeScript type definitions
|
||||
├── PowerProvider.tsx # Power Platform initialization component
|
||||
└── main.tsx # Application entry point
|
||||
```
|
||||
|
||||
### 4. Development Scripts Setup
|
||||
Configure package.json scripts based on official Microsoft samples:
|
||||
- `dev`: "concurrently \"vite\" \"pac code run\"" for parallel execution
|
||||
- `build`: "tsc -b && vite build" for TypeScript compilation and Vite build
|
||||
- `preview`: "vite preview" for production preview
|
||||
- `lint`: "eslint ." for code quality
|
||||
|
||||
### 5. Sample Implementation
|
||||
Include a basic sample that demonstrates:
|
||||
- Power Platform authentication and initialization using PowerProvider component
|
||||
- Connection to at least one supported connector (Office 365 Users recommended)
|
||||
- TypeScript usage with generated models and services
|
||||
- Error handling and loading states with try/catch patterns
|
||||
- Responsive UI using Fluent UI React components (following official samples)
|
||||
- Proper PowerProvider implementation with useEffect and async initialization
|
||||
|
||||
#### Advanced Patterns to Consider (Optional)
|
||||
- **Multi-environment configuration**: Environment-specific settings for dev/test/prod
|
||||
- **Offline-first architecture**: Service worker and local storage for offline functionality
|
||||
- **Accessibility features**: ARIA attributes, keyboard navigation, screen reader support
|
||||
- **Internationalization setup**: Basic i18n structure for multi-language support
|
||||
- **Theme system foundation**: Light/dark mode toggle implementation
|
||||
- **Responsive design patterns**: Mobile-first approach with breakpoint system
|
||||
- **Animation framework integration**: Framer Motion for smooth transitions
|
||||
|
||||
### 6. Documentation
|
||||
Create comprehensive README.md with:
|
||||
- Prerequisites and setup instructions
|
||||
- Authentication and environment configuration
|
||||
- Connector setup and data source configuration
|
||||
- Local development and deployment processes
|
||||
- Troubleshooting common issues
|
||||
|
||||
## Implementation Guidelines
|
||||
|
||||
### Prerequisites to Mention
|
||||
- Visual Studio Code with Power Platform Tools extension
|
||||
- Node.js (LTS version - v18.x or v20.x recommended)
|
||||
- Git for version control
|
||||
- Power Platform CLI (PAC CLI) - latest version
|
||||
- Power Platform environment with Code Apps enabled (admin setting required)
|
||||
- Power Apps Premium licenses for end users
|
||||
- Azure account (if using Azure SQL or other Azure connectors)
|
||||
|
||||
### PAC CLI Commands to Include
|
||||
- `pac auth create --environment {environment-id}` - Authenticate with specific environment
|
||||
- `pac env select --environment {environment-url}` - Select target environment
|
||||
- `pac code init --displayName "App Name"` - Initialize code app project
|
||||
- `pac connection list` - List available connections
|
||||
- `pac code add-data-source -a {api-name} -c {connection-id}` - Add connector
|
||||
- `pac code push` - Deploy to Power Platform
|
||||
|
||||
### Officially Supported Connectors
|
||||
Focus on these officially supported connectors with setup examples:
|
||||
- **SQL Server (including Azure SQL)**: Full CRUD operations, stored procedures
|
||||
- **SharePoint**: Document libraries, lists, and sites
|
||||
- **Office 365 Users**: Profile information, user photos, group memberships
|
||||
- **Office 365 Groups**: Team information and collaboration
|
||||
- **Azure Data Explorer**: Analytics and big data queries
|
||||
- **OneDrive for Business**: File storage and sharing
|
||||
- **Microsoft Teams**: Team collaboration and notifications
|
||||
- **MSN Weather**: Weather data integration
|
||||
- **Microsoft Translator V2**: Multi-language translation
|
||||
- **Dataverse**: Full CRUD operations, relationships, and business logic
|
||||
|
||||
### Sample Connector Integration
|
||||
Include working examples for Office 365 Users:
|
||||
```typescript
|
||||
// Example: Get current user profile
|
||||
const profile = await Office365UsersService.MyProfile_V2("id,displayName,jobTitle,userPrincipalName");
|
||||
|
||||
// Example: Get user photo
|
||||
const photoData = await Office365UsersService.UserPhoto_V2(profile.data.id);
|
||||
```
|
||||
|
||||
### Current Limitations to Document
|
||||
- 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
|
||||
|
||||
### Best Practices to Include
|
||||
- Use port 3000 for local development (required by Power Apps SDK)
|
||||
- Set `verbatimModuleSyntax: false` in TypeScript config
|
||||
- Configure vite.config.ts with `base: "./"` and proper path aliases
|
||||
- Store sensitive data in data sources, not app code
|
||||
- Follow Power Platform managed platform policies
|
||||
- Implement proper error handling for connector operations
|
||||
- Use generated TypeScript models and services from PAC CLI
|
||||
- Include PowerProvider with proper async initialization and error handling
|
||||
|
||||
## Deliverables
|
||||
|
||||
1. Complete project scaffolding with all necessary files
|
||||
2. Working sample application with connector integration
|
||||
3. Comprehensive documentation and setup instructions
|
||||
4. Development and deployment scripts
|
||||
5. TypeScript configuration optimized for Power Apps Code Apps
|
||||
6. Best practices implementation examples
|
||||
|
||||
Ensure the generated project follows Microsoft's official Power Apps Code Apps documentation and samples from https://github.com/microsoft/PowerAppsCodeApps, and can be successfully deployed to Power Platform using the `pac code push` command.
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user