5

We created SharePoint Hosted App that offers a Web Part we can add to SharePoint 2013 pages. The problem is that web part installs as an iframe pointing to the apps domain.

Two challenges in trying to impact the Page's DOM and elements and also accessing the pages URL query string parameters. Basically cross domain issues.

Is there any way to deploy a webpart that installs in-line as a component on the page like a Script Editor Web Part?

If that must be done as a sandbox solution, how can users on 100+ sites easily download and install this web part like web parts from the App catalog and Store?

BTW, How is it that a Script Editor Web Part installs in-line on the page without an iframe? Possible to reproduce this in our own App?

UPDATE: MS AND SEVERAL DEVELOPERS SAID THIS WAS NOT POSSIBLE. THERE IS AN UPDATED APPROACH SUGGESTED BY JOHN-M THAT WE ARE ACCEPTING AND USING. IT'S BASICALLY A NAPA APP THAT WRITES SCIPT CODE TO A CONTENT EDITOR WEPART AND UPLOADS IT VIA THE APP. WE TESTED IT AND WORKS! WE ARE NOW LOOKING INTO OPTION FOR USING THIS APPROACH SOMEHOW TO INTRODUCE CUSTOM WEB PARTS AND WEB PART PROPERTIES (AND NOT JUST CEWPs)

Improve this question
2
  • 1
    Just a thought, but you can use HTML5 postMessage to send the data back and forth. SPO does allow for this.
    – wjervis
    Commented Jan 16, 2015 at 13:28
  • @o365spo were you be able finally to publish your desired app to the store ?
    – Anas Nakawa
    Commented Nov 8, 2015 at 7:49

3 Answers 3

Reset to default
6
+200

The Office Dev Patterns and Practices repo on GitHub has a great sample for provisioning custom web parts on the host web from inside of an app which should be a viable option for your situation. You could use this pattern to allow users to retrieve a custom configured web part and have it inserted into their host web allowing them to insert it at will (you could also programatically insert it on specific pages and that is demonstrated in one of the sample projects). To create the custom web part you can export a pre-configured webpart as a .webpart file from within the UI (or using various other techniques) in order to avoid needing a sandbox or farm solution.

The "AppScriptPart" sample (the name they're calling it) can be found here: https://github.com/OfficeDev/PnP/tree/master/Samples/Core.AppScriptPart

Steve Walker from the Office 365 team also does a nice demo of the technique involved here as part of a course offered as the Microsoft Virtual Academy. You'll be interested in the course called "Transform SharePoint Customizations to SharePoint App Model" -- Module 4, starting at 17:29 (pick "UX Customizations with app model" from the right hand menu) should provide you with a much better overview of the process than I can explain here.

The sample and video demonstrate a provider hosted app, but I have re-built most of the sample using the JavaScript Object Model as well, so you could use a SharePoint hosted app for this purpose as well. The major difference there (other than hosting requirements) is that in a provider hosted app it's possible for the app to perform operations that a user may not have permissions for (such as adding the webpart to the webpart library or inserting it on a page), while on a SharePoint hosted app, the user accessing the app (and the app itself, just like with provider hosted) would need to have the right permissions to perform the action.

When a webpart is used like this, there are no cross domain issues to overcome, because the webpart is loaded directly on the host web page (not in an IFrame) and runs completely within the context of the hosting page.

Update: I'm sharing a working version of a SharePoint hosted app in Napa that will install a webpart into your webpart gallery that reads the querystring and modifies a DOM element on your page (just as your question proposed). You can install it directly to your (or your development) O365 environment if you have installed Napa -- which is free when using O365/SPO. Note this is not production level code: it will break MDS, the webpart installs under the miscellaneous group because I don't bother to change it, the webpart will not work if the app is uninstalled (since the app web location hosting the script will change) and I'm certain there are many improvements that you could make. My intent is just to demonstrate the possibilities.

The app will install a web part into your webpart gallery that you can insert on a page; the webpart will then display information from the querystring and modify a DOM element on the current page.

After you run the scenario in the full screen app page, the webpart will be inside of your webpart gallery. You install the webpart as a normal webpart (not an app part): edit the page, from the ribbon to go Insert => WebPart => Miscellaneous => QueryString Display => Add

If the QueryStringDisplay webpart doesn't show you any values after Your QueryString is: manually add a querystring value with something like ...aspx?something=1

You could modify the app so that it provisions the web part into the galleries of a number of different site collections (provided the person running the app had permissions to all of those site collections).

You'll have to trust it with full control on the host web (since that is the permission needed to upload webparts into the webpart gallery) but you should easily be able to review the code and see precisely what it does (and that it is safe to run). All of the logic is contained in App.js and webPartScript.js

Here is the link: http://aka.ms/J08vgz

Improve this answer
10
  • I saw this video. Can somebody confirm js code referenced in the App script part can address DOM elements and URL query strings in the Parent page? We've deployed Webparts via Apps, but due to cross browser can do neither. Also those Web Parts are installed under iframes pointing to the App Domain.
    – Hell.Bent
    Commented Jan 16, 2015 at 15:24
  • Thank You. Why and how? Can you identify specifically what in this solution differs from app web part we likely deployed that does not seem to load js in the context of the page?
    – Hell.Bent
    Commented Jan 16, 2015 at 16:53
  • One point I forgot to make is that our solution is SharePoint Hosted on SPO. We opened a Microsoft Ticket to discuss this question. Our developers are saying this is not possible without either manually adding a script editor web part to the parent Page or a Provider Hosted solution.
    – Hell.Bent
    Commented Jan 20, 2015 at 13:16
  • Thank You. I've got Microsoft and a Contractor discussing and trying this. We are still under the Impression webparts introduced by an SPO App will run inside an iFrame an on the App domain. We suspect this presents challenges not anticipated or faced in the video example.
    – Hell.Bent
    Commented Jan 20, 2015 at 20:49
  • Heh -- well let us know when your paid assets verify this, but I assure you that webparts introduced via an app using this technique will not run inside of an IFrame.
    – John-M
    Commented Jan 20, 2015 at 20:52
1

Querying and manipulating the DOM elements can be done in SPO Page through App part (Client hosted web part) even though its run inside the iframe on the hosted web page.

To do this, you need to wire-up the web part properties with query string as suggested by John-M and I tried few approaches and found none except this idea.

SP.RequestExecutor.js doesn't help me to have cross domain call for the purpose of identifying the DOM element on the SPO page via Client hosted webpart which is placed on the same page.

On searching, I found the magic line of Javascript code document.domain="your domain". This has to be placed on your SPO Page and as well in App Part. Now I am able to query the DOM element after this mutual understanding been created between the Client hosted webpart (App Part) and the SPO Page.

Consider this scenario, if a page had two field and wanted to change the color of the any of the field,then you must aware of the Field id that need to pass it as querystring to your app part placed on yet resides on the other domain. Logic need to be written inside your app part as outlined on my personal blog posted some time ago. http://intelliview.blogspot.in/2014/03/sharepoint-app-custom-properties.html.

And related workaround video : https://www.youtube.com/watch?v=TUZJbqm6fL4

Improve this answer
0

Good example from Apps for SharePoint sample pack: SharePoint 2013: Display remote webpage content using the coffeemaker app part

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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