Microsoft Power Apps is a low-code or no-code platform developed by Microsoft to help business owners develop a completely configured end to end working app without any knowledge of app development. In our Power Apps training course, you will be introduced to various building elements such as screens and controls as well as the user interface elements such as gallery, forms, icons, and buttons. By the end of the course, you will have a basic Canvas App ready on the go. In this blog, a step-by-step guide to creating your first canvas app has been presented.
Getting familiar with the data
In this blog, we are going to build a canvas app for a Mountaineering & Camping Equipment Company which wants to sell their products. The products are categorized into 3 different categories,
- Mountaineering Products. e.g.: Rope, Battery, lamp etc.
- Camping Equipment. e.g.: Pillow, Mat etc.
- Outdoor protection. e.g.: Sun Shield, Insect Bite Relief etc.
We are going to build a 3 screens canvas app. The Home Screen where the buyers can select any of the product categories which will lead them to the Product Screen where they can see all the products of the selected category with product price and other details, and finally when they select a product, it will take them to the Order Screen where they can place their order for the selected product.
To build this Canvas App, we will use 3 SharePoint lists as mentioned below:
- Product Line Images List: In this SharePoint list, product categories and category images (links) are saved.
- Product List: In this SharePoint list, all product details are saved.
- Sales List: In this SharePoint list, all placed order details are saved.
We have already discussed about the Phone Layout in previous blogs. So, in this blog we are going to build the Canvas App from blank in Tablet Layout.
Tablet Layout is the most popular layout used to build the Canvas app. This layout is used to build Canvas app to use in Computers, Laptops, Tablets, iPads and other wide screen devices.
Below are the steps to build a Canvas App from Blank in tablet layout,
- In Power Apps home page, click on “Create”.
- Click on “Canvas app from Blank”.
This will take you to the next screen.
- Write the “App name”.
- Select the format as “Tablet” as we are going to build the app in tablet layout.
- Click on “Create”.
This will create the app and take you to the Power Apps studio to develop the app.
Below are the steps to add data to the app,
- Click on “Data” icon placed on the left bar.
- Click on “+ Add data”, Select a data source window will display.
- Write “SharePoint” in the search textbox in Select a data source window.
- Select the SharePoint connector and click on the SharePoint connector.
- Select the SharePoint site.
- Select the SharePoint lists (Product, Product Line Images, Sales) which are needed to develop the app.
- Click on “Connect”.
Prerequisites: To choose a SharePoint site and the SharePoint lists, the SharePoint site and the SharePoint Lists should be in place with sample data. If you do not have a SharePoint site and a SharePoint list, you need to create it first.
In this tutorial, we have an existing SharePoint site and an existing SharePoint list whose access will be given to the students. The access for each user is personalized, and students need to get their link directly from the tutor. If you’re interested to get the access, please share your interest on email@example.com
Connected SharePoint lists will be displayed in the Data tab on left side of the studio.
This blog post presents a step-by-step guide to creating a simple canvas app consisting of 3 screens, i.e., the Home screen, Product screen and the Order screen. The app is built using data from a SharePoint site of fictious company that sells Mountaineering & Camping Equipment Company. The products are categorized into 3 different categories, Mountaineering Products, Camping Equipment, and Outdoor protection.
Are you looking for an instructor-led Power BI or Power Apps training in Australia? We provide classroom as well as online live trainings for the following courses: