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:
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>
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.
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>
Nice Post
ReplyDeleteGood modification.
ReplyDeleteThanks for sharing information. You saved my day
Hi,
ReplyDeletethank 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.
Hi, I'm also having this issue. Did you find a solution?
DeleteThanks for your feedback guys. I will come with solution at earliest.
ReplyDeleteThank you Ajeet, much appreciated!
DeleteHi Guys, Unfortunately, I am not able to reproduce the bug.
ReplyDeleteBecause, 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.
Hi Ajeet, I'm using IE-11. JavaScript log says:
DeleteCalloutManager: Required property must be defined: launchPoint
If I refresh the page, it works fine. Thanks so much for your help
Thanks for your quick response.
ReplyDeleteI 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.
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).
ReplyDeleteI like to position the call out 50 px higher. Tried it but didn't find a solution.
Anybody?
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!.
ReplyDeleteHi, 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.
ReplyDeleteOn 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
Hi Stephen,
DeleteI need to check. I will come back to you at earliest.
By the way, Thanks for your appreciation.
Hi Ajeet,
DeleteDid you found solution to Stefan questions?
I am facing same issue for public facing site.
Thanks,
Paras Sanghani
To resolve the 'CalloutManager: Required property must be defined: launchPoint' error, move the markup <div id="ContactusLink"... above the open script tag.
ReplyDeleteThanks, that worked great!
DeleteYou can use placeholder text in the callout box instead of text that the user must remove before entering their own comments.
DeleteUse 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.
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?
ReplyDeleteI 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.
ReplyDeletethanks 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
ReplyDeleteDo the public user have permission to add data in List? Because I have created a functiona named as AddIteminList()
DeleteWhich added item in Contact List.
var context = new SP.ClientContext.get_current();
ReplyDeleteUnable 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
Any update to Ajeet's latest post about AdditeminList()?
ReplyDeleteHi,
DeleteTry to use lazy loading of SP.JS file. It will resolve the issue.
Hello Ajeet,
DeleteAs 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?
Sorry Guys for late response. I will fix this up (if issue persists) this weekend. and revert back with solution
DeleteHi Ajeet, would this solution work on public facing site for anonymous users if we've enabled Add Item permissions on the list?
ReplyDeleteSorry But with this solution No. I need to modify that one so that it will work for Anonymous users also.
DeleteI will try to do the same
Hi Ajeet, any chance that you have modified the script so that it will also work for anonymous users? Thank you for your effort!
DeleteHi all,
ReplyDeleteI 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"
Thanks Stefan. And Sorry That I was not so quick as you are.
ReplyDeleteNo problem! Thank you for all the work!
Delete