In recent years, apps have become super important for businesses. We rely on them for all sorts of tasks every single day. We need apps because they make our work easier and help us do things faster. They’re like handy tools that we use every day to get stuff done. Canvas Apps are especially cool because they’re easy to make and share within our company. You don’t need to be a coding expert to create them, which means anyone can make their own custom apps for the team to use. It’s like building your own personalized toolbox to tackle tasks efficiently and keep things running smoothly.
This article will explain what Canvas Apps are and how you can start making them for yourself and your team!
What Is a Canvas App?
Canvas Apps are like digital workspaces that you can create without needing to be a computer whiz. They’re like blank canvases where you can place different tools and information to suit your needs. Imagine a big whiteboard where you can stick on all the things you need for a project – that’s what a Canvas App is like. You can easily arrange buttons, images, and other elements to make a custom app that helps you and your team work better together. Plus, you can share these apps with others in your company, making collaboration a breeze. It’s a simple and user-friendly way to build helpful tools for your day-to-day tasks.
Microsoft Power Platform – Canvas apps uses low-code technique with drop and drag functionality which is connected by data connectors(Data source). For making it possible Canvas app uses components like Forms, Datatable, Gallery. It has functionality like Insert which enables user to insert different kinds of components. It also comes with powerful programming language- Power Fx, which is used to write low code for components.
Use Cases
Canvas apps can be used in broader way for an organization. It can start from making forms to collect data to leave management system for an organization. Let shed light on some of the uses cases for the app.
- Expense Tracking: Power Apps can be used to create a custom expense tracking app tailored to the specific needs of your business. Users can easily input expenses, categorize them, and attach receipts, streamlining the process and ensuring accurate record-keeping. Managers can then access real-time data for better budget management and decision-making.
- Field Service Management: Power Apps enable the development of field service management apps that empower technicians to efficiently manage service requests, schedules, and on-site tasks. With features like GPS integration and offline capabilities, technicians can access critical information and update job statuses in real-time, enhancing productivity and customer satisfaction.
- Inventory Management: Power Apps can revolutionize inventory management by allowing organizations to create customized apps for tracking stock levels, managing orders, and streamlining inventory processes. These apps can include barcode scanning functionality and integration with existing databases, providing accurate and up-to-date inventory information while improving inventory control and reducing errors.
To understand more about canvas app.
Let’s make an app!
For this tutorial, I am going to make a Form application which will help to collect data with help of SharePoint as datasource.
Prerequisites ➖
- We will require Organizational license for Microsoft Dynamic 365 or Power apps license.
- Any Datasource with lists. Example – SharePoint, Excel, Sql server, Dataverse will be required. We are using SharePoint for making and storing our list.
Creating List in SharePoint
If you are struggling with creating list in SharePoint then Click here to know more about creating list in SharePoint.
Following are names and type of column which will be required for creating our Form app.
Let’s get going with power apps.
Click here or you can use https://make.powerapps.com/ to navigate to power apps website.
When you visit the Power Apps website, on Home Tab you’ll notice three tabs. The Start with Data tab allows you to begin creating an app by first connecting to a datasource. The Start with Page Design tab guides you to create a user interface (UI) before connecting it to data. Lastly, the Start with an app template tab offers numerous ready-to-use templates to simplify your development process.
Step 1 ➖Creating an App
To create our app, we’ll click on the Create option in the left navigation. This will take us to a page featuring various cards, including the Blank app card, which we’ll choose to proceed with. Additionally, there are cards for connecting to Datasource like Dataverse, SharePoint, and Excel. Furthermore, there are cards with Image and Figma options, offering a new way to quickly start Canvas Apps by transforming visual design artifacts into apps instantly.
After selecting the Blank app option, three pop-ups will appear, and we’ll continue with the Blank Canvas App as we focus on creating canvas apps. It’s worth noting that the Blank app based on Dataverse is a model-driven app, while Power Pages is another option that we’ll discuss in future blogs.
Step 2 ➖Naming an App
After clicking Create a pop-up will prompt us to name our app. We’ll give it the appropriate name, which is Training Registration Form We’ll keep the template type as tablet and click on Create. We’ll then skip the pop-up that appears while the page is loading.
Upon reaching the development screen of the canvas app, the left navigation bar provides access to various tabs such as List on Tree view, Insert, Data, Media, Power Automate, and Variables.
The Tree View tab offers an overview of screens and controls within the app, where each screen serves as a canvas for adding controls, with the flexibility to include as many screens as needed.
The Insert tab contains all available controls that can be added to screens, ranging from text labels to buttons and galleries, each with editable properties specific to its type.
The Data tab facilitates the connection of the app to data sources, setting the stage for the next steps in development.
In the middle section of the screen, the active screen displays the components being worked on alongside a preview of the screen layout. On the right side, the Screen Properties pane showcases the properties of the selected component in the middle section.
At the top, the formula bar, reminiscent of an Excel sheet, utilizes the Power Fx programming language for writing low-code commands to manipulate components. Additionally, options for Save and Publish actions are located in the top right corner, enabling users to save and publish their projects for sharing within the organization.
Step 3 ➖Adding Data source
We’ll utilize SharePoint as a connector in our canvas app development process. Expanding the left navigation bar, you’ll find the Data option, used for connecting data sources to the app. Upon selecting this option, click on the Add data button, located to the right of the screen next to the navigation bar. This action will prompt a dialog box to appear, presenting various types of connectors. To proceed, search for SharePoint in the search bar and select it. Additionally, there are numerous other connectors available, such as Excel, SQL Server, and many more, for additional data source options.
To add a new connection to the app, start by clicking on the Add a Connection button. Next, select Connect directly and input your SharePoint URL.
Then, click Connect After establishing the connection, choose the specific lists that you’ll be utilizing for the app, and click the Connect button at the bottom. This process ensures that the necessary lists for the application are loaded and ready for use.
Step 4 ➖Adding Form to app
From left navigation bar select insert tab and search for Edit form in search bar. On selecting Edit form, it will added to the screen 1. On right side pane we will see the properties for the Form.
Step 5 ➖Adding list to the Form
When Form is selected, On the right side pane in the properties section, you’ll find the datasource option with a dropdown menu. Select the list you’ll be using to create the form, such as Training Registration Form Demo. Once the list is selected, all its fields will automatically be added to the form. Adjust the size of the form by dragging it within the middle section. From the properties pane on the right, you can further customize the form by editing and changing the positions of the fields using the options under the “Fields” section.
Step 6 ➖Making Fields required and other customization
To designate fields as required, first select the field you want to modify. Then, navigate to the Properties dropdown menu and search for the Required property, setting it to true. Ensure that you’ve unlocked the properties before editing the fields. Make the necessary fields required in the form by following these steps.
Additionally, set the DisplayFields property of the FullName field to [“DisplayName”]. This configuration will display the name of the person as soon as it is typed into the field.
Step 7 ➖Adding Heading and Register Button to your form
From the Insert tab, search for the Button control and add it to the canvas. Drag the button to the bottom of the page and adjust its size and position as needed. Next, add a Text Label from the Insert tab and provide a suitable heading for your form, such as Training Registration Form To add the heading, access the properties dropdown beside the formula bar, select Text, and enter your heading in the Formula bar. Alternatively, you can achieve the same result using the properties pane on the right side. Customize the alignment, font size, and other properties from the right pane accordingly.
Step 8 ➖Saving the form
To save the form upon clicking the Register button, we need to write a formula for the OnSelect property of the button. Select the button, then from the properties dropdown, search for OnSelect and write the command SubmitForm(Form1).
To show message on success of saving the Form. You have to select the Form from tree pane and search for the Onsuccess property from the dropdown. Then right the following formula for the property.
Notify(“The registration process has been successfully completed. All further communication will be conducted via email.”,NotificationType.Success);
ResetForm(Form1);
ResetForm resets the form once saved.
Before previewing the app, make sure to set your form’s default mode to New to view it in preview mode. Once done, click on the Play button located in the top right corner to preview the app.
After filling the form, click on the Register button. Do check the list in SharePoint for the latest entry.
Your app is now ready to be published. Click on Publish in the top right corner, write a description such as version 1, and then click on Publish this version.
To share the app with your colleagues, you can either use the share option located beside the publish button or copy URL of the app from My apps → The ellipsis beside the app name → Details → Web Link.
Conclusion
In conclusion, Power Apps Canvas simplifies app development with its user-friendly interface and low-code approach. Our demo showcased how easy it is to create a custom app, empowering organizations to streamline processes and drive innovation.
Reference
https://microsoft.github.io/Low-Code/blog/2023-day13/
https://learn.microsoft.com/en-us/training/modules/get-started-with-powerapps/5-powerapps-create-first
https://testertina.medium.com/a-beginners-guide-to-building-a-canvas-app-with-microsoft-powerapps-fed7234598a8
https://www.changingsocial.com/blog/what-is-a-canvas-app/