none
Using window.location.search or .hash with task pane apps RRS feed

  • Question

  • Is there some way for a muli-page app to use query or hash parameters without causing problems for the Office 365 environment? It seems that a few search and hash params are used by office.js, and any meddling can cause the app not to load.

    E.g. window.location.search: "?et=&_host_Info=Excel|Web|16.00"

    I've had some success manipulating the hash params /before/ including office.js, though it's rather cumbersome as a pattern.


    • Edited by afield42 Saturday, January 24, 2015 12:01 AM
    Friday, January 23, 2015 11:57 PM

Answers

  • Hmm, OK, I tried again in a my "real" app and the query params work fine now; I guess I'd done something else wrong earlier (encoded incorrectly, or used the wrong separator, perhaps). I can live without the hash params.
    • Marked as answer by afield42 Wednesday, January 28, 2015 7:45 PM
    Wednesday, January 28, 2015 7:44 PM

All replies

  • Hi afield42,

    Based on the description, you want to pass query or hash parameters between pages in apps for Office and it caused the app not to load.

    I am trying to reproduce the issue however faild. Here are my steps:
    1. Create a apps for Office

    2. Inser a link on the first page and pass the query or hash parameters like code below:

    <a href="HtmlPage1.html?et=&_host_Info =Excel|Web|16.00">Click me to naviaget to HtmlPage1.html page!</a>

    3. Add a new page named HtmlPage1 and show the query/hash parameters

    <head>
        <title></title>
        <script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
        <script>
            function ShowValue()
            {
                $("#result").text("Query String:" + window.location.search);
                
            }
        </script>
    </head>
    <body>
        <input id="Button1" type="button" value="button" onclick="ShowValue()" />
    
        <div id="result">Query String:</div>
    </body>
    </html>

    Did I miss any steps or if I misunderstood please feel free to let me know.

    Regards & Fei


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, January 26, 2015 7:39 AM
    Moderator
  • Thanks for your reply.

    In my case, I want to also include some query or hash parameters that are meaningful to my application, i.e. make a link to a page like

    HtmlPage1.html?et=&_host_Info =Excel|Web|16.00|foo=bar

    This seems to work when I launch my app in Excel but when I open the same app in Office 365 I am not as fortunate: office.js won't load correctly. It seems like Office 365 is using the params wheras I don't even see them in the native Excel environment.
    Monday, January 26, 2015 6:44 PM
  • Hi afield42,

    >>This seems to work when I launch my app in Excel but when I open the same app in Office 365 I am not as fortunate: office.js won't load correctly. <<

    Did you mean that the apps didn't work for the Office online? As far I test, the code above also work well when I test using SharePoint online.

    Did you use SharePoint online or your own SharePoint site?

    If I misunderstood, please feel free to let me know. Also woulud mind sharing with us the detail step to reproduce this issue?

    Regards & Fei


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, January 27, 2015 9:28 AM
    Moderator
  • Yes, I mean on Office 365, on sharepoint.com.  Here's a small sample that attempts to highlight the issue:

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="UTF-8" />
    	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    	<title>UrlParamsTest</title>
    	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
    	
    	<link href="../../Content/Office.css" rel="stylesheet" type="text/css" />
    	<script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"></script>
    	
    	<link href="../App.css" rel="stylesheet" type="text/css" />
    	<script src="../App.js" type="text/javascript"></script>
    	
    	<link href="Home.css" rel="stylesheet" type="text/css" />
    	<script src="Home.js" type="text/javascript"></script>
    </head>
    <body>
    	<!-- Page content -->
    	<div id="content-header">
    		<div class="padding">
    			<h1>Welcome</h1>
    		</div>
    	</div>
    	<div id="content-main" class="padding">
    		<p>Query params: <span id="query-params"></span></p>
    		<p>Hash params: <span id="hash-params"></span></p>
    		
    		<button id="add-query-param">Add a query param </button>
    		<button id="add-hash-param">Add a hash param</button>
    	</div>
    	<script>
    		document.querySelector('#query-params').innerHTML = window.location.search;
    		document.querySelector('#hash-params').innerHTML = window.location.hash;
    		document.querySelector('#add-query-param').onclick = function () {
    			window.location.href = window.location.pathname + window.location.search + '|foo=bar' + window.location.hash; 
    		};
    		document.querySelector('#add-hash-param').onclick = function () {
    			window.location.href = window.location.pathname + window.location.search + window.location.hash + '|foo=bar';
    		};
    	</script>
    </body>
    </html>

    And in Home.js:

    	// The initialize function must be run each time a new page is loaded
    	Office.initialize = function (reason) {
    		$(document).ready(function () {
    			app.initialize();
    
    			$('#get-data-from-selection').click(getDataFromSelection);
    			$('#content-main').append('<p>Office successfully initialized</p>');
    		});
    	};
    


    So actually, this seems to work for query params, but breaks for hash parameters. I'll try using query params again in my app and see if maybe I was just goofing something else up somewhere.
    Wednesday, January 28, 2015 2:13 AM
  • Hmm, OK, I tried again in a my "real" app and the query params work fine now; I guess I'd done something else wrong earlier (encoded incorrectly, or used the wrong separator, perhaps). I can live without the hash params.
    • Marked as answer by afield42 Wednesday, January 28, 2015 7:45 PM
    Wednesday, January 28, 2015 7:44 PM