Update existing code components
If you are a Power Apps component framework Private Preview participant for model-driven apps and have already built code components, you need to make some minor updates to make it compatible with the new ALM-centric project structures.
Note
Unsure about entity vs. table? See Developers: Understand terminology in Microsoft Dataverse.
A few changes are required to use the new Microsoft Power Platform CLI tooling with your existing Power Apps component framework code components.
Note
This topic is applicable only for updating code components for model-driven apps because Microsoft Power Platform CLI tooling is not available at the time of private preview for the model-driven apps.
Creating an empty project
Use Microsoft Power Platform CLI to create a new empty project for your code component. More information: Create components using tooling
Once the project is created, migrate your code component source to the new project:
- Copy or replace the component source file from the old source file into index.ts.
- Copy or replace the contents of ControlManifest.xml into ControlManifest.Input.xml file.
- Copy all other peripheral component resources such as CSS, RESX, or IMG into the corresponding subfolder from the old project to the new project.
Updating manifest file
The ControlManifest.xml file that defines the code component properties gets replaced with the ControlManifest.Input.xml file. There should otherwise be very little change in schema between the two files.
But there are a couple of important semantic changes:
The
coderesource entry must now point to the precompiled source file of the code component. The file name defaults to index.ts.For example, if your component source is implemented in a file called
MyControl.ts, then thecodeentry inControlManifest.Input.xmlmust point to that file. Thecodefile must also be a valid TypeScript file. This is in contrast to legacy manifest files that specified the compiled JS output file in thecodeentry.The
pathparameter of the resource element likecodeorcssnow refers to the local path to the file on disk. For example:<resources> <css path="css/YourControlName" order="1"/> </resources>
The path parameter above indicates that the YourControlName.css file is located in the css subfolder relative to the current directory where the ControlManifest.Input.xml resides on disk.
Update the ControlManifest.Input.xml files as follows:
- Edit the
codeentry inControlManifest.Input.xmlto the precompiled source file of your code component (typically index.ts). - Edit any paths of the resources to correctly refer to the relative paths to files on the disk.
Updating the project files
If you have created a component using the older version of the tooling and want to take advantage of the latest capabilities, make sure to update your project files as shown here:
Update your existing projects to use the latest modules.
Update the version tag in your
pcfprojlocated within your Power Apps component framework project folder as follows:<Packagereference Include="Microsoft.PowerApps.MSBuild.Pcf" Version="1.*"/>Update the version tag in your
cdsprojlocated within your solution project folder as follows:<Packagereference Include="Microsoft.PowerApps.MSBuild.Solution" Version="1.*"/>Note
After making the above changes, run the command
msbuild /t:restoreto update your project to the correct version.Update the version tag in your
package.jsonfile located within your Power Apps component framework project folder:"devDependencies":{ "pcf-scripts": "^1", "pcf-start": "^1" }Note
After making the above changes, run the
npm updatecommand to update your project to the correct version.
If you have previously created an auth profile, you need to recreate it. This is because a new property was added to the profile to support non-public cloud. You can do this by:
- Running the command pac auth clear.
- Running the command
pac auth create --url <your org url>.
Updating your project with the latest node modules
Legacy projects require the latest npm modules to be retrieved to take advantage of the latest CLI capabilities. To update the node modules that you previously downloaded, go to your project directory in the developer command prompt and run the command npm update.
Using ES6 module syntax
The build tools expect the component source to be exported using standard ES6 module format. Legacy components typically get exported as internal modules (also known as namespaces). The component source file must be modified as below, to align with the new build tools.
Open the source file that implements the code component (for example, index.ts).
Use standard ES6 export syntax by removing the module declaration.
Before:
module SampleNamespace { export class TSLinearInputControl implements ComponentFramework.StandardControl<InputsOutputs.IInputBag, InputsOutputs.IOutputBag> { <your class implementation> } }After:
export class YourControlName implements ComponentFramework.StandardControl<IInputs, IOutputs> { <your class implementation> }
Using generated manifest typing file
Legacy projects require manually creating and editing an inputsOutputs.d.ts typing file, which is typically located under the private_typing subfolder. Microsoft Power Platform CLI tooling now automatically generates this file upon build.
Code-gen ensures that type definitions used in the component source code stay in sync with types defined in the component manifest file.
The typing file is renamed to ManifestTypes.d.ts and it is now generated into a subfolder named generated. In addition, the InputsOutputs.IInputBag and InputsOutputs.IOutputBag types are renamed to IInputs and IOutputs respectively.
To use the new typing file:
Import the new
ManifestTypes.d.tsfile by adding the following line at the top of the component source file:import { IInputs, IOutputs } from
./generated/ManifestTypes.Rename all references of InputsOutputs.IInputBag to IInputs.
Rename all references of InputsOutputs.IOutputBag to IOutputs.
Build the project to generate a new ManifestTypes.d.ts file using the command
npm run build.
See also
Limitations of Power Apps component framework
Power Apps component framework API reference
Power Apps component framework overview
Зворотний зв’язок
Надіслати й переглянути відгук про