Integrating with the Windows 8 environment - Build Windows 8 Apps with HTML5 and JavaScript - page 221

Sharing data as HTML
Sharing data as HTML is only a bit more complicated. The most intriguing part is how you format the
HTML. You can create the HTML string programmatically by concatenating text and HTML elements
or you can write the HTML directly in the HTML page and read it from there. If you do so, the benefit
is that your code is cleaner and the HTML structure can be understood more easily and modified
quickly. In addition, you can use any visual editor to edit it.
You open default.html and add the following markup at the bottom of the file just before the
closing tag of the BODY element:
<div id="shareHtml" style="display:none;">
<img style="float:left;" src="ms-appx:///images/todolist-icon.png" alt="" />
<div style="padding:3px;background:#999;color:#fff">DESCRIPTION:</div>
<div><span data-win-bind="innerText: description" /></div>
<div style="padding:3px;background:#999;color:#fff">DUE DATE:</div>
<div><span data-win-bind="innerText: dueDate TodoList.dateForDisplay" /></div>
<div style="padding:3px;background:#999;color:#fff">PRIORITY:</div>
<div><span data-win-bind="innerText: priority" /></div>
<div style="padding:3px;background:#999;color:#fff">STATUS:</div>
<div><span data-win-bind="innerText: status" /></div>
<div style="padding:3px;background:#999;color:#fff">COMPLETED:</div>
<div><span data-win-bind="innerText: percCompleted" /></div>
</div>
This is the layout of the HTML the application will be sharing. The HTML layout is populated with
task data via data binding—this is the same approach we used earlier for the task summary. Note also
that you don't want this piece of HTML to show up in the page. For this reason, it is essential that you
explicitly set the display CSS attribute on the root element to none. This ensures the HTML block will
stay invisible.
Now add the following function to the bottom of the todolist.js file:
TodoList.shareDataAsHtml = function (e, task) {
var request = e.request;
request.data.properties.title = "TO DO";
request.data.properties.description = task.description;
// Load the HTML layout and run data binding
var elem = document.getElementById("shareHtml");
WinJS.Binding.processAll(elem, task);
var rawHtml = elem.innerHTML;
// Make the raw HTML compliant with Windows 8 requirements
var html = Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.
createHtmlFormat(rawHtml);
request.data.setHtmlFormat(html);