{"id":552,"date":"2023-02-19T14:54:00","date_gmt":"2023-02-19T14:54:00","guid":{"rendered":"https:\/\/automatethemundane.com\/index.php\/2023\/02\/19\/adding-a-canvas-app-to-a-model-driven-app-part-1-design-and-initial-stage\/"},"modified":"2023-06-30T01:05:43","modified_gmt":"2023-06-30T01:05:43","slug":"adding-a-canvas-app-to-a-model-driven-app-part-1-design-and-initial-stage","status":"publish","type":"post","link":"https:\/\/automatethemundane.com\/index.php\/2023\/02\/19\/adding-a-canvas-app-to-a-model-driven-app-part-1-design-and-initial-stage\/","title":{"rendered":"Adding a Canvas App to a Model Driven App-Part 1 Design and Initial Stage"},"content":{"rendered":"\n

2\/19\/2023<\/p>\n\n\n\n

\n\n\n\n

The Why<\/h1>\n\n\n\n

Adding a canvas app to a model driven app can give users a more interactive and engaging experience. Canvas apps provide an intuitive way to interact with data and are customizable to suit the specific needs of the user. With the combination of model driven app data and the creativity of canvas app design, users can achieve powerful results.<\/p>\n\n\n\n

This canvas app is designed to serve as a mandatory document checklist for the MDA series. It will provide users with the ability to upload necessary documents for purchase and track them using a checklist derived from a Dataverse table. The documents will be stored securely in SharePoint.<\/p>\n\n\n\n

I prefer to store documents in SharePoint rather than Dataverse, as SharePoint is purpose-built for document management. Storing documents in Dataverse also consumes valuable storage.<\/p>\n\n\n\n

The How<\/h1>\n\n\n\n

Dataverse Table Design<\/h2>\n\n\n\n

The table to be used for the document checklist will be as follows<\/p>\n\n\n\n

Document Name<\/th>Completed<\/th>SharePoint Link<\/th>Purchase Request ID<\/th>Purchase Type<\/th>Document Type<\/th><\/tr><\/thead>
String<\/td>Boolean<\/td>URL<\/td>Lookup<\/td>Choice<\/td>Choice<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \n
  • Document Name\n
      \n
    • String of the Document that will be created when the canvas app patches it to SharePoint<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • Completed\n
        \n
      • Boolean to mark if the document has been uploaded<\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • SharePoint Link\n
          \n
        • URL to SharePoint that will be created when the document has been uploaded<\/li>\n<\/ul>\n<\/li>\n\n\n\n
        • Purchase Request ID\n
            \n
          • The Lookup to the purchase request <\/li>\n<\/ul>\n<\/li>\n\n\n\n
          • Purchase Type\n
              \n
            • A choice of either Purchase Card or Contract. This will be decided upon the amount selected during the purchase request. < 1K Purchase Card, \u22651K Contract<\/li>\n<\/ul>\n<\/li>\n\n\n\n
            • Document Type\n\n\n\n\n\n\n
                \n
              • Each purchase type will require a certain set of documents. \n
                  \n
                • Purchase Card\n
                    \n
                  • Justification Document<\/li>\n\n\n\n
                  • Vendor Document<\/li>\n\n\n\n
                  • Quote<\/li>\n<\/ul>\n<\/li>\n\n\n\n
                  • Contract\n
                      \n
                    • Quote<\/li>\n\n\n\n
                    • Vendor Research<\/li>\n\n\n\n
                    • Company Contract Form<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

                      Creating Canvas App<\/h2>\n\n\n\n

                      There are two main ways to build and add a canvas app to a Model-Driven app: creating the canvas app and linking it to the MDA, or letting the Power Platform create it from the model-driven app. I find the latter to be more reliable, as it ensures the linkage is always correct.<\/p>\n\n\n\n

                        \n
                      1. From the form of the MDA select switch to classic. This will bring up the Dynamics 365 form builder experience. \n\n
                        \"\"\/<\/figure>\n\n\n\n
                        \"\"\/<\/figure>\n<\/li>\n\n\n\n
                      2. For this example I have placed the created on column below the timeline in the input form. To add a canvas app to the form it needs a place to \u201clive\u201d, by using this automated column we can ensure that it will always been shown on the screen. \n
                        \"\"\/<\/figure>\n<\/li>\n\n\n\n
                      3. Double click on the newly added column <\/li>\n\n\n\n
                      4. Deselect \u201cDisplay label on form\u201d. \n
                        \"\"\/<\/figure>\n<\/li>\n\n\n\n
                      5. Select Controls, then Add control\n
                        \"\"\/<\/figure>\n<\/li>\n\n\n\n
                      6. Select Canvas App, then add\n
                        \"\"\/<\/figure>\n<\/li>\n\n\n\n
                      7. Select Customize\n
                        \"\"\/<\/figure>\n<\/li>\n\n\n\n
                      8. This will start the auto build process for the app<\/li>\n\n\n\n
                      9. Immediately Save and Publish the app. The app is not ready, but this will ensure that it is created. \n
                        \"\"\/<\/figure>\n<\/li>\n\n\n\n
                      10. Close the Canvas App and go back to the Dynamics 365 Form Editor. Note that all the fields have been filled out for you. Press Ok. \n
                        \"\"\/<\/figure>\n<\/li>\n\n\n\n
                      11. Save, then Publish the Form\n
                        \"\"\/<\/figure>\n<\/li>\n\n\n\n
                      12. Close the Dynamics 365 form editor then refresh the form from the solution. The newly added part will now be shown at the bottom of the timeline. \n
                        \"\"\/<\/figure>\n<\/li>\n\n\n\n
                      13. You can return to this view at any point to see how the canvas app will look. <\/li>\n<\/ol>\n\n\n\n

                        Editing the Canvas App<\/h2>\n\n\n\n

                        The newly created canvas app will now be within the solution. <\/p>\n\n\n\n

                        \"\"\/<\/figure>\n<\/li>\n<\/ul>\n\n\n\n

                        But in its current form it is not able to do much. The next steps will be to shape the app to fit within the form and to connect it to the Newly created documents table from above. <\/p>\n\n\n\n

                          \n
                        1. The first step will be to edit the overall size of the app so that it will fit withn the form. <\/li>\n\n\n\n
                        2. Select Settings, then display\n
                          \"\"\/<\/figure>\n<\/li>\n\n\n\n
                        3. Edit the Size so that it is 600x200 and in landscape mode. I have found that this size is best for a form. \n
                          \"\"\/<\/figure>\n<\/li>\n\n\n\n
                        4. Add a new screen<\/li>\n\n\n\n
                        5. Delete the auto created screen. This will give you a completely blank app<\/li>\n\n\n\n
                        6. Add in the Documents Table\n
                          \"\"\/<\/figure>\n<\/li>\n\n\n\n
                        7. Add two containers one for the Header and one for the gallery\n
                          \"\"\/<\/figure>\n<\/li>\n\n\n\n
                        8. In the Gallery add two labels, one for the type and one for the document name<\/li>\n\n\n\n
                        9. Filter the gallery using the customer request lookup and the ModelDrivenFormIntergration. This filter will ensure that only documents associated with the request will be shown. \n\n\n
                          \"\"\/<\/figure>\n\n\n\n

                          \ud83d\udca1 The ModelDrivenFormIntegration was automatically added when we added the canvas via the form. <\/p>\n\n\n\n

                          Filter(\n    'Purchase Request Documents',\n    'Customer Requests'.'Customer Requests' = [@ModelDrivenFormIntegration].Item.'Customer Requests'\n)<\/code><\/pre>\n<\/li>\n\n\n\n
                        10. In the header container add a label for the header\n
                          \"\"\/<\/figure>\n<\/li>\n\n\n\n
                        11. Because there is no data in the database, nothing will be displayed on the screen. <\/li>\n\n\n\n
                        12. The next step will be to add the attachment upload. The best way to do this is to \u201csteal\u201d an attachment control from a SharePoint Lists form. I am using a temporary list that I have in my Teams space that I keep for this scenario.  \n
                          \"\"\/<\/figure>\n\n\n\n
                          \"\"\/<\/figure>\n<\/li>\n\n\n\n
                        13. Copy and paste the control to the container, then remove any errors that come up. \n
                          \"\"\/<\/figure>\n<\/li>\n\n\n\n
                        14. Then cut and paste the control to the gallery. By putting the control within the gallery we can upload individual documents to SharePoint and ensure they are named correctly. \n
                          \"\"\/<\/figure>\n<\/li>\n\n\n\n
                        15. Change the attachment control to only allow one attachment \n
                          \"\"\/<\/figure>\n<\/li>\n<\/ol>\n\n\n\n
                          In the next guide we will go over how to create the checklist when a new item is created in the MDA. <\/p>\n","protected":false},"excerpt":{"rendered":"
                          2\/19\/2023 The Why Adding a canvas app to a model driven app can give users a more interactive and engaging experience. Canvas apps provide an intuitive way to interact with data and are customizable to suit the specific needs of the user. With the combination of model driven app data and the creativity of canvas […]<\/p>\n","protected":false},"author":1,"featured_media":136,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,6],"tags":[18,31,4],"class_list":["post-552","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-canvas-app","category-model-driven-app","tag-canvas-app","tag-forms","tag-mda","entry","has-media"],"jetpack_featured_media_url":"https:\/\/automatethemundane.com\/wp-content\/uploads\/2023\/05\/cover-10-scaled.jpg","_links":{"self":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts\/552","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/comments?post=552"}],"version-history":[{"count":2,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts\/552\/revisions"}],"predecessor-version":[{"id":566,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/posts\/552\/revisions\/566"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/media\/136"}],"wp:attachment":[{"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/media?parent=552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/categories?post=552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/automatethemundane.com\/index.php\/wp-json\/wp\/v2\/tags?post=552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}