1

I'm developing two client web parts on the same sharepoint hosted app project. Client web part A shows a list of employees of the month(name, picture, etc) Client web part B shows the detailed information for a certain employee of the month

What i'm trying to achieve is to redirect the user form the page that holds the CWP A to the page that contains CWP B when clicking an element from A.

I've tried without success by using query string. I've read that you could communicate two apps with post message, but as i see it, that scenario won't apply to mine..

What could i do? Thanks in advance.

EDIT 6/9/2015

Redirect means clicking on element and open the client web part b on different page, but same tab. In order to achieve this client web part A has a property named redirect Url which represents the url where client web part B is located, my initial idea was to append a query string to that url. However when i redirect to the page with the query string ?Id=2 (for example), the page won't load any client webpart, leaving a blank page.

  • Why won't postMessage work? It should easily be able to handle what you need. – wjervis Jun 11 '15 at 16:58
  • Because the client web parts are on different pages..and all the examples i found talked about having both CWP on the same page. I'd rather use post message than my current solution but perhaps there is something i'm missing. – StyleSlash Jun 12 '15 at 15:03
  • So, you have PageA with WebPartA, PageB with WebPartB. You want a link in WebPartA to open PageB, and pass info to WebPartB? If so, simply have your link include a querystring option to PageB, and then use postMessage to pass that to the webpart. – wjervis Jun 12 '15 at 15:05
1

To me it sounds like you want a normal link (a-tag) to the other app.
One way to achieve this is by getting the app tile from host web and create a link to the tile target, something like this:

_api/Web/AppTiles?$filter=Title eq 'Your app title'&$select=Target

(note you need to use AppContextSite endpoint.)

Then select the first result, and create an a-tag with the value as href:

'<a href="' + items[0].Target + '">link</a>'

Update:

One way to communicate between SharePoint hosted client web parts (app parts) is to use postMessage, here is an article (My SharePoint Insight) by Borislav Grgić.

As far as I understand the app parts can't communicate directly, i.e., you need some code on the parent page where you add the app parts, something like this:

App A <-> Parent page <-> App B

Listening

In order to listen for messages you can use addEventListener function on the global window object:

window.addEventListener('message', function(event) {
  console.log('event', event.data);
});

Sending

When sending you call postMessage.
Important: When calling postMessage you need to reference the window object you want to send a message to.

From app part

parent will be parent page window object inside the app part iframe.

window.parent.postMessage({message:'Hello, world!'},'*');
From parent page

On the parent page you must find the iframe element(s) and use contentWindow.

document.querySelector('iframe').contentWindow.postMessage({message:'Hello, world!'},'*');

Glue

Now you need to glue this together. On the parent page you need to listen for messages from both app parts and proxy these messages between them. The information above should be sufficient to get you going.

  • Thanks for the idea, however i think this won't apply for my situation, I've edited my question, check it out and let me know your thoughts. Thanks again – StyleSlash Jun 9 '15 at 15:14
  • i tried this with both client web parts on same page and worked like charm. However, i can't see how i could use this when having both client web parts on different pages. Keep in mind that client web part b wont load unless user clicks CWP a's item. The click will trigger the post message which should be sent o a CWP that isn't loaded, ready yet. Maybe i lack of certain knowledge and that's why i cant' see it through – StyleSlash Jun 11 '15 at 15:17
  • If you want to have them on different pages my solution would not work, then you would have to do something like what @kesava mentions, although then you need to deploy a C#-project externally (a lot more to it than a simple SharePoint hosted app) - could also look at other options, e.g., what about opening and closing a firebase connection (hacky) – eirikb Jun 11 '15 at 15:28
0

I assume you are having issues in reading the query string via java script. if thats the case then you may refer the below one for detailed answer.

Link for query string in javascript

if you are really looking for a connected apps architecture, then I would suggest to use "SignalR" with SharePoint. There are couple of very good articles mentioned in MSDN and SharePoint blogs in internet.

Pls go through the below links as references.

Link-1

Link-2

0

Fellows, finally i got the solution. I found this page that explains how to pass value from a sharepoint page to a client webpart.

Basically what i had to do in order to retrieve the page query string and send it to the iFrame was the following:

1 - Add a property to the client web part (should have the same name as the query string that will be passed).

2 - Add a script editor/content editor below the client web part with a script that would retrieve the value from the query string, validate a couple of things and then replace the value of the property defined the client web part

For a detailed information check the link below!

Thanks @eirikb and @kesava for the help! I really appreciate it

  • 1
    You should edit your answer to include the main part of the link in it. Link-only answers become useless should the link break, or the content change. – wjervis Jun 12 '15 at 15:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.