Wednesday 21 August 2013

Create a Quick Contact Us or FeedBack Form in SharePoint 2013 (using CallOuts)

While surfing, I found a very good example for SharePoint 2013 CallOuts.
Very well written example for Create a Quick Contact Us or FeedBack Form in SharePoint 2013 (using CallOuts)

But I found one tactical issue, while using this Callouts functionality I found that after adding comments in Contact Us List , The CallOutAction Button still showing Submit button and it works exactly what it asks for.





In my view, Submit link should be disappeared or should be changed.
I googled full day, But I did not find any solution (still less help available for CallOuts)
Then I write the following code to overwrite the Submit button link with Close Window and  its working fine for me:


To get started you would need the following
1. A Custom "Contact Us"  list where the Feedback will be added.
2. A Script Editor WebPart on a SharePoint 2013 Site page where we will add the script the form CallOut.
3. Paste the below script in Srcipt Editor Webpart:
<script type="text/javascript">
SP.SOD.executeFunc("callout.js", "Callout", function () {    
    var _link = document.getElementById("ContactusLink");
    var listCallout = CalloutManager.createNew({ 
        launchPoint: _link,
        beakOrientation: "leftRight", 
        ID: "CallOutID", 
        title: "Contact Us", 
        content: "<div class=\"ms-soften\" style=\"margin-top:2px; \"><hr/></div>"
+ "<div id='confirmationBLOCK' style=\"margin-top:13px;visibility:hidden;\">Thank you for Contacting Us!</div>"
+ "<div class=\"callout-section\" style=\"margin-top:2px;width:95%;Height:200px; \"><textarea id='CommentsArea' style=\"width:100%;height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;\">Add your Comments here...</textarea></div>", 
    });

    //Creating a Submit Custom Action
    var customAction = new CalloutActionOptions();
    customAction.text = 'Submit';
    customAction.tooltip = 'Save Item in Contact Us List';
    customAction.onClickCallback = function(event, action)
    {
        var _contactUsTextarea = document.getElementById('CommentsArea');
        //Adding the new Contact Us Item in the List.
        AddIteminList(_contactUsTextarea.value);
        _contactUsTextarea.style.visibility='hidden';
    };
    var _newCustomAction = new CalloutAction(customAction);
    listCallout.addAction(_newCustomAction);    
    //listCallout.set({ openOptions: { event: "hover" } });    
});

function AddIteminList(_contactUsText)
{
    var context = new SP.ClientContext.get_current();
    var web = context.get_web();
    var list = web.get_lists().getByTitle('Contact Us');
    var listItemCreationInfo = new SP.ListItemCreationInformation();
    var newItem = list.addItem(listItemCreationInfo);
    newItem.set_item('Title', _contactUsText);
    newItem.update();
    context.executeQueryAsync(Function.createDelegate(this, this.success), Function.createDelegate(this, this.failed));
}

function success() { 

    var _confirmationblock = document.getElementById('confirmationBLOCK');
    _confirmationblock.style.visibility = 'visible';
    overriteCustomAction();
    
}

function failed(sender, args) { alert('failed to add a List Item:' + args.get_message()); }
function overriteCustomAction()
{    
    //Get Existing Callout    
    var launchPoint = document.getElementById('ContactusLink');    
    var callout = CalloutManager.getFromLaunchPoint(launchPoint);
    if (callout != null)
    {        
        var custAct = callout.getActionMenu();
        var calloutAction = new CalloutAction({
            text: "Close window",
            tooltip: "Close Dialog Box",            
            onClickCallback: function() {                
                callout.close();
                ResetCustomAction();
            }
        });

        //Handling [X] event
        callout.addEventCallback("closing", function () { CallOutonCloseEvent(); });

        //overwrite the callout action to the callout control.
        //Here only one calloutAction i.e. Submit. So I am using [0] here        
        custAct.getActions()[0] = calloutAction;
        callout.refreshActions();
    }    
}
function ResetCustomAction() {
    //Get Existing Callout
    var launchPoint = document.getElementById('ContactusLink');
    var callout = CalloutManager.getFromLaunchPoint(launchPoint);
    if (callout != null) {
        var custAct = callout.getActionMenu();

        //New Call Out Action
        var calloutAction = new CalloutAction({
            text: "Submit",
            tooltip: "Save Item in Contact Us List",            
            onClickCallback: function () {
                var _contactUsTextarea = document.getElementById('CommentsArea');

                //Adding the new Contact Us Item in the List.
                AddIteminList(_contactUsTextarea.value);
                _contactUsTextarea.style.visibility = 'hidden';
            }
        });
        //Reset to Default.                
        custAct.getActions()[0] = calloutAction;
        callout.refreshActions();
    }
}
function CallOutonCloseEvent()
{
    var launchPoint = document.getElementById('ContactusLink');
    var callout = CalloutManager.getFromLaunchPoint(launchPoint);
    if (callout != null)
    {        
        var custAct = callout.getActionMenu();
        var actText = custAct.getActions()[0].getText();
        if (actText == "Close window")
        {
            ResetCustomAction();
        }       
    }
}

</script>
<div id="ContactusLink" style="width:38%;">If you have any question or Concerns, please feel free to <u><span class=\"ms-commandLink\" style=\"text-align: left;font-size: 14px; cursor: pointer;\">Contact Us</span></u></div>

