The text used in the display name of the app. Used in several plavces such as Share Charm, Secondary Tiles etc.

"displayName": "WAT Docs",

This is the landing page for the app, usually a hub screen, does not have to be root of web site.

"homeURL": "http://wat-docs.azurewebsites.net",

Controls options on how users navigate around the app

  • hideOnPageBackButton This toggles visibility of the back button on the main canvas across the entire application (true/false)
  • hideBackButtonOnMatch This toggles visibility of the back button on specific pages. An array of objects, each of which is a url on which back button will be hidden. You can use {baseUrl} to signify the url defined in 'homeUrl'.
  • pageLoadingPartial This is the path to a HTML partial which is shown as a progress indicator as the app transitions between pages. Typically, the default file provided is suitable.
"navigation": {
    "hideOnPageBackButton": false,
    "hideBackButtonOnMatch": ["http://www.wat.com/privacy.htm","{baseURL}/contactus/"],
    "pageLoadingPartial": "/template/partials/page-loading.html"
}

Controls error handling functionality. Detailed information coming soon.

"errors": {
	"showAlertOnError": false,
	"alertMessage": "Sorry, but there was an error. It has been logged. Please contact us if the issue continues.",
	"redirectToErrorPage": false,
	"errorPageURL": "error-example.html"
},

