To add fluent UI components in Canvas App, follow the below steps:<\/p>\n
1. You can open the components panel in the existing Canvas App or create a new one. Click on the \u201cGet more components\u201d option as shown below.<\/p>\n
![\"Canvas](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/1Canvas-Apps.jpeg\")
<\/p>\n
2. An Import component panel will appear on the right side of the screen. Canvas and Code tab will display. In the Canvas tab, you will get some pre-built canvas components to use. And in the Code tab, you will find fluent UI code-based components.<\/p>\n
![\"Canvas](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/2Canvas-Apps.jpeg\")
<\/p>\n
Select the required component for the Canvas Apps and click on the import button.<\/p>\n
![\"Canvas](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/3Canvas-Apps.jpeg\")
<\/p>\n
3. After importing the selected component, You will see the component in the components section to be used.<\/p>\n
![\"Canvas](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/4Canvas-Apps.jpeg\")
<\/p>\n
Here are some examples to understand how to use these components in Power Apps:-<\/p>\n
- \n
- ExpandMenu –<\/strong><\/li>\n<\/ul>\n
Expand menus are like \u2018Nav\u2019 components used to provide navigation, which provides links to the main areas of an app or site. It also allows the ability to expand and collapse the menu, giving the user an option for more space if desired.<\/p>\n
![\"Canvas](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/5Canvas-Apps.jpeg\")
<\/p>\nFormula to create \u201cExpand Menu\u201d:<\/p>\n
Table(\r\n\r\n{\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Icon: \"Home\",\r\n\r\nLabel: \"Home\",\r\n\r\nScreen:App.ActiveScreen,\r\n\r\nTooltip:\"Home Page of app\"\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\r\n{\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Icon: \"Accounts\",\r\n\r\nLabel: \"Account\",\r\n\r\nScreen:App.ActiveScreen,\r\n\r\nTooltip:\"Account List\" },\r\n\r\n{\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Icon: \"Contact\",\r\n\r\nLabel: \"Contact\",\r\n\r\nScreen:App.ActiveScreen,\r\n\r\nTooltip:\"Contact List\"\u00a0 },\r\n\r\n{\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Icon: \"BrowserScreenShot\",\r\n\r\nLabel: \"Photos\",\r\n\r\nScreen:App.ActiveScreen, Tooltip:\r\n\r\n\"BrowserScreenShot\"\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 )<\/pre>\nHere, you can use \u201cOffice UI Fabric Icons\u201d icons by just placing their name in the icon property of the code. Reference link for the icons could be found here :- https:\/\/uifabricicons.azurewebsites.net\/<\/a><\/p>\n
- \n
- Breadcrumbs –<\/strong><\/li>\n<\/ul>\n
Breadcrumbs should be used as a navigational aid in your app or site. They indicate the current page\u2019s location within a hierarchy and help the user understand where they are in relation to the rest of that hierarchy.<\/p>\n
![\"Canvas](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/6Canvas-Apps-ink.jpeg\")
<\/p>\nFormula to create \u201cExpand Menu\u201d:<\/p>\n
Table(\r\n\r\n{\r\n\r\nItemKey:\"1\",\r\n\r\nItemDisplayName:\"Account\",\r\n\r\nItemClickale:true\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\r\n\u00a0\r\n\r\n{\r\n\r\nItemKey:\"2\",\r\n\r\nItemDisplayName:\"Main Grid\",\r\n\r\nItemClickale:true } )<\/pre>\nConclusion:<\/strong><\/p>\n
In this way, a user can improve the look and feel of the Canvas App by using Fluent UI components.<\/p>\n
![\"\"](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2023\/02\/Microsoft-Power-Platform-3.png\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"To enhance the look and feel of the Canvas App, we can use a fluent UI framework by using the Creator Kit. The Creator Kit helps create Power Apps experiences on the web and mobile platforms with convenient components appearing in modern software. Prerequisites – The Power Apps code components for the Canvas Apps feature\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1954,16,18],"tags":[1988],"class_list":["post-33969","post","type-post","status-publish","format-standard","hentry","category-canvas-apps","category-dynamics-365","category-dynamics-365-v9-2","tag-canvas-apps"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/33969","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=33969"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/33969\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=33969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=33969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=33969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Breadcrumbs –<\/strong><\/li>\n<\/ul>\n