{"id":1029,"date":"2019-01-14T18:44:17","date_gmt":"2019-01-14T18:44:17","guid":{"rendered":"http:\/\/www.netexl.com\/blog\/?p=1029"},"modified":"2019-01-14T19:41:16","modified_gmt":"2019-01-14T19:41:16","slug":"open-share-dialog-from-universal-windows-javascript-app-uwp","status":"publish","type":"post","link":"https:\/\/www.netexl.com\/blog\/open-share-dialog-from-universal-windows-javascript-app-uwp\/","title":{"rendered":"Open Share Dialog from Universal Windows Javascript App (UWP)"},"content":{"rendered":"<p>Opening Share Dialog Popup in Windows Universal App is very simple and with a few lines of code, this functionality can be quickly added to any app.<\/p>\n<p>The code below can be used to share an app&#8217;s web URL (you can use MS Store URL of the app as well) in UWP Javascript application<\/p>\n<pre class=\"lang:default decode:true\">var page = WinJS.UI.Pages.define(\"\/index.html\", {\r\n    ready: function (element, options) {\r\n\r\n        var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();\r\n        dataTransferManager.addEventListener(\"datarequested\", dataRequested);\r\n\r\n    },\r\n    unload: function () {\r\n        var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();\r\n        dataTransferManager.removeEventListener(\"datarequested\", dataRequested);\r\n    }\r\n\r\n});\r\n\r\nfunction dataRequested(e) {\r\n    var request = e.request;\r\n    var storeID = 'xxxxxxxxxxxx';\r\n    request.data.properties.title = \"Your title\";\r\n    request.data.properties.description = \"App description\";\r\n    request.data.setWebLink(new Windows.Foundation.Uri(\"https:\/\/www.microsoft.com\/store\/apps\/\" + storeID));\r\n}\r\n\r\nfunction showShareUI() {\r\n    Windows.ApplicationModel.DataTransfer.DataTransferManager.showShareUI();\r\n}<\/pre>\n<p>In\u00a0the application page ready event we need to initialize DataTransferManager and attach an event listener for &#8220;datarequested&#8221;. In that method you can set title, display, web link properties which will be used by the dialog popup. Store ID of the app can be found from &#8220;App Management -&gt; App Identity&#8221; page of the specific app in your developer account. In order to launch Share Dialog Popup simply call &#8220;showShareUI&#8221; method\u00a0on some action (such as some button click etc). This will open dialog box as following<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1031\" src=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2019\/01\/UWP_Share_Dialog.png\" alt=\"UWP App Share Dialog\" width=\"344\" height=\"600\" srcset=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2019\/01\/UWP_Share_Dialog.png 344w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2019\/01\/UWP_Share_Dialog-172x300.png 172w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2019\/01\/UWP_Share_Dialog-161x280.png 161w\" sizes=\"auto, (max-width: 344px) 100vw, 344px\" \/><\/p>\n<p>Share Dialog Popup displays the title and description at the top. When you select an app from the dialog and open it, web link (which was set in the dataRequested event) is copied in\u00a0the selected target app.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Opening Share Dialog Popup in Windows Universal App is very simple and with a few lines of code, this functionality can be quickly added to any app. The code below can be used to share an app&#8217;s web URL (you can use MS Store URL of the app as well) in UWP Javascript application var page = WinJS.UI.Pages.define(&#8220;\/index.html&#8221;, { ready: function (element, options) { var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView(); dataTransferManager.addEventListener(&#8220;datarequested&#8221;, dataRequested); }, unload: function () { var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView(); dataTransferManager.removeEventListener(&#8220;datarequested&#8221;, dataRequested); } }); function dataRequested(e) { var request = e.request; var storeID = &#8216;xxxxxxxxxxxx&#8217;; request.data.properties.title = &#8220;Your title&#8221;; request.data.properties.description = &#8220;App description&#8221;; request.data.setWebLink(new Windows.Foundation.Uri(&#8220;https:\/\/www.microsoft.com\/store\/apps\/&#8221; + storeID)); } function showShareUI() { Windows.ApplicationModel.DataTransfer.DataTransferManager.showShareUI(); } In\u00a0the application page ready event we need to initialize DataTransferManager and attach an event listener for &#8220;datarequested&#8221;. In that method you can set title, display, web link properties which will be used by the dialog popup. Store ID[&#8230;]<\/p>\n","protected":false},"author":5,"featured_media":746,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,3,24,21],"tags":[],"class_list":["post-1029","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-html5","category-javascript","category-windows-store-app"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/1029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/comments?post=1029"}],"version-history":[{"count":4,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/1029\/revisions"}],"predecessor-version":[{"id":1037,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/1029\/revisions\/1037"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media\/746"}],"wp:attachment":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media?parent=1029"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/categories?post=1029"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/tags?post=1029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}