Canvas power Apps: Harnessing the Power of Formulas and Navigation in Canvas Power Apps
Tags: powerplatform, powerapps, powerfuldevs, powerappscanvas
Published: 2023-09-28 10:34:56

Creating screens in a Canvas Power App from a blank template is a fundamental step in app development. This process involves defining the structure, design, and functionality of each screen. Here's a step-by-step guide:


## Step 1: Creating a New App from Blank Template

Sign In to Power Apps: Open Power Apps and sign in with your Microsoft account.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ym7lytpmwhkqyccpvd1o.jpg)
**Create a New App:** 
- Click on the "Apps" option in the left-hand menu.
- Select "Create an app" and choose "Canvas."

**Choose a Blank Template:**
- Under the "Start with a template" section, select the "Blank" template. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lj3x3zgz6ve77ed85cki.jpg)
- This template provides you with a blank canvas to design your app from scratch.

**App Name and Size:**
- Give your app a name and choose the size (Phone or Tablet) for your canvas.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2krb71k1e1wkeqpobdm.png)

**Create the First Screen:**
- By default, a blank screen named "Screen1" is created for you. You can rename it by right-clicking on the screen in the left-hand panel and selecting "Rename."

## Step 2: Adding Controls and Data Sources

Now that you have your blank screen, you can start adding controls and integrating data sources:

**Controls:**

- From the left-hand pane, drag and drop controls onto your screen. For example, you can add labels, buttons, text input fields, galleries, etc.
- Customize the properties of each control, such as its text, color, and size, using the right-hand panel.
Data Sources:

**Excel Sheet:**

To connect to an Excel sheet, go to the "Data" tab.
Click "Add data source," select "OneDrive for Business," and choose your Excel file.
You can now use the Excel data in your app, e.g., display it in a gallery or submit data back to the sheet.

**SharePoint:**

To connect to a SharePoint list, click "Add data source," select "SharePoint," and provide the URL to your SharePoint site.
Choose the specific list or library you want to connect to.
Once connected, you can display, edit, and update SharePoint data in your app.

**Databases and Other Connectors:**

Similar to SharePoint and Excel, you can connect to various data sources, including SQL databases, Microsoft 365 services, and custom APIs. Follow similar steps to add these data sources.

## Step 3: Formulas and Actions

Formulas play a crucial role in defining the behaviour of your app. Here are some common formula examples:

**Setting the Text of a Label:**

`Label1.Text = "Event Entry"`

**Filtering a Gallery Based on User Input:**

`Gallery1.Items = Filter(EmployeeData, StartsWith(Name, TextInputSearch.Text))`

**Submitting Data to a SharePoint List:**

`SubmitForm(EditForm1); Refresh(EmployeeData)`

**Navigating from One Screen to Another:**

`Navigate(Screen2, None);`

## Step 4: Navigating Between Screens

To navigate from one screen to another in a Canvas Power App, you can use the Navigate function. Here's an example of how to navigate from "Screen1" to "Screen2" when a button is clicked:

Add a button to "Screen1."

In the button's OnSelect property, enter the following formula:

`Navigate(Screen2, Transition.None)`

Replace "Screen2" with the name of the screen you want to navigate to, and you can also specify a transition effect (e.g., Transition.Fade, Transition.Cover, or Transition.None).

Now, when the button is clicked, the app will navigate to "Screen2."

By following these steps, you can create screens in Canvas Power Apps from a blank template, integrate data sources, use formulas to define app behaviour, and navigate between screens to build a fully functional custom app tailored to your specific needs.

## References

Cover: https://blog.infusai.com/blogs/microsoft-power-apps-exploring-canvas-vs-model-driven-apps/


## Connects

Check out my other blogs: 
[Travel/Geo Blogs](shishsingh.wordpress.com)
Subscribe to my channel: 
[Youtube Channel](youtube.com/@destinationhideout)
Instagram:
[Destination Hideout](https://www.instagram.com/destinationhideout/)