(music)
Up next, we continue our series
on how to build your first Power App.
This is part two of a three-part overview
where I break down the fundamentals
for building a Power App from scratch.
The app we are building
is one of our most popular app types for tracking inventory,
in our case, for mechanical parts.
And it can be used on the job for tracking
and entering new items.
It also incorporates AI-driven Copilot capabilities
for easy interaction with the app
and its data using natural language.
As you would have seen in part one of the series,
the basic experience of our inventory app is now built.
We have our mechanical parts table for data entry
with sample data stored in Dataverse on the backend.
On the app Canvas,
we have one main screen with a gallery on the left
that acts as a way to list out our parts
and to navigate and display inventory details
in the fields in an edit form on the right.
For the step-by-step breakdown on how we got there,
check out aka.ms/MechanicsPA1
or the link on the screen to watch part one of the series.
Today, I'll show you
how to add more customizations to the app
from adding new parts records to our app
to adding search to quickly find inventory
as our catalog grows,
incorporating logic to trigger an email notification
when parts are running low,
changing the color theme of our app,
and uploading photos of parts to the catalog
to accompany records.
So, let's head back to the Power Apps Studio
and start with adding a new record.
I'll start in the insert menu,
which if you recall is used to insert components
and controls in our app.
First, I'll add a label describing what we want to do,
place it where I want it on the canvas,
and call it New Part.
That will be the label.
And next, I'll add an icon that will act as our control.
Using the insert menu again,
I'll search for the add icon, and select it.
And now, I'll line everything up.
There we go.
Next, we need to connect the control to our app table
to store the record entry.
For that, we'll use a function called NewForm
and we'll connect it to the add icon.
This way, when selected,
it will make a new blank form to enter information
that will later be added to the table behind the app.
I have the add control selected,
and in our formula bar up top,
I'll add our function NewForm
and reference our only form, Form1, in parentheses,
and that will create a new form.
Next, I need a way to save or delete existing records.
I'll start by adding the icons for those actions
one-by-one from the insert menu.
I'll search for the check icon to save.
There it is.
And place it on the canvas.
Next, as a way to delete a record,
I'll search for the trash icon and select it.
And from there,
I can arrange the icons in the order I want and resize them.
From here, again, I need to make these new icons functional.
For the save icon,
I'll select it and use another formula called SubmitForm
and point it again to Form1 in the parentheses.
This will submit data entered in the form
to be saved in our table on the backend.
Now, let's try that out.
I'll fill in the fields for our new fancy part
with the part number and the quantity,
then hit save and it's working.
Next, to make our trash icon work,
I'll use the remove function.
The trick here is to make sure
that only the selected item in our gallery is deleted.
So, I need to first specify our table name,
Mechanical Parts Inventories.
I'll select it from the drop down
and notice it adds single quotes for me.
I'll explain that a bit more later.
Then I'll add our gallery, Gallery1,
and to remove only the current item,
I'll type dot and choose selected.
And remember, the dot lets us choose
the properties available for the item.
I'll hit play again to test it,
select our new fancy part,
click the trash icon,
and there, it's gone.
By the way, if this easy delete makes you a little nervous,
you can do things like make the form read-only
or add a confirmation step to delete anything just in case,
but we'll save that for a later show.
Next, let's move on to adding search to our app
so that as our catalog grows,
we can search part names,
their descriptions, and part numbers.
I'll head back to our insert Menu.
This time, I'll add the text input control
to create a search box
and I'll place it where I want it on top of the gallery.
In the properties on the right,
first I'll clear out the default text.
And because this is a search,
I want to display what's called hint text in the box
that says search for parts.
That way, it's clear this is a search box.
It looks good,
but now we need to make it work using another formula.
First, I'll click on the gallery
and you'll see the table name
where the data is coming from in the formula bar.
And what we want to do is search our table,
so I'll type search in front of its name.
Then I'll add an open parenthesis between search
and our table name.
And notice the help it gives me above the function bar.
For example, you can see we need the function name, search,
got that.
Then the source, that's our table.
Now, we just need a comma
and text for what we want to search for.
And finally, the columns in our table we want to search in.
Let's define our search text
based on what we type in the search box.
If I look in the tree view,
you'll see the name of the text input box
we use for search is TextInput1,
so I'll add that to our formula.
Then I need to write a dot,
and select text below, then a comma.
Now, we're ready to define the columns
that you can search in
and you'll see that formula bar
lists out our table's columns underneath it
that I can specify as a part of search.
I know I want to let users search by description,
so I'll select that and add a comma
followed by part id and another comma.
And since we might want to search by part name,
I'll add that as the last column.
Then I just need to type a close parenthesis
and I've completed the search function.
Let's test that out.
I'll hit the play button, then type in the search box.
I'll type nut
and you'll see it pulls up those two items.
It's working.
So with search working,
we can start to move on to our next customization,
triggering an email notification to the right person
when a part is running low.
From the insert menu,
I'll choose a button to add to our app.
I'll place it roughly where I want
and edit the text on the button to say email to order.
Next, to make our button trigger an email
to a person who can order more parts,
we'll connect it to Power Automate,
which is a low code way of defining the flow
or steps of a process.
From this arrow icon on the left,
we can get to Power Automate and create a new flow.
To get me started,
it shows me some of the common things we can do
to automate a workflow from our app
like adding items to SharePoint
or creating an approval workflow
that gets sent to approvers in Microsoft Teams.
And there are pre-built templates ready to use.
In our case,
we'll keep things simple and just send an email
to let people know that we're low on inventory.
So, I'll expand this view to see more.
And since I want to connect the flow
to the button I just created,
I'll choose this one.
Click a button in Power Apps to send an email
I'll leave the flow name as-is
and keep my email account as the signed-in user and move on.
Just to quickly explain how this works,
I'll go into the advanced mode.
This is a view under the covers of what it does.
This top step called Power Apps is what's called a trigger.
This will take a specified action
when our new button is clicked.
In this case,
that action is to send the email.
When I expand that,
you'll see who the email will be sent to as the recipient,
the email's subject, and email body.
These are purple with the Power Apps icon
because these fields will be populated
with data pulled from our app.
We'll test that in a second.
This all looks good
so I'll close the advanced view and create the flow.
Now, with both our button and a flow created,
the next step is to make them work together.
So, I'll select my button first.
And you'll see it just says false right now,
but I want to change it so that when the button is clicked,
it will run my flow.
I'll start typing the name of our flow in the formula bar.
Click and you'll see these two options
called click a button in Power Apps to send an email,
one with the word run and one without it.
We want to run that flow,
so we'll choose the option with dot run in the name.
Like before, I'll add an open parenthesis,
and it again guides me
on the additional details I need to provide
for this to work.
You can see it's looking for
who the email will need to be sent to,
the subject, and finally the email body,
each separated by a comma.
I'll start with the to parameter.
In my case,
the person who always manages our orders is Patti.
This could be a group email too
if more than one person needs to be notified.
I'm going to use Patti
and put her email address in double quotes.
The double quotes are used to designate text inputs
and I'll follow that with a comma.
Now, I need an email subject.
I'll type order needed again in double quotes
and then another comma.
Finally, in the body,
I'm going to want to make sure it references information
specific to the selected part
using its name and part number
so Patti will know which part to order.
This one is a little trickier,
so I'm going to expand the formula bar to make some room.
I'll add my opening double quotes
and start with a little text.
We need a new order of part, with a space,
then I'll close my double quotes.
And now I need the part name,
so I'll type and using the ampersand symbol,
which tells the function there is more text coming.
And remember how we used gallery dot selected before?
We'll do the same here with Gallery1.selected,
then add a dot with the part name
this time in single quotes
because there is a space between part and name.
Now, I'll add another and or ampersand.
This time, I'll add a space between two double quotes
to put a space between the part name and number.
Then I'll add another ampersand
and repeat the same steps as before
to add the part number.
Then to complete the sentence,
I'll add one more ampersand and then the last bit of text.
I'll write double quote space,
before we run out of inventory,
thank you, and end double quote,
and I'll close the parentheses.
And that's everything we need to send an email.
Let's try it out.
I'll play the app again.
Now, I'll click on the email to order button
and you'll see the by the moving dots
on the top of the screen it's running my flow.
And if I jump into my sent email,
you'll see that our email was sent to Patti
with all of the details about the selected part.
Now, there are just a few small things left to do.
Let's start by changing its design a little.
In the theme dropdown,
you can choose between standard light and dark themes
as well as office themes.
Let's look at a dark theme just to see how this works.
I'll choose this office blue theme called Dark Blue
And you'll see the entire app is changed.
In my case, I prefer the light theme,
so I'm going to choose this light office theme
with blue accents.
Themes are a quick way to update the look
and feel of your app.
Then another super useful capability for our inventory app
is to add pictures for each item
so that you can easily tell them apart.
Let's add that.
The first thing you'll need to do to add pictures
is create a place to store these images.
And to do that,
I'll need to update the table that is running my app.
On the left here,
I'll choose the data icon that looks like a cylinder.
We still only have the one table behind our app.
I'll click on its ellipses and then edit data.
I'll click on new column
to create a place for our pictures.
I'll give it a name, Product Image.
For data type, I'll choose file, then select image.
And from there, I'll hit save
and now there is a place to store images in my table.
Now, I'll head back to the app canvas.
I want to make the image appear here,
so I'll need to add it to the form
with all of the rest of the part details.
I'll select the form,
then on the properties tab, click edit fields.
And just like in our last show,
I'll add the field I want.
I'll search for image to find our new column field,
Add it, and it places the field in the form,
pre-configured and ready for me to click and add a picture.
So let's try this out.
I'll hit play, then press this button to add my picture.
I'll choose the picture that matches this part.
There it is.
Now, I'll just hit save in my app,
and it adds that picture for this part.
Our app now has all of the basic functions it needs
to track and maintain parts inventory.
In part three in our Power Apps authoring series,
I'll also show you
how to add AI-driven Copilot capabilities
to let users easily interact with your app
and its data using natural language input
as well as add navigation between screens,
publishing and share your app with others on your team,
and integrations with Teams
and other locations to make your app more discoverable
to others as you work.
And I'll share some other tips
and best practices to consider
as you continue on your Power Apps journey.
You can find our entire series at aka.ms/PowerAppsAuthoring.
Subscribe to Microsoft Mechanics for more updates
and thanks for watching.
(music)