In this #PowerShot, I will show you how to use the Marquee element PCF for canvas apps in Power Apps to add scrolling text on the screen. To add more detail and a better user experience for canvas apps, marquee element can be added to the screen. It can be used to show any important information, notifications, warnings etc.
Currently if you wanted to implement something like that in canvas apps, it is not directly supported with the HTML text element and you will have to go the animation way and do it like that. But with this new marquee element PCF, you can add all the properties to the text and replicate the marquee behavior.
Let's get Started!
Step 1: In this step, we will look at creating the component. Follow the steps here to create a generic component structure of type field. Once the setup is complete, certain parts of the index.ts and ControlManifest.Input.xml files need to be modified. The same have been updated and present on the GitHub repository as mentioned below.
The source code for this component is on this GitHub repository here.
Note: For canvas app, only field type component is supported. Source
The next task is to configure components for canvas apps. This can be done in three easy steps and those have been listed out here.
After following the steps 2, 3, 4 follow the step below to implement the Marquee element component on the canvas app.
Step 5: Provide the text and then provide all the custom properties as required by the component.
Implementation
Now let's implement the above created component on the canvas app. We will add the marquee component on a canvas app screen and provide all the required properties.
1. Is the component added to the screen.
2. Is the advanced settings pane where you can define all the custom properties for configuring the marquee element.
Setup in Action
In this post, we saw how to add marquee element to canvas apps in Power Apps. Text holders like these help adding more functionality to the app in terms of ease of use for the users, display conditional information, pop important notifications etc.
I hope you found this interesting and it helped you!