{"id":54,"date":"2021-12-01T09:00:00","date_gmt":"2021-12-01T09:00:00","guid":{"rendered":"https:\/\/blog.citrus-lime.com\/crmc\/?p=54"},"modified":"2021-11-30T11:25:22","modified_gmt":"2021-11-30T11:25:22","slug":"creating-a-homepage-canvas-app","status":"publish","type":"post","link":"https:\/\/blog.citrus-lime.com\/crmc\/creating-a-homepage-canvas-app\/","title":{"rendered":"Creating a Homepage Canvas App"},"content":{"rendered":"\n

By Benjamin Heapy, CRMCS Senior Cloud Applications Consultant<\/strong>

Does your business have lots of apps in lots of places and cause issues with where you need to go to do your job? A Canvas App Home screen may be your solution, with a home screen you can place links to all your apps no matter where they are located and have a 1 stop location which everybody can use. The below article will help guide you on how to create a home screen which will contain buttons to link you to your apps, reporting and \u201cTo Do\u201d lists.<\/p>\n\n\n\n

STEP 1<\/strong> \u2013 First you want to navigate to the Office 365 Power App centre where you can view, edit, and create Apps. https:\/\/make.powerapps.com\/<\/a><\/p>\n\n\n\n

STEP 2<\/strong> \u2013 Check the environment you are currently in using the Environment Selector in the top right corner of the window. (Often it will pre-select the \u201cDefault\u201d one which you don\u2019t want). Select the environment you wish to build the Power App in (if you are testing something choose your Sandbox\/Development one).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

STEP 3<\/strong> \u2013 Once you are in the correct Environment select Apps from the left navigation bar which will load you to a list of app Canvas and Model Driven Apps within this Environment. Select New app on the top bar and then Canvas.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

STEP 4<\/strong> \u2013 Provide an App name (something unique that will be easy to locate as this is the name which will be displayed on the previous screen). Then select a Format, if this is a Mobile Phone only App then select Phone other leave it selected on Tablet. Then select Create.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

STEP 5<\/strong> \u2013 Adding a background can be done by first uploading an image file to the Media section on the far-left navigation pane then clicking upload and selecting the file from your File Explorer. Once uploaded it will be visible in the Media section where you can then drag and drop it onto the page.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Once on the page you may need to reposition the image by clicking and dragging the corners and modifying the Image Position option on the far-right side until you fill the page like the below.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

As you add new components to the page you will see that they are added into the Tree view section on the far left navigation pane. I would recommend rename these as they are added otherwise it can become very difficult to navigate in this page once more Components are added. To rename them select the \u2026 and select rename.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

STEP 6<\/strong> \u2013 Adding a heading bar requires multiple components depending on your requirements. In this example I will add a shape at the top with the logo and some Dynamics text welcoming the User. First let\u2019s start with the shape, to add this click the + on the far left navigation bar then select rectangle, then drag the rectangle to the require location and resize it to your requirements. Once in the correct position you may then want to modify the colour of the shape by using the Colour option on the far-right navigation bar.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Next, we can add the logo, to do this go back to the Media section on the far-left navigation bar (where we uploaded the background image) and select upload and locate your Logo image from the file explorer. Then drag and drop the image onto the page and resize accordingly.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Finally, we can add the text, for this I added 2 separate Text Label components from the + navigation pane on the far left.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

For the first Text Label double click it and add the required text, then use the far-right navigation pane to modify the text size, colour and styles.<\/p>\n\n\n\n

For the second Text Label single click it then go to the top navigation bar and add the following into the fx section User().FullName <\/strong>. If it has worked correctly, you will see the text on the page should change to match the name of the User your logged in as.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

STEP 7<\/strong> \u2013 Adding Buttons. To add this, click the + on the far-left navigation bar then select Button, then drag the Button to the require location and resize it to your requirements and use the navigation bar on the far right to change to colour and text etc.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Repeat this process until you have all of the buttons you require as per the below example, or you can copy and paste your original button by selecting is and clicking CTRL C then CTRL V on your keyboard.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Once you have all your buttons, I would recommend Grouping them to make it easier to work with them in the future. To do this select each button from the Tree view on the far-left navigation bar whilst holding CTRL on your keyboard then click the \u2026 on any of the buttons and select Group.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

STEP 8<\/strong> \u2013 Adding Redirects or links to your Buttons. Firstly, acquire the URL\u2019s you wish for the button to go to when being clicked. Once you have to URL select to button on your page then in the fx bar on the top navigation check the dropdown is set to OnSelect then in the bar remove False and type Launch(“YOURURLHERE<\/em><\/strong>“) and hit enter (note if anything is wrong a red x will appear next to the button and you will need to check the text entered in the fx box.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Note: By default this will open a new tab in the browser, however if you would prefer you can set it to just use the current page by adding ,{}, Replace to the end of the text so it would look like Launch(“YOURURLHERE<\/em><\/strong>“,{}, Replace)<\/p>\n\n\n\n

Repeat this same process on each button.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

STEP 9 <\/strong>\u2013 Adding a Gallery to show records from Power Apps. You may wish to show a list of Tasks\/Activities the User has for that day and this can be done by adding a Gallery. To add a Gallery, select the + on the far-left navigation bar and select Vertical Gallery, then select the data source you wish to link this too (in my example I am linking it to the Activities Table within PowerApps.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Once the data source has been selected you will then need to select the filter\/view for the data over on the far-right navigation pane using the View dropdown option. Then you can use the same navigation pane and then set the required layout which will allow you to choose how much data is shown (e.g. number of columns). Finally, you can then use the same pane to change the colour, boarder etc.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

STEP 10 <\/strong>\u2013 Adding a Power BI Report. You may wish to add a pre-build Power BI Report which will provide the User with details on targets etc. To do this select Insert on the top bar and then select Charts then Power BI Tile.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Once the tile appears on the screen you will then need to select the Workspace, Dashboard and Tile you wish to display on the screen.<\/p>\n\n\n\n

Note: All User will require a Power BI licence and for the Dashboard to be shared with them to view it in the Canvas App.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

STEP 11<\/strong> \u2013 Saving and Publishing the App. The final step is to Save and Publish to app to make it accessible to Users, to do this click on File on the top bar then Save<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Once saved you should then see a Publish button appear, select this then select Publish This Version<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Finally, you will need to Share the app with Users you wish to have access, to do this select the Share button on the far-left navigation pane below Save As. This will open a new tab with a section on the far right (like below screenshot). Within this section you will need to type the name of the Users you wish to have access to the App and then select Share in the bottom right.<\/p>\n\n\n\n

Note: If you want to share it with all Users you can search for Everyone.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

STEP 12<\/strong> \u2013 Provide Canvas App URL to Users. If you chose not to send Users an invitation in the previous stage, you may watch to provide a URL. This can be location on the screen behind the Share screen done in the previous stage under Web link.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Further Reading:<\/strong><\/p>\n\n\n\n

For more HOW TO and Technical Articles visit: https:\/\/www.crmcs.co.uk\/blog\/blog.aspx<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Does your business have lots of apps in lots of places and cause issues with where you need to go to do your job? A Canvas App Home screen may be your solution, with a home screen you can place links to all your apps no matter where they are located and have a 1 stop location which everybody can use. The below article will help guide you on how to create a home screen which will contain buttons to link you to your apps, reporting and \u201cTo Do\u201d lists.<\/p>\n","protected":false},"author":43,"featured_media":43,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_tribe_ticket_capacity":"0","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[3],"tags":[],"class_list":{"0":"post-54","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-crm"},"featured_image_src":"https:\/\/blog.citrus-lime.com\/crmc\/wp-content\/uploads\/sites\/30\/2021\/11\/Untitled-design-41.png","author_info":{"display_name":"jadesmith","author_link":"https:\/\/blog.citrus-lime.com\/crmc\/author\/jadesmith\/"},"_links":{"self":[{"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/posts\/54","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/users\/43"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/comments?post=54"}],"version-history":[{"count":4,"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/posts\/54\/revisions"}],"predecessor-version":[{"id":103,"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/posts\/54\/revisions\/103"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/media\/43"}],"wp:attachment":[{"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/media?parent=54"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/categories?post=54"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.citrus-lime.com\/crmc\/wp-json\/wp\/v2\/tags?post=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}