Easy way to add “Privacy Policy” to Windows Charm settings – Using HTML/JavaScript

After reading the “Easy way to add “Privacy Policy” to Windows Charm settings – Using C#/XAML” many people asked me how to do the same thing in a HTML/JavaScript Windows Store app. well its kind of easily compared to C#/XAML. given below are the steps for that,

1.Create HTML page

it is necessary to have an separate HTML page inside the windows store app for privacy policy.after that add the following code to the body of that page.

<div id="privacy" data-win-control="WinJS.UI.SettingsFlyout" aria-label="Help settings flyout"
data-win-options="{width:'wide'}">
<div class="win-header" style="background-color:#000000;color:#FFFFFF">
<button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
<div class="win-label">Privacy Policy</div>
</div>
<div class="win-content">
<p>The application does not collect any personal data of users and is for the sole purpose of delivering the requested information to the users. </p>
</div>
</div>

2. Link with JavaScript file

Inside the “default.js” there will be “app.onactivated” function, add the following code to the IF part in the IF ELSE condition.

WinJS.Application.onsettings = function (e) {
e.detail.applicationcommands = {
"privacy": { href: "PP.html", title: "Privacy Policy" }
};
WinJS.UI.SettingsFlyout.populateSettings(e);
}
WinJS.Application.start();

Things to remember in this is the privacy policy html page must be correctly linked and the DIV tag which has

data-win-control="WinJS.UI.SettingsFlyout"

must be properly called in the JavaScript function.

Now debug and check, you can see your privacy policy in the Windows Charm settings 🙂

Advertisements

3D printing with Windows 8.1

3D printing is something Microsoft was talking since longtime back. Initial stages Microsoft shared how they are doing all the experiments and prototype 3D printing, you can find the initial article here. Now with windows 8.1 they have integrated 3D printing support to the windows. check the official announcement here . and its nice to see all the hardware and software companies supporting there products with windows. its really incredible to see where technology is heading. following is a brief video which was recorded on “build 2013” about 3D printing and Windows 8.1.

Things to consider before submitting Windows Store Apps

When submitting Windows Store Apps lot of beginners face many issues. This post is how to overcome those issues and submit your app easily and faster.

1. Privacy Policy

This is one key thing in windows store apps. If your app needs any internet interaction to work properly then in the “package.appxmanifest” under the Capabilities the “Internet (Client)” will be ticked, by default also this is ticked. When this is ticked having a privacy policy is a must.

   a) Charms Setting

This is inside app where the privacy policy is mentioned. you can check how to add C# charm setting in this post

pp1

       b) Online Link
Same privacy policy must be mentioned in a website/blog or any online media. Where anyone can view easily by simply clicking a link. click here for a sample
This link should be mentioned when submitting the app to the store.

pp_web

2. Images
When creating Windows Store Apps its necessary to have four types of images ready before the submission of the app, the four types are,

  • Logo
  • Small logo
  • Splash screen
  • Store logo

Having the default images can give your errors in the submission. So it’s always recommended that you create above images which is unique to the your app.

3. App packages

It is necessary to build app packages before the submission of the app. and it is important that you login to your Microsoft account and create the app packages.

After packages are created it will ask to launch “Windows App Certification Kit” if you launch that then the packages will be validated. If there are any issue in the packages then that will be identified and give the user where the issue is in the full report. If the packages are good the following screen will appear

Report

4. Category and subcategories

When submitting it is necessary to pick the correct category and subcategory. Some times apps don’t get accepted because of the wrong category. You will get the picking option in the submission process under the selling details where you can pick the category.

5. Notes to testers

This is another main part in the submission process.It is always good to give a brief introduction of the app in this because then the app tester can get the full detail view of the app. and if the app doesn’t need any user login or account it is very important to mention that by putting “This App doesn’t need any user account”. and if any stuff in the app is localized you need to mention those things in this part.

above mentioned points are few of the main things an Windows Store app beginner must consider before submitting apps. hope this will be helpful for all the beginners. please well free to give your comments 🙂 and you may ask any Questions related to this in the comments 🙂

Easy way to add “Privacy Policy” to Windows Charm settings – Using C#/XAML

Under the ‘Content compliance’ category dev’s always get the following warning “Your app doesn’t meet requirement 4.1”. In other words that mean “The app has declared access to network capabilities and no privacy statement was provided in the Windows Settings Charm”

given below is the easy way of overcoming that 🙂

1. Add the “Callisto” Extension

go to Project -> Manage NuGet Packages -> Online -> Search for ‘Callisto’ and Install it.

cal

2. Creating Privacy Policy xaml page.

Create a new xaml page which is dedicated for Privacy Policy and add the following code.

<Grid>
<StackPanel Background="White">
<TextBlock Text="Privacy Policy" FontFamily="Segoe UI" FontWeight="SemiLight" FontSize="26.667" />
<TextBlock Text="The application does not collect any personal data of users and is for the sole purpose of delivering the requested information." FontFamily="Segoe UI" FontWeight="SemiLight" FontSize="18" TextWrapping="Wrap" AllowDrop="True" />
</StackPanel>
</Grid>

PS: Background color of this will be the background color of Privacy policy in Windows Charm

3. Adding reference

go to App.xaml.cs and add the following references

using Windows.UI.Popups;
using Callisto.Controls;
using Windows.UI;
using Windows.System;
using Windows.UI.ApplicationSettings;

4. Add the following field to the ‘App‘ class.

private Color _background = Color.FromArgb(255, 0, 77, 96);  

5. Add the following statements to the ‘OnLaunched’ method.

SettingsPane.GetForCurrentView().CommandsRequested += OnCommandsRequested;  

6. Add the following event handler to ‘App.xaml.cs’

void OnCommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
        {

            var about = new SettingsCommand("privacy policy", "Privacy Policy", (handler) =>
            {
                var settings = new SettingsFlyout();
                settings.Content = new Privacy_Policy();
                settings.HeaderBrush = new SolidColorBrush(_background);
                settings.Background = new SolidColorBrush(_background);
                settings.HeaderText = "Privacy Policy";
                settings.IsOpen = true;
            });

            args.Request.ApplicationCommands.Add(about);
        }  

pp1

pp2

Now Debug your app and check Privacy Policy in the windows charm 😉