In this article, we will create and deploy a React Power Apps “Shaking Text Control”. The “Shaking Text Control” can be used to draw attention to the text or to create a sense of urgency, importance, or excitement.
Note: This topic is based on the “React controls & platform libraries (Preview)” article and the topic is pre-release and is subject to change.
To create the “Shaking Text Component, we will use the React Component “reshake – https://www.npmjs.com/package/reshake” and use basic CSS (Cascading Style Sheets) to define the styles and decorate the text.
Download the code component at link
Don’t like to read, follow the video tutorials at:
Requirements
- An understanding of TypeScript, React and Power Apps Component Framework.
- The latest stable version of Node.js
- A package manager compatible with npm.
- A Power Apps license is required. More information: Power Apps component framework licensing
- System administrator privileges are required to enable the Power Apps component framework feature in the environment.
- Power Apps Component framework feature enabled(link).
- Visual Studio Code (VSCode) installed
- Microsoft Power Platform CLI (Use either the Visual Studio Code extension or the MSI installer).
Now that we have our prerequisites in place let’s start building our Custom Code Component.
Creating a new component project
To create a new project: Open a command prompt window. Create a new folder for the project using the following command:
mkdir "Shaking Text Component"
- Open your “Shaking Text PCF Component” folder inside Visual Studio Code.
- Open a new terminal inside Visual Studio Code using Terminal -> New Terminal.
- At the terminal prompt, create a new component project by passing basic parameters using the command.
pac pcf init -n ShakingText -ns ShakingTextNamespace -t field -fw react -npm
The above command also runs the npm install for you to setup the project build tools.
Install the reshake npm packages
npm i reshake
Add a new file typings.d.ts in the root of the project and add the code.
declare module "reshake"
Implementing manifest
- The control manifest is an XML file that contains the metadata of the code component. It also defines the behavior of the code component. In this tutorial, we will add “property elements”.
The completed manifest file should look like this:
<?xml version="1.0" encoding="utf-8" ?>
<manifest>
<control namespace="ShakingTextNamespace" constructor="ShakingText" version="0.0.1" display-name-key="ShakingText" description-key="ShakingText description" control-type="virtual" >
<external-service-usage enabled="false">
</external-service-usage>
<!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
<property name="dummytext" display-name-key="dummytext" description-key="dummytext" of-type="SingleLine.Text" usage="bound" required="false" />
<property name="inputtext" display-name-key="inputtext" description-key="inputtext" of-type="SingleLine.Text" usage="input" required="true" />
<property name="fontSize" display-name-key="fontSize" description-key="fontSize" of-type="SingleLine.Text" usage="input" required="true" />
<property name="color" display-name-key="color" description-key="color" of-type="SingleLine.Text" usage="input" required="true"/>
<resources>
<code path="index.ts" order="1"/>
<platform-library name="React" version="16.8.6" />
</resources>
</control>
</manifest>
- Save the changes to the ControlManifest.Input.xml file.
Implementing the Shaking component
Rename the existing “HelloWorld.tsx” to “ShakingComponent.tsx” file and update it will the code below:
import * as React from "react";
import { Shake } from "reshake"
export interface IShakerProps {
textValue?: any;
fontSize?:any;
color?:any
}
export const MyShake = (props:IShakerProps) => (
<div
style={{
fontSize:props.fontSize+"px",
color:props.color
}}
>
<Shake h={50} v={10} r={3} dur={400}>
{props.textValue}
</Shake>
</div>
)
Note: Renaming the file should also update all the “imports” in the index.ts file.
Adding the React component to the component logic
Open the index.ts file and Update the ShakingText class with the following code:
import { IInputs, IOutputs } from "./generated/ManifestTypes";
import { MyShake,IShakerProps } from './ShakingComponent';
import * as React from "react";
export class ShakingText implements ComponentFramework.ReactControl<IInputs, IOutputs> {
private theComponent: ComponentFramework.ReactControl<IInputs, IOutputs>;
private notifyOutputChanged: () => void;
public _context: ComponentFramework.Context<IInputs>;
private text: any;
public shakerProps:IShakerProps;
/**
* Empty constructor.
*/
constructor() { }
/**
* Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
* Data-set values are not initialized here, use updateView.
* @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
* @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
* @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.
*/
public init(
context: ComponentFramework.Context<IInputs>,
notifyOutputChanged: () => void,
state: ComponentFramework.Dictionary
): void {
this.notifyOutputChanged = notifyOutputChanged;
React.createElement(
MyShake, {...this.shakerProps}
);
}
/**
* Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
* @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
* @returns ReactElement root react element for the control
*/
public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {
if(context.parameters.inputtext != null)
this.shakerProps =
{
textValue:context.parameters.inputtext.raw,
color:context.parameters.color.raw,
fontSize:context.parameters.fontSize.raw,
};
return React.createElement(
MyShake, {...this.shakerProps}
);
}
/**
* It is called by the framework prior to a control receiving new data.
* @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
*/
public getOutputs(): IOutputs {
return { };
}
/**
* Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
* i.e. cancelling any pending remote calls, removing listeners, etc.
*/
public destroy(): void {
// Add code to cleanup control if necessary
}
}
Build your code component and Debugging your code component
npm run build
npm start watch
Packaging your code components
- Create a new folder named Solutions inside the Solutions folder and navigate into the folder.
- Create a new solution project in the Solution folder using the pac solution init command:
pac solution init --publisher-name developer --publisher-prefix dev
Once the new solution project is created, refer the Solutions folder to the location where the created sample component is located. You can add the reference
pac solution add-reference --path c:\downloads\mysamplecomponent
To generate a zip file from the solution project, go into your solution project directory and build the project using the following command.
msbuild /t:build /restore
Manually import the solution into Dataverse using the web portal
Subscribe to this blog for the latest updates about SharePoint Online, Nintex, Microsoft Flow, Power Apps, and document conversion and manipulation.
Clavin's Blog 
is this work for Canvas? i have tried but its not working in canvas.
LikeLike
This should work in the Canvas App…
LikeLike