Showing posts with label JQuery. Show all posts

With SharePoint custom file upload control we can add comments or description for each uploaded file.
for this we have to create a SharePoint Multiline text field to store comments. we can store the comments along with file name. so that we retrieve or save comments with correct file.

      
        DocumentComments

and we can handle the comments on the code as below.

var inputtext = document.getElementById("onetidIOComment").value;
            if (inputtext != "") {
                var tdivision = document.createElement("td");
               // tdivision.setAttribute("class", "ms-vb");
      
                var span = document.createElement("span");                       // Create a element
                span.setAttribute("dir", "ltr");
                span.innerText = "Comment:  " + inputtext;
                tdivision.appendChild(span);
                var tRow = document.getElementById("attachRow" + i);

                tRow.appendChild(tdivision);
                document.getElementById("onetidIOComment").value = "";
    $("#attachRow" + i).find('td:last').css('color','#444');
    $("#attachRow" + i).find('td:last').css('padding-left','10px');
    $("#attachRow" + i).find('td:last').prev().css('vertical-align','top');

            }
            i++;

// Here we are tying to show the comments on attached documents table immediatly

function AddDocumentComments(){
    var fileinfo="";
    var MyRows = $('table#idAttachmentsTable').find('tbody').find('tr');
    for (var i = 0; i < MyRows.length; i++) {
        var AttCol = $(MyRows[i]).find('td:eq(0)').find('span').html();

        var lastItem = AttCol.split("\\").pop(-1);

        var ComCol = $(MyRows[i]).find('td:eq(2)').find('span').text();
        fileinfo += lastItem + ";" +ComCol + "#";


    }
    $("textarea[title='DocumentComments']").val(fileinfo);
}

Now we will include all feature step by Step

Step: 1

SharePoint Custom file attachment control

Step: 2
Client Validation for SharePoint file Upload Control

Step: 3
SharePoint error duplicate file ulpoad error

SharePoint file upload / attachment control has a very big issue is " SharePoint List will not allow to attach duplicate files."

If we used custom file upload control we dont have direct way to restrict to upload duplicate files.
we will get the below error message.
"Fail to get the value of the attachments column. A file with same name is already exists".

We can handle this error by using JQuery.

// it is the same duplicate check code
        var foundDuplication = false;

        $('#idAttachmentsTable').find('tbody').find('tr').each(function () {
            var existingFileName = $(this).find('.ms-vb').find('a').text();
            // if the existingFileName is empty then the attachment was uploaded in this session
            // that is, it is not saved yet
            if (existingFileName == '') {
                var existingFilePath = $(this).find('.ms-vb').find('span').text();
                existingFileName = existingFilePath.replace(/^.*[\\\/]/, '');
            }

            if (newFileName == existingFileName) {
                foundDuplication = true;
                return false;
            }
        });

        if (foundDuplication) {
            alert("A file with name '" + newFileName + "' is already attached to this item.");
           // $('#attachmentsOnClient').find('input').last().clone(true).remove();
   //$('#attachmentsOnClient').find('input').last().val('');
   var lastupp = $('#attachmentsOnClient').find('input').last();
   //$('#attachmentsOnClient').find('input').last().replaceWith(($('#attachmentsOnClient').find('input').last()).clone(true));
   lastupp.replaceWith((lastupp).clone(true));
   document.getElementById("onetidIOComment").value = "";
   

        }

Here we have only one option to replace the last uploaded control with new one. The internal functionality of the file upload control is, when ever a file is uploaded, SharePoint will hide the existing upload control and will create new upload control to upload another file.

Now we will include all feature step by Step

Step: 1

SharePoint Custom file attachment control

Step: 2
Client Validation for SharePoint file Upload Control

Step: 3
SharePoint add comments for each attached document

we can set client side validation for SharePoint file upload / attachment control.
we can do validation on
1. Restricted file types
2. Max file Size
3. Min File Size

