In this article, we will create and deploy a “Glowing Text Power App Code component.
To create the Glowing Text component, we will use basic JavaScript, HTML and CSS. CSS Cascading Style Sheets) is used to define the styles for an HTML document, including text properties such as color, size, and font. To make text glow, the text-shadow property can be used with a set of values that define the color, size, and intensity of the glow effect.
The color value can be any valid CSS color, such as a hexadecimal color code or a named color. By experimenting with different values, it is possible to create a variety of glowing text effects that can add visual interest and impact to PCF Component.
Download the sample code at – https://github.com/cfernandes-muhimbi/GlowTextPowerAppsPCFControls
Don’t like to read, follow the video tutorials at
Requirements
- An understanding of TypeScript 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 "Glowing Text PCF Component"
- Open your “Glowing 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 --namespace GlowingText--name GlowingTextComponent--template field --run-npm-install
The above command also runs the npm install for you to setup the project build tools.
Implementing manifest
- The control manifest is an XML file that contains the metadata of the code component. It also defines the behaviour of the code component. In this tutorial, we will add “property elements” and use\uncomment the “css” resource.
The completed manifest file should look like this:
<?xml version="1.0" encoding="utf-8" ?>
<manifest>
<control namespace="GlowingText" constructor="GlowingTextComponent" version="0.0.1" display-name-key="GlowingTextComponent" description-key="GlowingTextComponent description" control-type="standard" >
<!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
<property name="GlowText" display-name-key="Property_GlowText" description-key="Property_GlowText" of-type="SingleLine.Text" usage="bound" required="true" />
<property name="TextSize" display-name-key="Property_TextSize" description-key="Property_TextSize" of-type="SingleLine.Text" usage="input" required="true" />
<property name="TextColor" display-name-key="Property_TextColor" description-key="Property_TextColor" of-type="SingleLine.Text" usage="input" required="true" />
<property name="TextAlign" display-name-key="Property_TextAlign" description-key="Property_TextAlign" of-type="SingleLine.Text" usage="input" required="true" />
<property name="TextWeight" display-name-key="Property_TextWeight" description-key="Property_TextWeight" of-type="SingleLine.Text" usage="input" required="true" />
<resources>
<code path="index.ts" order="1"/>
<css path="css/GlowingTextComponent.css" order="1" />
</resources>
</control>
</manifest>
- Save the changes to the ControlManifest.Input.xml file.
Implementing component logic
The next step, after implementing the manifest file, is to implement the component logic using TypeScript. The component logic should be implemented inside the index.ts file as follows.
- Open the index.ts file in the code editor of your choice.
- Update the GlowingTextComponent class with the following code:
import {IInputs, IOutputs} from "./generated/ManifestTypes";
//import "./GlowingTextComponent.css";
export class GlowingTextComponent implements ComponentFramework.StandardControl<IInputs, IOutputs> {
private glowingtext:HTMLElement;
/**
* 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.
* @param container If a control is marked control-type='standard', it will receive an empty div element within which it can render its content.
*/
public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement): void
{
this.glowingtext = document.createElement("div");
if(context.parameters.GlowText.raw){
this.glowingtext.innerHTML = context.parameters.GlowText.raw;
}
if(context.parameters.TextSize.raw){
this.glowingtext.style.fontSize = context.parameters.TextSize.raw+"px";
}
if(context.parameters.TextWeight.raw){
this.glowingtext.style.fontWeight = context.parameters.TextWeight.raw;
}
if(context.parameters.TextColor.raw){
this.glowingtext.style.color = context.parameters.TextColor.raw;
}
if(context.parameters.TextAlign.raw){
this.glowingtext.style.alignContent = context.parameters.TextAlign.raw;
}
this.glowingtext.classList.add("glow");
container.appendChild(this.glowingtext);
}
/**
* 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
*/
public updateView(context: ComponentFramework.Context<IInputs>): void
{
// Add code to update control view
if(context.parameters.GlowText.raw){
this.glowingtext.innerHTML = context.parameters.GlowText.raw;
}
if(context.parameters.TextSize.raw){
this.glowingtext.style.fontSize = context.parameters.TextSize.raw +"px";
}
if(context.parameters.TextWeight.raw){
this.glowingtext.style.fontWeight = context.parameters.TextWeight.raw;
}
if(context.parameters.TextColor.raw){
this.glowingtext.style.color = context.parameters.TextColor.raw;
}
if(context.parameters.TextAlign.raw){
this.glowingtext.style.alignContent = context.parameters.TextAlign.raw;
}
}
/**
* 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
}
}
Adding style to the code component
We will define the Glowing Effect in a separate CSS file.
- Create a new css subfolder under the GlowingTextComponent folder.
- Create a new GlowingTextComponent.css file inside the css subfolder.
- Add the following style content to the GlowingTextComponent.css file:
glow {
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}
@keyframes glow {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
to {
text-shadow: 0 0 20px #fff, 0 0 30px #4d68ff, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
}
}
- Save the GlowingTextComponent.css file..
Note that the ControlManifest.Input.xml file already includes the css resource file inside the resources element because that was completed in the Implementing manifest section earlier.
Build your code component and Debugging your code component
Note that the ControlManifest.Input.xml file already includes the css resource file inside the resources element because that was completed in the Implementing manifest section earlier.
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 clavdeveloper --publisher-prefix clavdev
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\GlowTextPowerAppsPCFControls
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 