A canvas app in Power Platform is essentially a blank canvas which you can customize by dragging and dropping numerous elements called ‘components’. You can add, align, resize, and rearrange these components on the app’s screens according to your specific needs.
Creating Canvas App Assets and Components
Before you start working with canvas app assets and components, you need a canvas app in place. Let’s quickly create one.
- Sign in to Power Apps.
- In the left-side menu, select ‘Apps’.
- Click on ‘+ Create’, and then choose ‘Canvas app from blank’.
- Give your app a name and select the desired format, either ‘Phone’ or ‘Tablet’.
Once you’ve created the canvas app, you can add components and screens.
Adding Screens
You can add new screens by following these steps:
- In Power Apps Studio, click on ‘New Screen’.
- Choose the type of screen you wish to add – Scrollable, List, or Blank, for instance.
This will add a new screen with a default layout based on your choice.
Adding Components
Components in a canvas app are reusable building blocks that can be used across different screens or within the same screen. You can create custom components or use pre-built ones. To add components:
- On the left-side menu of your screen, click on ‘+ Insert’.
- From the menu that appears, explore a variety of options like labels, text input boxes, buttons, and other media elements to add to the screen.
For example, to add a button:
- Click on ‘+ Insert’ > ‘Button’.
- Drag the button to wherever you would like on the screen.
- Resize or modify it in the property pane on the right.
Managing Components
Over time, you might create a collection of custom components. It is important to keep these organized to allow for easy use and maintenance. To that end, Power Apps provides ‘Components’ tab on the left-side menu where you can view, filter, and manage all your custom components.
Aligning and Grouping Components
To enhance user experience, it is crucial to ensure the correct alignment and grouping of components. Simply select the components you want to align or group together. Then, in the Home tab, you can use the ‘Align’ and ‘Group’ options as needed.
In conclusion, adding canvas app assets and components to screens greatly enhances the functionality and user-friendliness of your apps. Furthermore, understanding of these features is a key skill for anyone pursuing the PL-100 Microsoft Power Platform App Maker certification.
Practice Test
True or False: In Power Apps, you can only add assets and components to one screen at a time.
- Answer: False.
Explanation: Power Apps allows you to add assets and components to multiple screens at the same time.
What is the main function of the components in an app?
- A. To bind the app with Power Automate.
- B. To reuse code.
- C. To provide a user interface.
- D. They do not have any specific function.
Answer: B. To reuse code.
Explanation: Component is a reusable building block for canvas apps so that you can create custom controls to use multiple times in different parts of your app or in multiple apps.
True or False: All app components are reusable.
- Answer: True.
Explanation: By nature, all components in Power Apps are reusable. They can be developed once and used in multiple places across the app.
What does not allow you to reference canvas app components?
- A. Functions.
- B. Properties.
- C. Screens.
- D. Data sources.
Answer: D. Data sources.
Explanation: Data sources do not allow you to reference canvas app components, as components are rather used to manipulate and display data from these sources.
True or False: You can add media such as images, video clips, or documents as assets to the screens of a canvas app.
- Answer: True.
Explanation: Power Apps allows you to add varying types of media files as assets to the screens of a canvas app for enhancement of the user experience.
Multiple select: Which type of components can we add to a canvas app in Power Apps?
- Option 1: Gallery.
- Option 2: Page.
- Option 3: Drop-down.
- Option 4: Pie chart.
- Option 5: Table.
Answer: Option 1: Gallery, Option 3: Drop-down, Option 5: Table.
Explanation: In canvas apps, we can add gallery, drop-down, and table components, among others.
True or False: Once an asset is added to a canvas App, it cannot be removed.
- Answer: False.
Explanation: In Power Apps, added assets can be removed or modified as needed during the app development process.
Can you use the Canvas App components directly in a model-driven app?
Answer: No.
Explanation: Canvas App components and model-driven app components are fundamentally different and aren’t directly compatible.
To add a Screen component to a canvas app, do you need to write code?
Answer: No.
Explanation: Adding screen components in Power Apps can be done without code, using the Power Apps drag-and-drop interface and properties pane.
True or False: Power Apps does not allow you to duplicate screens in a canvas App.
- Answer: False.
Explanation: Power Apps does allow duplication of screens. This can be a useful time-saving feature when creating multiple similar screens.
Interview Questions
How would you add a component to a screen in a Canvas app?
To add a component to a screen in a Canvas app, in the tree view, select the screen to which you want to add the component. Then, select the Components tab, and then select the component to add from the list of available components.
What is the purpose of using components in a canvas app?
Components are a form of reusable building blocks that can be used across multiple screens in a Canvas app. They can consist of one or more controls or other components, and come with a set of properties that can be configured to alter their behavior or appearance.
How do you display a picture in a canvas app?
To display a picture in a Canvas app, you first need to add a Media file to your app resources, Then, you can use an Image control and set its ‘Image’ property to the added Media resource.
How do you define the behavior of a button in a Canvas app?
Button behavior in a Canvas app is defined through the OnSelect property. Any actions you want to take place when the button is selected are inputted into this property.
Can you use a component that was created in one app in a different app?
Yes, you can. To do so, you must first export the component and then import it into the other app. This allows for greater reusability of your components.
What is the purpose of the App Checker in Power Apps?
The App Checker in Power Apps identifies potential issues, errors or problems in your app that may affect its performance or functionality. It offers suggested fixes for these issues, helping you to build better apps.
Can you add a model-driven form component to a canvas app screen?
No, you can’t. The canvas app and model-driven app are two different types of Power Apps that use different methods of building the app and have different types of components.
What types of media can be added to the Canvas app?
You can add different types of media to a Canvas app. This includes Images, Videos, and Audio files.
How do you add an existing component instance to a screen?
To add an existing component instance to a screen, in the tree view, select +Add -> Components, and then select the component instance you want to add.
Can you use Power Automate within Canvas apps?
Yes, You can use Power Automate within Canvas apps to automate processes, such as sending an email when a button is clicked, and integrate with hundreds of other systems and services.
What does it mean to group controls in a canvas app?
Grouping controls in a canvas app allows multiple controls to be treated as a single unit. This is useful when you want the same action to apply to several controls, or when you want to ensure that a set of controls maintain their relative position and size when the screen is resized.
Can you modify screen size in Canvas apps?
Yes, screen size and orientation in Canvas apps can be adjusted in the settings screen of the app. You can choose between different orientations (portrait, landscape) and size templates (phone, tablet, custom).
How are components in Canvas apps referenced?
Components can be referenced by their name.
Is it possible to restrict access to components in a canvas app?
No, it’s not possible to restrict access to specific components in a canvas app. However, you can manage the accessibility of the entire app via the sharing panel in Power Apps.
What’s the purpose of ‘UpdateContext’ in a canvas app?
‘UpdateContext’ in a canvas app is used to create temporary variables, these variables are used to store values, which can then be used across different screens within the app.
extutorials.com