Get coding assistance with Copilot while editing site code in Visual Studio Code desktop

Neeraj Nandwana, Senior Product Manager, 2023年8月29日

We are excited to announce a new preview feature: Copilot in Power Pages for Visual Studio Code desktop. This feature provides you with coding assistance while you edit your site code in Visual Studio Code desktop using natural language chat interaction. You can use Copilot in Power Pages to describe your expected code behavior and get AI-generated code snippets that you can refine and use for various aspects of your site development.

Note: To use this feature, you need to sign into your environment, and it is only available in the US region in English language.

Feature capabilities

With Copilot, you can get coding assistance for:

Form and List customization: allow custom validation for forms and add interactive experience to form and list using JavaScript.
Webpage customizations: generate HTML components and add styles to your pages.
Web Template: generate HTML templates.
Liquid: generate liquid code to add dynamic content in Webpages or Web Templates.
FetchXML: Get help with writing FetchXML to query data from Dataverse.
Web API: Generate code for Power Pages Web APIs to Create/Read/Update/Delete Dataverse records.
Content Snippets: Get help with writing reusable content blocks across multiple pages.
Provide feedback: Use feedback option to share your input and suggestions.

1. Form and List customization

Form and List customization is a feature that allows you to customize the appearance and behavior of your forms and lists on your site pages. You can use Form and List customization to change the layout, style, validation, and actions of your Forms and Lists. With Copilot, you can chat with the AI assistant and get code snippets for adding custom validation and interactivity to your Forms and Lists in your site code.

Sample prompt for form validation

Generate JavaScript code for form field validation to ensure age is greater than 18.

Sample prompt for list customization

Write JavaScript code to highlight the row where loan status is approved in table list.

To learn more about Form and List customization, visit form link and list link.

2. Webpage customizations

Webpage customizations is a feature that allows you to customize various aspects of your webpages such as HTML components, styles, and more. You can use Webpage customizations to enhance the look and feel of your site pages. With Copilot, you can chat with the AI assistant and get code snippets for generating HTML components and adding styles to your pages in your site code.

Sample prompt

Write HTML code for the webpage to show loan registration form FAQ as a list group.

To learn more about Webpage customizations, visit this link.

3. Web Template

Web Template is a feature that allows you to create HTML templates for your site pages. You can use Web Template to define the layout, style, and content of your pages. With Copilot, you can chat with the AI assistant and get code snippets for creating and using Web Templates in your site code.

Sample prompt

Create a web template with breadcrumb and page title.

To learn more about Web Template, visit this link.

4. Liquid

Liquid is a feature that allows you to add dynamic content to your Webpages or Web Templates. You can use Liquid to access data from Dataverse or other sources and display it on your pages. With Copilot, you can chat with the AI assistant and get code snippets for writing Liquid expressions in your site code.

Sample prompt

Generate liquid code to check if user has admin role.

To learn more about Liquid, visit this link.

5. FetchXML

FetchXML is a feature that allows you to query data from Dataverse using XML syntax. You can use FetchXML to filter, sort, aggregate, or join data from different entities. With Copilot, you can chat with the AI assistant and get code snippets for writing FetchXML queries in your site code.

Sample prompt

Generate a fetchxml liquid query to retrieve the list of contacts who are having credit score more than 500 and are active.

To learn more about FetchXML, visit this link.

6. Web API

Web API is a feature that allows you to interact with Dataverse records using HTTP requests. You can use Web API to create, read, update, or delete records from different entities. With Copilot, you can chat with the AI assistant and get code snippets for writing Web API requests in your site code.

Sample prompt

Generate Web API code to query active contact records.

To learn more about Web API, visit this link.

7. Content Snippets

Content Snippets is a feature that allows you to write reusable content blocks that can be used across multiple pages. You can use Content Snippets to store common HTML, CSS, or JavaScript code that you want to reuse on different pages. With Copilot, you can chat with the AI assistant and get code snippets for creating and using Content Snippets in your site code.

Sample prompt

Generate content snippets to display copyright, current date and "All rights reserved." message.

To learn more about Content Snippets, visit this link.

8. Provide feedback

In every response of the Copilot chat, select the feedback options, a thumb up (?) if you like the response or thumb down (?) if you didn’t like it. Your feedback greatly helps improve the capabilities of this feature.

How to use Copilot

Install Power Platform Extension: Ensure you have the Power Platform Tools extension (version 2.0.3 or higher) installed within Visual Studio Code .
Access Copilot: Download and open your Power Pages site r o o t f o l d e r in Visual Studio Code and activate the Copilot feature from left navigation by selecting “Power Platform”.
Engage in Natural Language Interaction: Describe the expected behavior of your code using natural language. Copilot will generate code snippets based on your descriptions.
Insert or copy AI generated code to your site: If you are happy with the generated code, you can easily copy and paste the code snippet or insert the code to Power Pages site.
Refine and Implement: Review the AI-generated code snippets, refining them as needed to match your exact requirements.
Provide feedback: Select the feedback options, a thumb up (?) if you like the response or thumb down (?) if you didn’t like it and provide your feedback.

We are looking forward to your feedback

Copilot in Power Pages is designed to streamline your coding journey and amplify your creativity. Your feedback is crucial in shaping the future of this feature. We want to hear from you!

See documentation here for a detailed overview.

Thank you,

Neeraj Nandwana