function CustomUpload() {

    var newFilePath = $('#attachmentsOnClient').find('input').last().val();   
    var newFileName = TrimWhiteSpaces(newFilePath).replace(/^.*[\\\/]/, '');
 var restrictype = ".ade|\\.adp|\\.asa|\\.ashx|\\.asmx|\\.asp|\\.bas|\\.bat|\\.cdx|\\.cer|\\.chm|\\.class|\\.cmd|\\.com|\\.config|\\.cnt|\\.cpl|\\.crt|\\.csh|\\.der|\\.dll|\\.exe|\\.fxp|\\.gadget|\\.grp|\\.hlp|\\.hpj|\\.hta|\\.htr|\\.htw|\\.ida|\\.idc|\\.idq|\\.ins|\\.isp|\\.its|\\.jse|\\.json|\\.ksh|\\.lnk|\\.mad|\\.maf|\\.mag|\\.mam|\\.maq|\\.mar|\\.mas|\\.mat|\\.mau|\\.mav|\\.maw|\\.mcf|\\.mda|\\.mdb|\\.mde|\\.mdt|\\.mdw|\\.mdz|\\.ms-one-stub|\\.msc|\\.msh|\\.msh1|\\.msh1xml|\\.msh2|\\.msh2xml|\\.mshxml|\\.msi|\\.msp|\\.mst|\\.ops|\\.pcd|\\.pif|\\.pl|\\.prf|\\.prg|\\.printer|\\.ps1|\\.ps1xml|\\.ps2|\\.ps2xml|\\.psc1|\\.psc2|\\.pst|\\.reg|\\.rem|\\.scf|\\.scr|\\.sct|\\.shb|\\.shs|\\.shtm|\\.shtml|\\.soap|\\.stm|\\.svc|\\.url|\\.vb|\\.vbe|\\.vbs|\\.vsix|\\.ws|\\.wsc|\\.wsf|\\.wsh|\\.xamlx";
    var maxFileNameLength = 128; 
 var maxFileSize = 250;
 //var extension = newFileName.replace(/^.*\./, '');
  var myFSO = new ActiveXObject("Scripting.FileSystemObject");
  var thefile = myFSO.getFile(newFilePath);
  var filesize = Math.round((thefile.size/1048576),2);
    
   
 
    var match = (new RegExp('[~#%\&{}+\|]|\\.\\.|^\\.|\\.$')).test(newFileName);
  var filetypes = (new RegExp(restrictype)).test(newFileName);
  
    if (match) {
        alert("Ivalid file name. The name of the attached file contains invalid characters.");
    }
    else if (newFileName.length > maxFileNameLength) {
        alert("Ivalid file name. The name of the attached file is too long.");
    }
  else if (newFileName.length <= 0) {
        alert("Please select a file");
    }
 else if(filetypes) {
  alert("Ivalid file type. The attached file type is restricted by SharePoint.");
   return false;
 } 
 else if(filesize > maxFileSize) {
  alert("The attached file size exceeds size limit of 250MB.");
   return false;
   
 }

Now we will include all feature step by Step

Step: 1

SharePoint Custom file attachment control

Step: 2
Stop Showing duplicate file upload Error

Step: 3
SharePoint add comments for each attached document

Attach multiple files to SharePoint list item with custom upload control.
we can do the below features to your file upload control

1. Add Client Validation
2. Avoid duplicate file upload error
3. upload multiple attachments
4. include each document comments

Here we can use Custom Upload Control and OOB Attachments table.

HTML Code for Attachment Control:

Now we will include all feature step by Step

Step: 1

Client Validation for SharePoint file Upload Control

Step: 2
Stop Showing duplicate file upload Error

Step: 3
SharePoint add comments for each attached document

To get the current user logged in SharePoint group name.
If you trying to iterate all the SharePoint groups the user may get access denied error.
Note: CSOM doesn't have impersonation facelity.

Here we can get only the specific group and find to get the logged user name

ExecuteOrDelayUntilScriptLoaded(IsCurrentUserHasContribPerms, 'SP.js');
function IsCurrentUserHasContribPerms() 
{
    IsCurrentUserMemberOfGroup("Members", function (isCurrentUserInGroup) 
    {
        if(isCurrentUserInGroup)
        {
            // The current user is in the [Members] group!
        }
    });
   

}

function IsCurrentUserMemberOfGroup(groupName, OnComplete) 
{

    var currentContext = new SP.ClientContext.get_current();
    var currentWeb = currentContext.get_web();

    var currentUser = currentContext.get_web().get_currentUser();
    currentContext.load(currentUser);

    var allGroups = currentWeb.get_siteGroups();
    currentContext.load(allGroups);

    var group = allGroups.getByName(groupName);
    currentContext.load(group);

    var groupUsers = group.get_users();
    currentContext.load(groupUsers);

    currentContext.executeQueryAsync(OnSuccess,OnFailure);

    function OnSuccess(sender, args) {
        var userInGroup = false;
        var groupUserEnumerator = groupUsers.getEnumerator();

        var OwnergroupUserEnumerator = OwnergroupUsers.getEnumerator();
   var statusval= $("select[title='ApprovalStatus'] option:selected").val();
        while (OwnergroupUserEnumerator.moveNext()) {
            var OwnergroupUser = OwnergroupUserEnumerator.get_current();
            if (OwnergroupUser.get_id() == currentUser.get_id()) {
                userInGroup = true;
               
                break;
            }
        }



        OnComplete(userInGroup);
    }

    function OnFailure(sender, args) {
        OnComplete(false);
    }    
}

How to show modal dialog box using JQuery. Here we can set multiple buttons with styles, we can include more dialog properties



Heading1


            

                Title
                
                
            

                Project
                
                
            



$(function () {
        $("#projectDetails").dialog({
            autoOpen: false,
            height: 500,
            width: 700,
            modal: true,
            closeOnEscape: false,
            show: {
                effect: "slideDown",
                duration: 1000
            },
            hide: {
                effect: "slideUp",
                duration: 500
            },
            // open: function(event, ui) {
            //       var el = $(this).closest('.ui-dialog').find('.ui-dialog-titlebar-close');
            //       el.off();
            //       el.on("click", fnCustomerHandler);
            //  },
            buttons: [
   {
       text: "Save",
       icons: {
           primary: "ui-icon-mail-closed"
       },
       click: function () {
     // Call you function here
       }
   },
       {
           text: "Save1",
           icons: {
               primary: "ui-icon-disk"
           },
           click: function () {
               // Call you function here
           }
       },
       {
           text: "Cancel",
           icons: {
               primary: "ui-icon-circlesmall-close"
           },
           click: function () {

                 var r = confirm("Are you sure to close the popup!");
                 if (r == true) {
               $(this).dialog("close");
               //  window.location.href = "http://regula:19430/ITProjectPortfolio";
                 return true;
              
                 } else {

                 }


           }
       }

            ]

        });
    });

// to open open this you can call as below
$("#projectDetails").dialog("open"); // projectDetails ID of your popup main div tag

Get and Set the Users or Names on SharePoint 2013 People Picker (Person Group) field on Custom List Forms using JQuery.

The SharePoint 2013 Client People Picker on Custom List forms is different from OOB control.
The "div" structure is different when compare with both. So we have to write different script on custom forms.

The below code will give an example to get and set the values for Client People Picker or Person Group Field on Custom List forms.

// Get People Picker Values
function getEditorPeoplePickerValues(fieldName) { // Field Title
        editorNames = "";
        var _PeoplePicker = $("div[title='" + fieldName + "']");
        var _PeoplePickerTopId = _PeoplePicker.attr('id');
        var ppobject = SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId];
        editorsInfo = ppobject.GetAllUserInfo();

        var i;
        for (i = 0; i < editorsInfo.length; ++i) {
            editorNames += editorsInfo[i].DisplayText + ";#";
        }
    }

