locked
How do I make my app available in mobile view? RRS feed

  • Question

  • I've created a SharePoint hosted application and have deployed it to my Office 365 SharePoint online installation.  The app works fine in the browser.  When I view the page on a mobile device (smartphone and tablet), I get the following message "(Some apps, such as <my app name>, are not supported in mobile view.  Tapping on title area can bring up navigation window.)".  My app is using nivo slider, which appears to be very mobile/tablet friendly.  I have enabled the Mobile Browser View in Site Features.  My question is, how do I make this page render without this error message?  Is this something I can set in my app or am I missing a setting?  Please advise.

    Thank you.

    Mark

    Friday, February 22, 2013 7:43 PM

Answers

  • Thanks. So the problem is not your app the problem is TestPage.aspx itself. The host site has mobile view enabled and when it attempts to display TestPage (which is not a page on your app) it gives you the error message because pages with webparts in them can't be rendered in the default mobile view. So what you need to do to see the test page app is turn mobile view OFF  on the host site.


    Program Manager, Office Developer Platform.

    Friday, March 8, 2013 1:53 AM

All replies

  • Hello Mark,

    Could you paste a screenshot as well as the markup of your page?  I'm trying to understand better the error you are getting. Also, when you say that you "have enabled mobile browser" did you mean on the host site or the appweb?  (appwebs shouldn't have this feature enabled)

    In general apps need to provide code on their own to support mobile browsers but seems you are already using a library that helps you with that so we need to figure out where and why you are seeing that error. When I tried things myself I did see a similar error but it was not on the app, it was on the homepage of the devsite I was deploying my app into (which is normal as the getting started experiencefor the devsite is designed to work on full browse experience, not the mobile version).

    Thank you


    Program Manager, Office Developer Platform.


    Monday, March 4, 2013 9:01 PM
  • Humberto,

    Here is the screenshot.   

    And the markup

    <%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>
    
    <%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>
    
    <%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    <%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
    
    <%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
    <asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
        <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="/_layouts/15/sp.runtime.debug.js"></script>
        <script type="text/javascript" src="/_layouts/15/sp.debug.js"></script>
        <script type="text/javascript" src="../Scripts/knockout-2.2.1.js"></script>    
        <script type="text/javascript" src="../Scripts/jquery.nivo.slider.pack.js"></script>
    
        <!-- Add your CSS styles to the following file -->
        <link rel="Stylesheet" type="text/css" href="../Content/App.css" /> 
        <link rel="Stylesheet" type="text/css" href="../Content/nivo-slider/themes/default/default.css" /> 
        <link rel="Stylesheet" type="text/css" href="../Content/nivo-slider.css" />   
    
        <!-- Add your JavaScript to the following file -->
        <script type="text/javascript" src="../Scripts/App.js"></script>
    </asp:Content>
    
    <%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
    <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider" data-bind="template: { name: 'slidetemplate', foreach: bannerimage }">
            
            </div>
        </div>         
    
    <%-- The following item is required if you are using iframes in SharePoint!!! --%>
    <WebPartPages:AllowFraming ID="AllowFraming1" runat="server" />
    
    <%-- Nesting img inside a on purpose.  Required syntax for nivo slider --%>
    <script id="slidetemplate" type="text/html">
        <a href="#" data-bind="attr: { href: ImageHyperlink }" target="_parent" >
            <img src="#" title="" alt="" data-bind="attr: { src: Url, title: Title }" />
        </a>
    </script>
    
    </asp:Content>
    

    Regarding the enabling the mobile browser, I went under Site Settings, Site Features and made sure mobile browser view was Active.  Again, this is SharePoint online.

    Thank you for your support.

    Mark

    Tuesday, March 5, 2013 7:17 PM
  • Thank you Mark.  Two more questions:

    • "I went under Site Settings, Site Features and made sure mobile browser view was Active" Did you do that on the host site (its ok for it to be active there) or the appweb site (not ok for it to be active)? 
    • On your screenshot above it seems that the page that you are accessing is not an app page but rather a page that is deployed on the host site. I'm inferring this from the first blurred part of your URL which seems to be relatively short thus indicating you are not hitting an appweb.   Could you please past the full URL you are hitting (its ok to remove you company name but please leave the rest of the URL so we can help you diagnose).

    Thanks


    Program Manager, Office Developer Platform.


    Wednesday, March 6, 2013 3:06 PM
  • Humberto,

    The app is deployed to the same Office 365 SharePoint online instance where the page resides. So, it's the host site.

    From VS 2012, I deployed the app to https://aspectsw.sharepoint.com.  I trusted the app when prompted.  I added the app to TestPage.aspx in a web part.

    The full URL is https://aspectsw.sharepoint.com/SitePages/TestPage.aspx

    Does this answer your questions?

    Mark

    Thursday, March 7, 2013 6:55 PM
  • Thanks. So the problem is not your app the problem is TestPage.aspx itself. The host site has mobile view enabled and when it attempts to display TestPage (which is not a page on your app) it gives you the error message because pages with webparts in them can't be rendered in the default mobile view. So what you need to do to see the test page app is turn mobile view OFF  on the host site.


    Program Manager, Office Developer Platform.

    Friday, March 8, 2013 1:53 AM
  • Is it true then that it is impossible to make a "mobile view app part?"

    Our company has several SharePoint App Parts that are responsive, and can be displayed on desktop or mobile browsers. Obviously we would like to show our mobile interface to mobile users, but right now we are getting the same error as the OP.

    Thursday, August 21, 2014 6:51 PM