SharePoint List forms how to customize using JQuery

on
Here is the solution to customize SharePoint list forms with out using SharePoint designer.

 This solution is using "Jquery"
You can add bootstrap references for custom design
Step 1: Create a SharePoint custom list
Step 2: Create columns as
1. Person
2. Title (which is out of the box)

 Step 3: Click on the "new form", or "edit form", or "view form" of out of the box SharePoint List.
Step 4: Edit the form
Step 5: Add new content editor and refer a .html/.txt custom file where you refer the below code
Click on Save
Follow the code below:
HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
//Jquery reference
<script src="../../SiteAssets/JS/jquery-1.7.1.min.js"></script>

 <body>
<div class="fulldiv">
<label for="" class="ms-font-m-plus" id="taskDesc_task">Title:</label>
<span class="hillbillyForm inputnormal textareainput" data-displayname="Title"></span>
</div>
<div class="ms-TextField-fieldGroup">
<label for="" class="ms-font-m-plus">Person:</label>
<span class="hillbillyForm" data-displayname="person"></span>
</div>
<!--attachement -->
<div class="ms-TextField-fieldGroup">
<label for="" class="ms-font-m-plus">Attachments:</label>
<span class="hillbillyForm" data-displayname="Attachments"></span>
<span class="attachmentDisplay">
  No attachments
</span>
<div id="uploadIcondisplay">
</div>
</div>
</body>
CSS:

 <style>
.ms-formtable {
display: none;
}
/*attachments*/
.ms-descriptiontext {
    display: none;
}
.widthAdjust{
    width:220px;
}
.attachmentDisplay{
    display: none;
}
#partAttachment table tbody tr:nth-child(2) td:nth-child(1) {
    width: 0px;
}
#onetidIOFile {
    width: 500px;
}
#attachOKbutton {
    margin-top: 18px;
    color: #fff;
}

 #attachCancelButton {
    display: none;
}
/*End Attachment CSS*/
</style>
JS:

 $(document).ready(function () {

  //loop through all the spans in the custom layout        

  $("span.hillbillyForm").each(function () {
  //get the display name from the custom layout
  displayName = $(this).attr("data-displayName");
  displayName = displayName.replace(/&(?!amp;)/g, '&amp;');
  elem = $(this);
  //find the corresponding field from the default form and move it
  //into the custom layout
  $("table.ms-formtable td").each(function () {
   if (this.innerHTML.indexOf('FieldName="' + displayName + '"') != -1) {
    $(this).contents().appendTo(elem);
   }
  });
 });

  //Attachment code

     $("#partAttachment").show();

     var uploadHtml = $("#csrAttachmentUploadDiv").detach();

     $("#uploadIcondisplay").append(uploadHtml);

     $("#attachOKbutton").click(function () {

         $("#partAttachment").show();

         var htmlFoundforListOfAttachments = $("#idAttachmentsTable tbody").html();

         if (htmlFoundforListOfAttachments == "" || htmlFoundforListOfAttachments == undefined) {

             $(".attachmentDisplay").show();

         } else {

             $(".attachmentDisplay").hide();

         }

     });

     var ok_Cancel_button = $(".ms-attachUploadButtons").detach();

     $("#onetidIOFile").addClass("widthAdjust");

     $("#attachmentsOnClient").after(ok_Cancel_button);

     var htmlFoundforListOfAttachments = $("#idAttachmentsTable tbody").html();

     if (htmlFoundforListOfAttachments == "" || htmlFoundforListOfAttachments == undefined) {
        $(".attachmentDisplay").show();
    } else {
        $(".attachmentDisplay").hide();
    }
    $("#partAttachment table tbody tr:nth-child(2) td:nth-child(1)").html("");
    //**end attachment code 

 //code for default people picker get properties 
//Name_39126a1c-2233-4d9d-ba62-29abc6a815d2_$ClientPeoplePicker is the people picker field ID

 SPClientPeoplePicker.SPClientPeoplePickerDict["Name_39126a1c-2233-4d9d-ba62-29abc6a815d2_$ClientPeoplePicker"].OnValueChangedClientScript = function (peoplePickerId, selectedUsersInfo) {
if ($("div [id='Name_39126a1c-2233-4d9d-ba62-29abc6a815d2_$ClientPeoplePicker']").children(".sp-peoplepicker-resolveList").children(".sp-peoplepicker-userSpan").attr("sid") != undefined) {
var start = null;
try {

 start = $("span.ms-entity-resolved").attr("ID").indexOf("|");

 } catch (err) {}

 var end = $("span.ms-entity-resolved").attr("ID").indexOf("_Processed");
var finalUserName = "";
finalUserName = $("div [id='Name_39126a1c-2233-4d9d-ba62-29abc6a815d2_$ClientPeoplePicker']").children(".sp-peoplepicker-resolveList").children(".sp-peoplepicker-userSpan").attr("sid").split('|')[1];
if (finalUserName != "") var userPropertiesName = fetchOtherUserFromWeb(finalUserName);
console.log(userPropertiesName);//here we will get person/user properties
}
}
});

 function fetchOtherUserFromWeb(domainName) {
    var eyMySite = "";
    var userOtherDetails = {};
    eyMySite = _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetPropertiesFor(accountName=@v)?@v='" + domainName + "'";
    $.ajax({
        url: eyMySite,
        type: "GET",
        async: false,
        headers: {
            "accept": "application/json;odata=verbose",
        },
        success: function (data) {
            if (typeof data != "undefined" && typeof data.d != "undefined") {
                var det = data.d.UserProfileProperties.results;
                for (var i = 0; i < det.length; i++) {
                    userOtherDetails[det[i].Key] = det[i].Value;
                }
            } else {
                console.log("Could not find the requested user.");
            }
        },
        error: function (error) {
            console.log("Error in fetching user details");
        }
    });
    return userOtherDetails;
}

Comments

Post a Comment