// Set People Picker Values
function SetAndResolvePeoplePicker(fieldName, userAccountName) {
       // alert(userAccountName);
        var _PeoplePicker = $("div[title='" + fieldName + "']");
        var _PeoplePickerTopId = _PeoplePicker.attr('id');
        var _PeoplePickerEditer = $("input[title='" + fieldName + "']");

        userAccountName.split(";#").forEach(function (part) {
   if (part !== "" && part !== null) {
          //  alert(part);
            _PeoplePickerEditer.val(part);
            var _PeoplePickerOject = SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId];
            _PeoplePickerOject.AddUnresolvedUserFromEditor(true);
   }
        });

    }

// How to use the above function on our code

call direct function to get values. but to set values we have to create an array with names.
var editorNames = "";
getEditorPeoplePickerValues("Field Title");
SetAndResolvePeoplePicker("Field Title", editorNames );

Get deleted names or entries from SharePoint 2010 format People Picker control on list forms using JavaScript or JQuery.

Here we have to get values from the people picker at OnLoad and PreSaveAction and we have to get the values and set the values as below.

/*  */

var onloadViewerNames = [];
var presaveViewerNames = [];

jQuery(document).ready(function () {
 onloadViewerNames = getPickerInputElement("ff2"); // Get Viewer Names on load  
}); 

function PreSaveAction() {
 presaveViewerNames = getPickerInputElement("ff2"); // Get Viewer Names on pre save 
 var getDeletedViewer = $(onloadViewerNames).not(presaveViewerNames).get();
 var delvalues= "";
 if(getDeletedViewer.length){
  for (var i=0; i < getDeletedViewer.length; i++) {
   delvalues += getDeletedViewer[i] + "; ";
  }
  setPickerInputElement("ff6", delvalues)
 }
 
 return true;
}

// Get Users/Names from the Poeple Picker
function getPickerInputElement(identifier) {
 var tags = document.getElementsByTagName('DIV');
 var returnval = [];
 for (var i=0; i < tags.length; i++) {
  var tempString = tags[i].id;
  if ((tempString.indexOf(identifier) > 0) && (tempString.indexOf('UserField_upLevelDiv') > 0)){
   var innerSpans = tags[i].getElementsByTagName("SPAN");
   for(var j=0; j < innerSpans.length; j++) {
    if(innerSpans[j].id == 'content') {
     //return innerSpans[j].innerHTML;
     returnval.push(innerSpans[j].innerHTML);
    }
   }
  }
 }
 return returnval; 
}

