Welcome to Power Apps and Dataverse for Teams.
Today we're going to build our very
first app in Power Apps and we will do
so in three easy steps: Create an app,
Create a table, and then we'll wire it
all up and let the magic happen.
We'll integrate it right
there are all the work is happening
in Microsoft Teams.
So, let's get started.
Now, one thing that I always like to
do is popping out the Power Apps app
from Microsoft Teams. You can do so by
right-clicking the icon and choosing pop out.
This ensures that I can attend
to my day-to-day job,
respond to chats,
attend meetings,
or even collaborate on documents,
in Microsoft Teams, without ever having to lose
context or progress in the Power Apps app.
We are now ready to take our first step
and that's creating the app. By simply
clicking the "Create an app" button.
I get a chance to choose a team.
This is where my app will be stored
and this is also the place where I can
share my app with the other members,
as soon as I decide that I'm ready for it.
So I'll simply go ahead and choose
a team and then click create.
If this is the first time creating
an app in a specific team,
you'll notice it takes a bit of time.
That's because we're setting up a
Dataverse for Teams environment for this
team. That only needs to happen once,
but it gives you a powerful
relational database engine that you
can leverage to build your apps.
Of course,
if you already have data in some other place,
you can leverage one of our 300-plus
connectors to get that data in your app.
As soon as the environment is created,
we are redirected to the studio.
The only thing we need to do
here is provide a name and save.
We are now ready for step 2: creating
the table. Simply click "Create
a table" and then provide a name.
I'm going to choose "Product" because
I'm creating a product browser.
Notice that under advanced settings
it already provided me a plural name,
but I can of course control it.
Upon saving I will now be able
to add the columns to my table.
Now, aside from the "Name",
which I'm getting by default,
I also want a "Price".
Notice there's multiple types
I can choose from.
I choose decimal and again
I have advanced controls to
configure exactly what I need.
Next, I'm going for a "Category" which
is going to be a choice field.
This is a list of predefined options.
When I'm done with the predefined options,
I'm going to create my next column,
which is: "Trending". I want a Yes/No
field to define if a certain product
is trending this month or not.
Finally, I'll add two more,
a description field that describes
my product, a simple text field,
and I can change the length
of the text field.
And finally,
there's an image so that I can visualize
the product that we're talking about.
We've all the columns created.
I can now add the data and
this is like working in Excel.
I can manually typing all the values.
I can copy/paste from Excel or there's
actually also an option to edit the data
directly from Excel connected to this table.
In this case I just copied the right values in
and I'm ready to go to the next step.
Notice how the data is
immediately wired up to my app.
I can click on preview here in the
top right to preview my app as it is.
It's already working! On the left side,
I have a list,
a gallery, of all my product and on the right
side I see the details for each product.
Now, in this preview I can also resize
the window and preview how it will
behave on different screen sizes.
Notice how it's responsive to its size.
If we're happy with the app
how we it is,
we're actually ready to publish it
and make it available to others.
But I'm going to do an extra step first.
I'm going to customize it a
little bit to my own liking.
So first thing I'm going
to do is exit the preview.
We're going to start by customizing
the gallery, simply by left clicking
the gallery anywhere but on the
first item and then on the right
side in the properties window,
I'll change the layout.
It comes with a series of predefined
layouts which I can of course
customize to my own needs.
But I'm going for a predefined one.
I'll change wrap count from 2 to 1. I just want
one item for oh and then I can
also change the template size.
It's currently an expression that
calculates the minimum between 320
or the height of its container.
I'm going to change that minimum to 160.
As a next step, I'll also change your fields which are used.
Notice that we now have the name
of the product and the price.
Well, I want to have the category
there instead.
Have you noticed how every change you
made is immediately visible in the designer?
There is no explicit save, or
run, or compile step,
it's just there. It's just working.
This makes us extra productive
when we're building apps.
OK, let's do a few more changes.
I would like that this Gray banner
in the Gallery with the image
would actually change color when
a product is trending or not.
That visualizes that value for all my users.
I start by selecting the banner in
the first item of the gallery and
then I can go to the color property.
I can choose the color from
the predefined ones,
or I can click on the color label here and
that will set the expression bar on the top
to the right property. And I can
now use that to write an expression,
just like in Excel.
I can use a formula.
I'm going to use, in this case,
a formula which is going to look at
the value of the trending in the table.
So I go ThisItem which is referring to
the selected item that we're looking at.
Getting the trending value: dot trending.
And then I go for Color.OrangeRed
if trending is true,
or DarkGrey if trending is false.
And immediately we see it in the outcome.
I'm pretty happy with the gallery now,
so I'm going to do a few more
changes on the form on the right
side and that will finish it.
So let's click anywhere on that
form and I can change properties
like I did on the gallery before.
In this case, the columns from
three to two and with the fields
property I can control which
columns are added to the form.
So I can, for example,
remove the image as I don't want it here.
With that all done,
we've completed our three steps.
We created an app,
We created the table, and then we
customized the app to our needs.
Now we're just going to publish
it so others can start using it.
Click on "Publish to Teams".
Click on next and then I can choose
where I want to have the app in my team.
So I can add it to one of my channels here.
Then click save and close. Let's go
and see what it looks like in teams.
Isn't that amazing?
We just build our first app in teams.
Every team member can now use it,
wherever they are, on the web,
in desktop, or on mobile.
Now remember this is just the first step.
There's so much more you can do.
You can add multiple screens.
You can use those expressions
to filter on data.
You can build complex
controls and much, much more.
I'm so glad I'm part of your journey
and I'm hoping to see you again soon
as one of our Power Apps champions.