One of our customers, the Isala hospital in Zwolle, publishes information about the hospital’s various departments and treatments on her website by means of digital brochures. Together with Isala we developed a Windows Store app centered on these brochures to easily disclose the information available here to a broader audience. In this blog I will discuss a few of the technical challenges we encountered during this development. This app is a real-life implementation of the example my colleague Waldek has published earlier.
Preparing the site
The first step for building any app supporting a public site is preparing the site to be a data source external applications. Since www.isala.nl is already a public facing website, a lot of the work had already been done. Many of the tweaks and settings for configuring a site for public access can be found in Waldek’s WCM tip blog series. Since we’re leveraging search to retrieve the content for this app, the most important step in site configuration was allowing anonymous search.Taxonomy values
As functional as taxonomy is for end-users, it’s often a headache for developers. Since there is no support for taxonomy outside of SharePoint, we had to write our own code to parse the values from the taxonomy. The example uses the following regular expression for this:
\|([^;|]+);GTSetWaldek’s example only returns the first hit, which is fine for single value fields. Since we require fields with multiple values, we rewrote the method to return all hits as an array (the regex remains the same).
Registering visits
Whenever a visitor on the website clicks on one of the brochures, SharePoint registers this keep track of popular items and match it to a search query to improve the accuracy of the search index. Naturally, we’d like this metadata to be registered when people use the app as well. Luckily the REST API supports by calling /_api/events/logevent as described in the blog post about building companion apps.
Invalid content
Most of the html page content on the Isala site is pretty clean, so we didn’t have to worry much about stripping elements or patching inline styles (copy-pasted from Word). However, there was specific element which caused us problems: embedded YouTube clips. The html code YouTube provides to embedding clips into a page is simply an iframe. Since iframes are not allowed in html content of Windows Store app pages, these are automatically stripped from the content. The solution was to parse the url of the clip from the html content and manually inject a webview element where the iframe should be and generating some script to navigate the webview to the clip.
The support for YouTube clips is also the main reason for targeting the app to the Windows 8.1 api, since the webview was introduced in this version.
Offline content
One of the key features of the app is the option to store folders offline. This allows users to view selected folders at any time, even when a connection the internet is not available. This created two challenges. First, we needed to implemented a mechanism to make sure local folders are updated whenever the online version is. Second, the content consists of more than just html code. On a website, you can just add link to an image, but in an offline scenario all the relevant related resources will need to stored locally as well. In practice this meant downloading all the images and rewriting the html to use local paths. YouTube clips can’t really be stored locally, so those are replaced in the content by placeholders in the offline scenario.
Using the charms bar for navigation
It’s a common practice to place the help page on the Windows charm bar. In many apps however, clicking the help link on the charm bar opens a browser window to view content on a web page. In the Isala app, we required the help content to be part of the app. This in itself is not a problem, but the charm bar is not intended for this kind of navigation. We can simply add a page to the charm bar and perform the navigation from there using
WinJS.Navigation.navigation("/pages/help/help.html");
This works fine, except that the charm bar remains open. There seems to be no way to close the charm, despite the api offering a hide method. Several sources on the internet mention calling window.focus() or emulating a click event as a work around, but none of these seem to work. What did the trick for me was hiding the html element containing the charm bar.
var flyOut = document.getElementsByClassName("win-settingsflyout");
if (flyOut.length > 0) {
var element = flyOut[0];
element.parentNode.style.display = "none";
}
The Isala folders app is available in the Windows Store for Windows 8.1 (in Dutch only). Comments and feedback are welcome at info@mavention.nl.
