{"id":32140,"date":"2022-07-15T16:35:20","date_gmt":"2022-07-15T11:05:20","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=32140"},"modified":"2022-07-15T16:35:20","modified_gmt":"2022-07-15T11:05:20","slug":"deep-dive-into-the-creator-kit-for-canvas-apps","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2022\/07\/deep-dive-into-the-creator-kit-for-canvas-apps\/","title":{"rendered":"Deep Dive into the Creator Kit for Canvas Apps"},"content":{"rendered":"

Introduction<\/strong><\/h2>\n

Developers in today\u2019s generation are moving fast with their development and to further help them with their pace for designing custom components for Canvas Apps, Microsoft has introduced a kit that includes all the essential components. This kit is nothing but a managed solution named Creator Kit. Now, the developers will not be required to build each component and there is no need to worry about their nature as they are editable and can be made generic.<\/p>\n

How to Install<\/strong><\/p>\n

Firstly, you will need to download the solution from here<\/a> and install it in your CRM environment.<\/p>\n

Then navigate to make.powerapps.com<\/a> where you will find the solution and its components inside the solution.<\/p>\n

\"Canvas<\/p>\n

\"Canvas<\/p>\n

Sample App<\/strong><\/p>\n

In this solution, you will find three sample Canvas apps that shows how the components can be used to design the apps.
\n\"Canvas
\nLet us open one of the Canvas App i.e. Creator Kit Reference App. <\/strong>You will find a variety of components that have been used in the App.<\/p>\n

\"Canvas<\/p>\n

You will get the default preview of the components in the App, and you can also see the code for each one of the components by clicking on the {} Code <\/strong>button.
\n\"Canvas<\/p>\n

Create your own Canvas App<\/strong><\/p>\n

So now let us see how we can use the components included with the creator kit to design our own Canvas App.<\/p>\n

Below, we have created a simple Canvas app compatible with tablet devices.<\/p>\n

To add these pre-defined components navigate to your Canvas App -> click on Insert (+ Icon) and<\/p>\n

select \"Canvas\u00a0as shown in the below image:<\/p>\n

\"Canvas<\/p>\n

You will get a bunch of canvas components in Canvas section from the Power CAT Component Library. These components are available and included in the creator kit managed solution that we installed earlier. Let us select one component and import it in our App.<\/p>\n

Here, we are selecting the component named Header and after importing, you will find it in Library components.<\/p>\n

\"Canvas<\/p>\n

Now we need to drag and drop the header component from the Library components on your screen, and edit them from the properties.<\/p>\n

\"Canvas<\/p>\n

You can add Code Components<\/a> as well, these components are PCF components imported into your CRM that you may use and modify as per your requirement. However, to use them you will need to enable<\/a> the PowerApps Component Framework feature.<\/p>\n

To add these type of components, navigate to Code section and select the component you want.<\/p>\n

\"Canvas<\/p>\n

Just like that by adding multiple components, you can be more creative while designing your Canvas app and that too without writing a single line of code which eventually speeds up your process.<\/p>\n

Conclusion<\/strong><\/h2>\n

In this blog, we learned about the new Creator Kit and how it comes in handy for developing and building Canvas App.<\/p>\n

\"\"<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Introduction Developers in today\u2019s generation are moving fast with their development and to further help them with their pace for designing custom components for Canvas Apps, Microsoft has introduced a kit that includes all the essential components. This kit is nothing but a managed solution named Creator Kit. Now, the developers will not be required\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,18,19,2361],"tags":[1988],"class_list":["post-32140","post","type-post","status-publish","format-standard","hentry","category-canvas-apps","category-dynamics-365-v9-2","category-dynamics-crm","category-technical","tag-canvas-apps"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/32140","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=32140"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/32140\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=32140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=32140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=32140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}