Power Apps work best when they’re simple, light weight, and don’t have a lot on the canvas. The App Checker will even yell at you if you have over 300 controls on a given screen (with good reason, too). There’s plenty of ways to reduce the number of controls on a screen, such as:
Using creative formulas in control properties
Take this example: A canvas that displays an up-arrow icon when a number is greater than zero, and a separate down-arrow icon which displays when the number is less than zero. Instead of having two separate icons, have a single one, and use its Icon() property:
Icon() = If(varNumber > 0, Icon.ArrowUp, Icon.ArrowDown)Removing unnecessary controls
I’ve frequently come across users who will display a value in a label, then reference that label in another formula; instead of doing this, simply put the calculation in the formula to begin with — no need for the extra label!
Go from this:
Label.Text = 1+1
OtherLabel.Text = Value(Label1.Text) + 2To this:
OtherLabel.Text = 1+1+2These are over-simplified examples, but they’re to illustrate the point that you can really do away with extra controls if all they’re doing is holding a value for you — just reference the value.
Power Apps Components
Components are a way to “combine” multiple controls into one single control which can then be re-used either within the app, or across all of your apps! Further, in the event you need to update something in the component, such as a new logo for your business, you can update it once and the changes will propagate throughout the apps without you having to manually change each logo.
You can create a component either in a library (i.e. usable across multiple apps) or within a given app itself (i.e. only usable within that app). Your first step will be to determine if you’re making something that’s unique to your app, or if it’s something you want to use over and over — which is why for this demonstration, I chose to create a search bar. You can expand your ideas from this into something like a header or footer component (who doesn’t love consistent branding?), a navigation menu, or any other element of an app that’s reused.
Why bother?
“But I can just copy/paste something I’ve made over and over again, it’s like the same thing!”
No, it isn’t.
Consider a basic navigation menu comprised of:
- A hamburger menu icon (to open the navigation menu)
- A gallery. In the gallery, an icon, and a button
- An HTML text control used to create a nice drop shadow background for the gallery
That’s 5 total controls. When you copy/paste the above menu over and over throughout your app, that’s 5 controls multiplied over however many screens it’s pasted on! Remember, Power Apps generates a fat HTML document of your app each time a user launches it — don’t make it generate more than it has to.
Instead, create a navigation menu component. When you then copy/paste that over each screen, it’s one single control (vs. 5 separate ones)!
Component basics
They’re a little bit funky in how they work, but as we develop these ideas more, and get into building our search bar component, they’ll make more sense (hang in there)!
A component is a number of controls “joined” together into a single control. Here’s what our search bar will look like (it’s actually one that I use across multiple apps currently); notice how there’s two controls (an icon and a text input):
When this is placed on the canvas, you’ll only be able to reference the component as a whole; meaning you cannot select either the text input control or the icon. So how do you get them to do what you want them to do? Let’s start building and find out.
Creating the search bar component
In this example we’ll create the component so that it can be used across multiple apps (though if you wanted to only create it within an app, the steps are the same; just skip this first portion).
- Log into Power Apps and select Apps, Component libraries (preview), then + New component library (preview):
Give it a name, and you’re ready to start developing!
Sizing your component
The first step will be to size the canvas of the component (don’t worry, we’ll dynamically size the text input later); this is going to be the “default” size of the component when it’s added to the canvas. Select the component and add your values (these are what I’ve used):
Width = 687
Height = 64
Adding the controls
Insert the text input control, name it as txtComponentSearch, and update its properties:
Default: ""
Height: Parent.Height
Width: Parent.Width
The Parent of the text input control is the component itself — so setting the its height and width equal to its parent will allow you to resize the whole component within your app (and have the text input respond to the new size). I then typically set the Default() property of my text inputs to blank so I can use its HintText() property (more on that later).
Insert the search icon, name it iconComponentSearchClear, and update its properties:
Height:
txtComponentSearch.HeightIcon:
If(
IsBlank(txtComponentSearch.Text),
Icon.Search,
Icon.Cancel
)OnSelect:
Reset(txtComponentSearch)X:
Parent.Width-Self.Width-10Y:
(txtComponentSearch.Height-icnComponentSearchClear.Height)/2+2
Let’s breakdown the icon’s properties and why we set them as such:
- Height: We set this equal to the height of the search box; that way, when you adjust the height of the search box (which is equal to the height of the component), the icon will resize to match.
- Icon: Remember the Using creative formulas in control properties I was talking about earlier? This allows you to have one icon that changes how it looks depending on the formula, in this case: If there’s nothing in the search bar, display the search icon, else display the cancel (X) icon.
- OnSelect: Reset the text input control (always make it easy for your users to reset their inputs, by the way). This goes hand-in-hand with the icon’s Icon() property — if there’s text in the control, the icon will be the cancel (X) icon; when a user selects it, it’ll clear the text input and revert back to a search icon. Neat!
- X: Once again we reference the Parent and its properties. By using this formula, the icon will continue to be aligned to the right of the text input control regardless of how it’s sized!
- Y: This keeps the icon aligned to the middle of the text input control.
Whew! There was a lot crammed in there, so take a minute to unpack some of the ideas (which are applicable everywhere in Power Apps, not just components) and start thinking about ways that you’d like to make this component your own.
Components and custom properties
To get data in/out of a component, you can create Custom Properties. Let’s create the two that we need first:
- Select + New custom property, give it these values, and select Create:
Display name: zHintText
Name: zHintText
Description: Whatever you want
Property type: Input
Data type: Text
When you’re adding formulas to controls in Power Apps, you use the drop down menu next to the formula bar, like this:
When you create a custom property, you’re inserting a property into that drop down for the component itself. To see your new custom property, select the component, then select the dropdown to see your new property:
Next, select the text input control and give its HintText() property the value of:
cmpSearch.zHintTextWhat does that mean? Remember, once inserted on a canvas, the component can only be selected as a whole, so you won’t be able to select the text input control itself to access its properties. With this, the HintText() property of the text input control can now be set dynamically within your apps, simply by changing the zHintText custom property of the component (which we’ll do later)!
Let’s create the final custom property:
Display Name: zSearchOutput
Name: zSearchOutput
Description: Whatever you want
Property type: Output
Data type: TextThe difference between this property and the previous is that this produces an output, vs. receiving an input! This is how you get data out of the component, in other words, be able to access whatever the user typed into the text input control.
Save and publish your component. It’s time to see it in action! Note: sometimes it takes Power Apps some time to finish the initial save/publish of the component, so if you proceed to the next steps and can’t “find” the component, wait a few minutes and try again.
Adding the component to an app
Open the app you want to add the component to. To add your component into the app, select the plus sign (+) in the left hand pane of the editor, then select Get more components:
Select your component, then select Import (you’ll only have to do this once):
To add the app to your canvas, select the component in the Insert pane:
Play with your component!
- Try resizing it to see how it adapts to the new dimensions
- Select the component, find your zHintText custom property, and change it:
- Type something in the text input control, and watch how the icon changes from the search icon to the cancel icon (X):
- Ready to get data out of the component? To illustrate, put a label on your screen and set its Text() property to:
cmpSearch.zSearchOutput
For example, if you have a gallery where you use the Search() function, you can change it from this:
Search(Datasource, OldTextInput.Text, "ColumnName")To this:
Search(DataSource, cmpSearch.zSearchOutput, "ColumnName")Summary
You just created a singular control, comprised of two separate controls! Even better, if you use that component a bunch of times across multiple apps, you can now update the component library itself and the changes will be pushed to all the apps using that component (no more forgetting to update something)!
Further, you also learned:
- How to use relational formulas to dynamically set height/width/X/Y properties
- How to get data in/out of a component
- How to reduce redundant controls/icons by creatively using formulas in its properties
Remember you can always rename things to better match your naming conventions (e.g. it doesn’t have to be named zHintText). Start thinking about how you can expand on this and apply it to your existing apps!
And always keep components in the back of your mind; if you find yourself copy/pasting multiple controls over and over, you need to think if there’s a better way to do that to reduce the amount of overhead your app generates.
