Last week I got another code challenge when I was given a task as follows:
- There will a be a popup which will open from Editor Part of my custom Web Part Properties
- User will select a user names from the list into popup and click Ok button.
- Now selected user names will be added into the list box control of Editor Part.
Solution:
As I had to bring the selected users from popup to parent page and parent List will be auto refreshed with the new added users.
So I kept my consolidated users details into one hidden textbox and do post back so that updated details gets refreshed in List box.
- Beacause we need to open SharePoint popup from Editor Part so we will have to write our popup opening javascript at runtime. As follows:
private void GenerateJavascript()
{
string strPath = SPContext.Current.Web.Url + "/_layouts/Egspi/Default/DlgContactsSearch.aspx";
string strScript =
"function OpenDialog() { " +
"var options = SP.UI.$create_DialogOptions(); " +
"options.url = '" + strPath + "'; " +
"options.width = 360;" +
"options.height = 300; " +
"options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);" +
"SP.UI.ModalDialog.showModalDialog(options); " +
"}" +
"var messageId;" +
"function CloseCallback(result, target) { " +
"var strConsol='';" +
"if(result === SP.UI.DialogResult.OK) { " +
"var txtSearch = document.getElementById('" + txtContacts.ClientID + "');" +
"if (target != ''){" +
"var strExisting = txtSearch.value;" +
"var arrExisting = strExisting.split('#');" +
"var arrNew = target.split('#');" +
"var arrConsol = unique(arrExisting.concat(arrNew));" +
"strConsol = arrConsol.join('#');" +
"}" +
"txtSearch.value=strConsol; " +
"__doPostBack();" +
"}" +
"}" +
"function unique(arrayName) {" +
"var newArray = new Array();" +
"label: for (var i = 0; i < arrayName.length; i++) {" +
"for (var j = 0; j < newArray.length; j++) {" +
"if (newArray[j] == arrayName[i])" +
"continue label;" +
"}" +
"newArray[newArray.length] = arrayName[i];" +
"}" +
"return newArray;" +
"}" +
"function btnDeleteContacts_Click() {" +
"var strNewContacts = '';" +
"var txtSearch = document.getElementById('" + txtContacts.ClientID + "');" +
"var containerRef = document.getElementById('" + cblContacts.ClientID + "');" +
"var inputRefArray = containerRef.getElementsByTagName('input');" +
"var spanRefArray = containerRef.getElementsByTagName('span');" +
"for (var i = 0; i < inputRefArray.length; i++) {" +
"var inputRef = inputRefArray[i];" +
"if (inputRef.type.substr(0, 8) == 'checkbox') {" +
"if (inputRef.checked != true) {" +
"if (strNewContacts != '')" +
"strNewContacts += '#';" +
"strNewContacts += spanRefArray[i].getAttribute('optValue') + '~' + spanRefArray[i].getAttribute('optText');" +
"}" +
"}" +
"}" +
"txtSearch.value=strNewContacts;"+
"__doPostBack();" +
"}";
Page.ClientScript.RegisterClientScriptBlock(typeof(ContactsEditorPart), "ContactsDialogJavaScript", strScript, true);
}
- OpenDialog(): This method will open our desired Popup.
options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);check out 2nd parameter it says that this method will be called from parent when popup will get closed.
- CloseCallback(): This method will get the selected values into target parameter as string
Then it will check any duplicate username which is already present into Editor Part List Control, if yes then it will remove it from the target string.
Finally it will insert target string into my hidden text box.
- Unique(): This is simple method to remove the duplicate array elements.
- btnDeleteContacts_Click() : There is an option to select and delete any user from Editor Part list control.
