(bright music )
- Ever had an idea for an app
but have never written a line of code?
Today, in the first show of a new three-part series,
I'll help you join the millions of people
with zero coding experience building Power Apps today
to help automate everyday tasks.
I'll break down exactly what you need to know
and the key steps to building your first Power App
in under ten minutes,
which if you are new to Power Apps,
it's a part of Microsoft's Power Platform
for building low code apps and processes.
Your app can originate from a task or process
that you want to make easier as you work with others,
like a streamlined approval process,
or maybe just an easier way to capture
and track information on the go.
And apps can run in the browser
or on your favorite mobile platform.
Today, I'll show you how to build an inventory tracking app
like this one for mechanical parts
that anyone can use on the job
for tracking and entering new parts.
Even adding new AI-driven Copilot capabilities
so you can easily interact with your app
and its data using natural language.
And so to build out our inventory app,
I'm going show you how to create it in two ways.
First, using AI with Copilot as a fast way
to get up and running,
and second, completely from scratch,
so that I can walk you through the core concepts.
So let's break this down.
You'll start by navigating to make.powerapps.com.
And front and center is the new Copilot option
that lets you use AI to generate an app
by describing what you want it to do.
I'll type "track inventory for mechanical parts" and hit go.
And pretty quickly, it's built the first part of the app.
This is the Copilot experience,
where I can chat with the AI on the right.
And as you can see,
it's already generated a table central to my app,
which makes sense
since it's an inventory app
and I need a way to capture data.
We can see the columns
that it generated are around the theme of mechanical parts.
There's the part ID, part name, part type, part number,
and the quantity,
each with sample data to help you quickly get started.
And you can add or remove columns easily
by chatting with Copilot.
For example, I know it's important to have a description
for these fasteners,
maybe to describe their size or thread pitch,
so I'll type "add a description field."
And there's the new column in the table.
And I can even ask Copilot to add more rows of data.
And because Copilot can interpret the context,
it can add more sample data.
I can even ask Copilot to give me additional suggestions,
and it suggests a few more fields
that would be common to an inventory app
and whether I should remove the Part ID column.
I'll keep that though
and also take the suggestion to add a price column.
Now that's looking good,
and if I need to, I can update this table later.
So to move on to the next step,
I'll just hit create to build our app.
And in just a few moments,
Copilot has generated an app for me,
and I'm in the Power Apps Studio
where I can customize and edit my app further.
I'll hit play to test out the app.
As I click through the part names on the left,
the data on the right shows the details for each item.
This is a cool functioning app built in just a few moments
from a short description and a few chat interactions.
And if you don't see Copilot yet,
it will be rolling out in the next couple of months.
So I started with Copilot,
not just to show you how AI removes the majority
of the manual steps to get started
but also to show the steps it took to build the app.
For example,
the AI predicted that a core part
of my inventory tracking experience had to be data entry.
Essentially, it created a form with a table
and suggested columns with sample data in line with my theme
of tracking inventory for mechanical parts.
And behind the scenes,
it also built a place on the backend
for me to store my data.
We can leverage this thought process
as we look at building an app from scratch
for even more creative control.
For that, I'm going to choose to build an app
from a blank canvas,
and I have two main options here.
If I want to start with data,
I may want to choose a model-driven app
where the UI is generated directly from your backend data.
In this case, I don't have data,
but I do have an idea of what I want to build.
So I'm going to choose the canvas app,
which is going to let me visually create a tailored,
custom experience.
I'll choose that and give my app a name, Inventory App,
and keep the default tablet format.
When I hit create,
I land directly in the Power Apps Studio like we saw before.
This time, let me give you a tour of what you can do here.
On the left here is the tree view, which is the default.
That shows us the visual hierarchy of our app.
There's not a lot to see here yet,
but as we build out the app,
more items will start to appear.
Apps can have multiple screens of different formats.
And as I add new screens,
there are different layouts and templates.
And it feels similar to the experience
of adding a new slide in PowerPoint.
The bar along the top has our most common editing actions,
such as Insert
that lets us add different controls such as labels,
buttons, shapes, and more to our app.
We'll be using a few of these, so we'll come back to this.
Next, we have the add data option,
which I'll show you in a second,
new screen,
and the last three are for changing the look and feel
for your app.
Now, we know we need to build a table,
so I'll select add data.
Now, one thing to point out that we'll walk through later
in the series
is that you can bring in data
from different sources using connectors,
which is a no-code way
of connecting to available data sources for your app.
In this case,
we are just going to focus on creating our table.
We'll name it "Mechanical Inventory,"
and we can use the table editor to build it.
Every app needs data,
and by default,
we spin up a place for your app to read and write data from
called Dataverse.
And if you are just getting started,
it's best to stick with this default.
So now, let's start creating our table.
I'll add a column, quantity.
Notice it asks what data type I need.
For example, if this were a money field,
I would choose currency.
In this case, I know it's a number and a whole number,
so I'll choose that.
There's no specific format I want,
so I'll keep the default none.
Behavior refers to whether it's a simple behavior,
which is a manually entered value,
or if there's a calculation that happens.
And required refers to whether it is required or optional
to fill out when you're entering a new row.
I'll just keep the default optional and save.
And we'll keep building this out,
adding more columns, similar to what Copilot did,
and configure each different column
with its different properties.
Fast-forward in time and our table has started to take form.
And you can see,
I've also started to manually add some sample data.
You can do this by typing directly in the cells
in the table.
And when I go ahead and hit close,
we'll see that the table was added to our app.
Next, let's focus on building out the app experience.
The insert menu lets me add new things to my app.
Just like we saw before with the Copilot-generated app,
we want a view on the left with our parts listed
and details for the selected part on the right.
I'll start with the left side
and use what's called a vertical gallery.
Think of a vertical gallery as a pre-formatted list view
that will let me quickly select and move between items.
It then asks me which data I want to add,
which is easy in this case
because I only have the Parts Inventories table in my app,
so I'll choose it.
And I can rearrange the location on the screen.
I just need to select it, then drag and drop.
And on the right here are the different properties
for anything that I have selected on the canvas.
This gallery lets me easily edit the layout and change it.
I don't have pictures for my inventory right now,
so I'll choose something a little simpler,
with just the title, subtitle, and body.
In this case, the title shows the part name,
subtitle shows the time of update,
and the body shows the description,
which currently doesn't have data filled in.
Let's change the subtitle and body.
I'll make the subtitle the quantity of the parts in stock
and the body our part number.
Next, I'll go back to the insert menu
and choose an edit form,
which will let me see the data fields
for each part in my app.
In fact, once I place it on the canvas,
you'll see that the edit form wants to connect to data,
so I'll do that on the right
and in the data source property.
I'll choose our Parts Inventories table again.
Once data is connected,
I can edit the data fields to add the ones I want
that show additional details about the parts
in my inventory.
I'll click on edit fields and select a few.
I'll choose Part ID, Part Number,
Part Type, Price, and Quantity,
then hit add.
And I can change their order here if I want
by dragging and dropping the tiles in this menu.
Here I'll move the quantity field up.
I can also do this by selecting the ellipses menu
and choosing move up or move down,
so I'll move quantity up one more time.
I've configured my fields now,
and the next thing I want to do is connect the items you see
in the vertical gallery with the fields you see
on the right,
so that if I click on the bolt on the left,
it will display details for the bolt
on these fields on the right.
Let me go back to the tree view
and explain how this will work.
Kind of like in Excel,
where every cell has a name,
the same is true for our app.
You can see our edit form is called Form1
and our vertical gallery is called Gallery1.
To make our form and gallery work together,
I'll use this formula bar on the top,
which should look familiar if you've used Excel.
It lets you use Power Fx formulas,
the language of Power Apps,
which is similar to Excel formulas.
First, I'll click on my edit form on the right.
Then in the formula bar on the property dropdown,
I can see all the properties for my form.
I'll choose the item property,
which refers to the data that shows in the form.
Now here is where the magic happens.
In the formula field,
I want to reference our gallery, named Gallery1,
so I'll start to type that in,
and it shows me Gallery1 in this dropdown list.
I'll select it,
then you'll see Gallery1 is highlighted green
in the formula bar
and there's also a green outline around the gallery
on my canvas.
Now let's see what we can do to reference our gallery.
I'll type a dot after its name,
which is the syntax used to reference the properties
in this case for our gallery.
These are the property options listed here.
Since I want the details of the part I select
in the gallery to appear in the edit form on the right,
I'll use the selected option.
And you'll see this when I try it out.
I'll individually select a few parts,
and you'll see the details
for each selected part appear automatically on the right.
It works!
Now I'll save my progress,
and by the way, you should hit save every once in a while
and again when you've finished building
or updating your app.
And you're done!
You've built your first Power App.
In part two of our series,
we'll look at adding more customizations to our app,
like uploading parts photos
and logic to send an email
as well as the basics around publishing and sharing your app
for others to use it.
You can keep checking back
to our aka.ms/PowerAppsAuthoring playlist
for the next episodes in the series.
Subscribe to Microsoft Mechanics if you haven't already,
and thanks for watching.
(gentle music)