Building responsive, consistent and reusable apps in your organization - Part 1 : Components

[Carlosr]

Overview

I started my career as a front-end developer, so I have always tended to take a top-down approach.  The great thing about the Power Platform is that top-down comes naturally.  I focus on user experience and then backfill the logic.   As a full stack developer and solution architect, I have come to appreciate good design patterns, and as Canvas Apps have evolved, professional development patterns become more feasible.  Components are a huge step in the right direction for modularity and encapsulation.

The goal of this series is to build a reference app that demonstrates possible design patterns to help us make applications that are structured, predictable, and maintainable.

Getting Started

We will start with a template library to host our reusable components.  Currently, this feature is in preview, and cannot be added to solutions, but we can create one in a solution. 

We will create a new solution (make.powerapps.com, Solutions, + New Solution) 

From the solution, will choose New, Other, Component Library (preview).

Spoiler

 It is good practice to create all components in a solution.  This keeps us organized and facilitates lifecycle transitions.

The Header Component

In the library, we will rename the included component to HeaderComponent. 

Spoiler

Recommended naming convention of all objects in Canvas Apps is Name + Type, Pascal cased with no spaces.  

Since this is a header, we will set the initial size to 1366 x 48, but we will design this component to be responsive to whatever size the app takes.

Let’s add a Horizontal container to help lay things out in a flexible manner.  To make things flow and adapt nicely, we will be using relative sizing.  We move the container to the upper left corner and set the width and height to Parent.Width and Parent.Height respectively.

Inside the container, lets add a Back Icon and a label for the title.  It is good practice to name everything appropriately to make it easier to manage.

Set Minimum height of both to 20, the container alignment to stretch:

I'm choosing to make the title font size completely responsive, so I set it to Parent.Height/2.2.  This seems to work well for most scenarios.  Set the width of the icon to be equal to the height (Self.Height) so it will take on a square shape.   We will set the width of the label to be flexible and the minimum width to 0.

We are adding a toolbar that collapses on a small screen, so we will put these in their own container.   Let’s add another horizontal container after the title and set the minimum height to 20, the gap to 5, Justify (Horizontal) to Right, and Justify (Vertical) to stretch.

Spoiler

Using containers, and relative sizes is a good practice to allow the components and apps the flexibility to work on different screen sizes and orientations.  I have used an arbitrary minimum height of 20 because I don’t think anything smaller would legible to my bad eyes.

Inside of the toolbar container, we’ll add 5 more icons and set their Icon property to: Add, Edit, Trash, Check and Cancel.  We’ll also set their minimum height to 20, container alignment to stretch, and their width to Self.Height.  

Naming everything properly, you should have something like this:

Component Properties

We need to expose some properties to the consuming app so let’s add the following input properties (HeaderComponent, +New Custom Property):

We will use the ShowXX properties to control the visibility of each icon.

Behavior Properties

We need to let the host application know when an icon is clicked.  For that we will use a new feature called behavior properties to raise events.  Behavior properties are currently experimental, so they need to be turned on in the Canvas Studio settings. 

We’ll go to File, Settings, Upcoming Features, Experimental, Enhanced component properties.

Add a new behaviour property called OnXX (where XX is the name of the icon)

Now for each icon, we’ll set the following properties:

• OnSelect: HeaderComponent.OnXX()
• Visible: ShowXX
• Color: HeaderComponent: Color

Lastly, we’ll set the following properties for the TitleLabel:

• Text: HeaderComponent.Title
• Color: HeaderComponent.Color

Testing the Component

To test the component, we are going to switch back the Screens tab in the TreeView and add the new component to Screen1.

We will click each toggle, set the title, change the fill and color to test those properties.

To test the behaviour properties, we can do the following:

• Set Screen1’s OnVisible property to Set(LogText, "");
• Set each of the OnXX properties on the component to Set(LogText, LogText & "XX Clicked" & Char(13))
• Add a large multiline textbox and set it’s Text property to LogText
• Click each icon to test it

Next Steps

In this article, we have created a header that can be used by PowerApps makers to help create a consistent look to their applications.  In the following article we will add this header and a footer to an app and set up some color theming.  In the last article, we will make the app and components responsive and test it on a mobile app.

I hope this article was informative.  Please let me know how I can improve it, or if there is anything else you would like to learn about.  My job is to help people use PowerApps to its full potential and to enjoy doing it.

[mikhan98]

Shouldn't the visible property be "HeaderComponent.ShowXX" ?

[Carlosr]

Good catch @mikhan98, yes it should be.

[beargal34]

Hi @Carlosr . Did you create and publish the other blog articles you mentioned above? If not, are you planning to? This was helpful. For reference:

In the following article we will add this header and a footer to an app and set up some color theming.  In the last article, we will make the app and components responsive and test it on a mobile app.

Thank you,

Beth