locked
Detect Windows Store app or Windows Phone (Universal app WINJS)

    Question

  • Currently i have implemented a simple about section the settings pane of my universal app.

    Problem / Implemention so far:


    The following code is located in default.js (shared section). This is only appliable to a Windows Store App, the setting pane  is not available for a windows phone.

    default.js

       app.onsettings = function (arg)
        {
            // set option on settings panel using arg (Windows 8.1 only, does not work on Windows Phone)
            arg.detail.applicationcommands = { "aboutSettingsFlyout": { title: "About", href: "/pages/about/about.html" } };
            WinJS.UI.SettingsFlyout.populateSettings(arg);
        }

    about.html

    <div id="aboutSettingsFlyout" data-win-control="WinJS.UI.SettingsFlyout">
            <div class="win-header">
                <button id="btnAboutFlyout" class="win-backbutton"></button>
                <div class="win-label">About</div>
            </div>
            <div class="win-content">
                <p class="about bold">App created by ...</p>
            </div>
        </div>

    This works as intended but how do i move this away if a windows phone is detected?

    • Is there a equivalent to #if WINDOWS_APP in WinJS?
    • Do i move this piece of code to the Windows 8.1 section instead of the shared one?
      If this is the case how can i do this? Since each has its own default.html but the default.js is by default included in shared section.

    When running my app through a 8.1 WP emulator there are no errors whatsoever. But i do not really like to write code in a shared JS without any sort of check or able to split it away since its device specific and not shared to begin with.

    Thanks!




    • Edited by PeterP7777 Sunday, June 15, 2014 3:23 PM
    Sunday, June 15, 2014 2:46 PM

Answers

  • Hi PeterP7777,

    To answer your questions:

    1, Is there a equivalent to #if WINDOWS_APP in WinJS?

    No, the only difference is the script reference:

    Windows Store App 
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    
    Windows Phone App
    <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>

    To detect the platform information, I may want to write some code in the shared project by using JavaScript getting the DOM of the page (or try to use some API that works in Windows Store App but not Windows Phone) and detect if the reference is for Windows Store App or Windows Phone.

    2, Do i move this piece of code to the Windows 8.1 section instead of the shared one?  If this is the case how can i do this? Since each has its own default.html but the default.js is by default included in shared section.

    I believe that the html file should be in its own project, and js file can be shared by putting into the share folder.

    The reason is Windows Store and Windows Phone has different screen size. The purpose of HTML is to define the layout of the page for different device. You could share some common stuff in the js file in the share folder, but some specific functions (for instance Windows Store App has one API but Windows Phone does not), you have to put into correct place.

    --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, June 16, 2014 6:47 AM
    Moderator
  • Update, found something interesting: isPhone property could be a help for indicate if your app running at windows phone.

    --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.

    Wednesday, June 18, 2014 9:45 AM
    Moderator
  • You can use WinJS.isPhone as someone else stated already.

    However the general situation of not being able to find out inside the an WWApp if running in Debug/Release config is frustrating.

    I also would like to have a unified default.html for Phone and Store apps. IE knows conditional "if" comments. Why does MS not facilitate those?

    <!--[if Phone]>

    <!--[if Store]>

    That would allow us to maintain some less code.

    As for the Debug/Release config: We can solve that in the project file using MSBuild. Just include one file for release and one for debug as a marker/config like this:

    <Content Include="debug.json" Condition="'$(Configuration)' == 'Debug'" />

    <Content Include="release.json" Condition="'$(Configuration)' == 'Release'" />

    Then in your app you check if one of the files exist and you know which mode you running in.

    Could even extend that with the "TemplateFile" MSBuild Task from the MSBuildCommunityTasks, that writes the build environment variables of interest into a special file that you include.

    I have something like that already for my git status annotations to my apps version info.

    That's the result of my version.js included in every my apps:

    return {
      gitCommitHash: "75f0708",
      gitBranchDirty: true,
      gitBranch: "making_it_work_again",
      buildEnv: "buildmachine Win32NT 6.3",
      buildTime: "2014-06-18 22:12:08",
      buildConfiguration: "Debug",
      buildPlatform: "x86"
    };

    See more of how it works, ready to be included in your apps project file:

    https://gist.github.com/pke/e1d2c5061d535be48d75

    PS: The message editors in this forum are a real PITA and really antique. I'm sick of formatting posts more than I write text! Is that all MSFT can offer?




    Wednesday, June 18, 2014 10:09 PM

All replies

  • Hi PeterP7777,

    To answer your questions:

    1, Is there a equivalent to #if WINDOWS_APP in WinJS?

    No, the only difference is the script reference:

    Windows Store App 
    <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
    
    Windows Phone App
    <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>

    To detect the platform information, I may want to write some code in the shared project by using JavaScript getting the DOM of the page (or try to use some API that works in Windows Store App but not Windows Phone) and detect if the reference is for Windows Store App or Windows Phone.

    2, Do i move this piece of code to the Windows 8.1 section instead of the shared one?  If this is the case how can i do this? Since each has its own default.html but the default.js is by default included in shared section.

    I believe that the html file should be in its own project, and js file can be shared by putting into the share folder.

    The reason is Windows Store and Windows Phone has different screen size. The purpose of HTML is to define the layout of the page for different device. You could share some common stuff in the js file in the share folder, but some specific functions (for instance Windows Store App has one API but Windows Phone does not), you have to put into correct place.

    --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, June 16, 2014 6:47 AM
    Moderator
  • Update, found something interesting: isPhone property could be a help for indicate if your app running at windows phone.

    --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.

    Wednesday, June 18, 2014 9:45 AM
    Moderator
  • You can use WinJS.isPhone as someone else stated already.

    However the general situation of not being able to find out inside the an WWApp if running in Debug/Release config is frustrating.

    I also would like to have a unified default.html for Phone and Store apps. IE knows conditional "if" comments. Why does MS not facilitate those?

    <!--[if Phone]>

    <!--[if Store]>

    That would allow us to maintain some less code.

    As for the Debug/Release config: We can solve that in the project file using MSBuild. Just include one file for release and one for debug as a marker/config like this:

    <Content Include="debug.json" Condition="'$(Configuration)' == 'Debug'" />

    <Content Include="release.json" Condition="'$(Configuration)' == 'Release'" />

    Then in your app you check if one of the files exist and you know which mode you running in.

    Could even extend that with the "TemplateFile" MSBuild Task from the MSBuildCommunityTasks, that writes the build environment variables of interest into a special file that you include.

    I have something like that already for my git status annotations to my apps version info.

    That's the result of my version.js included in every my apps:

    return {
      gitCommitHash: "75f0708",
      gitBranchDirty: true,
      gitBranch: "making_it_work_again",
      buildEnv: "buildmachine Win32NT 6.3",
      buildTime: "2014-06-18 22:12:08",
      buildConfiguration: "Debug",
      buildPlatform: "x86"
    };

    See more of how it works, ready to be included in your apps project file:

    https://gist.github.com/pke/e1d2c5061d535be48d75

    PS: The message editors in this forum are a real PITA and really antique. I'm sick of formatting posts more than I write text! Is that all MSFT can offer?




    Wednesday, June 18, 2014 10:09 PM