locked
Can't see about page in charms bar

    Question

  • I have connected about page in my app through settings charm.Sample content is there in the about page but when I run the app and click "About" nothing follows. the Charms bar disappears.No page is shown.

    The function  I have used to insert the pages:

                app.onsettings = function (e) {
                    e.detail.applicationcommands = {
                        // Add an About command
                        "about": {
                            href: "/pages/about/about.html",
                            title: "About"
                        },
                        "preferences": {
                            href: "/pages/preferences/preferences.html",
                            title: "Preferences"
                        }
    
                    }
    
                    WinJS.UI.SettingsFlyout.populateSettings(e);
                };
    

    about.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>about</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    
        <link href="about.css" rel="stylesheet" />
        <script src="about.js"></script>
    </head>
    <body>
        <div class="about fragment">
            <header aria-label="Header content" role="banner">
                <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle">Welcome to about</span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
                <p>Content goes here.</p>
            </section>
        </div>
    </body>
    </html>
    Saturday, July 05, 2014 6:51 AM

Answers

  • Ok, I think you need to do something like below:

    Add a div into your about page by setting its to WinJS.UI.SettingFlyout, the line I stronged is the key line, do not forget the SettingCommandId should be as same as the id you set in applicationcommands, otherwise the page will not display.

    <!doctype HTML>
    <html>
        <head>
            <title>Help settings flyout1</title>
            <script src="/js/2-SettingsFlyout-Help1.js"></script>
             <link rel="stylesheet" href="../css/default.css" />
        </head>
        <body>
            <!-- BEGINSETTINGFLYOUT -->
            <div data-win-control="WinJS.UI.SettingsFlyout" id="helpSettingsFlyout1" aria-label="Help settings flyout" data-win-options="{settingsCommandId:'about'}">
                <!-- Use either 'win-ui-light' or 'win-ui-dark' depending on the contrast between the header title and background color -->
                <div class="win-ui-dark win-header" style="background-color:#00b2f0"> <!-- Background color reflects app's personality -->
                   <button type="button" id="backButton" class="win-backbutton"></button>
                   <div class="win-label">Help</div>
                   <img src="../images/smallTile-sdk.png" style="; right: 40px;"/>
                </div>
                <div class="win-content ">
                    <div class="win-settings-section">
                        <h3>Settings charm usage guidelines summary</h3>
                        <ul>
                            <li>Settings should be instant commit.</li>
                            <li>Allow users to dismiss the settings flyout by tapping outside of it. Don’t use cancel or close buttons.</li>
                            <li>Minimize the number of settings by including only settings that users really need.</li>
                            <li>Only include settings that are about configuring the app and its behavior. Don’t use the settings flyout for app commands, navigation or very frequently changed settings.</li>
                            <li>The layout in this template reflects the recommended layout for settings flyouts.</li>
                            <li>For more in-depth usage guidance, refer to the <a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh770544">App settings UX guide</a>.</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- ENDSETTINGSFLYOUT -->
        </body>
    </html>
    
    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by A Topno Thursday, July 10, 2014 6:57 AM
    Monday, July 07, 2014 9:39 AM
    Moderator

All replies

  • Hi Topno,

    I can also reproduce this, I will working on this to see if I can provide a solution.

    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, July 07, 2014 9:33 AM
    Moderator
  • Ok, I think you need to do something like below:

    Add a div into your about page by setting its to WinJS.UI.SettingFlyout, the line I stronged is the key line, do not forget the SettingCommandId should be as same as the id you set in applicationcommands, otherwise the page will not display.

    <!doctype HTML>
    <html>
        <head>
            <title>Help settings flyout1</title>
            <script src="/js/2-SettingsFlyout-Help1.js"></script>
             <link rel="stylesheet" href="../css/default.css" />
        </head>
        <body>
            <!-- BEGINSETTINGFLYOUT -->
            <div data-win-control="WinJS.UI.SettingsFlyout" id="helpSettingsFlyout1" aria-label="Help settings flyout" data-win-options="{settingsCommandId:'about'}">
                <!-- Use either 'win-ui-light' or 'win-ui-dark' depending on the contrast between the header title and background color -->
                <div class="win-ui-dark win-header" style="background-color:#00b2f0"> <!-- Background color reflects app's personality -->
                   <button type="button" id="backButton" class="win-backbutton"></button>
                   <div class="win-label">Help</div>
                   <img src="../images/smallTile-sdk.png" style="; right: 40px;"/>
                </div>
                <div class="win-content ">
                    <div class="win-settings-section">
                        <h3>Settings charm usage guidelines summary</h3>
                        <ul>
                            <li>Settings should be instant commit.</li>
                            <li>Allow users to dismiss the settings flyout by tapping outside of it. Don’t use cancel or close buttons.</li>
                            <li>Minimize the number of settings by including only settings that users really need.</li>
                            <li>Only include settings that are about configuring the app and its behavior. Don’t use the settings flyout for app commands, navigation or very frequently changed settings.</li>
                            <li>The layout in this template reflects the recommended layout for settings flyouts.</li>
                            <li>For more in-depth usage guidance, refer to the <a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh770544">App settings UX guide</a>.</li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- ENDSETTINGSFLYOUT -->
        </body>
    </html>
    
    --James


    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    • Marked as answer by A Topno Thursday, July 10, 2014 6:57 AM
    Monday, July 07, 2014 9:39 AM
    Moderator