К основному содержанию
правило официальный · GitHub

pcf-overview — правило для GitHub Copilot: что делает и как установить

Задаёт для GitHub Copilot контекст разработки компонентов Power Apps Component Framework. Помогает создавать элементы интерфейса для модельных и холстовых приложений.

Установить в GitHub Copilot · Вручную: положить файлы Все способы и платформы ↓
.github/instructions/pcf-overview.instructions.md
Открыть на GitHub

Что делает pcf-overview

Правило инструктирует ассистента по архитектуре Power Apps Component Framework (PCF). GitHub Copilot начинает точнее учитывать специфику сборки компонентов на TypeScript, HTML и CSS в один пакет решения. Это помогает при замене стандартных текстовых полей формы на шкалы или при трансформации списков в интерактивные карты.

Фреймворк работает только в Unified Interface. Он не запустится в устаревшем веб-клиенте или локальных средах on-premises. Если компонент обращается к внешним сервисам напрямую через браузер, в манифесте обязателен блок <external-service-usage>. Из-за этого приложение становится премиальным, а конечным пользователям потребуются платные лицензии Power Apps.

Какие задачи решает

  • заменить числовое поле формы на ползунок или шкалу
  • отобразить набор данных в виде календаря или интерактивной карты
  • настроить объявление внешних сетевых доменов в манифесте компонента
  • упаковать TypeScript-код, разметку и стили в единое решение

Примеры запросов агенту

  • Создай манифест PCF-компонента для выбора диапазона чисел с помощью ползунка
  • Добавь тег external-service-usage в манифест для обращения к внешнему API
  • Как привязать визуальный компонент календаря к набору данных формы?

Как установить pcf-overview

Вручную: положить файлы

.github/instructions/pcf-overview.instructions.md

Поле applyTo задаёт, к каким файлам применять

По шагам, с командами для каждой платформы: AGENTS.md и CLAUDE.md: что это, кто читает и какой выбрать

Вопросы о pcf-overview

Как установить pcf-overview в GitHub Copilot?

Сохраните файл правила по пути .github/instructions/pcf-overview.instructions.md в корне репозитория. GitHub Copilot автоматически применит инструкцию при работе с файлами .ts, .tsx, .pcfproj и .csproj.

Что делает правило pcf-overview?

Оно даёт ассистенту знания об архитектуре PCF, доступных API платформы и структуре манифестов. Это помогает модели писать код под стандарты Power Apps без ошибок в типах лицензий.

В каких средах не поддерживаются компоненты PCF?

Компоненты фреймворка не работают в локальных средах on-premises и в классическом веб-клиенте. Они предназначены только для интерфейса Unified Interface.

Исходный текст

pcf-overview.instructions.md · MIT
---
description: 'Power Apps Component Framework overview and fundamentals'
applyTo: '**/*.{ts,tsx,js,json,xml,pcfproj,csproj}'
---

# Power Apps Component Framework Overview

Power Apps component framework empowers professional developers and app makers to create code components for model-driven and canvas apps. These code components can be used to enhance the user experience for users working with data on forms, views, dashboards, and canvas app screens.

## Key Capabilities

You can use PCF to:
- Replace a column on a form that displays a numeric text value with a `dial` or `slider` code component
- Transform a list into an entirely different visual experience bound to the dataset, like a `Calendar` or `Map`

## Important Limitations

- Power Apps component framework works only on Unified Interface and not on the legacy web client
- Power Apps component framework is currently not supported for on-premises environments

## How PCF Differs from Web Resources

Unlike HTML web resources, code components are:
- Rendered as part of the same context
- Loaded at the same time as any other components
- Provide a seamless experience for the user

Code components can be:
- Used across the full breadth of Power Apps capabilities
- Reused many times across different tables and forms
- Bundled with all HTML, CSS, and TypeScript files into a single solution package
- Moved across environments
- Made available via AppSource

