SharePoint model dialogues with Call back values using Application Page

Hello All,

Here are the steps to overcome post back issues with popups in SharePoint. In this post i will be describing the model dialogue with call back values. These values help to update few controls in parent page.
  • Download below JS files and to your visual web part
  • http://../../../../_layouts/15/js/jqueryCustom-1.7.1.min.js
    http://../../../../_layouts/15/js/jqueryCustom-ui-1.18.min.js
  • Create an Application page for popup and name it as for your requirement(ABC). This will be added under layouts folder of your solution.
  • Parent Page Steps to do:
  • Now add an anchor tag in parent page as shown below or you can add any control to call popup. onclick method should have path to your application page as described below.
  • <a href=”#” onclick=”openBasicDialog(‘/_layouts/your solution name here/Application Page Name.aspx’,’Tilte for PopUP‘);”>Click Here</a>
  • Now place below script tag in your header section of parent page. OpenBasicDialog function launches the popup window , onPopUpCloseCallBack function holds values from popup and writes back to specific controls in parent page. As shown below i am writing value into asp:TextBox1 control. Make sure this control has ClientIDMode=static like shown below of script tag.
  • //******** Basic Dialog Starts Here ***********/
    function openBasicDialog(tUrl, tTitle) {
    var options = {
    url: tUrl,
    title: tTitle,
    dialogReturnValueCallback: onPopUpCloseCallBackPC
    };
    SP.SOD.execute(‘sp.ui.dialog.js’, ‘SP.UI.ModalDialog.showModalDialog’, options);
    }
    function onPopUpCloseCallBack(result, returnValue) {
    if (result == SP.UI.DialogResult.OK) {document.getElementById(‘TextBox1’).value = returnValue[0];
    } else if (result == SP.UI.DialogResult.cancel) {
    }
    }//******** Basic Dialog Ends Here ***********/
  • <asp:TextBox ID=”TextBox1″ ClientIDMode=”Static” runat=”server”> </asp:TextBox>
  • Now we are done with parent page activities now lets do for Application page.
  • Application Page Steps to do:
  • Download and add the below JS reference in header section. http://../SP.UI.Dialog.js
  • Here is the script to pass the data to Parent page, Here i am sending one of the application page textbox value to parent.
  • function closePopupAndPassData() {
    var popData = [];popData[0] = document.getElementById(‘txtApplicationPage’).value;
    SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, popData);
    }
  • <asp:TextBox ID=”txtApplicationPage” ClientIDMode=”Static” runat=”server”> </asp:TextBox>
  • Now we need to add two buttons for success back and to cancel the popup. Here are the controls for the same.
  • <input id=”btnClientOk” type=”button” value=”Submit” onclick=”closePopupAndPassData()” />
    <input id=”btnCancel” type=”button” value=”Close” onclick=”SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel)” />
  • The popup will look like this popup

 

Happy Coding !!!

AUTO COMPLETE CONTROL USING SP SERVICES

Greetings !!!

I am going to explain how to read SharePoint list items using SP services.
Using SP Services we can make text box into auto complete control with the list item.
In first step add the below references:

http://../../../../_layouts/15/js/jqueryCustom-1.7.1.min.js
http://../../../../_layouts/15/js/jqueryCustom-ui-1.18.min.js
http://../../../../_layouts/15/js/jquery.SPServices-0.6.2.min.js
<SharePoint:CssRegistration ID=”cssReg” runat=”server” Name=” /_layouts/15/js/jquery-uiCustom.css “></SharePoint:CssRegistration>

Here is the script which pulls data from list and bind the values to your text box.

< script type=”text/javascript” >
Sys.Application.add_load(wireEvents);
function wireEvents() {
$(function () {
var name = new Array();
var availableTags = GetListItems();
function GetListItems() {

var index = 0;
var ID, Title;
$().SPServices
({
operation: “GetListItems”,
async: false,
listName: “ListNameHere”,
CAMLQuery: “ <Query><OrderBy><FieldRef Name=’Title’ Ascending=’True’ /></OrderBy></Query> ”,
CAMLViewFields: ” <ViewFields><FieldRef Name=’Title’ /></ViewFields> “,
completefunc: function (xData, Status) {
$(xData.responseXML).find(“z\\:row,row”).each(function () {
name[index] = = $(this).attr(“ows_Title”);
index++;
}
});
}
});
return name;
}
function split(val) {
return val.split(/,/);
}
function extractLast(term) {
var nonSpaceTerm = split(term).pop().toString();
if (/^\s+\S*/.test(nonSpaceTerm)) {
nonSpaceTerm = nonSpaceTerm.replace(/\s+/, “”);
}
return split(nonSpaceTerm).pop();
}
$(“input[name*=’txtTitle’]”)
// don’t navigate away from the field on tab when selecting an item
.bind(“keydown”, function (event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data(“autocomplete”).menu.active) {
// on key down and selct of data this will trigger
event.preventDefault();
}
})
.autocomplete(
{
minLength: 1, // Suggestions will display on one character in text box, you can increase this to minimize the search results.

source: function (request, response) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(
availableTags, extractLast(request.term)));

//response(results.slice(0, 10));
},
focus: function () {
// prevent value inserted on focus
return false;
},
select: function (event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
this.value = terms.join(“”);
this.value += ” “;
return false;
}
});
});
}
< /script >

Here i am trying to pull the values from Title column, you can replace as for your requirement. Find the line listName: “ListNameHere” above and place your list name.
Here is the text box control
<asp:TextBox id=”txtTitle”  runat=”server”  placeholder=”Opponent Name”></asp:TextBox>

After all the above steps deploy the solution and your control will load with all suggestions available in your Title column as shown below.
In below i have entered “o” and it pulls all the records which has that characterSP Services.

Thank you, Happy Coding.