Currently I created an action button to my Blog Posts using SharePoint hosted solution. So when an item is created or edited, the user will be able to add content from the host web dialog back to the 'Body' field. How can we accomplish that?

Below is the code for Custom Action:

    <?xml version="1.0" encoding="utf-8"?>
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction Id="5826eb5f-1276-494b-a6a0-1ab1dd677871.SPInsertSliderAction"
            Title="Insert Slider Show Link"
  Update the UI definitions below with the controls and the command actions
  that you want to enable for the custom action.
    <CommandUIDefinition Location="Ribbon.EditingTools.CPInsert.Embed.Controls._children">
      <Button Id="Ribbon.EditingTools.CPInsert.Embed.Controls.SPInsertSliderActionButton"
              Alt="Insert Slider"
              LabelText="Insert Slider"
              Image16by16="_layouts/15/images/placeholder16x16.png" />
    <CommandUIHandler Command="Invoke_SPInsertSliderActionButtonRequest"
</CommandUIExtension >

In the default page I created a text field and a button, where after you click on the button it should post the message back to the body's post. How can we post the context from the app dialog back to the Body?

This is the content within the Default.aspx page

    <%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
    <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
        <WebPartPages:AllowFraming ID="AllowFraming" runat="server" />

        <input type="text" id="docPath" value="text here" />

        <button type="button" onclick="addToBodyText()">OK</button>


This is the code addToBodyText()

    function addToBodyText() {
        //create a link 
        var textVal = $('#docPath').val();

        //add to the body text
        //**** the below code is commented because of cross-domain issue ******//
        //var node = document.createElement("Li");                 
        //var textnode = document.createTextNode(textVal);         

//Close the dialog without refresh
        window.parent.postMessage('CloseCustomActionDialogNoRefresh', '*');

So how can I post the message back to the Body field? I guess I can leverage that using window.parent.postMessage function but not really sure about it.

Here are the images: Custom action button Host web dialog box with text field and a button

I'm kind of stuck here!!. Any help is highly appreciated.


Got it! You have to make your host Body field to interact with App's IFrame

It's a matter of registering listeners on message on the Host Page so it can listen to the App's IFrame message.

Note: In this case, I've registered listeners on both App and on the Blog Post.

In [HOST]: I edited the New Post page and added the Script Editor webpart. Below is the snippet

    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
            <script type="text/javascript"> 
            (function() {

                var sendHostPageInfoListener = function (e) {

                    var messageData;

                        messageData = JSON.parse(e.data);
                        if (messageData.message != null && messageData.message !='undefined' && messageData.message !='')
                            console.log("[Host Page] Response received from App IFrame:" + messageData.message);                
                            //add response to the div body
                            $("div[id^='Body_']:last").append("<p>" + messageData.message + "</p>");                
            catch (error)
                console.log("Could not parse the message response.");

            //// Construct the return data to send to the app part
            //e.source.postMessage("hello to iFrame", e.origin);

        // Register the listener
        if (typeof window.addEventListener !== 'undefined') {
            window.addEventListener('message', sendHostPageInfoListener, false);
        else if (typeof window.attachEvent !== 'undefined') {
            window.attachEvent('onmessage', sendHostPageInfoListener);



In [SharePoint Hosted App] App.Js page:

   $(document).ready(function () {

var getHostPageInfoListener = function (e) {
    /// <summary>Callback function for getting the host page's info via postMessage api.</summary>
    console.log("[IFrame] response received from Host Page: " + e.data);

    var messageData;
    try {
        messageData = JSON.parse(e.data);
    catch (error) {
        console.log("Unable to parse the response from the host page.");

// Register the listener
if (typeof window.addEventListener !== 'undefined') {
    window.addEventListener('message', getHostPageInfoListener, false);
else if (typeof window.attachEvent !== 'undefined') {
    window.attachEvent('onmessage', getHostPageInfoListener);

| improve this answer | |

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.