Expand your portal development experience with the VS Code extension

Recently, Power Apps launched Power Platform CLI for portals which is a command line tool. Developers can now use Visual Studio Code, aka VS Code, extension for editing portal configurations.

You can now open a folder that was recently downloaded using the Power Platform CLI tool. Here, the VS Code extension provides easily identifiable file icons for portal developers so you can quickly and easily identify your portal data. Since the Power Platform CLI tool has neatly arranged all the portal configuration data in the HTML, YAML, CSS, and image files, it is possible to leverage a plethora of extensions available on the VS Code marketplace. This extension provides support for preview and auto-completion. For example, let's say we want to edit a web page on our portal. Within VS Code, we can easily expand the visitor page and make our changes. Using the new preview icon, we can preview our changes at any time. Want to edit the logo? We can expand our web files, preview, and select a photo from the files in our portal. After updating the photo on the web page copy.html, we can preview the updated logo. We can delete, add, and/or edit the text, as well as the text colour using the VS Code colour selector.

Want to add a list of recent visitors? We can add an entity list and utilise one of the liquid snippets that the extension has automatically provided. Portal developers no longer need to remember all of the liquid snippets. They are now easily available to you. We can now add a visitor entity list leveraging the auto-complete feature. Utilising Control + Space opens all entity lists available on this portal. When we add the visitor list and select preview, the entity list is not fully rendered as it is a static preview. In the VS Code extension, the Power Platform CLI is available in the terminal so we can use it to upload our changes. When the upload is completed, we can view the changes in the portal. This easy-to-use Power Platform VS Code extension with portal support is available for preview in the VS Code marketplace. With auto-complete, we can also modify the metadata, for example, to change the page template or change the publishing state of the web page, and so on.

Additional information about Power Apps portals is available at at powerapps.microsoft.com/portals. You can also download Wave 1 2021 Power Apps guide from us.