// Set Deleted Users into another People Picker
function setPickerInputElement(identifier, value) {
  var tags = document.getElementsByTagName('DIV');

  for (var i=0; i < tags.length; i++) {
    var tempString = tags[i].id;
    //alert('tags[' + i + '].id = ' + tempString);
    if ((tempString.indexOf(identifier) > 0) && (tempString.indexOf('UserField_upLevelDiv') > 0)){
      //alert('HIT for ' + identifier + ' id=' + tags[i].id + ' value=' + tags[i].value);
      tags[i].innerHTML = value;
      break;
    }
  }
}

Get SharePoint People Picker Value using Java Script

var PickerPerson = getPickerInputElement("ff13"); // Here ff13 is your people picker control ID

function getPickerInputElement(identifier) {

var tags = document.getElementsByTagName('DIV');

for (var i=0; i < tags.length; i++) {

var tempString = tags[i].id;

if ((tempString.indexOf(identifier) > 0) && (tempString.indexOf('UserField_upLevelDiv') > 0)) {

var innerSpans = tags[i].getElementsByTagName("SPAN");

for(var j=0; j < innerSpans.length; j++) {

if(innerSpans[j].id == 'content') {

return innerSpans[j].innerHTML;

}

return null;

}

Validate and compare the people picker values..

function PreSaveAction(){

var OwnerVal = getPickerInputElement("ff4");

var ManagerVal = getPickerInputElement("ff5");

if(OwnerVal == ManagerVal){

alert("Please enter different names.");

return false;

}

else{

return true;

}

function getPickerInputElement(identifier) {

var tags = document.getElementsByTagName('DIV');

for (var i=0; i < tags.length; i++) {

var tempString = tags[i].id;

if ((tempString.indexOf(identifier) > 0) && (tempString.indexOf('UserField_upLevelDiv') > 0)){

var innerSpans = tags[i].getElementsByTagName("SPAN");

for(var j=0; j < innerSpans.length; j++) {

if(innerSpans[j].id == 'content') {

return innerSpans[j].innerHTML;

}

return null;

}

</script>

Add, Select, Update and Delete List items using JQuery.

JQuery using SPServices:

Create New List Item:

function CreateNewItem(valtitle, valcol) {
$().SPServices({
operation: "UpdateListItems",
async: false,
batchCmd: "New",
listName: "list123",
valuepairs: [["Title", valtitle], ["_x0063_ol123", valcol]],
completefunc: function(xData, Status) {
alert("Item Created!");
}
});
}

Update List Item:

function UpdateItem(itemID, valtitle, valcol)

{
$().SPServices({
operation: "UpdateListItems",
async: false,
listName: "list123",
ID: itemID,
valuepairs: [["Title", valtitle], ["_x0063_ol123", valcol]],
completefunc: function(xData, status){
alert("Item Created!");
}
});
}

Get List Item:

HTML :

ID:<br/>
<input name="txtID" id="txtID" type="text"/> <br/>
Title:<br/>
<input name="txtTitle" id="txtTitle" type="text"/> <br/>
Col 123:<br/>
<input name="txtcol123" id="txtcol123" type="text"/> <br/>
<input id="createitem" type="button" value="Create Item"/>
<input id="updateItem" type="button" value="Update Item"/>
<input id="getItem" type="button" value="Get Single Item"/>

SharePoint add comments for each attached document

DocumentComments

SharePoint error duplicate file ulpoad error

Client Validation for SharePoint file Upload Control

SharePoint Custom file attachment control

Get Current Loggedin User SharePoint Group Names using JQuery

JQuery Modal Dialog Box

Get and Set SharePoint 2013 People Picker Field using JQuery

SharePoint get deleted names from People Picker Field using jquery

SharePoint CSOM Validate People Picker fields

Get SharePoint People Picker Value using Java Script

Validate and compare the people picker values..

SharePoint Client Object Model using JQuery and SPServices

Add, Select, Update and Delete List items using JQuery.

JQuery using SPServices:

Create New List Item:

Update List Item:

Get List Item:

HTML :

Printfriendly

Labels

Popular Posts

DocumentComments

Get SharePoint People Picker Value using Java Script

Validate and compare the people picker values..

Add, Select, Update and Delete List items using JQuery.

JQuery using SPServices:

Create New List Item:

Update List Item:

Get List Item:

HTML :

Follow Us

Printfriendly

Labels

Popular Posts