ایجاد Contact Us یا فرم Feedback با CallOuts

| پرینت |

افزودن یک دکمه تماس با ما (Contact Us) و یا فرم Feedback یکی از مطلوب ترین نیازمندی های بیزینسی سازمان در زمان استفاده از اینترانت می باشد. جهت ایجاد سریع فرم تماس با ما ، شما می توانید یا از یک وب پارت فرم لیست استفاده کنید و یا از Object Model سمت کاربر برای ایجاد فرم های پویا جهت ارسال سریع بازخورد استفاده کنید.

در این پست ما راجع به روشی جدید و تعاملی در جاییکه یک فرم بازخورد یا Contact Us در یک CallOut شخصی به نمایش در خواهند آمد و بازخورد کاربران با یک Submit CallOut Action به داخل یک لیست شیرپوینت اضافه خواهد شد، صحبت خواهیم کرد.

برای هرچه روشن تر شدن این موضوع به شکل پایین نگاه کنید :

شیرپوینت 2013 – ایجاد یک Contact Us یا فرم Feedback با CallOuts

برای شروع کار شما به موارد زیر نیاز دارید :

1- یک لیست Contact Us شخصی در جاییکه Feedback اضافه شده است.

2- یک وب پارت Script Editor در صفحه سایت شیرپوینت در جاییکه اسکریپت CallOut آنجا قرار دارد، در آنجا قرار گرفته است.

برای شروع اسکریپت زیر را کپی و آن را در وب پارت Script Editor صفحه paste کنید.

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

var _link = document.getElementById("ContactusLink");

var listCallout = CalloutManager.createNew({

launchPoint: _link,

beakOrientation: "leftRight",

ID: "CallOut ID",

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.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);

});

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';

}

function failed(sender, args) { alert('failed to add a List Item:' + args.get_message()); }

</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;\">Contact Us</span></u></div>

پس از انجام این کارها آن را ذخیره و صفحه را انتشار دهید. حالا هنگامی که روی لینک Contact Us کلیک می کنید ، CallOut که در پایین می بینید برای شما به نمایش در خواهد آمد.

شیرپوینت 2013 – ایجاد یک Contact Us یا فرم Feedback با CallOuts