Giter Site home page Giter Site logo

power-maverick / pcf-builder-vscode Goto Github PK

View Code? Open in Web Editor NEW
21.0 3.0 7.0 33.48 MB

Build your Power Apps Component Framework custom controls faster. No need to remember the PCF CLI commands. All commands provided in one selection list for you to execute. https://marketplace.visualstudio.com/items?itemName=danish-naglekar.pcf-builder

License: MIT License

TypeScript 0.88% JavaScript 99.12%
powerapps powerapps-component-framework custom-controls cds dynamics-365 vscode-extension vscode visual-studio-code

pcf-builder-vscode's Introduction

Build Release Visual Studio Marketplace Downloads Visual Studio Marketplace Version GitHub stars License Gitter

Sponsor

Twitter Follow

PCF Builder

Build your Power Apps Component Framework custom controls faster. No need to rememeber the PCF CLI commands. All commands provided in one selection list for you to execute.

Table of contents

Usage

View list of commands via Ctrl+Shift+P and type PCF Builder

Requirements

You need to have the following prerequisites on your machine:

  1. npm
  2. PCF CLI
  3. PCF Generator

List of all available commands

Command Description
Initialize Component (Simple) Creates PCF project with basic folder structure. Less questions asked.
Initialize Component (Advanced) Creates PCF project with recommended folder structure.
Build Component Builds the code component.
Test Component with Watch Launches Test Harness with ability to code while testing.
Test Component with No Watch Launches Test Harness but does not re-renderwhen code changes.
Preview Component Loads the Test Harness inside VS Code with full functionality (except does not do live watch)
Update PCF CLI Upgrades PCF CLI on the current machine.
Create Authentication Profile Creates a new profile by authenticating with a particular CDS environment.
List Authentication Profile Shows list pf profiles that are authenticated with CDS environments for current machine.
Delete Authentication Profile Deletes a specific profile from the current machine.
Switch Authentication Profile Changes the default profile connected to CDS environment.
Show Current Authentication Profile List the currently selected profile connected to CDS environment.
Quick PCF Push Pushes the code component to CDS environment based on currently selected profile.
Add new RESX File Creates a new localization file under strings folder and adds a reference in ControlManifest file.
Add GitHub Action Creates a .yml file that will build and create CDS solution package under Releases on GitHub.
Generate ReadMe file Creates a preety ReadMe file by parsing the ControlManifst file.
Open Developer Tool Open dev tools inside VS Code that lets you tinker the code component like you do in browser.

Features

Commands

  1. Initialize PCF control

    Init-IDE

  2. Build & Test PCF control

    Build-IDE

  3. Preview PCF control

    Preview-IDE

  4. Manage Authentication Profiles

    Auth-Profiles-IDE

  5. Update PCF CLI

    Update-CLI-IDE

  6. Quick Deploy using PCF Push

    PCF-Push-IDE

  7. Advanced Mode and Adding Resx file

    PCF-Force

Intellisense

Manifest file

Invoke it by pressing Ctrl + Space

ManifestFile-Intellisense

Play Mode

Play-Preview

Keyboard Shortcuts

Command Keyboard Shortcut
Initialize PCF project Ctrl + P, Ctrl + I
Build PCF project Ctrl + P, Ctrl + B
Test with watch Ctrl + P, Ctrl + T
Preview component Ctrl + P, F5
Update PCF CLI Ctrl + P, Ctrl + U
PCF Quick Push Ctrl + P, Ctrl + Q
Invoke Force Mode Ctrl + P, Ctrl + F
Add additional RESX file Ctrl + P, Ctrl + R

Contributing & Discussions

Found a bug? or have a feature request? - Create a pull request or an issue on GitHub If you want to have any discussions on any feature, please use the Discussion Board

License

This software is released under MIT License

Release Notes

Latest release contains following items:

1.1.2

  • Features
    • Added a new command "Preview Component" that will show Test Harness inside of VS Code
    • New toolbar added that lets you play the preview command from any document along with ability to open DevTools

Previous release notes are documented here.

pcf-builder-vscode's People

Contributors

danish-aka avatar dependabot[bot] avatar dynamicsninja avatar power-maverick avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

pcf-builder-vscode's Issues

Feature: MSBuild command

I always forget the syntax to build a production-ready solution so it would be nice that I just select the MSBuild command from the list and specify which configuration to use dev or prod.

Commands:

msbuild /t:build /restore
msbuild /p:configuration=Release
msbuild /p:configuration=Debug 

React 18 release broke init component with react command

Describe the bug
After the release of React 18 trying to to Initialize component with React and Fluent UI doesn't work properly.

To Reproduce
Steps to reproduce the behavior:
Run Initialize Component (Simple) with React and Fluent UI option

Expected behavior
A clear and concise description of what you expected to happen.
Expected: Control with react and fluent UI is created.
Actual: Control is created but react and fluent UI aren't addeed because error occurs.

Screenshots
If applicable, add screenshots to help explain your problem.
image

Version

  • VS Code version: 1.66.2
  • VS Code Extension version: 1.1.2

Additional context
Add any other context about the problem here.

Support for React controls

Microsoft introduced React controls using platform libraries as preview feature: https://docs.microsoft.com/en-us/power-apps/developer/component-framework/react-controls-platform-libraries

Please add this kind of control to the PCF Builder, e.g. as a choice parameter (use React platform libraries or React component libraries) for the init command.

For further information see also: https://powerapps.microsoft.com/en-us/blog/virtual-code-components-for-power-apps-using-react-and-fluent-ui-react-platform-libraries/

Quick search (CTRL+P) not working

Issue Type: Bug

After installation the quick search shortcut (CTRL+P) is not working anymore.

Extension version: 1.1.2
VS Code version: Code 1.67.0 (57fd6d0195bb9b9d1b49f6da5db789060795de47, 2022-05-04T12:06:02.889Z)
OS version: Windows_NT x64 10.0.19044
Restricted Mode: No

Go to file not working

Describe the bug
After installing the extension the default functionallity of "Go to File..." (CTRL + P) is not working anymore in VS Code.

To Reproduce
Install extension. Hit CTRL + P

Expected behavior
Go To File Quickfindbar should pop up to quick navigate to searched file

Version

  • VS Code version: 1.66.2
  • VS Code Extension version: 1.1.2

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.