none
Content App for Excel 2013 with multiple HTML pages RRS feed

  • Question

  • Hi,

    We have a scenario where we need to provide a wizard kind of UI flow for the user to accomplish his/her task in a content app for excel 2013.

    We have created multiple HTML pages(which read data as matrix from different sheets in the Excel workbook) in the Apps for office 2013 project and redirecting to appropriate pages as needed, on button/link clicks.

    This works fine when debugging in VS 2012 but when we deploy onto a shared network app catalog, the office context is missing when the the page transfer happens.

    The below link says that- "The app interface also demonstrates how to create a multiple-page navigation effect by using HTML div elements, CSS classes, and JavaScript. It is a best practice to use this method for building apps for Office that use multiple pages"

    http://code.msdn.microsoft.com/officeapps/Apps-for-Office-Persist-ddd4cb40


    Need clarifications in this context-

    1. Can we actually have multiple HTML pages in an app for office 2013 project?

    2. If yes, how do we persist the office context across these pages?

    3. If no, what is the alternative or workaround to accomplish this?

    Would be grateful for any inputs or pointers.

    Thanks,

    Hari

    Monday, April 8, 2013 12:09 PM

Answers

  • Hi, Hari

    Yes, you can have multiple html pages. And access to the Office Context should be maintained automatically on other pages unless they're on a different domain. I think your problem probably has to do with your Network Share configuration, rather than your page-switching. Could you try executing a JavaScript API method on the first page in your app, and verify that that works but code on the next page does not?

    Thanks!

    -Michael

    Friday, April 12, 2013 8:31 PM
    Moderator
  • Hi Hari,

    I should note that with the latest tooling release from a month ago (http://aka.ms/OfficeDevToolsForVS2012), creating a content app will create an app that has multiple (2) pages.

    See this blog post for information on the new templates:  http://blogs.msdn.com/b/officeapps/archive/2013/04/16/building-great-looking-apps-for-office-using-the-new-project-templates.aspx

    Hope this helps,

    - Michael


    Michael Zlatkovsky | Program Manager, Visual Studio Tools for Office & Apps for Office

    Thursday, April 18, 2013 10:55 PM

All replies

  • Hi Hari,

    Thank you for posting in the MSDN Forum.

    You can refer to Apps for Office: Persist custom settings as it shows you best practices for implementing multiple-page navigation in an app for Office.

    Hope it helps.

    Best regards,


    Quist Zhang [MSFT]
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Tuesday, April 9, 2013 1:49 PM
    Moderator
  • Hi, Hari

    Yes, you can have multiple html pages. And access to the Office Context should be maintained automatically on other pages unless they're on a different domain. I think your problem probably has to do with your Network Share configuration, rather than your page-switching. Could you try executing a JavaScript API method on the first page in your app, and verify that that works but code on the next page does not?

    Thanks!

    -Michael

    Friday, April 12, 2013 8:31 PM
    Moderator
  • Hi Hari,

    I should note that with the latest tooling release from a month ago (http://aka.ms/OfficeDevToolsForVS2012), creating a content app will create an app that has multiple (2) pages.

    See this blog post for information on the new templates:  http://blogs.msdn.com/b/officeapps/archive/2013/04/16/building-great-looking-apps-for-office-using-the-new-project-templates.aspx

    Hope this helps,

    - Michael


    Michael Zlatkovsky | Program Manager, Visual Studio Tools for Office & Apps for Office

    Thursday, April 18, 2013 10:55 PM
  • Looking at this app sample it does not implement multiple pages, it just hides and shows divs in a single page app. Can anyone post a sample that maintains state across actual pages and possibly demonstrates how to manage settings in this scenario. I'd rathr not have one huge page for my app.

    Thanks!


    Matthew McDermott, MVP SharePoint

    Saturday, October 5, 2013 3:17 PM
  • Hi Matthew, the content app with the visualization does have multiple pages:  one Home.html and one DataBinding.html page (with accompanying CSS and JS alongside).  This is done precisely to keep a simple separation of concerns rather than having everything in one monolithic html page.

    Regarding maintaining state, you can do that with something like Office.context.document.settings.set to store the state right within the document, or you can use standard HTML storage mechanisms (like window.localStorage.setItem, for example).

    Hope this helps,

    - Michael


    Michael Zlatkovsky | Program Manager, Visual Studio Tools for Office & Apps for Office


    Saturday, October 12, 2013 12:36 AM
  • Thanks for the clarification. I did not notice the databinding page. In the app how do you navigate to the databinding page? In the UI there are only two links and these are just hidden divs.

    M


    Matthew McDermott, MVP SharePoint

    Saturday, October 12, 2013 12:31 PM
  • Matthew, you can navigate either via javascript or via a normal link.

    In the case of Home.html navigating to databinding, it is done via

    window.location.href = '../DataBinding/DataBinding.html';

    But you could also do a simple <a href="...">...</a> link:  for example, in DataBinding.html, see this line:

    <a href="../Home/Home.html">Back to Visualization</a>

    Hope this helps,

    - Michael


    Michael Zlatkovsky | Program Manager, Visual Studio Tools for Office & Apps for Office

    Monday, October 14, 2013 6:53 PM
  • Hi Hari,

    I should note that with the latest tooling release from a month ago (http://aka.ms/OfficeDevToolsForVS2012), creating a content app will create an app that has multiple (2) pages.

    See this blog post for information on the new templates:  http://blogs.msdn.com/b/officeapps/archive/2013/04/16/building-great-looking-apps-for-office-using-the-new-project-templates.aspx

    Hope this helps,

    - Michael


    Michael Zlatkovsky | Program Manager, Visual Studio Tools for Office & Apps for Office

    Michael,

    Neither the visual studio template, the Persist Content Settings demo, nor the blog post linked above appear to make any mention or example of the multi page navigation. Am I missing something?

    I would very much like to see an example of this for a project I'm working on which requires a second page, but am having trouble finding any information.

    thanks

    Wednesday, August 27, 2014 11:34 PM
  • The multi-page navigation is really as simple as having a hyperlink that directs you to a different page.  Or a button that sets window.location.href to the new page.

    The only tricky thing is ensuring that if you have any "state" (e.g., if you have a partially-filled form, or if you were storing the Office entitlement token for license validation, or anything else), that you save it in memory (perhaps via window.localStorage) before you navigate away, and then restore once you get back.

    The other thing to note is that each page must have an Office.initialize function.

    Again, the template for a "visualization" content app has an example of this.

    Hope this helps,

    - Michael


    Michael Zlatkovsky | Program Manager, Visual Studio

    • Proposed as answer by SelAromDotNet Thursday, August 28, 2014 5:33 PM
    Wednesday, August 27, 2014 11:47 PM
  • thank you kindly for the quick reply! This makes sense, and about what I figured, but it was the part about Office.initialize specifically that I was unsure of.

    The project template generates this initialization in the home page script; do I do the exact same initialization on the secondary page? what about when I navigate back and it fires again, is this ok or do I have to do something in each initialization method to "check" if it has already happened once?

    thanks again

    Wednesday, August 27, 2014 11:53 PM
  • I would treat Office.initialize as the place to do any initialization logic for your page, much like jQuery's $(document).ready (and in fact, I'd nest jQuery's into the Office.initialize).  The initialize function is always guaranteed to be called once the Office.js script is loaded and ready.  This means that you won't have possible timing issue if you try to access an object out of the Office object model before it's fully loaded.

    Regarding your second question:  Unless you're actually making use of the initialization "reason" parameter (in which case maybe you'd want to mark for yourself whether or not it's the first time), you can safely just execute every time.  If you are making use of the reason parameter, perhaps you can combine it with some other indicator (for example, maybe when you navigate between pages you pass in a ?loaded=true flag on the query string, to indicate that you've already processed the reason once).  But honestly, for the common case, I would just not worry about it.

    Best,

    - Michael


    Michael Zlatkovsky | Program Manager, Visual Studio

    Wednesday, August 27, 2014 11:59 PM