Tag: Canvas Apps

Setting Up Your First Canvas App – Step-by-Step Guide for Beginners –

Canvas App Series – #02

This is the second blog post series on Canvas Apps where you can learn and grow from Zero – Hero in Canvas Power Apps. In this blog post, we will talk about different ways you can get started with creating canvas apps.

Introduction

Power Apps Canvas Apps allow users to build powerful applications with a drag-and-drop interface, requiring little to no coding. Whether you’re a beginner or an experienced user, setting up your first Canvas App is a straightforward process. This guide walks you through each step.

Prerequisites

Before getting started, ensure you have:

  • A Microsoft Power Apps account (Sign up here).
  • Access to Power Apps Studio.
  • Basic knowledge of what you want to build (e.g., a simple data entry form).

Step 1: Accessing Power Apps Studio

There were different ways you can create a Canvas Apps

  1. You can create a canvas app by giving your requirement in Copilot which will in turn build your Canvas Apps.

2. You can design them using any of the existing templates available

3. You can also design your App using Plan designer which is the latest feature released and still in preview, for this you need to enable

For this you need to have an plan available

You can click on See more plans option available, create new plans if necessary

You have to state your business problem, this is pretty much same as using the Copilot in the old experience but here you just tell what problem you have been solving by creating the App, that’s it.

I entered Tracking Student Attendances as my problem and within a matter of 1 min, it designed whole data model where you can accept or propose for a new change.

Once you accept, next it will go ahead and start preparing the data necessary.

After you accept this, it will start designing for the user experiences

Once everything is done, you

It will ask you to save in a solution, this way you will be able to save all your changes to a solution which can be safely moved across environments.

And that’s it, your fully functional app is ready in few mins.

Step 2: Designing Your App

Once inside the Power Apps Studio:

  1. Drag and drop controls from the left-side panel to the canvas.
  2. Add labels, text inputs, buttons, and galleries as needed.
  3. Resize and align elements for a clean layout.

Below is the sample Power App screen in Studio containing the components.

Step 3: Connecting to a Data Source

  1. Click on Data in the left panel.
  2. Select Add data and choose a source like SharePoint, Dataverse, or Excel.
  3. Connect your app to the data source.

Step 4: Adding Functionality with Formulas

Power Apps uses Excel-like formulas to add functionality. Example:

  • To navigate to another screen: Navigate(Screen2, ScreenTransition.Fade)
  • To filter data: Filter(Orders, Status="Pending")

Step 5: Previewing and Testing Your App

  1. Click on the Play button in the top-right corner.
  2. Test the app’s functionality.
  3. Fix any layout or data issues as needed.

Image Suggestion: Screenshot showing the app running in preview mode.

Step 6: Saving and Publishing

  1. Click File > Save As.
  2. Choose Cloud as the storage option.
  3. Click Publish to make your app available.

Image Suggestion: Screenshot of the Save & Publish screen.

Conclusion

Congratulations! You’ve built your first Canvas App. You can continue refining it by adding more features, integrating AI, or automating workflows.

Are you ready to explore more? Share your first Canvas App experience in the comments!

Do you want step by step guided walk through, then check this App in a Day Workshop from Microsoft where you can start from scratch and build a fully functional Canvas App.

Cheers,

PMDY

My top 3 favorite features released at Build 2024 for Canvas Apps…

Hi Folks,

This sounds good for those who are Pro Dev and also those working on Fusion teams (Pro + Low Code), as well. Just note, all these features are in preview or experimental features and are available in US Preview Region now as they were just released in the Microsoft Build 2024 last week. Public preview of these features is expected to be released in June 2024, so you can then try out in your region as well. If you want to check these out now, spin up a trial in US Preview region.

These are the top new features

  1. View the Code behind the Canvas Apps
  2. Use Copilot to generate comments and expressions for your Canvas Apps
  3. Integrate Canvas Apps with GitHub

Feature #1: View the Code behind the Canvas Apps

Now you can view the code behind your Canvas Apps, besides the screen where the components reside, click on the ellipses as below

You should be able to see the YAML source code for your Canvas App, the code is currently read only, you can click on Copy code option in the above screen at the bottom of page.

Make the necessary changes to the YAML code, create a new blank screen and you can then copy the YAML code to recreate the previous screen for which you copied the YAML code into a new screen if you wish you.

Here I will copy the code for the container inside, then I will create a new Blank screen

Once blank screen is added, expand it so that it occupies the entire size of the App, then click on Paste as below

Give it a minute, your new screen is now ready with container inside as below e.g here it was Screen3, just rename this accordingly.

How easy it was…. make sure you copy it to relevant item, meaning if you copied the code of container, you could only copy it to another container and not a screen.

Feature #2: Use Copilot to generate comments and expressions for your Canvas Apps

Do you want to generate comments for the expressions you wrote. Or have you forgot the logic which you have written for Canvas Apps long time back, don’t worry, use this approach.

Let’s say, I am choosing OnSelect Property, I have the below formula

Let’s ask Copilot what this mean, click on the Copilot icon available as below

Choose to explain the formula

So now you click on Copy option available and paste it above your command, this serves as a comment for your expression, you can try for any complex expression you wrote in your App. This improves the readability of your app and also makers can use existing knowledge to quickly get up to speed, minimize errors, and build—fast next time you were working on the same App

Now you can generate Power Fx using Copilot, you can start typing in natural language what you need in comments and as soon you stop typing, it shows as generating as below…you could use either // and /* */, comments can remain in the formula bar as documentation, just like with traditional code.

It generates the Power Fx command for your input as below and then you need to click on Tab key on your keyboard, it will show something like below

And finally, you can see the output as below.

You can apply these two tips for complex formulas as well.

Feature 3: Integrate Canvas Apps with GitHub

Did you ever notice that if the canvas app was opened by one user, when another user tries to open the same Canvas app, you would see a warning message and you need to explicitly click on override to take it forward, meaning at any point of time, only one person could be able to work on the Canvas App.

Now we can use first class Devops with the GitHub Integration feature enabled, many people can work on the same canvas app at the same time and also commit the code for Canvas Apps to Git, let’s see this.

Prerequisites:

  1. You need to have a GitHub Repo created, creating branches is optional, we can use main branch otherwise.
  2. Enable the experimental feature as below

Then you should see

Next thing is you need to configure Git version control as below, you can either use GitHub or Azure DevOps for this, I want to create a new Directory for storing my canvas app like GitHub Test which is not yet in my GitHub Account.

You need to your GitHub Account settings to create a new token as below.

For the personal access token, give repo level scope and click generate token.

Copy the personal access token in the connect to a Git Repository window, once authenticated, you should see a message like below.

Click Yes, you should see something like below

Within a minute, you should the below screen w

So, you should the code files being created in your GitHub Account as below

Now, your team can make the changes in the GitHub, since GitHub allows multiple people to work on it, latest commit will be reflected whenever you try to open the Canvas App from the maker portal. This helps developers build and deploy to source control without leaving the maker portal. Whenever you try to open this app, it will ask your Git Account credentials.

Do note that these features are currently available in US Preview region as they are just released last week in Build and would be released to other regions in near future, possibly in June 2024.

Hope you learned something new coming up next month or sooner…

That’s it for today…

Cheers,

PMDY