## Key Advantages

### Rich Framework APIs
- Component lifecycle management
- Contextual data and metadata access
- Seamless server access via Web API
- Utility and data formatting methods
- Device features: camera, location, microphone
- User experience elements: dialogs, lookups, full-page rendering

### Development Benefits
- Support for modern web practices
- Optimized for performance
- High reusability
- Bundle all files into a single solution file
- Handle being destroyed and reloaded for performance reasons while preserving state

## Licensing Requirements

Power Apps component framework licensing is based on the type of data and connections used:

### Premium Code Components
Code components that connect to external services or data directly via the user's browser client (not through connectors):
- Considered premium components
- Apps using these become premium
- End-users require Power Apps licenses

Declare as premium by adding to manifest:
```xml
<external-service-usage enabled="true">
  <domain>www.microsoft.com</domain>
</external-service-usage>
```

### Standard Code Components
Code components that don't connect to external services or data:
- Apps using these with standard features remain standard
- End-users require minimum Office 365 license

**Note**: If using code components in model-driven apps connected to Microsoft Dataverse, end users will require Power Apps licenses.

## Related Resources

- [What are code components?](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/custom-controls-overview)
- [Code components for canvas apps](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/component-framework-for-canvas-apps)
- [Create and build a code component](https://learn.microsoft.com/en-us/power-apps/developer/component-framework/create-custom-controls-using-pcf)
- [Learn Power Apps component framework](https://learn.microsoft.com/en-us/training/paths/use-power-apps-component-framework)
- [Use code components in Power Pages](https://learn.microsoft.com/en-us/power-apps/maker/portals/component-framework)

## Training Resources

- [Create components with Power Apps Component Framework - Training](https://learn.microsoft.com/en-us/training/paths/create-components-power-apps-component-framework/)
- [Microsoft Certified: Power Platform Developer Associate](https://learn.microsoft.com/en-us/credentials/certifications/power-platform-developer-associate/)

© github · MIT · github/awesome-copilot

Темы и платформы

Все правила IDE по теме «Фронтенд и UI» →

Из того же набора861

Весь набор →
performance-optimization Правило помогает находить причины проблем с Core Web Vitals и выбирать исправления для веб-приложения. Пригодится при работе над загрузкой, рендерингом и сдвигами макета. ★ 40 418звёзд репо pcf-tooling Правило подсказывает Copilot, что для сборки, отладки и деплоя код-компонентов нужен Microsoft Power Platform CLI. ★ 40 418звёзд репо pcf-sample-components Направляет GitHub Copilot при сборке, инициализации и тестировании готовых компонентов Power Apps Component Framework из официального репозитория примеров Microsoft. ★ 40 418звёзд репо pcf-react-platform-libraries Правило помогает создавать React-компоненты PCF с общими библиотеками React и Fluent на платформе Power Apps. Оно пригодится при разработке виртуальных контролов для canvas и model-driven apps. ★ 40 418звёзд репо pcf-model-driven-apps Подсказывает Copilot, как делать и обновлять code components для model-driven приложений. Срабатывает на ts, tsx, js, json, xml, pcfproj и csproj. ★ 40 418звёзд репо pcf-manifest-schema Правило подсказывает Copilot структуру ControlManifest.Input.xml: какие элементы и атрибуты бывают и что они делают. Пригодится, когда правишь манифест PCF-компонента. ★ 40 418звёзд репо pcf-limitations Напоминает GitHub Copilot об ограничениях Power Apps Component Framework в коде компонентов. Помогает вовремя учесть запреты Canvas Apps и правила бандлинга. ★ 40 418звёзд репо pcf-fluent-modern-theming Правило помогает оформлять компоненты PCF с учётом современной темы приложения. Оно пригодится при работе с Fluent UI или собственными React-компонентами. ★ 40 418звёзд репо

Спонсоры проекта

Компании, которые помогают держать аналитику открытой