Edit complete site code using Visual Studio Code for web

In October 2022, we launched Power Pages code editing in Visual Studio Code for web feature, which introduced a free, zero-install Visual Studio Code experience for Power Pages code editing in your browser. We also made incremental changes to improve performance and reliability with infrastructure changes and feature addition such as save conflict feature to avoid data overwrite issue when multiple users are working on same file.

With this feature we are enabling complete site code editing within Visual Studio Code for the web. After opening the Visual Studio Code for web, you can navigate between different web-pages or move to web-templates to view or make code changes.

Animated Gif Image
Edit web template code using Visual Studio Code for web

Feature capabilities

This feature will include following capabilities:

  1. Edit custom JavaScript code for advance forms (multistep forms)
  2. Edit custom JavaScript code for basic forms
  3. Edit custom JavaScript code for lists
  4. Edit content snippets
  5. Edit web templates
  6. Edit text-based web files like CSS, JavaScript and more
  7. View and download media web files like images, videos

Editing custom JavaScript code for advance forms, basic forms, and lists

Advance forms

Custom JavaScript code for each step of advance forms will be available for view and make edits. Learn more about advance form’s custom JavaScript.

Basic forms

Custom JavaScript will be available for respective basic form. So, the user can edit and extend form functionalities.

Extend basic form functionality using custom JavaScript

Lists

Custom JavaScript for available lists will be available for customization. Users can use this to enhance or update lists’ functionalities. Learn more about list’s custom JavaScript

Edit and customize list using custom JavaScript within Visual Studio Code for web

Editing content snippets and web templates

Content snippets

Content snippets are small chunks of content that can be used in a header, footer, web page or web template allowing reusable block of content anywhere within web pages. This can also use liquid objects and reference other content. Learn more about content snippets.

Edit content snippets within Visual Studio Code for web

Web template

Web templates can be used for creating custom page layout or custom header and footer. Learn more about web templates.

Edit web template within Visual Studio Code for web

Edit and view web files

All site related web files will be available within Visual Studio Code. It will allow you to view/edit text-based files, However, media files like images and video will only load in preview mode and cannot be edited.

View image web file within Visual Studio Code for web

We are looking forward to your feedback

Your feedback will help us continue to build on and improve the capabilities of this feature. We want to hear from you!

For Visual Studio Code for web integration feature details, see the documentation.

Thank you,

Neeraj Nandwana