cancel
Showing results for 
Search instead for 
Did you mean: 
Carlosr

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

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.

 

Carlosr_0-1628535439703.png

 

 

Carlosr_1-1628535439729.png

 

  

Carlosr_2-1628535439749.png

 

 

 

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

Carlosr_3-1628258852787.png

 

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

 

Carlosr_4-1628258852795.png

 

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

 

Carlosr_5-1628258852799.png

 

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.

 

Carlosr_6-1628258852803.png

 

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.

 

Carlosr_7-1628258852807.png

 

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

 

Carlosr_8-1628258852810.png

 

 

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.

 

Carlosr_9-1628258852813.png

 

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.

 

Carlosr_10-1628258852818.png

 

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.  

  

Carlosr_11-1628258852819.png

 

Naming everything properly, you should have something like this:

 

Carlosr_12-1628258852824.png

 

Component Properties

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

Carlosr_13-1628258852828.png

 

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.

Carlosr_14-1628258852832.png

 

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

Carlosr_15-1628258852836.png

 

Carlosr_16-1628258852839.png

 

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.

Carlosr_17-1628258852843.png

 

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

Carlosr_18-1628258852845.png

 

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

Carlosr_19-1628258852848.png

 

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.

Comments

mikhan98_0-1629204469284.png

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

 

Good catch @mikhan98, yes it should be.

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