Hello, this is Todd Baginski. I'm a Microsoft and the Partner and CTO of
Canviz Consulting. In this video I'm going to take you on
a deep dive
of the QuickTask PowerApps sample template.
Inside of it, I'm going to show you how to integrate Microsoft Planner into PowerApps.
If you haven't seen my other videos about the QuickTask PowerApps sample template
before, I encourage you to check them out. One of the videos shows you how to set up
and configure it and the other one shows you all the functionality
inside of the PowerApps sample template we call QuickTask.
After you've installed the quick task PowerApps sample template, you will
see it appear in your list of PowerApps just like I have here.
I'd like to take you on a little demonstration of the Planner integration
in this PowerApp before we dive into the code and how it was built.
On the left side of the app when you open it looks just like this. Here you can see the
emails that come from a distribution list that you've configured the app to
watch.
It's using the Outlook connector to get the emails that you see on the left and you can see when I
click them, details about the email change here in the middle.
As well as the information that's pre populated into the name of the task
and the description for the task we will create in Planner. So here you can see again
I'll flip from one of
the other and you can watch that content change throughout the page.
But, the part were focused in on in this particular video is the integration with
planner and that's really everything in the right side here in this "create
task" pane. Now I'd like to bring your attention to this plan that I've created in
Planner.
It's called "PowerApps and Flow Applications" and right now it does not have any tasks.
It has 2 buckets: one called urgent and one called to-do.
Returning to the quick tasks PowerApps sample,
I'll select demo email six and pre populate the name of the task I wish to create
an planner as well as the description I wish to create forward as well. I
can enter in more information here
as I see fit and put that into the body of
the tasks that we create.
I also have the ability to select which plan I'd like to put it in.
If I don't see the plan I'd like to put it in or doesn't exist I can click create new
plan. Notice we give you a pop up here to go create a new plan
in Microsoft Planner and when I click that link it will take me to
tasks.office.com where thae I can create a new plan.
The reason we do that is the api and
the connector does not currently support creating a new plan so we take into the spot to
create it and then tell you to refresh the list and quick task to select you
new plan hitting the refresh button right here
after you've created a new plan will displayed inside of the list.
this example as I mentioned I'm using the "PowerApps and Flow Applications" plan.
When I click it the buckets inside of
that planner, it automatically populated in this drop down list.
If I don't see the bucket I'm looking for I can click
"Create new bucket" and specify a name for it. This one I'll just name after myself and
click "Create bucket."
Now the list refresh is and I have a new bucket that I named after myself
that I can now create tasks inside of. If I head back to my plan now
and take a look at it and refresh it
I'll be able to see my new bucket. There it is. It's now ready for me to create
new tasks inside of that pane.
In that bucket as well I can also select who I would like to assign
it to. This is basically an Active Directory people picker we implemented
in PowerApps. I have a video about that on my YouTube channel and encourage you to watch if
you'd see like to see how to build your own. Finally I can set the date for
when I want this task to occur.
And, as I mention I can also at the description. Now when I click
the save button, the task has been created.
if we had over to the plan, we can watch it pop up inside here automatically.
Now we can see that new task was indeed created and planner right
from our up now I'm going to dive into the code and show you how it works.
Wait one more thing let's take a look at that
test we created in more detail here we can see is
assigned to me put any appropriate bucket
due date we selected in the our up is there as well as the description
so all the information we added in our flowed into this task and planner.
So, the story starts inside of the on start function in the home page
the app here you can see I have that function expanded.
The things related to planner
start here with this clear collect function.
Clear collect is going to create a new collection called my plans
gallery items and it's going to add an item to it with the id not
a plan to and the title create new
plan that's how we get the menu item into that particular drop down list
so that we can take a look at the option to create a new plan.
After that then we're going to invoke the
planner connector if we go over to the
view menu and pick data sources we can see inside of our list
the data sources are connection to microsoft planner right here.
Returning to the code up here now we're going to invoke that planar
connection and we're going to call the list my plans vtwo function and
we're going to return its value that's going to give all the plans
that the current user has access to and we're going to use the collect function to
append them to the might plans gallery items collection we're also going to create a
new collection using clear collect call my buckets gallery items
we're taking the same approach here where we put an item and right off the
bat we given an id called not a bucket to its name is create
new bucket and it's plan id because a bucket needs to be associated
with the plan is not a plan to that's the same one is the plan
id we gave to create new plan menu item inside of the
my plans gallery items.
So, as we look at that at runtime now you can understand how we created
create new plan button right there.
And, also how we created once you
select the plan how we created to create new bucket menu item right here.
The next piece of puzzle is looking at how when we
select a plan how we return the buckets for that
plan so notice I have the might plans gallery
control selected my plans gallery control is the
drop down list that we select plans from.
So, in the on selective function for that particular control.
Notice
the code we use here first we do and if statement to evaluate if
the selected items id is not a plan to remember
not a plan to is the one that says creative plan.
So, if we are selected to the one
that says show the occur create a new plan than the code that we're going to run
is to set the show create planned prompt true.
When this particular variable is true it shows you the box
that describes how to create a plan that you saw me walk through when I did the demo of it?
Now in the event that value is false.
The rest of this code under here's what is going to run so first we're going to set a
variable called selected plan to the item
that they selected in that gallery when they use that drop down the next thing we're going to
uses the clear collect function here.
And, we're going to create the collection called my buckets gallery
items.
And, again, we are adding in
the create new bucket item just like we did in on start then here's
where we're actually going to get some more integration with planar eight pi itself.
We're going to call the collect function pass in the
mind buckets gallery items collection that we just cleared out
and created above which just that create new bucket item
in it and then we're going to cost to the planar connector right here and we're going to
call list buckets we're going to pass in the id
of that selected plan that we set right here which is
this item underneath the hood the currently selected item in the gallery we're going
to pass in the id value.
What that's going to do is by calling list
buckets and passing in the Plan ID and grabbing the value that's returned
from it, it's going to take all of the different buckets and it's going to add them
to the My Buckets Gallery Items Collection, so that's how when you select
the Plan, you populate the
particular collection here that is bound up to the Buckets drop down.
So, now we see no we get a collection that populate the My Buckets gallery.
The My Buckets gallery I currently have selected here in the control tree.
This is the drop down list that shows us all the different buckets available for a given plan.
Notice that in its item collection it uses and if statement. The
if statement reacts to the Show Create Bucket prompt.
This particular variable is set as I will describe to you and here in
just a little bit.
If that value is true then we're going to filter the My Buckets
gallery items to only show the ones where the idea is not a bucket to the
one that says create a new bucket if show create bucket prompt is false.
Then we're going to show everything inside of the my buckets gallery items.
Now we can take a look at how the Show Create Bucket
prompt variable is set.
This happens inside of
the On Select function for the My Buckets gallery.
Anytime an item is selected in that gallery if it's id is equal
NotABucket2, which we know is the one that correlates to create
a new bucket, then we're going to set that variable to true.
If the user has selected a value
inside of that drop down, that's not the value that prompts you to create
a new bucket, then we'll set the selected bucket to the current item in
the gallery and then we will also set Show Buckets to false.
Now I've selected to create a new bucket group here. This
group contains all the controls that create the pop up that you see here
that allows us to create a new bucket. Notice its' visibility is controlled
when the currently selected items id in the gallery is equal to
NotABucket2, which we know is the value for Create a Bucket
and Show Create Bucket prompt is true as well.
This ensures that the user has selected Create a
Bucket item in the gallery and we have programmaticly
set this variable to ensure they have tried to create a new item.
Finally to create the bucket, when
the Create Bucket button is clicked right here this is the
code that executes in the on select function.
First we set show create bucket prompt to false.
This will hide this pop up as soon as the code runs.
Then, while the pop up is hidden, after you click Create Bucket, we create a
collection again named "MyBucketsGallery" so what we're doing here is
we're taking MyBucketsGalleryItems, the one bound to the drop
down of buckets you can select and we're adding to it
the buckets, the buckets id, that is actually returned
from Planner. So here we call Planner and then we invoke create
bucket
and we pass it in the new bucket name. You can tell by the dark green
steak underline here that corresponds to that same dark green around
the text box for bucket name, that's the actual name of the control.
So new bucket name is the text that's typed in to this
text box. Then we also take the selected plan from the drop down above
and pass it's ID in. So by passing in the name of the bucket as well
as the plan id we create that new bucket in Microsoft
Planner.
Now keep in mind here the collection name my buckets
gallery items right here - this one is actually what we're using in
our item collection for the my buckets gallery.
So, if we you can see that down here
on the right or I can also bring it up here on the top and we can
now see how after we create a new bucket and we added
to the collection it's indeed in the list and that's why
as soon as you're done creating a new bucket that drop down list shows.
So, returning to the PowerApp at
runtime let's recap what we did. First we On Start
go get all the plans for the current user and we load them into the gallery here.
That has all the
plans that user has access to. We also add in the Create New
Plan to this collection of the gallery that's implementing this control.
When we select the plan,
we make an additional call to Planner to return all
the buckets inside of the plan that we see here. When we create a new bucket and
enter its name here, just like that, we go and create it in planner and
then we automatically add it to the collection bound to the control
and the gallery that implements this bucket drop down list. So now we can see the new
one I just made an now we're at this point where we can create the task.
Creating the task is done by clicking the save button here
in the top right corner of the PowerApp. The On Select function
for this method executes the code that creates the task.
Let's open it up here and look at it in more detail. We start with an
if statement. The if says if the selected bucket is not
blank,
then, as you can see here, after the first comma, the true value, this is what
we will execute. So when the user has not selected
a bucket we will fall into the second value down here.
So, to create a plan when a user has selected a bucket and
put it into the bucket we're going to set a variable called
task added. The task added is going to be equal to calling the
Planner connector and then invoking create task.
Here we pass in the selected plan's ID,
the task text,
which is the value of the user typed in for that. Then we pass in the bucket
ID, which is the selected bucket's ID.
We pass in the date picker's selected date for the date that
the task is due and then we also
pass in assignments, the assigned to user id. All
of these values come from the little form here on the right side of the
page. Now notice if the user has not selected a bucket as I
mention we fall into the second set statement. Everything here is exactly
the same except we merely do not pass in the bucket id here.
When you do that it will still create the task in Planner and it will just drop it
into the to do (if I remember correctly) bucket. Finally when we're done we set
show success to true.
Show success when it is true drives the
success message that pops up after you click the button create
the task and see that task was correctly created.
So, if we bounce back over to runtime now here we can have demo
email six and notice as I mentioned before I can type in more
text there and I can also specify additional text down here.
This is the user we've assigned to this is the date that we
just saw that is set for we have are selected plan and
are selected bucket which we pass in the id for under the hood.
Now when we click save that code executes and the
variable is set that showed that we were successful
and displayed the message that told us it was successfully created.
So, that soup-to-nuts how you can go get the plans
and buckets create new buckets and create new tasks and microsoft
planner from a our out one thing I'd like to point out is looping back to what we
talked about before when we were not able to create a plan yet
from the planner api now we can see that here if we look
at the different api available on the planner connector we can see we can
create a bucket the task there's another version of creating a
task getting tasks back getting test details listing
buckets listing plans and updating tasks.
With a few different versions of the api available there.
We got this our comes in him helpful for you not just says a great way to
manage
email and turn them into tasks and planner like we've done back here.
But, also is a great way to show you how to use the patterns on how you
can integrate microsoft planner and outlook with your PowerApps as well.
Thanks for watching the video I'll see you next time.