Share Text in between Windows 8 Metro Application using Share Contract

Two Metro applications can shared the content between them using Share Charm. Content can be as simple as text or may be image or a file. In content sharing, the application that shares content is called as Source Application and the application that receives content is called as Target Application. Source Application and Target Application need to declare the type of content; they are intent to share in a Declaration.

Declaration can be configured in the package.appmanifest file. Click on package.appmanifest file and then select Declaration tab. From the Available Declarations drop down select Share target and check SupportedAnyFile Type in Supported File Types. See the image below.

image

Source Application

After configuring the declaration we need to write the code to share relevant text. Let us put a button and click event of that button we will share the text.

image

In code behind attach click event to button and call bellow function

image

Function to share text is as following. User can share the text from the Share Charm. Note that in the code below, we have explicitly displayed the Share charm by calling function showShareUI.


function ShowandShareContract() {

Windows.ApplicationModel.DataTransfer.DataTransferManager.showShareUI();
 var dataTransferManager = Windows.ApplicationModel.DataTransfer.DataTransferManager.getForCurrentView();
 dataTransferManager.addEventListener("datarequested", function (e) {
 var request = e.request;
 request.data.properties.title = "Debugmode";
 request.data.properties.description = "Debugmode Share App";
 request.data.setText("Hello from DebugMode App");
 });
 }

The actual data sharing happens in the datarequested event handler. We are sharing the text “Hello from DebugMode App “

Target Application

Now let us create an application, which can consume the shared text. An application can be launched in multiple ways; we need to first check whether the application was launched as Share Target or not before accepting any data.

image

We also need to check whether shared operation is containing text or not. That can be check as following

image

Below is the code required to read the text shared and display in an output div.

 if (args.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.shareTarget) {

 var shareOperation = args.detail.shareOperation;
 if (shareOperation.data.contains(Windows.ApplicationModel.DataTransfer.StandardDataFormats.text)) {
 var SharedText = " Title : " + shareOperation.data.properties.title;
 SharedText = SharedText + " Description : " + shareOperation.data.properties.description;
 document.getElementById("outputDiv").innerText = SharedText;

 }

}

In this way text can be shared between source application and target application using shared contracts. When you run the source application, you will get a ShareContent button. On clicking of the button Share Charm will get displayed. You will get list of all applications can act as Target Application. For example Mail application can also act as Target Application.

image

Let us choose target application we created. Click on ShareContreactTarget application. You can see two applications can run side by side and text from source application is displayed in output div of target application.

image

In this way we can share Text between two metro applications. I hope you find this post useful. Thanks for reading.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at WordPress.com