Microsoft Dataverse for Teams for Beginners | Build your first Power App Tutorial

hello everyone reza here if you want to learn how to create your first power app for microsoft teams then this video is for you this video is a step-by-step tutorial on creating an expense request power app inside dataverse for teams we will create tables relationships build the canvas app inside teams create connected form controls and a lot more so let's check this out in action [Music] in microsoft teams i have a team called contoso team i am playing the role of the owner of this team my team has members and guest users to begin creating power apps for microsoft teams on the left hand navigation rail head over to apps and search for apps we will get the powerapps app for teams select this and add this app in my case i already have this app added so i can straight away go and open the app once i open the app on the left hand navigation rail i will have power apps as one of the options i would recommend to go ahead and right click and pin this app on the left hand navigation rail to create the power app click on start now this will list out all the microsoft teams where you are either an owner or a member i will search for my team name which is contoso now if this is the first time an app is being created for a specific team you will get this message on the top that says there is some setup that needs to be performed before you can start creating apps and the setup here is the creation of an environment for that team i will go ahead and click create once we get the success message that the power app is ready to go it will directly launch the powerapp studio experience within microsoft teams our use case is an expense reporting power app i will give my app a name click save this now creates a power app for that specific team we need a data source to store information about the expense details that the users will enter using this app to do that on the left hand navigation rail head over to data go to add data and we have the ability within teams to create tables this database is known as microsoft dataverse for teams this is included for no additional licensing cost as long as you have a valid team's license i'll click on create new table i'll give my table a name this will be my expense table click create this now will launch the table creation experience for us inline inside teams by default it creates a column name of type text you can select this and edit the name of the column i will rename this to expense title you can go to advanced options and increase the length of this column if required i'll keep it as 100 and click save we can add additional columns on the fly i will click on the plus icon create a column called description of type text here i will increase the max length to a thousand and click create i'll add another column call it expense date type there are various types of columns we can create i will go and select the date column and click create i'll create a column called expense type this i will create of type choice so the user can select from one of the choices provided here i'll add three choices project training and miscellaneous i'll click create next i'll add a column to track the status of the expense i'll call it expense status i'll pick the type choice pending approved and rejected i will click create this completes my expenses table at the bottom right i will click on close this now goes ahead and associates this table or connects to this table directly in my powerapps this database is relational in nature for expense reporting users add an expense and then create line items so one expense is related to many line items i need to create a second table now to store the line item information associated with the expense for that i will go to add data once again click on create new table and create a table here called line item i'll click create once again i'll rename the name column i'll call this title i'll create another column description of type text the line items need to be associated with a category so i create a category column of type choice i've provided three choices gas food and miscellaneous i'll click create and here i would like to relate my line items table with my expenses table so for that i will add a column i will call this expense lookup the type of this column will be a lookup column and the table that i would like to relate this to is my expense table i will click create once i have my columns defined i will click on close this will go ahead and connect the line items table to my power app to build the screen for the user to interact with these tables we have a starter screen template option directly available for us start the screen with data let's select this and here let's begin with the expenses table so i will select expenses the moment i do this powerapps will automatically create an experience for the user to interact with the expenses table if you head over to the tree view in the screen we have controls created based on a template in the right container section we have a form that is connected to the expenses table and in the left container section we have a gallery that is connected to the expenses table let's preview the app and create a new record in our expenses table this opens up the form experience i can enter the title of the expense description pick the expense date pick the type of the expense and we have our expense status column showing up for now let's just pick pending and submit this this record that we created gets stored in our expenses table and the gallery on the left hand side showcases all the expenses i can create additional records they will all line up on the left hand side or i can select an expense from my gallery and edit the existing data submit or i can select an item and delete opens up this confirmation dialog i'll click delete it will delete the expense from the expenses table we'll go back to the edit experience of the app so i'll close the preview mode recommendation would be to save the app at this point because if for some specific reason you had a network issue or you closed the browser or the browser crashed you may lose all your work so ensure you save the app once so that auto save takes effect and every two minutes powerapps now will automatically start saving the changes you make let's start adding additional features to our expense report app on the top left i have the app name label it's called expenses i have the ability here to change the text i'll use an emoji and i've changed the text to expense reporting next i will select the new record section in here i have a label control that specifies new record users are creating expenses so i will change the text to new expense with the gallery control selected in the properties tab under layout there are multiple layout types that we can select from you are free to change this to any style of your choice or you can start from blank in this case i will change the style to title and subtitle then i will edit the gallery by clicking on this pencil icon the first label control shows the expense title the second label control is showcasing the description you're free to choose any column values from your expense table right here let's say i would like to showcase the expense date so here my formula would be this item dot and it will list out all the columns within that table one of my columns is called expense date so i will select that and it puts in the date of the expense powerapps has a wide variety of formulas we can play with one of them is known as text which allows us to change the format of the date column i will format this date column as month date the day later if i preview the app we can see that formatting in action we will try and showcase the expense status with the visual indicator edit the gallery go to add and under shapes we have a circular shape i'll pick that we can resize this and i will position this on the left the shape has a property called fill by default it has the purple color theme of microsoft teams we will change this based upon the status of my expense i will leverage a switch function switch this item dot expense status what's the matching value we have three values pending approved and rejected that was the choice column we created now here it's important to leverage the enums that are provided for those values every choice column that you create in dataverse for teams has a respective enum type to get that i will search for expense here i have this type called expense status that's the name of my column bracket the name of my table which is expenses so i'll select this dot this will list out all my choice values if it is pending i will put the color orange if it is approved i will put the color green and if it is rejected i will put the color red now this control also has another property called hover fill so when the user hovers over it it has a specific color let's change this to self dot fill let's go ahead and preview the app my expense is in pending the gallery on the left hand side has that visual indicator if i was to edit the item and let's say change the status to approved and submit we can see that color changing on the fly for the form control we will rename this to a more user-friendly name i'll call this my expense form in this form control we have data cards and these data cards relate to the columns that we have in our table i would like to add a header control to show that this form is related to the expense information with the form control selected head over to edit fields we can add additional fields from our table as cards on the form control or we can reorder the cards by moving them up or down we even have the ability to change the type of the cards so description is a text type field here i'm going to change this to multi-line text so it creates that additional real estate for the user to add that header experience we'll go to more actions on the top and add a custom card this card i will place it right at the top i will close the fields experience here is the card i will select this and in this i will add a label control i'll position the label on the top left of the card and for the width property of the label i will replace this with parent dot with that means whatever is the width of the card the label will take that entire width i will center align the text of the label the label text i will change it to expense information i'll increase the font size for this custom card control i wanted to span the entire width so i can select this and drag it across it's important that you also set the width fit property of this card to on so it will automatically take the entire width this card control and select this and reduce the height i can give it a background color for the label control i will change its color to a lighter shade i will click preview and this now has this header experience for the user which is expense information to align a position the cards inside the form control first you turn off with fit for that card and then you have the ability to decide the width so i want the expense title to be placed here followed by the description once again i'll turn off with fit give it more real estate and then you can also select and drag and place the card once i'm sure that i want to show two columns in this first row select the first card turn on width fit again select the second card turn on with fit if i preview this you see how those two cards are sitting in that second row i want to update the width for this turn off with fit same thing for expense type same thing for approval status i'll select this move it up and now for all of these cards i will go back and turn on with fit so it automatically takes the real estate available based on the dimensions of the screen with my form control selected i will drag this on the top below this form control i would like to show my line items information i need a header for that with the container selected i will go to add here i will use a different technique i'll add a button control position it right below the form control experience the width of the button i will set it to parent.width so it takes the entire width this button is meant for viewing purposes only so i'll select the display mode as view i will change the disabled color to the dark purple theme the text i will use line items information i'll change the font size and the disabled color i will set this to the lighter shade i would like to add a form so users can create line items and i would also like to have a gallery control so the user can view all the line items that are related to the expense for my right container control i will go and insert a horizontal container these are responsive containers where controls that you add within it are stacked horizontally this i would like to place right below the line items control and this needs to take the entire remaining height for the x property of this container set it to 0 our button control i have renamed to btn header so for the y property of this container the button control dot y plus the button control dot height so it sits right below that the width of this container would be parent dot width and the height would be parent dot height minus my button control dot y minus my button control dot height so it takes that remaining real estate at the bottom within this container control we want to add our gallery and our form control with the container control selected i will go and insert a vertical gallery and i want to insert a form control which will also have a button to allow the user to submit or save the information of that form inside this container i will insert another container this time a vertical container and in this container i will insert the edit form control and insert a button for the form control the data source will be line items data cards are created for us now these cards are stacked in the three column format i can simply change this to a one column format since i have more real estate to play with for fields i will go to edit fields description i will make it a multi-line text so it adds more real estate and here i want to add that expense lookup column of mine to do that i will go to add fields search for expense lookup and add the expense lookup column the mode of this form i will switch to new if i preview the app this now has the line items form created for me title description category which are those choices expense lookup will provide all the expenses information from the expenses table so the user can relate to an expense but in our case we already have an expense and the user is trying to create a line item for this specific expense so to have this expense lookup preset up for the user i will select this card go to advanced unlock the card since we are making changes head over to the default property of the card and we will change to our gallery control of expenses which i have renamed to expenses gallery so default value is expenses gallery dot selected the selected item of this gallery is what will show up right here if i preview this we can see it in action i have added another expense if i was to select training now this will have the expense lookup directly linked to training and this is something that we do not need to show to the user so we can go ahead and hide this data card by setting its visible property to false for the button control change this text to save line item if we head over to properties the alignment and the container i'll place it in the center the width i will increase it to 150 so it fits the text that i entered and when the user selects this we would want to go ahead and submit our form i have renamed the form to line items form on select of this button submit the form the name of my form and for the form control there is a property called on success when this data is successfully submitted to my backend table which is line items i want this form control to open up the new line item creation experience i want the form to be reset so i will use a formula called reset form and i'll provide the name of my form control for the gallery control i want the data to come from line items so i will select line items and it should showcase the items based upon the related expense to filter the data i will leverage the filter function filter my line items where my expense lookup column dot expense is equal to my expenses gallery dot selected dot expense let's preview the app and try this out for my training expense line items information i'll add a training receipt i'll pick the category as miscellaneous the expense type is already pre set for me i'll click save line item we can see it running in action the gallery for line items shows that information the form has reset so this allows the user to add additional line item here's another one i'll click save now for expense reporting when users add line items they typically upload receipts i need to give the ability to the user to upload a receipt an image plus i also want the user to enter the amount related to the line item i will once again save my app and this time to make changes to the table instead of going to data selecting our table clicking on the three ellipses for more actions going to edit data and adding those additional columns in my case amount and receipt type currency and type image those type options are not available here since this is the quick creation experience to get those additional column types i will click on the build tab this will list out all my microsoft teams for which an app has been created i will select my contoso team this will list out all the components created for this team i will click on see all i will click on tables select my line item table and click on edit this now opens up the full table designer experience here if i go to add column i will be presented with a lot more options i'll create a column called amount the data type i will pick as currency you can see a lot more options opened up for us i'll make this a required field and click done i'll add another column i've called this receipt data type will be image i will click done i will save my table once i have made my changes i will go to apps my expense report app go to three ellipses edit once again launches the powerapps studio experience for editing our expense report app for the line items form i want to add my new columns that i created so i'll go to edit fields go to add field select amount and select receipt and click add this will add those data cards to the form to change the format of this form to two column i'll swap to two i can reposition things so i have the title of my line item i'll place the receipt on the top for the receipt data card if we want to make changes we can unlock the card here i'll just squeeze it in a little and the text i will change this to add or update receipt amount i will move it to the left amount is a mandatory field if there are any columns you created in the backend data source as mandatory they will show up here as mandatory if you would like to make it mandatory inside this form control we also have that option simply unlock the data card go to the required property and set this to true now if i preview the app i'll select the training expense maybe i bought the on-demand package for training for the receipt when i select this since i am in the browser experience for microsoft teams it will provide me an option to select an image file from my file explorer if i was to run the same app on my mobile device it will allow me to open my camera control and take an image of the receipt live or i can choose an image from my pictures gallery in this case i'll select my receipt i'll plug in the amount and click save for my line items gallery if i head over to properties i have more real estate to play with i'll change the wrap count to two so this will showcase two line items in a single row i'll edit the gallery for the image control now that i have the receipt i can use this item dot receipt and it will showcase that image inside this gallery experience if you want to increase the height of the gallery template there's a property for the gallery called template size i'll increase this to 100 can increase the height of the image and for the gallery we can add some template padding i want to give the ability to the users to edit existing line items for that i need the edit icon icons are not available inside the powerapps studio experience for teams however in the template that got created we do see an icon control here i can simply copy this go to my gallery edit and paste it in here now since i copied this control it will also get its properties like on select there's some code gonna remove that code and the visible property also has some code we will change this to visible true i want to position this on the top right y property will be 0 x property will be parent dot template with minus self dot with and when the user selects this i would like to showcase the selected line item information inside the form to do that on select of edit we will use the function edit form the line items form and for the form control there's a property called item this would be the line items gallery dot selected let's try this out preview training i'll click edit it opens up the training information here let's go and add a receipt i'll click on save line item says amount is required i'll enter thousand click save the updates come through right here and i can do the same thing for other items once again this is a gallery control i can copy paste add additional labels showcase additional pieces of information for example the amount and so and so forth if i would like to showcase the total amount of all the line items in my line items header section i will showcase the amount right here i'll use the sum function on line items gallery dot all items and i will sum the amount that gives me the total amount of all the items if i preview this we can see it live here in action now all this works great for existing expenses that i can edit add line items and so and so forth but for new expenses we will run into certain issues the expense form is new the line items form is new but expense lookup is still showcasing an earlier record because that was pre-selected by the user so here we need to take some additional steps since we are handling the new form experience the first key step is when the user saves the line item so we are directly submitting the data of this form but in case of new form we do not have the information of the expense yet since the user has not yet saved the expense so we need to hold off submitting the line items until the expense is created to do that i will first have to check the mode of my expense form if expense form dot mode is equal to for mode dot new in this case create a collection called call line items in this i haven't saved the data of that form which is my line items form dot updates put a semicolon so reset form the line item form i'll put a comma i'll go ahead and close my if condition this is what my formula looks like for the gallery control where we are showcasing the line items in case of the expense being a new expense my data should come from that collection and not from my data source once again if expense form dot mode is form mode dot new then show the data directly from the collection else continue with the formula that i had before here's the full formula for the items property now if i was to preview the app i'm trying to create a new expense let's try and add some line items remember the expense lookup column we do not have to show and the value in this is incorrect we will fix this for now we'll ignore that and click save we can see that this data is gone on the collection the image will not show up but it is stored in the collection once the user submits the main expense form on success of the expense form is where we need to update that collection and patch that collection to our data source we will keep the formula of on success as is and here we will add the following formula if the form is in new mode and there is a property called new mode already present for us it's a local variable so i'll just leverage that if the form is new i need to patch my collection to my line items table patch my data source which is my line items table and patch the collection which is collection of line items i'll put a semicolon go ahead and clear that collection now close my if condition but this collection may have an incorrect reference to the expense lookup the expense was not yet created so we need to update this collection update if we want to update all the items so the condition is true and the update is only on the expense lookup column and the update here would be self which is the expense form control itself dot last submit i'll close the if condition this completes my formula let's preview the app new expense not yet created i have a line item i'm adding another line item so two line items total being 83 i click submit and watch the magic happen here is that new line item that got created called company meeting here are the details here are the related expenses and the user can once again get in here edit the expense information or start updating these line items on the fly i'm going to change the amount of 50 click save we'll see the changes going through right away the expand status i would want to make this pending by default i can go ahead and firstly unlock this card go to the default property of this card if my expense form dot mode is for more dot new then the expand status enum dot pending is what i would like to utilize else keep the value as it is preview the app these are existing items if i click on new it will default to pending now this we can make it available for changes to specific users this could come from a security group this you can check to see the ownership of the group in my case i'll keep it simple in the app on start i will define who my approvers are here's a collection that i've created on app onstart i have my approver email is lined up here i'm in the edit experience of the app right click run app onstart so this collection has the values for the data card the display mode would be if current logged in user's email is in my collection of approvers dot approver so i'll set the card to display mode dot edit else display mode dot view if i preview the app if i edit this item i get this option to make a change since i am one of the approvers next to publish this app so users can start utilizing this app inside that microsoft teams i'll go to publish to teams click next this will go ahead and publish the app and then save and close for my contoso team for my expense reports tab here's my app i am playing the role of the approver so i can edit and make changes to the expand status and save if that user opens the app and goes to edit the approval status would be disabled for that user they try and create a new item the status would be pending by default related to the delete functionality for the expense form if you look at the visible property it's set to this formula so i'm going to copy this and for the container that we added at the bottom i will set the same formula for its visible property and for the button control that shows the heading for line items i will use the same formula for the visible property so if the user was to delete a specific item it opens this dialog also ensure that the delete confirm overlay container is sitting right at the top of the right container control you can do that by clicking this going to reorder and bring it to the front when delete is selected we have the following formula in play this goes ahead and removes the expense but not the related line items to remove the related line items right before the update context function we will add a remove if function removed from the line items table where our expense lookup column dot expense is equal to there is a property that gives us the selected record that is being deleted which is the expense record so i'll just leverage that dot expense close the formula put a semicolon so now if i was to delete an expense all the related line items of that expense would also be deleted to update the security of the tables back to the build tab of powerapps my contoso team head over to see all go to tables select your table and go to manage permissions as an owner of the team you have the ability to change the security here owners have full access on all the tables but members and guest users you can define the access members currently have full access to the expanse table so they can create read update and delete all the records but if you want them to only update and delete their own records you can change the security and there are multiple options to select from once you're done with your change click save i can do the same thing for guest users as well who by default have private access you can also bring in users who are outside of your team to utilize the app by using a feature known as share with colleagues and this is where you define the security of colleagues and to bring in those additional users you go to app here we have shared with colleagues this is where you define the security group that you would like to share this app with now i will showcase an extended version of that app here are all the expenses in the system i am playing the role of the owner i can see everyone's expenses i also showcase the image of the person who's created the expense i have my status i have styled and designed my gallery to showcase data in the form of cards i also have a chart control that is showcasing the information of all the expenses in the system and their statuses the table at the bottom showcases this information i have two items that are in new status one's approved one's rejected one's pending let's pick the one that is in the new status edit this and change its status to pending save you will see all the changes happening on the fly inside this power app and all of this is responsive in nature as i start reducing the width you can see the behavior or the controls of this app are realigning or repositioning themselves here i'm logged in as a user sarah sarah will only and only see her own records on the system and that's because of the security that we've put in place in the back end table the design inspiration for this app comes from an app that was shared by me here he utilizes the html control to add a shadow effect to the background that's what i leveraged in my app if you enjoyed this video then do like comment and subscribe to my youtube channel and thank you so much for watching

Channel: Reza Dorrani

Views: 61,263

Keywords: power apps, microsoft teams, dataverse for teams, dataverse, powerapps for teams, powerapps, microsoft teams powerapps, powerapps teams integration, microsoft dataverse, microsoft dataverse for teams, powerapps tutorial, microsoft powerapps, learn powerapps, beginner, tutorial, microsoft power apps, build power app, build powerapps canvas app, build powerapps in microsoft teams, build first power app, how to build power apps microsoft, reza dorrani, dataverse for teams powerapps

Id: 8BUxeYb-SX0

Length: 39min 15sec (2355 seconds)

Published: Mon Nov 15 2021