Reusable components using Component Library in Canvas Power Apps

By | February 15, 2022

Reusable components or code blocks have always been the best practice to be followed to avoid re-designing or coding the same components again and again. It also ensures a single centralized location to manage updates or changes. Any change made to this component or code block will auto reflect in all programs that this has been referred from.

It also helps to create complex components that can then be reused by power users without the need to understand the logic/code behind it.

Component reusability now comes to Canvas Apps in the form of Component Libraries. As of the date of writing this article it is in Preview. In this article we will walk through creating a component and utilizing them across canvas apps (i.e multiple different canvas apps) and shipping them along.

For this article we will make use of the AI builder capabilities and create a component that includes a textbox and it will do a sentiment analysis of the text entered in there and indicate the sentiment by enabling one of the three emote icons. Since it is a component, we have also added an output property where it will return the sentiment, in case the maker wants to store this sentiment in the database.

Note: To make use of AIBuilder components/api you need to ensure you have enabled AI Builder subscription. There is a trial available that you can enable for evaluation purposes.

Canvas Power Apps

Let’s begin the design

1. Navigate to the maker portal at https://make.powerapps.com

2. Here you see the option to create Apps as well as Component Libraries,

Canvas Power Apps

for this exercise first we will choose Component Library

Canvas Power Apps

3. This will open the same familiar screen that we work on while designing our canvas apps.

Canvas Power Apps

4. We will focus on the Components tab. Rename Component1 to a name that you want the users to refer your control as. I have renamed it as Sentiment

Canvas Power Apps

5. Designed the canvas to include a multi-line textbox to enable user input.

6. Add icons -> chose the emoticons for Happy Neutral and Sad and added them on the canvas

7. A label that cannot be seen has also been added to the canvas.

8. We will now add a property to our component that the maker can refer to the read the sentiment value of the entered text. Note since we are creating a component library, the maker that incorporates this component in their canvas app cannot directly access any of the controls placed on the canvas in the above steps. The only way for the makers to interact with our control/component is through input/output properties. For this example, we will create an output property.

Canvas Power Apps

9. Now let us make all the controls functional. Depending on the text entered in the textbox, we need to highlight one of the 3 emoticons depending on the sentiment of the entered text. For this we will write the following expression on the color property of the icons

10. For the Happy icon we have

Canvas Power Apps

If(!IsBlankOrError(contentText.Text),

If( AIBuilder.AnalyzeSentiment(contentText.Text).sentiment = "positive",Color.Green,Color.Black),Color.Black)

The expression first checks to ensure the textbox isn’t empty before it can send the text for sentimentanalysis

If(!IsBlankOrError(contentText.Text),

If it is not empty then do the sentiment analysis on the text using the AIBuilder feature

If( AIBuilder.AnalyzeSentiment(contentText.Text).sentiment

Depending on the result, if it is positive, we set the color to Green or else keep it at Black

If( AIBuilder.AnalyzeSentiment(contentText.Text).sentiment = "positive",Color.Green,Color.Black)

11. Similarly, for the neutral and sad icons we have the following expressions set for the color property

Neutral

If(!IsBlankOrError(contentText.Text),

If( AIBuilder.AnalyzeSentiment(contentText.Text).sentiment = "neutral",Color.Blue,Color.Black),Color.Black)

Sad

If(!IsBlankOrError(contentText.Text),

If( AIBuilder.AnalyzeSentiment(contentText.Text).sentiment = "negative",Color.Red,Color.Black),Color.Black)

12. We have added a label to the canvas that will store the sentiment result. The expression for that one is

Canvas Power Apps

13. Now let us set the value of the output property to the value of this textbox

14. Choose the Root control – SentimentAnalysisTextInput and then in the properties dropdown you will find the Sentiment property we created earlier

Canvas Power Apps

Result is our label that we set in step 12 above.

15. Our component is ready. We now need to test it. Note while you are on the component, the Run icon in the command bar is disabled

Canvas Power Apps

16. Save the app before you proceed further.

17. To test the component, you need to switch to the Screens tab and create a test screen and include your component there to test.

18. You will find your component in the Custom command bar button

Canvas Power Apps

19. Choose that and it will auto add the component to the screen.

Canvas Power Apps

20. Now run the screen and type the text and see the appropriate icons get highlighted based on the sentiment returned

Canvas Power Apps

21. Publish the app component library

Canvas Power Apps

22. Now that our component is working, let’s use this in a new Canvas App that we will go ahead and design.

23. Create a solution and add the component to the solution

Canvas Power Apps

24. Since we did not create component within a solution, you will find it in the outside Dataverse tab

Canvas Power Apps

25. Add a new Canvas app to this solution

Canvas Power Apps

26. At present if you choose Custom components à Import Components option from the command bar, you will not see the component library listed

Canvas Power Apps

27. Instead choose Get More Components from the Insert side bar

Canvas Power Apps

28. This will bring up the following window with your component library listed

Canvas Power Apps

29. Choose and click ok.

30. Back in your Canvas App Insert side bar, you now find a section for Library Components, you will find your control there. Drag and drop the control from there

Canvas Power Apps

31. Now let us add another label to display the content of the output property we had created for the component.

Canvas Power Apps

32. Play your app and see the results.

Canvas Power Apps

33. Save and publish this app.

34. As component libraries are solution aware, i.e we can include it in a solution, we can easily ship our canvas app as well as the component library through solutions between environments.

35. Now if you were to make any updates to your components in future, like say I added a label to the component and published it

Canvas Power Apps

36. The app makers that have used this component will be notified of the updates

Canvas Power Apps

37. Click review and update to update the component to the latest version

CANVAS APP

38. And you see the label added in the design now

Canvas Power Apps

Conclusion:

Reusability and hiding the complexity is the key to successful adoption of low code tech by power users and citizen developers.

Save 1-2 hours or $800 monthly on scheduling and managing business travel with a geo-mapping App!

Maplytics – Integrate Map with Dynamics 365 CRM and visualize data on the map, manage sales territories, auto-schedule appointments, get optimized travel routes, track field reps in real-time, and more