Controls options on how the app logs events

  • enabled Toggles whether logging is one or off (true/false, default true)
  • level Logged messages below this level will NOT be logged. Useful for debugging when set to lower number/level. you can use either the integer index or the string level (default: 2; levels: 0="log", 1="perf", 2="info", 3="info", 4="warn", 5="error")
  • disableWithoutDebugger Set to true to turn off all logging if app is not running in Debug mode. Note: not recommended if using a file logger! (true/false, default: false)
  • hideTagDisplay Set to true to hide WinJS logging tags from the output (true/false, default: false)
  • ignoreTags An array of string tags that should be ignored from logging. Any logged message with a matching tag will be ignored (default: empty array)
  • logErrorsForIgnoredTags When set to true a logged message matching an ignored tag, but at the "error" level will still be logged (true/false, default: false)
  • disableConsoleLog Disables JavaScript console logging (useful if you want to log to a file, but not the console) (true/false, default: false)
  • fileLog Options for file logging (default: null)
  • enabled Whether or not logging to a local file is enabled (true/false, default: false)
  • level Logged messages below this level will NOT be logged. (see "level" above for details) (default: 2)
  • filename The name of the file to log to. Can contain a full path (make sure to escape slashes) to indicate sub directories. Files will be logged to the "localFolder" location for this app. Filenames support "rolling" by specifying a date, week, or month in the name. For example, "app_log_%m.log" will replace the "%m" with the year and month (YYYY-MM) in order to roll the log to a new file each month. Other options include %D for a specific day (YYYY-MM-DD) and %W for a week (YYYY-W) (default: "app_%W.log")
  • format The format of each log line. This can be formatted using special replacement characters: %D = Date in YYYY-MM-DD format; %f = Filename from originating function call; %L = Log level in (printed in uppercase); %l = Line number from originating file; %M = Log message; %T = Time in HH:ii:ss format; %t = Message tags. Note: you should at a minimum include the message (%M); you can also include new lines in your log with "\r\n" (default: "%D %T [%L] %M (%t)
  • maxLogFiles Allows the developer to specify how many log files to keep. This lets the developer keep disk usage under control. Use -1 to keep all log files (default: 8)
"logging": {
	"enabled": true,
	"level": "log",
	"disableWithoutDebugger": false,
	"hideTagDisplay": true,
	"ignoreTags": [
		"winjs"
	],
	"logErrorsForIgnoredTags": true,
	"overrideConsoleMethods": true,
	"disableConsoleLog": false,
	"fileLog": {
		"enabled": true,
		"level": "info",
		"filename": "logs\\wat-docs_%D.log",
		"format": "%L on Line %l of %f\r\n%D %T: %M (%t)",
		"maxLogFiles": 7
	}
},

This controls the use of the share charm within the application

  • enabled Toggles the share charm functionality on or off (true/false)
  • showButton Toggles visibility of a Share button on the app bar (true/false)
  • buttonText Text used for the Share app bar button if it is enabled
  • buttonSection This sets the sharebutton into a particular section of the app bar (if you have sections set up) the default is global http://msdn.microsoft.com/en-us/library/windows/apps/Hh700497.aspx
  • title Defines the title passed into the share charm
  • url Defines a url that is shared via the share contract. You can use {currentURL} to share the current URL of the webview.
  • screenshot Enables the sharing of a screenshot (true/false)
  • messageDefines a message for the share contract contents. You can use {currentURL} to reference the current url or {url} to reference the base url.
"share": {
	"enabled": true,
    "showButton": true,
    "buttonText": "Share",
    "buttonSection": "global",
	"title": "WAT Documentation",
	"url": "{currentURL}",
	"screenshot": true,
	"message": "{url} shared with {appLink} for Windows Phone and Windows 8 Store apps."
}, 

This controls the offline behaviour for the app

  • enabled Toggles the offline functionality on or off (true/false)
  • message A message that is displayed to the user when the app goes offline. This is only used if no rootUrl is defined
  • superCache Options for the super cache feature (default: null)
  • enabled Whether or not super cache is enabled (true/false, default: false)
  • baseDomainURL If your homeURL is not the base URL of your website, you must define that here, (i.e. http://www.microsoft.com , or http://wat-docs.azurewebsites.net)
  • addIndexedDBSupport IndexedDB is not natively supported in the webview, turn this on (true or false) to add indexedDB support just as it is in the browser
  • imagesGuardBand If some or all of your images are inlined (via css inline uri images), turn this to true (true or false), the support inlined images.
  • maxLogFiles An array of URls that are pre-cached. This means they are cached automatically without the user needing to visit them first
"offline": {
	"enabled": true,
	"message": "It looks like you are offline. Please reconnect to use this application.",
    "superCache": {
		"enabled": false,
        "baseDomainURL": "http://wat-docs.azurewebsites.net",
		"addIndexedDBSupport": false,
		"imagesGuardBand": true,
        "preCacheURLs": [
            "http://wat-docs.azurewebsites.net/GetStarted"
        ]
    }
}, 

true or false. Geolocations is not natively suppoted in the webview, turn this on to add native support just as it is in the browser. Don’t forget to also check the need for location services in the store app manifest.

"geoLocation": {
    "enabled": true
},

This should only be used if you are hosting web content within the main application package (i.e. it is bundled up as part of the APPX rather than being hosted on a server). By default, when hosting content in the local package, your content will not be able to make cross-site requests. By enabling this module, the Web App Template will pass control of any XHR requests to the container and make server calls on behalf of the local package. This prevents your cross-site requests from being blocked.

  • enabled Toggles the functionality on or off (true/false)
  • baseDomainURL This should be kept as “ms-appx-web:///” and may be removed in future
"localXHRInterceptor": {
    "enabled": false,
    "baseDomainURL": "ms-appx-web:///"
},

An array of custom script files stored within the app package that are injected into the DOM. Paths are relative to the root of the app package.

"customScript": {
	"scriptFiles": [
		"injection-script-example.js"
	]
},

This controls the application bar at the bottom of the screen.

  • enabled Toggles the app bar visibility (true/false)
  • makeSticky Toggles whether the app bar is always visible or not (true/false)
  • buttons An array of objects, each of which represent a button within the application bar. Each object has three parameters:
  • label the text for the button. Leave this blank to omit the text
  • icon the icon for the button. A list of available icons is at dev.windows.com. Leave this blank to omit the icon
  • action The action for the button. This defines either the url location that the button links to or it can be set to a eval to executes the javascript defined in the 'data' field
  • data Javascript that gets executed if the action is set to 'eval'
"appBar": {
    "enabled": false,    
    "makeSticky": false,
    "buttons": [
        {
            "label":"Help",
            "icon": "help",
            "action": "http://msdn.microsoft.com/help"
        },
        {
            "label":"Join",
            "icon": "contactpresence",
            "action": "http://msdn.microsoft.com/join"
        },
        {
            "label": "Log Message",
            "icon": "edit",
            "action": "eval",
            "data": "console.log('this was fired from within the webview:', window.location.href);"
        }
    ]
}

This controls the navigation bar at the top of the screen.

  • enabled Toggles the navigation bar visibility (true/false)
  • maxRows Sets the maximum number of rows that are used to display buttons before the nav bar starts paging
  • makeSticky Toggles whether the app bar is always visible or not (true/false)
  • buttons An array of objects, each of which represent a button within the navigation bar.Each object has three parameters:
  • label The text for the button. Leave this blank to omit the text
  • icon The icon for the button. A list of available icons is at dev.windows.com. Leave this blank to omit the icon
  • action The action for the button. This defines either the url location that the button links to or a special keyword. back Takes the app back to the most recent page. home Takes the app to the base url. nested Allows the inclusion of children node. eval Executes the javascript defined in the 'data' field
  • data Javascript that gets executed if the action is set to 'eval'
  • children An array of nodes that are shown beneath the parent node. Children nodes take the same format as parent nodes. Only used if the parent node's action is set to 'nested'.
"navBar": {
    "enabled": true,
    "maxRows": 2,
    "makeSticky": false,
    "buttons": [
        {
            "label": "Back",
            "icon": "back",
            "action": "back"
        },
        {
            "label": "home",
            "icon": "home",
            "action": "home"
        },
        {
        "label": "JSON Reference",
        "icon": "library",
        "action": "nested",
        "children": [
            {
                "label": "navbar",
                "icon": "link",
                "action": "http://wat-docs.azurewebsites.net/Json#navigationbar"
            },
            {
                "label": "appbar",
                "icon": "link",
                "action": "http://wat-docs.azurewebsites.net/Json#applicationbar"
            },
            {
                "label": "share",
                "icon": "link",
                "action": "http://wat-docs.azurewebsites.net/Json#share"
            }
        ]
        },
        {
            "label": "About WAT",
            "icon": "gotostart",
            "action": "http://wat-docs.azurewebsites.net/About"
        },
        {
            "label": "Getting Started",
            "icon": "play",
            "action": "http://wat-docs.azurewebsites.net/GetStarted"
        },
        {
            "label": "Support",
            "icon": "people",
            "action": "http://wat-docs.azurewebsites.net/Support"
        },
        {
            "label": "Log Message",
            "icon": "edit",
            "action": "eval",
            "data": "console.log('this was fired from within the webview:', window.location.href);"
        }
    ]
},

This controls the applications live tile notifications on the users start screen

  • enabled Toggles the live tile functionality (true/false)
  • periodicUpdate Number which defines how often the tile updates based on the PeriodicUpdateRecurrence enumeration. Valid values are 0, 1, 2, 3 or 4. 0 is most frequent (half an hour), 4 is the least frequent (daily)
  • enableQueue Toggles multiple live tile updates on or off. When set to true the live tile on the start screen will cycle through muliple tile updates either via the RSS feed or multple push notification updates. (true/false)
  • tilePollFeed The url for the RSS feed that will drive the live tile updates. This can be any RSS feed.
"livetile": {
    "enabled": true,
    "periodicUpdate": "1",
    "enableQueue": true,
    "tilePollFeed": "http://wat-docs.azurewebsites.net/feed"
}

This section controls how push notifications are configured currently provided by the Windows Azure Notification Hub service. Push notifications are great for sending your users updates when ever something happens on your web app back-end like a new item or topic has been added and it would be great to update the app livetile to reflect that new content or even send your users a toast message even when your app isn't running. Please see Getting Started with Notification Hubs to setup your own Windows Azure Notification Hub for your Web App. Please note you don't need to change any code in your Web App Template App for push notifications to work. So skip over the sections that refer to making changes to the Windows 8 client, that part is already done for you. You do have to make some small changes in your back-end Website to invoke the Windows Azure Notification Hub service to send push notificaitons to the users subscribed Windows 8 devices. For more see this section Send notification from your back-end or the REST interface

  • enabled Toggles the push notifications functionality (true/false)
  • azureNotificationHubA collection of properties which control how the app behaves with Windows Azure Notification Hub
  • enabled Toggles functionaly for the Windows Azure Push Notification Hub service to handle push notifications to your App. (true/false)
  • endpoint The url to your Windows Azure Service Bus namespace. You can get it from the Windows Azure Portal, go into on your service bus namespace, then Notification Hubs tab, go into your notification hub and click connection information button at the bottom. And press the copy button on the DefaultListenSharedAccessSignature and paste it somewhere temporarily. Eg. Endpoint=sb://your-wat-sbnamespace.servicebus.windows.net/;... Then copy the endpoint url not including sb:// and ; and paste into this member of the json config file after https:// to look like example below.
  • secret The shared access key for the Windows Azure Notification Hub. From that DefaultListenSharedAccessSignature you pasted somewhere temporarily Eg. ...;SharedAccessKey=bPQTTVcagkyDfsz3M+OIhwJNxP+Jy2pXDfmUomSUVa4= copy the key and paste into this member of the json config file to look like example below.
  • path The name you provided when creating the Notification Hub in the Windows Azure Portal.
  • tags An array of strings that allow your user of this App to turn on and off subscriptions to push notifications for multiple channels or categories you can determin that make sense for your app. The user simple opens the App settings flyout from the Settings Charm and then selects Notifications. That way when your back-end pushes notifications for a particular feature or topic the user can decide to filter them. Of course these strings have to be consistent between the subscriber (instance of this App) and push notification sender (your website/back-end).
"notifications": {
    "enabled": true,
    "azureNotificationHub": {
        "enabled": true,
        "endpoint": "https://your-wat-sbnamespace.servicebus.windows.net/",
        "secret": "bPQTTVcagkyDfsz3M+OIhwJNxP+Jy2pXDfmUomSUVa4=",
        "path": "your-wat-pushhub",
        "tags": [
            "Sports", "News", "Another Tag"
        ]
    }
}

Enables you to specify which urls remain inside the app and which ones open in the browser

  • enabled Toggles the redirect functionality (true/false)
  • enableCaptureWindowOpen This captures popups (new windows) think about this as a way to catch facebook logins and things like that that need to happen in the app, once this value is enabled, you can control this on each of the redirects (true/false)
  • refreshOnModalClose If you need to have the app refresh when this model closes, (like in a login scenario) set this to true (true/false)
  • rules An array of objects, each of which represent a re-direction. Each object has three parameters:
  • pattern The pattern that the rule should match to take effect
  • action The action associated with this operation, this can be one of four options showMessage, popout, redirect or modal.
  • url The url to redirect to if action is set to url
  • message The message that is used if the action is set to showMessage
  • hideCloseButton Hides close button on modal windows
  • closeOnMatch A url that when it is loaded, it forces the modal to close (usefull for login scenario)
"redirects": {
"enabled": true,
"enableCaptureWindowOpen": true,
"refreshOnModalClose": true,
"rules": [
	    {
		    "pattern": "http://getbootstrap.com?",
		    "action": "showMessage",
		    "message": "Sorry, but you can't access this feature in the native app, please visit us online at http://wat-docs.azurewebsites.net"
	    },
	    {
		    "pattern": "*.microsoft.com*",
		    "action": "showMessage",
		    "message": "Redirecting you to the Microsoft website..."
	    },
	    {
		    "pattern": "http://msdn.microsoft.com/*",
		    "action": "popout"
	    },
	    {
		    "pattern": "{baseURL}/Json#search",
		    "action": "redirect",
		    "url": "http://bing.com"
	    },
	    {
		    "pattern": "*/drive_api/calculator/login",
		    "action": "modal",
		    "hideCloseButton": true,
		    "closeOnMatch": "*/drive_api/calculator/complete_login"
	    }
    ]
},

This controls the use of the settings charm within the application.

  • enabled Toggles the settings charm functionality (true/false)
  • privacyUrl Defines a url link to the application's privacy policy. A privacy policy is typically required for app to pass store certification.
  • items Defines an array of item that are used in the settings charm
  • title Defines the text for the settings item
  • page Defines the url for the settings item
  • loadInApp Defines whether the url is opened in the app or the browser (true/false)
"settings": {
"enabled": true,
"privacyUrl": "http://wat-docs.azurewebsites.net/Privacy",
"items": [
    {
	    "title": "Support",
	    "page": "http://wat-docs.azurewebsites.net/Support",
	    "loadInApp": true
    },
    {
	    "title": "Codeplex Site",
	    "page": "http://www.codeplex.com"
    }
]
},

This allows the user to configure the application's view of their website

  • setViewport Toggles whether the CSS is created to set the –ms-viewport setting (true/false)
  • targetWidth The target width value that is passed into viewport settings (pixels). This can be blank. NOTE: do not use this for websites that already have a responsive base.
  • targetHeight The target height value that is passed into viewport settings (pixels). This can be blank. NOTE: do not use this for websites that already have a responsive base.
  • suppressTouchAction Toggles whether the top level touch events are surpressed or not. This is quite helpful with SPA where you don’t want to be able to see scrolling or ruberbanding of the page (true/false)
  • extendedSplashScreenBackground A hex colour code that will be applied to the background of the extended splash screen
  • hiddenElements An array of strings that reference HTML elements. This enables you to hide any website HTML elements from your application. This is ideal for removing any unwanted top navigation, footers etc from the application view
  • backButton An array of style rules that are applied to the back button
  • wrapperCssFile A path to the /css/wrapper-styles.css file. This file applies styles to the native aspects of the app such as app bars, back button etc. Generally speaking you should not need to change this
  • customCssFile A path to the /css/injected-styles.css file. This file injects styles into the web view control and can overide CSS within the website itself. Generally speaking you should not need to change this
  • customCssString This enables you to embed CSS styles which get inserted over the existing styles on your website. This is great for adjusting the style of the site when it is presented as an application. This can be used as an alterntive to the injected-styles.css.
"styles": {
    "setViewport": true,
    "targetWidth": "",
    "targetHeight": "800px",
    "suppressTouchAction": false,
    "extendedSplashScreenBackground": "#464646",
    "hiddenElements":[
	    "header", ".bs-header"
    ],
    "backButton": {
	    "borderColor": "#FFFFFF",
	    "color": "#FFFFFF"
    },
    "wrapperCssFile": "/css/wrapper-styles.css",
    "customCssFile": "/css/injected-styles.css",
    "customCssString": "body {padding:0;font-size: 14pt;}"
},

This enables use of a native page header within the application. This can make the app appear less like a website when use in conjunction with hiding the website's header elements

  • enabled Toggles the header on or off (true/false)
  • backgroundColor A hex coe that defines tha background colour for the header
  • logo The path to an image that is used as a logo in the header. This is only used if the title is disabled
  • title Settings that control the title text that is used in the header. The text is taken from the Title metadata of the page that is being displayed
  • enabled Toggles the title text functionality (true/false)
  • displayOnHomePage Toggles whether to display the title text on the home page. If false, the title text will still be applied to all other pages (true/false)
"header": {
    "enabled": true,
    "backgroundColor": "#7fba00",
    "logo": "/images/widelogo.scale-100.png",
    "title": {
        "enabled": true,
        "displayOnHomePage": false
    }
},

This controls the use of the search charm within the application

  • enabled Toggles the search charm functionality (true/false)
  • searchURL Defines the url that the search term will be appended to in order to return search results
  • useOnScreenSearchBox Toggles whether an on-screen search box is used or not. Especially usefull when used with the header section (true/false)
  • onScreenSearchOptions An array of settings that control the on screen search box
  • chooseSuggestionOnEnter Defines whether user can choose from a list of search suggestions (true/false)
  • focusOnKeyboardInput Defines whether open the touch keyboard when the search box receives focus (true/false)
  • placeholderText The text that is shown by default within the search box
  • searchHistoryDisabled Toggles whether to keep search history (true/false)
"search": {
    "enabled": true,
    "searchURL": "http://wat-docs.azurewebsites.net/search/?query=",
    "useOnScreenSearchBox": true,
    "onScreenSearchOptions": {
        "chooseSuggestionOnEnter": true,
        "focusOnKeyboardInput": true,
        "placeholderText": "What are you looking for?",
        "searchHistoryDisabled": true
    }
}, 

This option sets the secondary pin functionality in the app bar

  • enabled Toggles the secondary pin functionality (true/false)
  • buttonText Text that is used on the pin button
  • tileTextTheme The visual theme for the tile (light/dark)
  • buttonSection This sets the sharebutton into a particular section of the app bar (if you have secions set up) the default is global http://msdn.microsoft.com/en-us/library/windows/apps/Hh700497.aspx
  • squareImage A path to a square image that is used for secondary tiles
  • wideImage A path to a wide image that is used for secndary tiles
"secondaryPin": {
    "enabled": true,
	"buttonText": "Pin It!",
    "tileTextTheme": "light", 
    "buttonSection": "global",
	"squareImage": "/images/logo.scale-100.png",
	"wideImage": "/images/widelogo.scale-100.png"
},

This determines whether the app will use the light or dark theme for UI components (light/dark)

"styleTheme": "light"