Asked by:
Pinning Tiles to the Start Screen using SplitView Template

Question
-
I am having problems pulling the correct chapter and book info for the pinned tile. It always pins the first chapter of the first book. This code works for the gridView template but not the splitView. I have the same problem with sharing contact to email applications as well. Please assist!
(function () {
"use strict";
var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
var binding = WinJS.Binding;
var utils = WinJS.Utilities;
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
var nav = WinJS.Navigation;
var item;
var ui = WinJS.UI;
var start = Windows.UI.StartScreen;
var dtm = Windows.ApplicationModel.DataTransfer.DataTransferManager;
WinJS.UI.Pages.define("/pages/splitPage/splitPage.html", {
/// <field type="WinJS.Binding.List" />
_items: null,
_group: null,
_itemSelectionIndex: -1,
currentIndex: 1,
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
var listView = element.querySelector(".itemlist").winControl;
// Store information about the group and selection that this page will
// display.
this._group = (options && options.groupKey) ? Data.resolveGroupReference(options.groupKey) : Data.groups.getAt(0);
this._items = Data.getItemsFromGroup(this._group);
this._itemSelectionIndex = (options && "selectedIndex" in options) ? options.selectedIndex : -1;
// Set up the ListView.
listView.itemDataSource = this._items.dataSource;
listView.itemTemplate = element.querySelector(".itemtemplate");
listView.onselectionchanged = this._selectionChanged.bind(this);
listView.layout = new ui.ListLayout();
item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);
element.querySelector(".item-descript").innerHTML = this._group.description;
element.querySelector("article .article-content").innerHTML = item.content;
element.querySelector("header[role=banner] .pagetitle").textContent = this._group.title;
element.querySelector(".title").textContent = this._group.title;
element.querySelector(".short").textContent = this._group.short;
document.getElementById("pinTile").addEventListener("click", pinCustomSecondaryTile, false);
document.getElementById("shareText").addEventListener("click", shareButtonHandler, false);
dtm.getForCurrentView().addEventListener("datarequested", this.onDataRequested);
this._updateVisibility();
if (this._isSingleColumn()) {
if (this._itemSelectionIndex >= 0) {
// For single-column detail view, load the article.
binding.processAll(element.querySelector(".articlesection"), this._items.getAt(this._itemSelectionIndex));
}
} else {
if (nav.canGoBack && nav.history.backStack[nav.history.backStack.length - 1].location === "/pages/splitPage/splitPage.html") {
// Clean up the backstack to handle a user snapping, navigating
// away, unsnapping, and then returning to this page.
nav.history.backStack.pop();
}
// If this page has a selectionIndex, make that selection
// appear in the ListView.
listView.selection.set(Math.max(this._itemSelectionIndex, 0));
}
},
// This function updates the page layout in response to viewState changes.
updateLayout: function (element, viewState, lastViewState) {
/// <param name="element" domElement="true" />
var listView = element.querySelector(".itemlist").winControl;
var firstVisible = listView.indexOfFirstVisible;
this._updateVisibility();
var handler = function (e) {
listView.removeEventListener("contentanimating", handler, false);
e.preventDefault();
}
if (this._isSingleColumn()) {
listView.selection.clear();
if (this._itemSelectionIndex >= 0) {
// If the app has snapped into a single-column detail view,
// add the single-column list view to the backstack.
nav.history.current.state = {
groupKey: this._group.key,
selectedIndex: this._itemSelectionIndex
};
nav.history.backStack.push({
location: "/pages/splitPage/splitPage.html",
state: { groupKey: this._group.key }
});
element.querySelector(".articlesection").focus();
} else {
listView.addEventListener("contentanimating", handler, false);
if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
listView.indexOfFirstVisible = firstVisible;
}
listView.forceLayout();
}
} else {
// If the app has unsnapped into the two-column view, remove any
if (nav.canGoBack && nav.history.backStack[nav.history.backStack.length - 1].location === "/pages/splitPage/splitPage.html") {
nav.history.backStack.pop();
}
if (viewState !== lastViewState) {
listView.addEventListener("contentanimating", handler, false);
if (firstVisible >= 0 && listView.itemDataSource.list.length > 0) {
listView.indexOfFirstVisible = firstVisible;
}
listView.forceLayout();
}
listView.selection.set(this._itemSelectionIndex >= 0 ? this._itemSelectionIndex : Math.max(firstVisible, 0));
}
},
// This function checks if the list and details columns should be displayed
// on separate pages instead of side-by-side.
_isSingleColumn: function () {
var viewState = Windows.UI.ViewManagement.ApplicationView.value;
},
_selectionChanged: function (args) {
var listView = document.body.querySelector(".itemlist").winControl;
var details;
// By default, the selection is restriced to a single item.
listView.selection.getItems().done(function updateDetails(items) {
if (items.length > 0) {
this._itemSelectionIndex = items[0].index;
if (this._isSingleColumn()) {
// If snapped or portrait, navigate to a new page containing the
// selected item's details.
details = document.querySelector(".articlesection");
binding.processAll(details, items[0].data);
details.scrollTop = 0;
} else {
// If fullscreen or filled, update the details column with new data.details = document.querySelector(".articlesection");
binding.processAll(details, items[0].data);
details.scrollTop = 0;
}
}
}.bind(this));
},
// This function toggles visibility of the two columns based on the current
// view state and item selection.
_updateVisibility: function () {
var oldPrimary = document.querySelector(".primarycolumn");
if (oldPrimary) {
utils.removeClass(oldPrimary, "primarycolumn");
}
if (this._isSingleColumn()) {
if (this._itemSelectionIndex >= 0) {
utils.addClass(document.querySelector(".articlesection"), "primarycolumn");
document.querySelector(".articlesection").focus();
} else {
utils.addClass(document.querySelector(".itemlistsection"), "primarycolumn");
document.querySelector(".itemlist").focus();
}
} else {
document.querySelector(".itemlist").focus();
}
},
onDataRequested: function (e) {
var request = e.request;
request.data.properties.title = item.group.title + " (sent from Windows 8)";
request.data.properties.description = "Chapter " + item.title;
var chapText = item.content;
// var bookDescript = item.group.description;
var chapName = "Chapter " + item.title;
var space = '<br><br>';
var htmlFormat = Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.createHtmlFormat(chapName + space + chapText);
request.data.setHtmlFormat(htmlFormat);
}
});
function shareButtonHandler() {
Windows.ApplicationModel.DataTransfer.DataTransferManager.showShareUI();
}
function pinCustomSecondaryTile() {
var tileId = "customTile" + new Date().getTime();
var uriLogo = new Windows.Foundation.Uri(item.backgroundImage);
var uriSmallLogo = new Windows.Foundation.Uri("ms-appx:///images/pinned.jpg");
var tileName = "Chapter " + item.title + " of my Book";
var tile = new Windows.UI.StartScreen.SecondaryTile(
tileId,
item.group.description,
tileName,
JSON.stringify(Data.getItemReference(item)),
Windows.UI.StartScreen.TileOptions.showNameOnLogo,
uriLogo);
tile.foregroundText = Windows.UI.StartScreen.ForegroundText.dark;
tile.smallLogo = uriSmallLogo;
var selectionRect = document.getElementById("pinTile").getBoundingClientRect();
tile.requestCreateForSelectionAsync({ x: selectionRect.left, y: selectionRect.top, width: selectionRect.width, height: selectionRect.height }, Windows.UI.Popups.Placement.below).done(function (isCreated) {
});
}
})();- Edited by jflintstone81 Wednesday, January 22, 2014 3:09 PM Bolded Section of Importance
Wednesday, January 22, 2014 3:07 PM
All replies
-
You will need to debug this and see what is passed when the application is activated. My best guess is the Navigation logic is what is messing you up here.
Jeff Sanders (MSFT)
@jsandersrocks - Windows Store Developer Solutions @WSDevSol
Getting Started With Windows Azure Mobile Services development? Click here
Getting Started With Windows Phone or Store app development? Click here
My Team Blog: Windows Store & Phone Developer Solutions
My Blog: Http Client Protocol Issues (and other fun stuff I support)- Proposed as answer by Jeff SandersMicrosoft employee, Moderator Thursday, January 23, 2014 1:15 PM
Thursday, January 23, 2014 1:15 PMModerator -
I think its a problem with binding the data. Other functions I try to add behave similarly. Any resources and app examples for binding using the SplitView template?Thursday, January 23, 2014 5:19 PM