{"id":429,"date":"2023-08-11T08:00:46","date_gmt":"2023-08-11T15:00:46","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/powerplatform\/?p=429"},"modified":"2023-08-11T13:34:52","modified_gmt":"2023-08-11T20:34:52","slug":"power-platform-as-connected-service-for-visual-studio-is-generally-available","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/powerplatform\/power-platform-as-connected-service-for-visual-studio-is-generally-available\/","title":{"rendered":"Power Platform as Connected Service for Visual Studio is Generally Available"},"content":{"rendered":"<p>Good day developers!<\/p>\n<p>During Microsoft Build 2023 <a href=\"https:\/\/build.microsoft.com\/en-US\/sessions\/a2154a8a-57fe-4717-af9a-bea7ec2b5e94\">we announced<\/a> the capability of creating Custom Connectors from within Visual Studio to quickly build a front-end for your API using Microsoft Power Apps.<\/p>\n<p><strong>I&#8217;m thrilled to announce this capability is now <a href=\"https:\/\/learn.microsoft.com\/visualstudio\/releases\/2022\/release-notes#power-platform-connected-services\">generally available in Visual Studio 2022 17.7.<\/a><\/strong><\/p>\n<p>I will take this opportunity to show how you can combine Visual Studio and <a href=\"https:\/\/learn.microsoft.com\/power-platform\/developer\/cli\/introduction\">Power Platform CLI<\/a> to build a sample Power App from your API.<\/p>\n<h2>Start from your ASP.NET Core Web API Project in Visual Studio 2022 17.7<\/h2>\n<p>You can use <a href=\"https:\/\/github.com\/marcelbf\/CitiesDemo\">this sample API<\/a>.<\/p>\n<p>If you prefer to create your own project, be sure to:<\/p>\n<ul>\n<li>Use an ASP.NET Core Web API project type<\/li>\n<li>Uncheck the option &#8220;use controller&#8221; (let&#8217;s use a minimal API to keep it simple).<\/li>\n<\/ul>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/VSProject.png\"><img decoding=\"async\" src=\"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/VSProject.png\" alt=\"Image VSProject\" width=\"890\" height=\"625\" class=\"aligncenter size-full wp-image-480\" srcset=\"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/VSProject.png 890w, https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/VSProject-300x211.png 300w, https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/VSProject-768x539.png 768w\" sizes=\"(max-width: 890px) 100vw, 890px\" \/><\/a><\/p>\n<ul>\n<li>Add the following operation in your program.cs file:<\/li>\n<\/ul>\n<pre><code class=\"html\">\napp.MapGet(\"\/countries\", () =>\n{\n    return new List&lt;string> {\n        \"USA\",\n        \"Canada\", \n        \"Brazil\", \n        \"Netherlands\", \n        \"Malta\", \n        \"New Zealand\", \n        \"Germany\", \n        \"France\" \n    };\n})\n.WithName(\"GetCountries\")\n.WithOpenApi();<\/code><\/pre>\n<p>This operation will return an arbitrary list of countries.<\/p>\n<h2>Add Power Platform as a connected service<\/h2>\n<ul>\n<li>In your project, right click the connected services node<\/li>\n<li>select add<\/li>\n<li>select Microsoft Power Platform <\/li>\n<\/ul>\n<p><div style=\"width: 1920px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-429-1\" width=\"1920\" height=\"1080\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/AddConnectedServices.mp4?_=1\" \/><a href=\"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/AddConnectedServices.mp4\">https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/AddConnectedServices.mp4<\/a><\/video><\/div><\/p>\n<p>In the &#8220;Connect to Microsoft Power Platform&#8221; window, be sure to use same account of your Power Platform environment. You can create a free <a href=\"https:\/\/learn.microsoft.com\/power-platform\/developer\/create-developer-environment\">developer environment<\/a> if you don&#8217;t have one.<\/p>\n<p>Fill all the relevant fields and select finish. Visual Studio will then create the Custom Connector in the selected environment and in the selected Solution.<\/p>\n<p><div style=\"width: 1920px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-429-2\" width=\"1920\" height=\"1080\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/CreateConnector.mp4?_=2\" \/><a href=\"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/CreateConnector.mp4\">https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/CreateConnector.mp4<\/a><\/video><\/div><\/p>\n<h2>Run your API<\/h2>\n<p>During the inner loop you are running your API in your local environment. This feature will leverage <a href=\"https:\/\/learn.microsoft.com\/en-us\/aspnet\/core\/test\/dev-tunnels?view=aspnetcore-7.0\">dev tunnels<\/a> to connect your API to Power Platform.<\/p>\n<p>With your API running you can now create a Power App.<\/p>\n<p><div style=\"width: 1920px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-429-3\" width=\"1920\" height=\"1080\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/RunAPI.mp4?_=3\" \/><a href=\"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/RunAPI.mp4\">https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/RunAPI.mp4<\/a><\/video><\/div><\/p>\n<p>Let&#8217;s go one step ahead and use <a href=\"https:\/\/learn.microsoft.com\/power-platform\/developer\/cli\/introduction#install-using-power-platform-tools-for-visual-studio-code\">Power Platform tools for Visual Studio Code<\/a> to create a sample application from your API.<\/p>\n<h2>Create a sample App from the API<\/h2>\n<p>Open your <a href=\"https:\/\/learn.microsoft.com\/power-platform\/developer\/cli\/introduction#install-using-power-platform-tools-for-visual-studio-code\">Visual Studio Code with Power Platform tools<\/a> installed. <a href=\"https:\/\/learn.microsoft.com\/power-platform\/developer\/cli\/reference\/auth#pac-auth-create\">Create a new authentication<\/a> for your user.<\/p>\n<p>Let&#8217;s now use <a href=\"https:\/\/learn.microsoft.com\/power-platform\/developer\/cli\/introduction\">Power Platform CLI<\/a> to list the custom connector we have created and get its id.<\/p>\n<pre><code class=\"html\">\npac connector list\n<\/code><\/pre>\n<p>Then, let&#8217;s use the command <a href=\"https:\/\/learn.microsoft.com\/power-platform\/developer\/cli\/reference\/canvas#pac-canvas-create\">pac canvas create<\/a>. This command will generate a canvas app (*.msapp file), based on the operations of your API. This will kickstart the development of your app!<\/p>\n<pre><code class=\"html\">\npac canvas create --connector-id [your connector id] --msapp [your file name.msapp]\n<\/code><\/pre>\n<p><div style=\"width: 1920px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-429-4\" width=\"1920\" height=\"1080\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/AppFromAPIVSCode.mp4?_=4\" \/><a href=\"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/AppFromAPIVSCode.mp4\">https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/AppFromAPIVSCode.mp4<\/a><\/video><\/div><\/p>\n<p>Now you can open Power Apps Studio and open your .msapp file. Before running, add the created custom connector to your application.<\/p>\n<p>You can use this sample application to learn how to use Power Fx to call your API.<\/p>\n<blockquote>\n<p>Remember to keep your API running while building your Power App.<\/p>\n<\/blockquote>\n<p><div style=\"width: 1280px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-429-5\" width=\"1280\" height=\"720\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/AppFromAPIPowerAppsStudio720.mp4?_=5\" \/><a href=\"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/AppFromAPIPowerAppsStudio720.mp4\">https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/AppFromAPIPowerAppsStudio720.mp4<\/a><\/video><\/div><\/p>\n<p>And because you are using dev tunnels, you can iterate on your API in real-time, including debugging and hot reload!<\/p>\n<p><div style=\"width: 1920px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-429-6\" width=\"1920\" height=\"1080\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/Hot-Reload.mp4?_=6\" \/><a href=\"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/Hot-Reload.mp4\">https:\/\/devblogs.microsoft.com\/powerplatform\/wp-content\/uploads\/sites\/79\/2023\/08\/Hot-Reload.mp4<\/a><\/video><\/div><\/p>\n<h2>What&#8217;s next?<\/h2>\n<p>Once you have your API published remember to update or create a new Custom Connector.<\/p>\n<p>You can use this feature to provide a great new mobile experience of your legacy APIs. Check <a href=\"https:\/\/github.com\/marcelbf\/InventAPI\">this repository<\/a> with a sample of this scenario.<\/p>\n<p>Check also the video I recorded with Daniel about this feature.<\/p>\n<p><iframe title=\"Create a Custom Connector for your Web API from within Visual Studio\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/2TxdVIZvFXo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>If you have questions or feedback, join the discussion in <a href=\"https:\/\/github.com\/microsoft\/powerplatform-build-tools\/discussions\">our GitHub<\/a>.<\/p>\n<p>Happy coding =)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Good day developers! During Microsoft Build 2023 we announced the capability of creating Custom Connectors from within Visual Studio to quickly build a front-end for your API using Microsoft Power Apps. I&#8217;m thrilled to announce this capability is now generally available in Visual Studio 2022 17.7. I will take this opportunity to show how you [&hellip;]<\/p>\n","protected":false},"author":125432,"featured_media":490,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[38,34,2,11,28,37],"class_list":["post-429","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-powerplatform","tag-api","tag-custom-connector","tag-powerapps","tag-cli","tag-power-platform-developer","tag-visual-studio"],"acf":[],"blog_post_summary":"<p>Good day developers! During Microsoft Build 2023 we announced the capability of creating Custom Connectors from within Visual Studio to quickly build a front-end for your API using Microsoft Power Apps. I&#8217;m thrilled to announce this capability is now generally available in Visual Studio 2022 17.7. I will take this opportunity to show how you [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-json\/wp\/v2\/posts\/429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-json\/wp\/v2\/users\/125432"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-json\/wp\/v2\/comments?post=429"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-json\/wp\/v2\/posts\/429\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-json\/wp\/v2\/media\/490"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-json\/wp\/v2\/media?parent=429"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-json\/wp\/v2\/categories?post=429"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/powerplatform\/wp-json\/wp\/v2\/tags?post=429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}