1
00:00:00,040 --> 00:00:03,520
Welcome to the M365 FM podcast,
where we explore the people,
2
00:00:03,520 --> 00:00:06,519
ideas and technologies shaping
the future of work.
3
00:00:06,519 --> 00:00:08,199
The hidden half of power apps.
4
00:00:08,199 --> 00:00:09,400
The controls you drag onto a
5
00:00:09,400 --> 00:00:10,759
PowerApps screen are only half
6
00:00:10,759 --> 00:00:11,439
the story.
7
00:00:11,439 --> 00:00:12,720
Underneath them sits a second
8
00:00:12,720 --> 00:00:14,000
layer that lets developers build
9
00:00:14,000 --> 00:00:15,560
their own controls, the kind
10
00:00:15,560 --> 00:00:17,039
that turn plain forms into real
11
00:00:17,039 --> 00:00:18,359
maps, custom grids, and
12
00:00:18,359 --> 00:00:19,800
interfaces that feel made by
13
00:00:19,800 --> 00:00:20,480
hand.
14
00:00:20,480 --> 00:00:23,039
It looks like something only a
programmer could touch, so most
15
00:00:23,039 --> 00:00:24,440
makers walk right past it.
16
00:00:24,440 --> 00:00:28,039
Welcome to the M365 FM podcast,
where we explore the people,
17
00:00:28,039 --> 00:00:30,359
ideas, and technologies shaping
the future of work.
18
00:00:30,359 --> 00:00:33,159
Today we're breaking down the
Power Apps component framework
19
00:00:33,159 --> 00:00:35,719
in plain English so you can see
what it is, when it's worth the
20
00:00:35,719 --> 00:00:40,320
effort, and where it honestly
stops the wall.
21
00:00:40,320 --> 00:00:42,240
Every power app hits eventually.
22
00:00:42,240 --> 00:00:44,520
Start with something you've
probably already seen.
23
00:00:44,520 --> 00:00:47,240
Power apps lets you build an app
by dragging controls onto a
24
00:00:47,240 --> 00:00:50,759
screen, a text box, a drop down
a button to save the record.
25
00:00:50,759 --> 00:00:53,399
You line them up, connect them
to your data, and by the end of
26
00:00:53,399 --> 00:00:54,960
the afternoon, you have
something that works.
27
00:00:54,960 --> 00:00:57,600
That style of app has a name and
it comes up constantly.
28
00:00:57,600 --> 00:00:59,640
Built by dragging controls onto
a blank space.
29
00:00:59,640 --> 00:01:01,479
And it's called a canvas app,
30
00:01:01,479 --> 00:01:02,600
which gives you almost total
31
00:01:02,600 --> 00:01:03,899
freedom over how the screen
32
00:01:03,899 --> 00:01:04,500
looks.
33
00:01:04,500 --> 00:01:05,480
There's a second style two
34
00:01:05,480 --> 00:01:07,019
called a model driven app, where
35
00:01:07,019 --> 00:01:08,099
the layout follows your data
36
00:01:08,099 --> 00:01:09,060
model instead of your
37
00:01:09,060 --> 00:01:09,939
imagination.
38
00:01:09,939 --> 00:01:12,700
Both are power apps and both run
into the same wall.
39
00:01:12,700 --> 00:01:15,579
You meet that wall when you need
a control that doesn't exist, or
40
00:01:15,579 --> 00:01:18,379
one that exists, but doesn't do
what the job needs.
41
00:01:18,379 --> 00:01:19,620
Picture a field rep who needs to
42
00:01:19,620 --> 00:01:21,060
see a customer's location on a
43
00:01:21,060 --> 00:01:22,819
real map, right inside the form,
44
00:01:22,819 --> 00:01:24,140
or a list where people edit
45
00:01:24,140 --> 00:01:25,500
cells like a spreadsheet instead
46
00:01:25,500 --> 00:01:27,219
of reading rows, or a calendar
47
00:01:27,219 --> 00:01:28,219
that looks like the one on your
48
00:01:28,219 --> 00:01:29,739
phone, not a plain column of
49
00:01:29,739 --> 00:01:30,340
dates.
50
00:01:30,340 --> 00:01:32,500
The instinct in that moment is
to stack workarounds.
51
00:01:32,500 --> 00:01:35,620
You hide controls behind each
other, layer images, and wire up
52
00:01:35,620 --> 00:01:37,140
ten things to fake one thing.
53
00:01:37,140 --> 00:01:37,900
It works.
54
00:01:37,900 --> 00:01:39,459
Sort of, until it turns slow,
55
00:01:39,459 --> 00:01:40,859
brittle, and impossible to hand
56
00:01:40,859 --> 00:01:41,780
to a colleague without a
57
00:01:41,780 --> 00:01:42,299
walkthrough.
58
00:01:42,299 --> 00:01:43,939
If you've built a few apps,
you've felt this.
59
00:01:43,939 --> 00:01:46,219
What you're feeling is the edge
of the platform, and it's a
60
00:01:46,219 --> 00:01:47,219
normal place to end up.
61
00:01:47,219 --> 00:01:49,859
Drag and drop isn't weak, and it
isn't going away.
62
00:01:49,859 --> 00:01:51,140
It covers most of what most
63
00:01:51,140 --> 00:01:52,260
businesses need, and that's a
64
00:01:52,260 --> 00:01:52,900
good thing.
65
00:01:52,900 --> 00:01:54,859
The catch is that it has a
ceiling, and knowing where that
66
00:01:54,859 --> 00:01:57,019
ceiling sits changes how you
plan a project.
67
00:01:57,019 --> 00:01:58,739
When you can see the wall
68
00:01:58,739 --> 00:02:00,500
coming, you stop fighting it and
69
00:02:00,500 --> 00:02:01,659
you start asking a better
70
00:02:01,659 --> 00:02:02,420
question.
71
00:02:02,420 --> 00:02:04,540
Imagine building the missing
control properly and then
72
00:02:04,540 --> 00:02:06,439
dropping it into the app like
any other piece.
73
00:02:06,439 --> 00:02:07,560
That idea is exactly why the
74
00:02:07,560 --> 00:02:08,960
PowerApps component framework
75
00:02:08,960 --> 00:02:09,800
exists.
76
00:02:09,800 --> 00:02:12,120
Microsoft describes it as a way
to give people a richer
77
00:02:12,120 --> 00:02:15,120
experience with data in forms,
views, and dashboards.
78
00:02:15,120 --> 00:02:17,680
Those are the precise spots
where the standard controls run
79
00:02:17,680 --> 00:02:18,800
out of room.
80
00:02:18,800 --> 00:02:20,840
What the component framework
actually is.
81
00:02:20,840 --> 00:02:22,280
The plain version goes like
this.
82
00:02:22,280 --> 00:02:24,659
The PowerApps component
framework, usually shortened to
83
00:02:24,659 --> 00:02:27,800
PCF, is Microsoft's way for
developers to build their own
84
00:02:27,800 --> 00:02:30,080
controls and then use them
inside power apps.
85
00:02:30,080 --> 00:02:31,400
Those custom controls have a
86
00:02:31,400 --> 00:02:33,419
name, code, components, and to
87
00:02:33,419 --> 00:02:34,719
the person using the app, they
88
00:02:34,719 --> 00:02:36,080
look and behave like any other
89
00:02:36,080 --> 00:02:36,639
control.
90
00:02:36,639 --> 00:02:39,199
The easiest way to picture it is
a box of building bricks.
91
00:02:39,199 --> 00:02:41,919
Power apps hands you a set of
ready made bricks and you snap
92
00:02:41,919 --> 00:02:43,280
them together into an app.
93
00:02:43,280 --> 00:02:46,280
PCF lets a developer make a
brand new brick, one that fits
94
00:02:46,280 --> 00:02:49,039
the same studs and then hand it
back to you.
95
00:02:49,039 --> 00:02:50,039
A code component is a
96
00:02:50,039 --> 00:02:51,280
self-contained piece of user
97
00:02:51,280 --> 00:02:52,039
interface.
98
00:02:52,039 --> 00:02:53,199
It has its own look, its own
99
00:02:53,199 --> 00:02:55,080
behavior, and it's packaged so
100
00:02:55,080 --> 00:02:56,360
it can be reused across
101
00:02:56,360 --> 00:02:57,439
different apps and different
102
00:02:57,439 --> 00:02:57,960
environments.
103
00:02:57,960 --> 00:02:59,319
You build it once, and it can
104
00:02:59,319 --> 00:03:00,319
show up in a dozen places
105
00:03:00,319 --> 00:03:01,360
without being rebuilt from
106
00:03:01,360 --> 00:03:02,000
scratch.
107
00:03:02,000 --> 00:03:04,479
It helps to separate this from
something you may have already
108
00:03:04,479 --> 00:03:06,520
heard about canvas components.
109
00:03:06,520 --> 00:03:08,300
Those are the maker friendly
cousin.
110
00:03:08,300 --> 00:03:09,539
You build them inside the app
111
00:03:09,539 --> 00:03:10,979
you're working on with no code,
112
00:03:10,979 --> 00:03:12,199
which is why they're so easy to
113
00:03:12,199 --> 00:03:12,819
reach for.
114
00:03:12,819 --> 00:03:15,180
Code components are the other
path, and they take real
115
00:03:15,180 --> 00:03:18,020
programming in return for far
more capability and reuse.
116
00:03:18,020 --> 00:03:20,740
The reach of code components is
wider than it first sounds.
117
00:03:20,740 --> 00:03:24,020
They work in model driven apps,
canvas apps, and power pages,
118
00:03:24,020 --> 00:03:26,620
which cover the main ways
Microsoft puts an app in front
119
00:03:26,620 --> 00:03:27,460
of a person.
120
00:03:27,460 --> 00:03:28,740
So a component a developer
121
00:03:28,740 --> 00:03:30,099
writes once can travel across
122
00:03:30,099 --> 00:03:31,699
almost every kind of power apps
123
00:03:31,699 --> 00:03:32,300
experience.
124
00:03:32,300 --> 00:03:33,219
There's a bit of history here
125
00:03:33,219 --> 00:03:34,219
that explains the tone of
126
00:03:34,219 --> 00:03:35,520
everything Microsoft says about
127
00:03:35,520 --> 00:03:36,300
PCF.
128
00:03:36,300 --> 00:03:38,979
The framework reached general
availability for model driven
129
00:03:38,979 --> 00:03:41,699
apps, together with the
PowerApps command line tool on
130
00:03:41,699 --> 00:03:44,800
the first of October in twenty
nineteen, support for canvas
131
00:03:44,800 --> 00:03:45,620
apps followed that.
132
00:03:45,620 --> 00:03:46,860
Timing matters because it marks
133
00:03:46,860 --> 00:03:47,900
the moment custom controls
134
00:03:47,900 --> 00:03:49,039
stopped being an unsupported
135
00:03:49,039 --> 00:03:50,500
hack and became a real part of
136
00:03:50,500 --> 00:03:51,139
the platform.
137
00:03:51,139 --> 00:03:52,620
That's the line to hold on to.
138
00:03:52,620 --> 00:03:54,099
Makers build the app, developers
139
00:03:54,099 --> 00:03:55,460
build the components, and the
140
00:03:55,460 --> 00:03:56,819
two meet inside a single
141
00:03:56,819 --> 00:03:57,419
solution.
142
00:03:57,419 --> 00:03:59,340
Neither one has to pretend to be
the other.
143
00:03:59,340 --> 00:04:00,539
And that's the point.
144
00:04:01,819 --> 00:04:02,780
How a component works.
145
00:04:02,780 --> 00:04:05,900
Under the hood, a component is
built from a few moving parts,
146
00:04:05,900 --> 00:04:08,539
and once you see them, most of
the mystery goes away.
147
00:04:08,539 --> 00:04:09,900
The first part is a manifest.
148
00:04:09,900 --> 00:04:13,310
A manifest is a small file that
declares the component's name,
149
00:04:13,310 --> 00:04:16,410
the inputs it expects, and the
outputs it can send back.
150
00:04:16,410 --> 00:04:17,810
Think of it as a label and a
151
00:04:17,810 --> 00:04:19,050
wiring diagram on the side of a
152
00:04:19,050 --> 00:04:20,170
box so the app knows what's
153
00:04:20,170 --> 00:04:20,810
inside.
154
00:04:20,810 --> 00:04:22,170
That label does real work.
155
00:04:22,170 --> 00:04:25,089
It's what makes the component
reusable and predictable.
156
00:04:25,089 --> 00:04:26,250
Because the inputs and outputs
157
00:04:26,250 --> 00:04:27,730
are declared up front, the app
158
00:04:27,730 --> 00:04:29,529
can wire a field or a data set
159
00:04:29,529 --> 00:04:30,490
straight into the component
160
00:04:30,490 --> 00:04:31,529
without guessing.
161
00:04:31,529 --> 00:04:32,410
The second part is the
162
00:04:32,410 --> 00:04:33,889
lifecycle, which is just a word
163
00:04:33,889 --> 00:04:35,250
for the moments in a component's
164
00:04:35,250 --> 00:04:35,850
life.
165
00:04:35,850 --> 00:04:38,410
A component starts up and
developers call that in it.
166
00:04:38,410 --> 00:04:40,930
It draws itself and redraws
whenever the data or a setting
167
00:04:40,930 --> 00:04:42,889
changes, which is update view.
168
00:04:42,889 --> 00:04:45,250
It handles values back to the
app when something changes,
169
00:04:45,250 --> 00:04:48,129
which is get outputs and when
it's no longer needed, it shuts
170
00:04:48,129 --> 00:04:51,410
down and cleans up after itself,
which is destroy.
171
00:04:51,410 --> 00:04:52,449
If that sounds like a lot of
172
00:04:52,449 --> 00:04:53,810
machinery, try holding it this
173
00:04:53,810 --> 00:04:54,449
way.
174
00:04:54,449 --> 00:04:57,009
Picture a light switch in a room
where you flick it on and the
175
00:04:57,009 --> 00:04:57,889
light comes on.
176
00:04:57,889 --> 00:05:00,290
When something changes in the
room, the light adjusts and when
177
00:05:00,290 --> 00:05:01,529
you leave, you switch it off.
178
00:05:01,529 --> 00:05:04,050
The lifecycle is that same
rhythm applied to a piece of an
179
00:05:04,050 --> 00:05:05,209
app instead of a room.
180
00:05:05,209 --> 00:05:06,649
The third part is the data link.
181
00:05:06,649 --> 00:05:09,449
Everything the component
declared in its manifest arrives
182
00:05:09,449 --> 00:05:11,410
as a context when it redraws.
183
00:05:11,410 --> 00:05:14,389
In plain terms, the component
always knows what the app is
184
00:05:14,389 --> 00:05:15,709
showing it at that moment.
185
00:05:15,709 --> 00:05:16,990
Change the record and the
186
00:05:16,990 --> 00:05:18,189
component sees the new value
187
00:05:18,189 --> 00:05:18,709
right away.
188
00:05:18,709 --> 00:05:20,750
There's a reason Microsoft
designed it this way.
189
00:05:20,750 --> 00:05:22,029
Instead of letting developers
190
00:05:22,029 --> 00:05:23,670
drop in anything they liked, a
191
00:05:23,670 --> 00:05:24,829
shared structure means every
192
00:05:24,829 --> 00:05:26,329
component behaves the same way,
193
00:05:26,329 --> 00:05:27,990
plays by the same rules, and can
194
00:05:27,990 --> 00:05:29,250
be trusted inside a business
195
00:05:29,250 --> 00:05:29,629
app.
196
00:05:29,629 --> 00:05:32,949
Freedom without a frame is how
you get fragile software.
197
00:05:32,949 --> 00:05:35,790
A beginner should care about
this for one simple reason.
198
00:05:35,790 --> 00:05:38,790
It explains why a well-built
code component feels like a real
199
00:05:38,790 --> 00:05:42,230
control, while a badly built one
feels like a broken embed, the
200
00:05:42,230 --> 00:05:44,509
life cycle is the housekeeping
that keeps it alive and
201
00:05:44,509 --> 00:05:47,829
responsive and skipping it is
exactly how custom controls earn
202
00:05:47,829 --> 00:05:49,029
their bad reputation.
203
00:05:49,029 --> 00:05:50,350
The good news is that you don't
204
00:05:50,350 --> 00:05:51,569
have to understand any of it to
205
00:05:51,569 --> 00:05:52,310
use one.
206
00:05:52,310 --> 00:05:54,990
If you can drag a control onto a
screen, you can drag a code
207
00:05:54,990 --> 00:05:56,310
component onto a screen.
208
00:05:56,310 --> 00:05:57,189
The life cycle is the
209
00:05:57,189 --> 00:05:58,829
developer's job, hidden behind
210
00:05:58,829 --> 00:06:00,269
the same simple surface you
211
00:06:00,269 --> 00:06:01,110
already know.
212
00:06:01,110 --> 00:06:02,310
Once you know the parts, the
213
00:06:02,310 --> 00:06:03,689
next question turns practical,
214
00:06:03,689 --> 00:06:04,990
because none of this matters
215
00:06:04,990 --> 00:06:06,209
until you know what it takes to
216
00:06:06,209 --> 00:06:07,310
build one.
217
00:06:07,310 --> 00:06:09,310
From idea to shipped component.
218
00:06:09,310 --> 00:06:11,029
Now for the honest answer about
effort.
219
00:06:11,029 --> 00:06:13,509
Building one of these is real
work and it's developer work.
220
00:06:13,509 --> 00:06:14,790
Here's what that involves.
221
00:06:14,790 --> 00:06:17,870
A developer starts with the
Microsoft Power Platform CLI,
222
00:06:17,870 --> 00:06:20,449
which is a command line tool,
and it does more than you'd
223
00:06:20,449 --> 00:06:21,730
expect from the name.
224
00:06:21,730 --> 00:06:24,610
That tool scaffolds a fresh
component project, lays out the
225
00:06:24,610 --> 00:06:27,329
right file structure and later
packages everything up.
226
00:06:27,329 --> 00:06:29,490
It's the workbench where the
component gets built.
227
00:06:29,490 --> 00:06:32,129
The languages are the ones you'd
expect from a web developer.
228
00:06:32,129 --> 00:06:35,689
Components are written in HTML,
CSS, and TypeScript.
229
00:06:35,689 --> 00:06:36,730
TypeScript is JavaScript with
230
00:06:36,730 --> 00:06:37,889
extra rules that catch mistakes
231
00:06:37,889 --> 00:06:38,290
early.
232
00:06:38,290 --> 00:06:40,370
And if you've never written
either of them, that's fine.
233
00:06:40,370 --> 00:06:41,649
The point is that this is
234
00:06:41,649 --> 00:06:43,089
software development with a
235
00:06:43,089 --> 00:06:44,649
build step, not a drag and drop
236
00:06:44,649 --> 00:06:45,410
exercise.
237
00:06:45,410 --> 00:06:47,410
There's also a modern shortcut
to know about.
238
00:06:47,410 --> 00:06:50,370
Developers can build components
with React and Fluent UI.
239
00:06:50,370 --> 00:06:53,410
Microsoft's own interface
libraries by using something
240
00:06:53,410 --> 00:06:54,769
called platform libraries.
241
00:06:54,769 --> 00:06:57,569
The benefit is simple because
the component borrows the React
242
00:06:57,569 --> 00:06:58,449
and Fluent UI.
243
00:06:58,449 --> 00:06:59,529
The platform already loads
244
00:06:59,529 --> 00:07:01,110
instead of shipping its own copy
245
00:07:01,110 --> 00:07:02,850
that keeps it lighter and faster
246
00:07:02,850 --> 00:07:04,410
to start, which is a real win
247
00:07:04,410 --> 00:07:05,810
when an app carries several
248
00:07:05,810 --> 00:07:07,089
custom controls on the same
249
00:07:07,089 --> 00:07:07,649
screen.
250
00:07:07,649 --> 00:07:08,970
Then comes testing and shipping.
251
00:07:08,970 --> 00:07:11,170
A developer can run the
component in a test harness and
252
00:07:11,170 --> 00:07:13,449
watch it work before it touches
a live app, which keeps
253
00:07:13,449 --> 00:07:15,209
surprises off the user's screen.
254
00:07:15,209 --> 00:07:17,660
Once it's ready, the finished
component is packaged into a
255
00:07:17,660 --> 00:07:20,589
Dataverse solution, imported
into an environment and update
256
00:07:20,589 --> 00:07:21,790
it whenever it changes.
257
00:07:21,790 --> 00:07:24,269
Dataverse is the data platform
behind PowerApps.
258
00:07:24,269 --> 00:07:27,029
A solution is how Power Platform
moves customizations between
259
00:07:27,029 --> 00:07:29,829
environments, like from a test
space into the real one.
260
00:07:29,829 --> 00:07:31,250
One more thing about the CLI,
261
00:07:31,250 --> 00:07:32,170
because it's easy to
262
00:07:32,170 --> 00:07:32,870
underestimate.
263
00:07:32,870 --> 00:07:35,149
It doesn't just build the
component, it also handles the
264
00:07:35,149 --> 00:07:36,310
packaging and the deployment.
265
00:07:36,310 --> 00:07:38,790
So the whole journey from an
empty folder to a working
266
00:07:38,790 --> 00:07:40,589
control runs through one tool.
267
00:07:40,589 --> 00:07:41,750
That's what keeps the process
268
00:07:41,750 --> 00:07:42,990
repeatable instead of a one off
269
00:07:42,990 --> 00:07:43,870
experiment.
270
00:07:43,870 --> 00:07:46,670
So the full picture is a
developer, a command line tool,
271
00:07:46,670 --> 00:07:49,149
a real programming language, and
a packaging step.
272
00:07:49,149 --> 00:07:50,589
None of that is meant to scare
you.
273
00:07:50,589 --> 00:07:51,589
It's meant to set honest
274
00:07:51,589 --> 00:07:53,149
expectations because knowing the
275
00:07:53,149 --> 00:07:54,629
shape of the work is how you
276
00:07:54,629 --> 00:07:56,449
decide whether to ask for it,
277
00:07:56,449 --> 00:07:57,709
where you'll actually meet these
278
00:07:57,709 --> 00:07:58,709
components.
279
00:07:58,709 --> 00:08:01,509
Since building one takes real
work, it's fair to ask where
280
00:08:01,509 --> 00:08:02,550
that work is worth it.
281
00:08:02,550 --> 00:08:03,949
The answer is usually a specific
282
00:08:03,949 --> 00:08:05,589
spot on a screen where the
283
00:08:05,589 --> 00:08:07,069
standard control just isn't
284
00:08:07,069 --> 00:08:07,670
enough.
285
00:08:07,670 --> 00:08:09,389
Start with a single field on a
form.
286
00:08:09,389 --> 00:08:11,949
Maybe you want a star rating
instead of a plain number or a
287
00:08:11,949 --> 00:08:14,310
signature pad, so people sign
with a finger or a mouse.
288
00:08:14,310 --> 00:08:15,850
Maybe you want a color picker or
289
00:08:15,850 --> 00:08:17,290
a slider that feels natural to
290
00:08:17,290 --> 00:08:18,269
drag.
291
00:08:18,269 --> 00:08:19,550
These are small moments where a
292
00:08:19,550 --> 00:08:21,410
custom control turns a clunky
293
00:08:21,410 --> 00:08:22,529
field into something people
294
00:08:22,529 --> 00:08:23,410
enjoy using.
295
00:08:23,410 --> 00:08:25,129
Next, think about grids and
lists.
296
00:08:25,129 --> 00:08:27,089
A standard table shows rows and
columns.
297
00:08:27,089 --> 00:08:29,569
A code component can turn that
into something closer to a
298
00:08:29,569 --> 00:08:32,850
spreadsheet, with editing in the
cell and filtering that updates
299
00:08:32,850 --> 00:08:33,490
as you go.
300
00:08:33,490 --> 00:08:36,049
If your team lives in
spreadsheets all day, that one
301
00:08:36,049 --> 00:08:39,250
change can make an app feel
familiar from the first click.
302
00:08:39,250 --> 00:08:40,649
Then there are other
visualizations.
303
00:08:40,649 --> 00:08:43,570
The built in charts can't draw
like an interactive floor plan
304
00:08:43,570 --> 00:08:46,429
for an office, or a map that
shows customers as more than
305
00:08:46,429 --> 00:08:47,889
pins on a static image.
306
00:08:47,889 --> 00:08:51,049
When the picture is the point, a
code component is often the only
307
00:08:51,049 --> 00:08:51,850
way to get there.
308
00:08:51,850 --> 00:08:53,049
And there's the quiet case.
309
00:08:53,049 --> 00:08:54,690
Sometimes a page needs to
control.
310
00:08:54,690 --> 00:08:56,690
The low code palette simply
doesn't have.
311
00:08:56,690 --> 00:08:58,409
And a component fills the gap so
312
00:08:58,409 --> 00:09:00,129
smoothly that nobody notices
313
00:09:00,129 --> 00:09:01,129
it's custom.
314
00:09:01,129 --> 00:09:03,090
Think of a barcode scanner on a
phone.
315
00:09:03,090 --> 00:09:04,490
A rich text editor like the one
316
00:09:04,490 --> 00:09:06,210
in word, or a progress tracker
317
00:09:06,210 --> 00:09:07,610
that animates as work moves
318
00:09:07,610 --> 00:09:08,090
along.
319
00:09:08,090 --> 00:09:09,450
Each of those is a small problem
320
00:09:09,450 --> 00:09:10,929
that a custom control solves
321
00:09:10,929 --> 00:09:11,809
cleanly.
322
00:09:11,809 --> 00:09:14,049
That pattern shows up in almost
every industry, from field
323
00:09:14,049 --> 00:09:15,529
service to healthcare to retail.
324
00:09:15,529 --> 00:09:18,049
Every industry eventually needs
to screen the standard controls
325
00:09:18,049 --> 00:09:19,009
can't quite draw.
326
00:09:19,009 --> 00:09:21,409
For most beginners, the
practical answer is simple you
327
00:09:21,409 --> 00:09:23,409
probably won't build one of
these, and you don't have to,
328
00:09:23,409 --> 00:09:24,309
but you will use one.
329
00:09:24,309 --> 00:09:26,870
And once you know they exist,
you'll start spotting them.
330
00:09:26,870 --> 00:09:29,549
The little piece of an app that
behaves better than the rest.
331
00:09:29,549 --> 00:09:30,470
That's the upside.
332
00:09:30,470 --> 00:09:32,870
And there's an honest catch that
comes with it, which is what we
333
00:09:32,870 --> 00:09:34,350
need to talk about next.
334
00:09:34,350 --> 00:09:36,950
The honest limits and the
mistakes to avoid a tool this
335
00:09:36,950 --> 00:09:39,149
capable deserves an honest look
at where it stops.
336
00:09:39,149 --> 00:09:40,830
PCF is powerful and it isn't a
337
00:09:40,830 --> 00:09:42,009
shortcut, and pretending
338
00:09:42,009 --> 00:09:43,389
otherwise is how projects get
339
00:09:43,389 --> 00:09:44,190
into trouble.
340
00:09:44,190 --> 00:09:46,070
The first limit is the skills
barrier.
341
00:09:46,070 --> 00:09:47,549
Building a code component needs
342
00:09:47,549 --> 00:09:48,750
someone who writes code for a
343
00:09:48,750 --> 00:09:49,950
living and understands a build
344
00:09:49,950 --> 00:09:50,309
pipeline.
345
00:09:50,309 --> 00:09:52,070
It was never meant to be a maker
tool.
346
00:09:52,070 --> 00:09:53,830
That isn't a flaw, it's the
design.
347
00:09:53,830 --> 00:09:55,029
The whole point is to hand the
348
00:09:55,029 --> 00:09:56,289
hardest interface problems to
349
00:09:56,289 --> 00:09:57,549
the people equipped to solve
350
00:09:57,549 --> 00:09:58,230
them.
351
00:09:58,230 --> 00:10:00,190
The second limit is the support
surface.
352
00:10:00,190 --> 00:10:01,509
Microsoft keeps a published list
353
00:10:01,509 --> 00:10:02,350
of limitations for the
354
00:10:02,350 --> 00:10:03,629
framework, and not every
355
00:10:03,629 --> 00:10:04,789
scenario supports code
356
00:10:04,789 --> 00:10:05,389
components.
357
00:10:05,389 --> 00:10:06,269
A component that works
358
00:10:06,269 --> 00:10:07,789
beautifully in one app might not
359
00:10:07,789 --> 00:10:09,190
work in another, so check the
360
00:10:09,190 --> 00:10:10,509
current limitations before you
361
00:10:10,509 --> 00:10:11,549
promise anything.
362
00:10:11,549 --> 00:10:12,870
The third limit is maintenance.
363
00:10:12,870 --> 00:10:14,070
A custom control is custom
364
00:10:14,070 --> 00:10:15,389
software, which means someone
365
00:10:15,389 --> 00:10:17,070
has to own it, update it, and
366
00:10:17,070 --> 00:10:18,029
keep it working across
367
00:10:18,029 --> 00:10:18,789
environments.
368
00:10:18,789 --> 00:10:21,629
Microsoft documents this as the
application lifecycle for code
369
00:10:21,629 --> 00:10:24,330
components, and it's real
overhead that a one off app
370
00:10:24,330 --> 00:10:25,899
often can't justify.
371
00:10:25,899 --> 00:10:26,860
There's a fourth limit that's
372
00:10:26,860 --> 00:10:27,980
less obvious, and it's about
373
00:10:27,980 --> 00:10:28,620
people.
374
00:10:28,620 --> 00:10:31,139
Once you build a custom control,
you've created something only a
375
00:10:31,139 --> 00:10:32,779
developer can safely change.
376
00:10:32,779 --> 00:10:35,539
If that developer leaves, the
control becomes a black box, and
377
00:10:35,539 --> 00:10:37,220
the app quietly depends on code.
378
00:10:37,220 --> 00:10:38,700
Nobody on the team understands.
379
00:10:38,700 --> 00:10:39,779
That's not a reason to avoid
380
00:10:39,779 --> 00:10:41,220
PCF, but it's a reason to plan
381
00:10:41,220 --> 00:10:41,820
for it.
382
00:10:41,820 --> 00:10:44,220
None of this means you should
skip PCF when the problem
383
00:10:44,220 --> 00:10:45,179
actually calls for it.
384
00:10:45,179 --> 00:10:48,059
If the whole app depends on a
control, nobody can build any
385
00:10:48,059 --> 00:10:50,700
other way, then a custom
component is the right call.
386
00:10:50,700 --> 00:10:52,419
The limits are just the price of
getting it.
387
00:10:52,419 --> 00:10:53,700
The real skill is telling the
388
00:10:53,700 --> 00:10:55,200
two situations apart before you
389
00:10:55,200 --> 00:10:55,779
commit.
390
00:10:55,779 --> 00:10:57,419
Now the mistakes because they're
predictable.
391
00:10:57,419 --> 00:10:59,659
The most common one is reaching
for PCF.
392
00:10:59,659 --> 00:11:02,500
When a standard control or a
canvas component would have done
393
00:11:02,500 --> 00:11:04,019
the job faster and cheaper.
394
00:11:04,019 --> 00:11:06,379
If a built in option gets you
ninety percent of the way there,
395
00:11:06,379 --> 00:11:07,379
take it and move on.
396
00:11:07,379 --> 00:11:10,179
The second mistake is treating a
code component like a toy.
397
00:11:10,179 --> 00:11:13,139
Drop one into an app with no
owner and no plan for updates,
398
00:11:13,139 --> 00:11:15,379
and it will quietly spread
across the whole tenant
399
00:11:15,379 --> 00:11:18,460
governance sounds boring, right
up until you're the one tracking
400
00:11:18,460 --> 00:11:20,259
down who built what and why.
401
00:11:20,259 --> 00:11:22,419
One practical detail to check in
your own setup.
402
00:11:22,419 --> 00:11:25,980
Code components live inside
Dataverse solutions, so using
403
00:11:25,980 --> 00:11:29,159
them generally means working in
a Dataverse packed environment.
404
00:11:29,159 --> 00:11:31,519
That's something to confirm for
your situation, rather than
405
00:11:31,519 --> 00:11:34,679
assume, because it can shape how
you plan the whole project.
406
00:11:35,759 --> 00:11:37,639
Where this fits in your
Microsoft world.
407
00:11:37,639 --> 00:11:38,519
Step back for a second.
408
00:11:38,519 --> 00:11:41,559
Because PCF is one visible
thread in a much bigger pattern,
409
00:11:41,559 --> 00:11:44,480
Microsoft's whole power platform
bet is that low code makers and
410
00:11:44,480 --> 00:11:47,759
pro code developers should share
one platform instead of living
411
00:11:47,759 --> 00:11:48,840
in separate worlds.
412
00:11:48,840 --> 00:11:51,399
PCF is the seam where those two
worlds actually touch.
413
00:11:51,399 --> 00:11:53,399
You can see it across Microsoft
three hundred sixty five.
414
00:11:53,399 --> 00:11:56,399
Code components can appear
inside the apps people already
415
00:11:56,399 --> 00:11:57,440
open every day.
416
00:11:57,440 --> 00:12:00,519
Power pages Microsoft's tool for
building business websites is
417
00:12:00,519 --> 00:12:03,519
one of the places they run, so a
controller developer builds ones
418
00:12:03,519 --> 00:12:05,559
can reach people who never think
about code at all.
419
00:12:05,559 --> 00:12:08,000
There's a skills story here that
matters for a career.
420
00:12:08,000 --> 00:12:10,480
The tools behind PCF,
TypeScript, and react are the
421
00:12:10,480 --> 00:12:13,080
same tools used across
Microsoft's cloud and honestly,
422
00:12:13,080 --> 00:12:14,240
across the industry.
423
00:12:14,240 --> 00:12:16,320
Learning them for power apps
isn't a dead end.
424
00:12:16,320 --> 00:12:19,320
It's a set of skills that
travels from power platform work
425
00:12:19,320 --> 00:12:21,639
into Azure Work and well beyond.
426
00:12:21,639 --> 00:12:24,240
There's also a mindset shift
here, and it's a useful one.
427
00:12:24,240 --> 00:12:26,240
Once you know PCF exists, you
stop reading.
428
00:12:26,240 --> 00:12:29,039
Power apps can't do that as a
hard no. You start asking
429
00:12:29,039 --> 00:12:31,740
whether the fix is a better
control, and whether someone on
430
00:12:31,740 --> 00:12:32,820
the team can build it.
431
00:12:32,820 --> 00:12:36,059
That single question changes how
you plan, how you estimate, and
432
00:12:36,059 --> 00:12:37,460
how you talk to developers.
433
00:12:37,460 --> 00:12:38,779
That question is also a small
434
00:12:38,779 --> 00:12:40,019
window into where Microsoft is
435
00:12:40,019 --> 00:12:40,700
heading.
436
00:12:40,700 --> 00:12:41,820
The line between a maker and a
437
00:12:41,820 --> 00:12:42,820
developer keeps getting
438
00:12:42,820 --> 00:12:44,620
blurrier, and tools like PCF are
439
00:12:44,620 --> 00:12:45,759
the reason why you don't have to
440
00:12:45,759 --> 00:12:47,100
cross that line to benefit from
441
00:12:47,100 --> 00:12:48,700
it, but knowing it's there makes
442
00:12:48,700 --> 00:12:49,960
the whole platform easier to
443
00:12:49,960 --> 00:12:50,820
reason about.
444
00:12:50,820 --> 00:12:52,620
So the framework is more than a
feature.
445
00:12:52,620 --> 00:12:56,019
It's the clearest example of how
Microsoft wants makers and
446
00:12:56,019 --> 00:12:57,899
developers to work side by side.
447
00:12:57,899 --> 00:13:00,139
It's useful to understand, even
if you never write a line of
448
00:13:00,139 --> 00:13:03,700
code yourself, what to take
away, and one question for you
449
00:13:03,700 --> 00:13:04,700
to pull it together.
450
00:13:04,700 --> 00:13:07,220
The PowerApps component
framework is the developer layer
451
00:13:07,220 --> 00:13:10,500
that lets custom controls live
inside PowerApps, and it works
452
00:13:10,500 --> 00:13:13,779
across model driven apps, canvas
apps, and power pages.
453
00:13:13,779 --> 00:13:14,940
It takes real developer skills.
454
00:13:14,940 --> 00:13:18,019
It comes with real limits, and
it's the reason some apps feel a
455
00:13:18,019 --> 00:13:19,100
step above the rest.
456
00:13:19,100 --> 00:13:20,940
Here's the question I want to
leave you with.
457
00:13:20,940 --> 00:13:22,940
Have you ever hit the point
where drag and drop stopped
458
00:13:22,940 --> 00:13:24,980
working for you, and what did
you do next?
459
00:13:24,980 --> 00:13:26,539
I really do want to know if this
460
00:13:26,539 --> 00:13:27,500
made the topic feel less
461
00:13:27,500 --> 00:13:28,340
intimidating.
462
00:13:28,340 --> 00:13:31,940
Subscribe to M365 FM to master
the tools and the mindset
463
00:13:31,940 --> 00:13:33,580
shaping the future of work.
00:00:00,040 --> 00:00:03,520
Welcome to the M365 FM podcast,
where we explore the people,
2
00:00:03,520 --> 00:00:06,519
ideas and technologies shaping
the future of work.
3
00:00:06,519 --> 00:00:08,199
The hidden half of power apps.
4
00:00:08,199 --> 00:00:09,400
The controls you drag onto a
5
00:00:09,400 --> 00:00:10,759
PowerApps screen are only half
6
00:00:10,759 --> 00:00:11,439
the story.
7
00:00:11,439 --> 00:00:12,720
Underneath them sits a second
8
00:00:12,720 --> 00:00:14,000
layer that lets developers build
9
00:00:14,000 --> 00:00:15,560
their own controls, the kind
10
00:00:15,560 --> 00:00:17,039
that turn plain forms into real
11
00:00:17,039 --> 00:00:18,359
maps, custom grids, and
12
00:00:18,359 --> 00:00:19,800
interfaces that feel made by
13
00:00:19,800 --> 00:00:20,480
hand.
14
00:00:20,480 --> 00:00:23,039
It looks like something only a
programmer could touch, so most
15
00:00:23,039 --> 00:00:24,440
makers walk right past it.
16
00:00:24,440 --> 00:00:28,039
Welcome to the M365 FM podcast,
where we explore the people,
17
00:00:28,039 --> 00:00:30,359
ideas, and technologies shaping
the future of work.
18
00:00:30,359 --> 00:00:33,159
Today we're breaking down the
Power Apps component framework
19
00:00:33,159 --> 00:00:35,719
in plain English so you can see
what it is, when it's worth the
20
00:00:35,719 --> 00:00:40,320
effort, and where it honestly
stops the wall.
21
00:00:40,320 --> 00:00:42,240
Every power app hits eventually.
22
00:00:42,240 --> 00:00:44,520
Start with something you've
probably already seen.
23
00:00:44,520 --> 00:00:47,240
Power apps lets you build an app
by dragging controls onto a
24
00:00:47,240 --> 00:00:50,759
screen, a text box, a drop down
a button to save the record.
25
00:00:50,759 --> 00:00:53,399
You line them up, connect them
to your data, and by the end of
26
00:00:53,399 --> 00:00:54,960
the afternoon, you have
something that works.
27
00:00:54,960 --> 00:00:57,600
That style of app has a name and
it comes up constantly.
28
00:00:57,600 --> 00:00:59,640
Built by dragging controls onto
a blank space.
29
00:00:59,640 --> 00:01:01,479
And it's called a canvas app,
30
00:01:01,479 --> 00:01:02,600
which gives you almost total
31
00:01:02,600 --> 00:01:03,899
freedom over how the screen
32
00:01:03,899 --> 00:01:04,500
looks.
33
00:01:04,500 --> 00:01:05,480
There's a second style two
34
00:01:05,480 --> 00:01:07,019
called a model driven app, where
35
00:01:07,019 --> 00:01:08,099
the layout follows your data
36
00:01:08,099 --> 00:01:09,060
model instead of your
37
00:01:09,060 --> 00:01:09,939
imagination.
38
00:01:09,939 --> 00:01:12,700
Both are power apps and both run
into the same wall.
39
00:01:12,700 --> 00:01:15,579
You meet that wall when you need
a control that doesn't exist, or
40
00:01:15,579 --> 00:01:18,379
one that exists, but doesn't do
what the job needs.
41
00:01:18,379 --> 00:01:19,620
Picture a field rep who needs to
42
00:01:19,620 --> 00:01:21,060
see a customer's location on a
43
00:01:21,060 --> 00:01:22,819
real map, right inside the form,
44
00:01:22,819 --> 00:01:24,140
or a list where people edit
45
00:01:24,140 --> 00:01:25,500
cells like a spreadsheet instead
46
00:01:25,500 --> 00:01:27,219
of reading rows, or a calendar
47
00:01:27,219 --> 00:01:28,219
that looks like the one on your
48
00:01:28,219 --> 00:01:29,739
phone, not a plain column of
49
00:01:29,739 --> 00:01:30,340
dates.
50
00:01:30,340 --> 00:01:32,500
The instinct in that moment is
to stack workarounds.
51
00:01:32,500 --> 00:01:35,620
You hide controls behind each
other, layer images, and wire up
52
00:01:35,620 --> 00:01:37,140
ten things to fake one thing.
53
00:01:37,140 --> 00:01:37,900
It works.
54
00:01:37,900 --> 00:01:39,459
Sort of, until it turns slow,
55
00:01:39,459 --> 00:01:40,859
brittle, and impossible to hand
56
00:01:40,859 --> 00:01:41,780
to a colleague without a
57
00:01:41,780 --> 00:01:42,299
walkthrough.
58
00:01:42,299 --> 00:01:43,939
If you've built a few apps,
you've felt this.
59
00:01:43,939 --> 00:01:46,219
What you're feeling is the edge
of the platform, and it's a
60
00:01:46,219 --> 00:01:47,219
normal place to end up.
61
00:01:47,219 --> 00:01:49,859
Drag and drop isn't weak, and it
isn't going away.
62
00:01:49,859 --> 00:01:51,140
It covers most of what most
63
00:01:51,140 --> 00:01:52,260
businesses need, and that's a
64
00:01:52,260 --> 00:01:52,900
good thing.
65
00:01:52,900 --> 00:01:54,859
The catch is that it has a
ceiling, and knowing where that
66
00:01:54,859 --> 00:01:57,019
ceiling sits changes how you
plan a project.
67
00:01:57,019 --> 00:01:58,739
When you can see the wall
68
00:01:58,739 --> 00:02:00,500
coming, you stop fighting it and
69
00:02:00,500 --> 00:02:01,659
you start asking a better
70
00:02:01,659 --> 00:02:02,420
question.
71
00:02:02,420 --> 00:02:04,540
Imagine building the missing
control properly and then
72
00:02:04,540 --> 00:02:06,439
dropping it into the app like
any other piece.
73
00:02:06,439 --> 00:02:07,560
That idea is exactly why the
74
00:02:07,560 --> 00:02:08,960
PowerApps component framework
75
00:02:08,960 --> 00:02:09,800
exists.
76
00:02:09,800 --> 00:02:12,120
Microsoft describes it as a way
to give people a richer
77
00:02:12,120 --> 00:02:15,120
experience with data in forms,
views, and dashboards.
78
00:02:15,120 --> 00:02:17,680
Those are the precise spots
where the standard controls run
79
00:02:17,680 --> 00:02:18,800
out of room.
80
00:02:18,800 --> 00:02:20,840
What the component framework
actually is.
81
00:02:20,840 --> 00:02:22,280
The plain version goes like
this.
82
00:02:22,280 --> 00:02:24,659
The PowerApps component
framework, usually shortened to
83
00:02:24,659 --> 00:02:27,800
PCF, is Microsoft's way for
developers to build their own
84
00:02:27,800 --> 00:02:30,080
controls and then use them
inside power apps.
85
00:02:30,080 --> 00:02:31,400
Those custom controls have a
86
00:02:31,400 --> 00:02:33,419
name, code, components, and to
87
00:02:33,419 --> 00:02:34,719
the person using the app, they
88
00:02:34,719 --> 00:02:36,080
look and behave like any other
89
00:02:36,080 --> 00:02:36,639
control.
90
00:02:36,639 --> 00:02:39,199
The easiest way to picture it is
a box of building bricks.
91
00:02:39,199 --> 00:02:41,919
Power apps hands you a set of
ready made bricks and you snap
92
00:02:41,919 --> 00:02:43,280
them together into an app.
93
00:02:43,280 --> 00:02:46,280
PCF lets a developer make a
brand new brick, one that fits
94
00:02:46,280 --> 00:02:49,039
the same studs and then hand it
back to you.
95
00:02:49,039 --> 00:02:50,039
A code component is a
96
00:02:50,039 --> 00:02:51,280
self-contained piece of user
97
00:02:51,280 --> 00:02:52,039
interface.
98
00:02:52,039 --> 00:02:53,199
It has its own look, its own
99
00:02:53,199 --> 00:02:55,080
behavior, and it's packaged so
100
00:02:55,080 --> 00:02:56,360
it can be reused across
101
00:02:56,360 --> 00:02:57,439
different apps and different
102
00:02:57,439 --> 00:02:57,960
environments.
103
00:02:57,960 --> 00:02:59,319
You build it once, and it can
104
00:02:59,319 --> 00:03:00,319
show up in a dozen places
105
00:03:00,319 --> 00:03:01,360
without being rebuilt from
106
00:03:01,360 --> 00:03:02,000
scratch.
107
00:03:02,000 --> 00:03:04,479
It helps to separate this from
something you may have already
108
00:03:04,479 --> 00:03:06,520
heard about canvas components.
109
00:03:06,520 --> 00:03:08,300
Those are the maker friendly
cousin.
110
00:03:08,300 --> 00:03:09,539
You build them inside the app
111
00:03:09,539 --> 00:03:10,979
you're working on with no code,
112
00:03:10,979 --> 00:03:12,199
which is why they're so easy to
113
00:03:12,199 --> 00:03:12,819
reach for.
114
00:03:12,819 --> 00:03:15,180
Code components are the other
path, and they take real
115
00:03:15,180 --> 00:03:18,020
programming in return for far
more capability and reuse.
116
00:03:18,020 --> 00:03:20,740
The reach of code components is
wider than it first sounds.
117
00:03:20,740 --> 00:03:24,020
They work in model driven apps,
canvas apps, and power pages,
118
00:03:24,020 --> 00:03:26,620
which cover the main ways
Microsoft puts an app in front
119
00:03:26,620 --> 00:03:27,460
of a person.
120
00:03:27,460 --> 00:03:28,740
So a component a developer
121
00:03:28,740 --> 00:03:30,099
writes once can travel across
122
00:03:30,099 --> 00:03:31,699
almost every kind of power apps
123
00:03:31,699 --> 00:03:32,300
experience.
124
00:03:32,300 --> 00:03:33,219
There's a bit of history here
125
00:03:33,219 --> 00:03:34,219
that explains the tone of
126
00:03:34,219 --> 00:03:35,520
everything Microsoft says about
127
00:03:35,520 --> 00:03:36,300
PCF.
128
00:03:36,300 --> 00:03:38,979
The framework reached general
availability for model driven
129
00:03:38,979 --> 00:03:41,699
apps, together with the
PowerApps command line tool on
130
00:03:41,699 --> 00:03:44,800
the first of October in twenty
nineteen, support for canvas
131
00:03:44,800 --> 00:03:45,620
apps followed that.
132
00:03:45,620 --> 00:03:46,860
Timing matters because it marks
133
00:03:46,860 --> 00:03:47,900
the moment custom controls
134
00:03:47,900 --> 00:03:49,039
stopped being an unsupported
135
00:03:49,039 --> 00:03:50,500
hack and became a real part of
136
00:03:50,500 --> 00:03:51,139
the platform.
137
00:03:51,139 --> 00:03:52,620
That's the line to hold on to.
138
00:03:52,620 --> 00:03:54,099
Makers build the app, developers
139
00:03:54,099 --> 00:03:55,460
build the components, and the
140
00:03:55,460 --> 00:03:56,819
two meet inside a single
141
00:03:56,819 --> 00:03:57,419
solution.
142
00:03:57,419 --> 00:03:59,340
Neither one has to pretend to be
the other.
143
00:03:59,340 --> 00:04:00,539
And that's the point.
144
00:04:01,819 --> 00:04:02,780
How a component works.
145
00:04:02,780 --> 00:04:05,900
Under the hood, a component is
built from a few moving parts,
146
00:04:05,900 --> 00:04:08,539
and once you see them, most of
the mystery goes away.
147
00:04:08,539 --> 00:04:09,900
The first part is a manifest.
148
00:04:09,900 --> 00:04:13,310
A manifest is a small file that
declares the component's name,
149
00:04:13,310 --> 00:04:16,410
the inputs it expects, and the
outputs it can send back.
150
00:04:16,410 --> 00:04:17,810
Think of it as a label and a
151
00:04:17,810 --> 00:04:19,050
wiring diagram on the side of a
152
00:04:19,050 --> 00:04:20,170
box so the app knows what's
153
00:04:20,170 --> 00:04:20,810
inside.
154
00:04:20,810 --> 00:04:22,170
That label does real work.
155
00:04:22,170 --> 00:04:25,089
It's what makes the component
reusable and predictable.
156
00:04:25,089 --> 00:04:26,250
Because the inputs and outputs
157
00:04:26,250 --> 00:04:27,730
are declared up front, the app
158
00:04:27,730 --> 00:04:29,529
can wire a field or a data set
159
00:04:29,529 --> 00:04:30,490
straight into the component
160
00:04:30,490 --> 00:04:31,529
without guessing.
161
00:04:31,529 --> 00:04:32,410
The second part is the
162
00:04:32,410 --> 00:04:33,889
lifecycle, which is just a word
163
00:04:33,889 --> 00:04:35,250
for the moments in a component's
164
00:04:35,250 --> 00:04:35,850
life.
165
00:04:35,850 --> 00:04:38,410
A component starts up and
developers call that in it.
166
00:04:38,410 --> 00:04:40,930
It draws itself and redraws
whenever the data or a setting
167
00:04:40,930 --> 00:04:42,889
changes, which is update view.
168
00:04:42,889 --> 00:04:45,250
It handles values back to the
app when something changes,
169
00:04:45,250 --> 00:04:48,129
which is get outputs and when
it's no longer needed, it shuts
170
00:04:48,129 --> 00:04:51,410
down and cleans up after itself,
which is destroy.
171
00:04:51,410 --> 00:04:52,449
If that sounds like a lot of
172
00:04:52,449 --> 00:04:53,810
machinery, try holding it this
173
00:04:53,810 --> 00:04:54,449
way.
174
00:04:54,449 --> 00:04:57,009
Picture a light switch in a room
where you flick it on and the
175
00:04:57,009 --> 00:04:57,889
light comes on.
176
00:04:57,889 --> 00:05:00,290
When something changes in the
room, the light adjusts and when
177
00:05:00,290 --> 00:05:01,529
you leave, you switch it off.
178
00:05:01,529 --> 00:05:04,050
The lifecycle is that same
rhythm applied to a piece of an
179
00:05:04,050 --> 00:05:05,209
app instead of a room.
180
00:05:05,209 --> 00:05:06,649
The third part is the data link.
181
00:05:06,649 --> 00:05:09,449
Everything the component
declared in its manifest arrives
182
00:05:09,449 --> 00:05:11,410
as a context when it redraws.
183
00:05:11,410 --> 00:05:14,389
In plain terms, the component
always knows what the app is
184
00:05:14,389 --> 00:05:15,709
showing it at that moment.
185
00:05:15,709 --> 00:05:16,990
Change the record and the
186
00:05:16,990 --> 00:05:18,189
component sees the new value
187
00:05:18,189 --> 00:05:18,709
right away.
188
00:05:18,709 --> 00:05:20,750
There's a reason Microsoft
designed it this way.
189
00:05:20,750 --> 00:05:22,029
Instead of letting developers
190
00:05:22,029 --> 00:05:23,670
drop in anything they liked, a
191
00:05:23,670 --> 00:05:24,829
shared structure means every
192
00:05:24,829 --> 00:05:26,329
component behaves the same way,
193
00:05:26,329 --> 00:05:27,990
plays by the same rules, and can
194
00:05:27,990 --> 00:05:29,250
be trusted inside a business
195
00:05:29,250 --> 00:05:29,629
app.
196
00:05:29,629 --> 00:05:32,949
Freedom without a frame is how
you get fragile software.
197
00:05:32,949 --> 00:05:35,790
A beginner should care about
this for one simple reason.
198
00:05:35,790 --> 00:05:38,790
It explains why a well-built
code component feels like a real
199
00:05:38,790 --> 00:05:42,230
control, while a badly built one
feels like a broken embed, the
200
00:05:42,230 --> 00:05:44,509
life cycle is the housekeeping
that keeps it alive and
201
00:05:44,509 --> 00:05:47,829
responsive and skipping it is
exactly how custom controls earn
202
00:05:47,829 --> 00:05:49,029
their bad reputation.
203
00:05:49,029 --> 00:05:50,350
The good news is that you don't
204
00:05:50,350 --> 00:05:51,569
have to understand any of it to
205
00:05:51,569 --> 00:05:52,310
use one.
206
00:05:52,310 --> 00:05:54,990
If you can drag a control onto a
screen, you can drag a code
207
00:05:54,990 --> 00:05:56,310
component onto a screen.
208
00:05:56,310 --> 00:05:57,189
The life cycle is the
209
00:05:57,189 --> 00:05:58,829
developer's job, hidden behind
210
00:05:58,829 --> 00:06:00,269
the same simple surface you
211
00:06:00,269 --> 00:06:01,110
already know.
212
00:06:01,110 --> 00:06:02,310
Once you know the parts, the
213
00:06:02,310 --> 00:06:03,689
next question turns practical,
214
00:06:03,689 --> 00:06:04,990
because none of this matters
215
00:06:04,990 --> 00:06:06,209
until you know what it takes to
216
00:06:06,209 --> 00:06:07,310
build one.
217
00:06:07,310 --> 00:06:09,310
From idea to shipped component.
218
00:06:09,310 --> 00:06:11,029
Now for the honest answer about
effort.
219
00:06:11,029 --> 00:06:13,509
Building one of these is real
work and it's developer work.
220
00:06:13,509 --> 00:06:14,790
Here's what that involves.
221
00:06:14,790 --> 00:06:17,870
A developer starts with the
Microsoft Power Platform CLI,
222
00:06:17,870 --> 00:06:20,449
which is a command line tool,
and it does more than you'd
223
00:06:20,449 --> 00:06:21,730
expect from the name.
224
00:06:21,730 --> 00:06:24,610
That tool scaffolds a fresh
component project, lays out the
225
00:06:24,610 --> 00:06:27,329
right file structure and later
packages everything up.
226
00:06:27,329 --> 00:06:29,490
It's the workbench where the
component gets built.
227
00:06:29,490 --> 00:06:32,129
The languages are the ones you'd
expect from a web developer.
228
00:06:32,129 --> 00:06:35,689
Components are written in HTML,
CSS, and TypeScript.
229
00:06:35,689 --> 00:06:36,730
TypeScript is JavaScript with
230
00:06:36,730 --> 00:06:37,889
extra rules that catch mistakes
231
00:06:37,889 --> 00:06:38,290
early.
232
00:06:38,290 --> 00:06:40,370
And if you've never written
either of them, that's fine.
233
00:06:40,370 --> 00:06:41,649
The point is that this is
234
00:06:41,649 --> 00:06:43,089
software development with a
235
00:06:43,089 --> 00:06:44,649
build step, not a drag and drop
236
00:06:44,649 --> 00:06:45,410
exercise.
237
00:06:45,410 --> 00:06:47,410
There's also a modern shortcut
to know about.
238
00:06:47,410 --> 00:06:50,370
Developers can build components
with React and Fluent UI.
239
00:06:50,370 --> 00:06:53,410
Microsoft's own interface
libraries by using something
240
00:06:53,410 --> 00:06:54,769
called platform libraries.
241
00:06:54,769 --> 00:06:57,569
The benefit is simple because
the component borrows the React
242
00:06:57,569 --> 00:06:58,449
and Fluent UI.
243
00:06:58,449 --> 00:06:59,529
The platform already loads
244
00:06:59,529 --> 00:07:01,110
instead of shipping its own copy
245
00:07:01,110 --> 00:07:02,850
that keeps it lighter and faster
246
00:07:02,850 --> 00:07:04,410
to start, which is a real win
247
00:07:04,410 --> 00:07:05,810
when an app carries several
248
00:07:05,810 --> 00:07:07,089
custom controls on the same
249
00:07:07,089 --> 00:07:07,649
screen.
250
00:07:07,649 --> 00:07:08,970
Then comes testing and shipping.
251
00:07:08,970 --> 00:07:11,170
A developer can run the
component in a test harness and
252
00:07:11,170 --> 00:07:13,449
watch it work before it touches
a live app, which keeps
253
00:07:13,449 --> 00:07:15,209
surprises off the user's screen.
254
00:07:15,209 --> 00:07:17,660
Once it's ready, the finished
component is packaged into a
255
00:07:17,660 --> 00:07:20,589
Dataverse solution, imported
into an environment and update
256
00:07:20,589 --> 00:07:21,790
it whenever it changes.
257
00:07:21,790 --> 00:07:24,269
Dataverse is the data platform
behind PowerApps.
258
00:07:24,269 --> 00:07:27,029
A solution is how Power Platform
moves customizations between
259
00:07:27,029 --> 00:07:29,829
environments, like from a test
space into the real one.
260
00:07:29,829 --> 00:07:31,250
One more thing about the CLI,
261
00:07:31,250 --> 00:07:32,170
because it's easy to
262
00:07:32,170 --> 00:07:32,870
underestimate.
263
00:07:32,870 --> 00:07:35,149
It doesn't just build the
component, it also handles the
264
00:07:35,149 --> 00:07:36,310
packaging and the deployment.
265
00:07:36,310 --> 00:07:38,790
So the whole journey from an
empty folder to a working
266
00:07:38,790 --> 00:07:40,589
control runs through one tool.
267
00:07:40,589 --> 00:07:41,750
That's what keeps the process
268
00:07:41,750 --> 00:07:42,990
repeatable instead of a one off
269
00:07:42,990 --> 00:07:43,870
experiment.
270
00:07:43,870 --> 00:07:46,670
So the full picture is a
developer, a command line tool,
271
00:07:46,670 --> 00:07:49,149
a real programming language, and
a packaging step.
272
00:07:49,149 --> 00:07:50,589
None of that is meant to scare
you.
273
00:07:50,589 --> 00:07:51,589
It's meant to set honest
274
00:07:51,589 --> 00:07:53,149
expectations because knowing the
275
00:07:53,149 --> 00:07:54,629
shape of the work is how you
276
00:07:54,629 --> 00:07:56,449
decide whether to ask for it,
277
00:07:56,449 --> 00:07:57,709
where you'll actually meet these
278
00:07:57,709 --> 00:07:58,709
components.
279
00:07:58,709 --> 00:08:01,509
Since building one takes real
work, it's fair to ask where
280
00:08:01,509 --> 00:08:02,550
that work is worth it.
281
00:08:02,550 --> 00:08:03,949
The answer is usually a specific
282
00:08:03,949 --> 00:08:05,589
spot on a screen where the
283
00:08:05,589 --> 00:08:07,069
standard control just isn't
284
00:08:07,069 --> 00:08:07,670
enough.
285
00:08:07,670 --> 00:08:09,389
Start with a single field on a
form.
286
00:08:09,389 --> 00:08:11,949
Maybe you want a star rating
instead of a plain number or a
287
00:08:11,949 --> 00:08:14,310
signature pad, so people sign
with a finger or a mouse.
288
00:08:14,310 --> 00:08:15,850
Maybe you want a color picker or
289
00:08:15,850 --> 00:08:17,290
a slider that feels natural to
290
00:08:17,290 --> 00:08:18,269
drag.
291
00:08:18,269 --> 00:08:19,550
These are small moments where a
292
00:08:19,550 --> 00:08:21,410
custom control turns a clunky
293
00:08:21,410 --> 00:08:22,529
field into something people
294
00:08:22,529 --> 00:08:23,410
enjoy using.
295
00:08:23,410 --> 00:08:25,129
Next, think about grids and
lists.
296
00:08:25,129 --> 00:08:27,089
A standard table shows rows and
columns.
297
00:08:27,089 --> 00:08:29,569
A code component can turn that
into something closer to a
298
00:08:29,569 --> 00:08:32,850
spreadsheet, with editing in the
cell and filtering that updates
299
00:08:32,850 --> 00:08:33,490
as you go.
300
00:08:33,490 --> 00:08:36,049
If your team lives in
spreadsheets all day, that one
301
00:08:36,049 --> 00:08:39,250
change can make an app feel
familiar from the first click.
302
00:08:39,250 --> 00:08:40,649
Then there are other
visualizations.
303
00:08:40,649 --> 00:08:43,570
The built in charts can't draw
like an interactive floor plan
304
00:08:43,570 --> 00:08:46,429
for an office, or a map that
shows customers as more than
305
00:08:46,429 --> 00:08:47,889
pins on a static image.
306
00:08:47,889 --> 00:08:51,049
When the picture is the point, a
code component is often the only
307
00:08:51,049 --> 00:08:51,850
way to get there.
308
00:08:51,850 --> 00:08:53,049
And there's the quiet case.
309
00:08:53,049 --> 00:08:54,690
Sometimes a page needs to
control.
310
00:08:54,690 --> 00:08:56,690
The low code palette simply
doesn't have.
311
00:08:56,690 --> 00:08:58,409
And a component fills the gap so
312
00:08:58,409 --> 00:09:00,129
smoothly that nobody notices
313
00:09:00,129 --> 00:09:01,129
it's custom.
314
00:09:01,129 --> 00:09:03,090
Think of a barcode scanner on a
phone.
315
00:09:03,090 --> 00:09:04,490
A rich text editor like the one
316
00:09:04,490 --> 00:09:06,210
in word, or a progress tracker
317
00:09:06,210 --> 00:09:07,610
that animates as work moves
318
00:09:07,610 --> 00:09:08,090
along.
319
00:09:08,090 --> 00:09:09,450
Each of those is a small problem
320
00:09:09,450 --> 00:09:10,929
that a custom control solves
321
00:09:10,929 --> 00:09:11,809
cleanly.
322
00:09:11,809 --> 00:09:14,049
That pattern shows up in almost
every industry, from field
323
00:09:14,049 --> 00:09:15,529
service to healthcare to retail.
324
00:09:15,529 --> 00:09:18,049
Every industry eventually needs
to screen the standard controls
325
00:09:18,049 --> 00:09:19,009
can't quite draw.
326
00:09:19,009 --> 00:09:21,409
For most beginners, the
practical answer is simple you
327
00:09:21,409 --> 00:09:23,409
probably won't build one of
these, and you don't have to,
328
00:09:23,409 --> 00:09:24,309
but you will use one.
329
00:09:24,309 --> 00:09:26,870
And once you know they exist,
you'll start spotting them.
330
00:09:26,870 --> 00:09:29,549
The little piece of an app that
behaves better than the rest.
331
00:09:29,549 --> 00:09:30,470
That's the upside.
332
00:09:30,470 --> 00:09:32,870
And there's an honest catch that
comes with it, which is what we
333
00:09:32,870 --> 00:09:34,350
need to talk about next.
334
00:09:34,350 --> 00:09:36,950
The honest limits and the
mistakes to avoid a tool this
335
00:09:36,950 --> 00:09:39,149
capable deserves an honest look
at where it stops.
336
00:09:39,149 --> 00:09:40,830
PCF is powerful and it isn't a
337
00:09:40,830 --> 00:09:42,009
shortcut, and pretending
338
00:09:42,009 --> 00:09:43,389
otherwise is how projects get
339
00:09:43,389 --> 00:09:44,190
into trouble.
340
00:09:44,190 --> 00:09:46,070
The first limit is the skills
barrier.
341
00:09:46,070 --> 00:09:47,549
Building a code component needs
342
00:09:47,549 --> 00:09:48,750
someone who writes code for a
343
00:09:48,750 --> 00:09:49,950
living and understands a build
344
00:09:49,950 --> 00:09:50,309
pipeline.
345
00:09:50,309 --> 00:09:52,070
It was never meant to be a maker
tool.
346
00:09:52,070 --> 00:09:53,830
That isn't a flaw, it's the
design.
347
00:09:53,830 --> 00:09:55,029
The whole point is to hand the
348
00:09:55,029 --> 00:09:56,289
hardest interface problems to
349
00:09:56,289 --> 00:09:57,549
the people equipped to solve
350
00:09:57,549 --> 00:09:58,230
them.
351
00:09:58,230 --> 00:10:00,190
The second limit is the support
surface.
352
00:10:00,190 --> 00:10:01,509
Microsoft keeps a published list
353
00:10:01,509 --> 00:10:02,350
of limitations for the
354
00:10:02,350 --> 00:10:03,629
framework, and not every
355
00:10:03,629 --> 00:10:04,789
scenario supports code
356
00:10:04,789 --> 00:10:05,389
components.
357
00:10:05,389 --> 00:10:06,269
A component that works
358
00:10:06,269 --> 00:10:07,789
beautifully in one app might not
359
00:10:07,789 --> 00:10:09,190
work in another, so check the
360
00:10:09,190 --> 00:10:10,509
current limitations before you
361
00:10:10,509 --> 00:10:11,549
promise anything.
362
00:10:11,549 --> 00:10:12,870
The third limit is maintenance.
363
00:10:12,870 --> 00:10:14,070
A custom control is custom
364
00:10:14,070 --> 00:10:15,389
software, which means someone
365
00:10:15,389 --> 00:10:17,070
has to own it, update it, and
366
00:10:17,070 --> 00:10:18,029
keep it working across
367
00:10:18,029 --> 00:10:18,789
environments.
368
00:10:18,789 --> 00:10:21,629
Microsoft documents this as the
application lifecycle for code
369
00:10:21,629 --> 00:10:24,330
components, and it's real
overhead that a one off app
370
00:10:24,330 --> 00:10:25,899
often can't justify.
371
00:10:25,899 --> 00:10:26,860
There's a fourth limit that's
372
00:10:26,860 --> 00:10:27,980
less obvious, and it's about
373
00:10:27,980 --> 00:10:28,620
people.
374
00:10:28,620 --> 00:10:31,139
Once you build a custom control,
you've created something only a
375
00:10:31,139 --> 00:10:32,779
developer can safely change.
376
00:10:32,779 --> 00:10:35,539
If that developer leaves, the
control becomes a black box, and
377
00:10:35,539 --> 00:10:37,220
the app quietly depends on code.
378
00:10:37,220 --> 00:10:38,700
Nobody on the team understands.
379
00:10:38,700 --> 00:10:39,779
That's not a reason to avoid
380
00:10:39,779 --> 00:10:41,220
PCF, but it's a reason to plan
381
00:10:41,220 --> 00:10:41,820
for it.
382
00:10:41,820 --> 00:10:44,220
None of this means you should
skip PCF when the problem
383
00:10:44,220 --> 00:10:45,179
actually calls for it.
384
00:10:45,179 --> 00:10:48,059
If the whole app depends on a
control, nobody can build any
385
00:10:48,059 --> 00:10:50,700
other way, then a custom
component is the right call.
386
00:10:50,700 --> 00:10:52,419
The limits are just the price of
getting it.
387
00:10:52,419 --> 00:10:53,700
The real skill is telling the
388
00:10:53,700 --> 00:10:55,200
two situations apart before you
389
00:10:55,200 --> 00:10:55,779
commit.
390
00:10:55,779 --> 00:10:57,419
Now the mistakes because they're
predictable.
391
00:10:57,419 --> 00:10:59,659
The most common one is reaching
for PCF.
392
00:10:59,659 --> 00:11:02,500
When a standard control or a
canvas component would have done
393
00:11:02,500 --> 00:11:04,019
the job faster and cheaper.
394
00:11:04,019 --> 00:11:06,379
If a built in option gets you
ninety percent of the way there,
395
00:11:06,379 --> 00:11:07,379
take it and move on.
396
00:11:07,379 --> 00:11:10,179
The second mistake is treating a
code component like a toy.
397
00:11:10,179 --> 00:11:13,139
Drop one into an app with no
owner and no plan for updates,
398
00:11:13,139 --> 00:11:15,379
and it will quietly spread
across the whole tenant
399
00:11:15,379 --> 00:11:18,460
governance sounds boring, right
up until you're the one tracking
400
00:11:18,460 --> 00:11:20,259
down who built what and why.
401
00:11:20,259 --> 00:11:22,419
One practical detail to check in
your own setup.
402
00:11:22,419 --> 00:11:25,980
Code components live inside
Dataverse solutions, so using
403
00:11:25,980 --> 00:11:29,159
them generally means working in
a Dataverse packed environment.
404
00:11:29,159 --> 00:11:31,519
That's something to confirm for
your situation, rather than
405
00:11:31,519 --> 00:11:34,679
assume, because it can shape how
you plan the whole project.
406
00:11:35,759 --> 00:11:37,639
Where this fits in your
Microsoft world.
407
00:11:37,639 --> 00:11:38,519
Step back for a second.
408
00:11:38,519 --> 00:11:41,559
Because PCF is one visible
thread in a much bigger pattern,
409
00:11:41,559 --> 00:11:44,480
Microsoft's whole power platform
bet is that low code makers and
410
00:11:44,480 --> 00:11:47,759
pro code developers should share
one platform instead of living
411
00:11:47,759 --> 00:11:48,840
in separate worlds.
412
00:11:48,840 --> 00:11:51,399
PCF is the seam where those two
worlds actually touch.
413
00:11:51,399 --> 00:11:53,399
You can see it across Microsoft
three hundred sixty five.
414
00:11:53,399 --> 00:11:56,399
Code components can appear
inside the apps people already
415
00:11:56,399 --> 00:11:57,440
open every day.
416
00:11:57,440 --> 00:12:00,519
Power pages Microsoft's tool for
building business websites is
417
00:12:00,519 --> 00:12:03,519
one of the places they run, so a
controller developer builds ones
418
00:12:03,519 --> 00:12:05,559
can reach people who never think
about code at all.
419
00:12:05,559 --> 00:12:08,000
There's a skills story here that
matters for a career.
420
00:12:08,000 --> 00:12:10,480
The tools behind PCF,
TypeScript, and react are the
421
00:12:10,480 --> 00:12:13,080
same tools used across
Microsoft's cloud and honestly,
422
00:12:13,080 --> 00:12:14,240
across the industry.
423
00:12:14,240 --> 00:12:16,320
Learning them for power apps
isn't a dead end.
424
00:12:16,320 --> 00:12:19,320
It's a set of skills that
travels from power platform work
425
00:12:19,320 --> 00:12:21,639
into Azure Work and well beyond.
426
00:12:21,639 --> 00:12:24,240
There's also a mindset shift
here, and it's a useful one.
427
00:12:24,240 --> 00:12:26,240
Once you know PCF exists, you
stop reading.
428
00:12:26,240 --> 00:12:29,039
Power apps can't do that as a
hard no. You start asking
429
00:12:29,039 --> 00:12:31,740
whether the fix is a better
control, and whether someone on
430
00:12:31,740 --> 00:12:32,820
the team can build it.
431
00:12:32,820 --> 00:12:36,059
That single question changes how
you plan, how you estimate, and
432
00:12:36,059 --> 00:12:37,460
how you talk to developers.
433
00:12:37,460 --> 00:12:38,779
That question is also a small
434
00:12:38,779 --> 00:12:40,019
window into where Microsoft is
435
00:12:40,019 --> 00:12:40,700
heading.
436
00:12:40,700 --> 00:12:41,820
The line between a maker and a
437
00:12:41,820 --> 00:12:42,820
developer keeps getting
438
00:12:42,820 --> 00:12:44,620
blurrier, and tools like PCF are
439
00:12:44,620 --> 00:12:45,759
the reason why you don't have to
440
00:12:45,759 --> 00:12:47,100
cross that line to benefit from
441
00:12:47,100 --> 00:12:48,700
it, but knowing it's there makes
442
00:12:48,700 --> 00:12:49,960
the whole platform easier to
443
00:12:49,960 --> 00:12:50,820
reason about.
444
00:12:50,820 --> 00:12:52,620
So the framework is more than a
feature.
445
00:12:52,620 --> 00:12:56,019
It's the clearest example of how
Microsoft wants makers and
446
00:12:56,019 --> 00:12:57,899
developers to work side by side.
447
00:12:57,899 --> 00:13:00,139
It's useful to understand, even
if you never write a line of
448
00:13:00,139 --> 00:13:03,700
code yourself, what to take
away, and one question for you
449
00:13:03,700 --> 00:13:04,700
to pull it together.
450
00:13:04,700 --> 00:13:07,220
The PowerApps component
framework is the developer layer
451
00:13:07,220 --> 00:13:10,500
that lets custom controls live
inside PowerApps, and it works
452
00:13:10,500 --> 00:13:13,779
across model driven apps, canvas
apps, and power pages.
453
00:13:13,779 --> 00:13:14,940
It takes real developer skills.
454
00:13:14,940 --> 00:13:18,019
It comes with real limits, and
it's the reason some apps feel a
455
00:13:18,019 --> 00:13:19,100
step above the rest.
456
00:13:19,100 --> 00:13:20,940
Here's the question I want to
leave you with.
457
00:13:20,940 --> 00:13:22,940
Have you ever hit the point
where drag and drop stopped
458
00:13:22,940 --> 00:13:24,980
working for you, and what did
you do next?
459
00:13:24,980 --> 00:13:26,539
I really do want to know if this
460
00:13:26,539 --> 00:13:27,500
made the topic feel less
461
00:13:27,500 --> 00:13:28,340
intimidating.
462
00:13:28,340 --> 00:13:31,940
Subscribe to M365 FM to master
the tools and the mindset
463
00:13:31,940 --> 00:13:33,580
shaping the future of work.