32 comments :

  1. Good modification.
    Thanks for sharing information. You saved my day

    ReplyDelete
  2. Hi,
    thank you for the post.
    I have a problem with this solution. The Contact Us link only works after a site refresh. When I first enter the site the click on the Contact Us has no effect.
    Thank you for any feedback or help.

    ReplyDelete
    Replies
    1. Hi, I'm also having this issue. Did you find a solution?

      Delete
  3. Thanks for your feedback guys. I will come with solution at earliest.

    ReplyDelete
    Replies
    1. Thank you Ajeet, much appreciated!

      Delete
  4. Hi Guys, Unfortunately, I am not able to reproduce the bug.
    Because, In my environment, It is working fine.
    I have test it with IE-10, Firefox, and Chrome.
    Are you using other browser? If yes then please let me know.

    ReplyDelete
    Replies
    1. Hi Ajeet, I'm using IE-11. JavaScript log says:

      CalloutManager: Required property must be defined: launchPoint

      If I refresh the page, it works fine. Thanks so much for your help

      Delete
  5. Thanks for your quick response.
    I have not tested with IE-11. And yes, There is some JQuery issue with IE-11 not only this case but others also.
    I will try to fix it out for IE-11 also.

    ReplyDelete
  6. I have a call out on a feedback link in the right bottom corner of the screen. Everything works fine but..... the action area can not be seen because its rendered of the screen. So you must scroll to see the action (or click on it).
    I like to position the call out 50 px higher. Tried it but didn't find a solution.

    Anybody?

    ReplyDelete
  7. Hi, Nice post. Is there any chance that you could explain how to insert two or more fields to the list with this same form?. I'm trying to modify your script but I'm no expert so I haven´t been able to figure out a solution. Kind regards!.

    ReplyDelete
  8. Hi, love the post! It works great on my intranet , but can I also let it work for anonymous users on a publishing site? As a contact form.
    On my public-facing website the script won't let me send the from to a list. But when I login it works. I already set unique permissions on the list for anonymous users and deactivated ViewFormPagesLockDown feature

    ReplyDelete
    Replies
    1. Hi Stephen,
      I need to check. I will come back to you at earliest.
      By the way, Thanks for your appreciation.

      Delete
    2. Hi Ajeet,

      Did you found solution to Stefan questions?
      I am facing same issue for public facing site.

      Thanks,
      Paras Sanghani

      Delete
  9. To resolve the 'CalloutManager: Required property must be defined: launchPoint' error, move the markup <div id="ContactusLink"... above the open script tag.

    ReplyDelete
    Replies
    1. Thanks, that worked great!

      Delete
    2. You can use placeholder text in the callout box instead of text that the user must remove before entering their own comments.

      Use the placeholder tag eg: placeholder='Add your text here...'

      You can add the placeholder in the textarea tag and remove: "Add your comments here..."

      As soon as the user clicks inside the text area the placeholder text will be removed so the user can start typing straight away. This will only work with more modern browsers but is a lot cleaner in my opinion.

      Thanks for your post Ajeet! It has been very helpful.

      Delete
  10. Hi Thanks for the post, however, I noticed that this is only working when the page is checked in. Whenever I publish the page the call out is displayed, I am able to fill in a question but the question is not submitted in the first place when clicking on submit.Any ideas how to solve this?

    ReplyDelete
  11. I am having the same issue. The form submission works when the page is checked in. When the page is published, the submit button does not work.

    ReplyDelete
  12. thanks for this one. It's working well for me but the public users are not able to submit their comments. Looks like submit button is not working for them. Help please! Thanks

    ReplyDelete
    Replies
    1. Do the public user have permission to add data in List? Because I have created a functiona named as AddIteminList()
      Which added item in Contact List.

      Delete
  13. var context = new SP.ClientContext.get_current();
    Unable to get property 'get_current' of undefined or null reference
    var web = context.get_web();
    var list = web.get_lists().getByTitle('Contact Us');
    var listItemCreationInfo = new SP.ListItemCreationInformation();
    var newItem = list.addItem(listItemCreationInfo);
    newItem.set_item('Title', _contactUsText);
    newItem.update();

    I'm getting this an error.. any ideas? I'm not sure why I'm getting that

    ReplyDelete
  14. Any update to Ajeet's latest post about AdditeminList()?

    ReplyDelete
    Replies
    1. Hi,

      Try to use lazy loading of SP.JS file. It will resolve the issue.

      Delete
    2. Hello Ajeet,

      As others have already said, the Submit button doesn't work when the page is checked in and published. It only works when the page is in Edit mode. Can you help?

      Delete
    3. Sorry Guys for late response. I will fix this up (if issue persists) this weekend. and revert back with solution

      Delete
  15. Hi Ajeet, would this solution work on public facing site for anonymous users if we've enabled Add Item permissions on the list?

    ReplyDelete
    Replies
    1. Sorry But with this solution No. I need to modify that one so that it will work for Anonymous users also.
      I will try to do the same

      Delete
    2. Hi Ajeet, any chance that you have modified the script so that it will also work for anonymous users? Thank you for your effort!

      Delete
  16. Stefan Breedveld16 May 2017 at 02:55

    Hi all,

    I edited the script so (anonymous) users can now successfully submit this form. So the callout contact form also works when the page is published.

    First replace
    SP.SOD.executeFunc("callout.js", "Callout", function () {

    with
    SP.SOD.loadMultiple(['sp.js', 'callout.js'], function() {

    Second
    Disable the "Require Use Remote Interface Permission" of the web application
    1.Go to Central Administration
    2.Go to Manage Web Application
    3.Select your Web App
    4.Click on Authentication Providers in the ribbon
    5.Click zone "Default".
    6.Uncheck "Require Use Remote Interfaces Permission"

    ReplyDelete
  17. Thanks Stefan. And Sorry That I was not so quick as you are.

    ReplyDelete
    Replies
    1. Stefan Breedveld16 May 2017 at 04:19

      No problem! Thank you for all the work!

      Delete