Tuesday, November 4, 2014

How to upload or attach a text file to a SharePoint 2013 list item using REST

How to upload or attach a text file to a SharePoint 2013 list item using REST (text file only)

This post is about attaching a text file to a SharePoint 2013 list item using REST:

1-      Create an html page that should look like below:



<!DOCTYPE html>
<html>
<head lang="en">
    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
    <script src="uploadFile.js"></script>          
</head>
<body>
        <input id="inputFile" type="file" />
        <input id="upload" type="button" value="Upload" onClick="uploadFile()" />
</body>
</html>


2-      Create a javascript file uploadFile.js that should contain the script below, and update the serverUrl, listName and itemId with the right values:


function uploadFile() {
    var fileInput = $('#inputFile');
    var fullPath= fileInput.val().split('\\');
    var fileName = fullPath[fullPath.length - 1];
               
    var fileData = getFileData(fileInput.val());  
    var serverUrl = "http://myserver-url";
    var listName = "mylist-name";
    var itemId = "1";
               
    var digest = $("#__REQUESTDIGEST").val();
    var restUrl = serverUrl +
                "/_api/web/lists/GetByTitle('" + listName +
                "')/items(" + itemId +
                ")/AttachmentFiles/add(FileName='" + fileName + "')";
                               
    $.ajax({   
                url: restUrl,   
                type: "POST",   
                data: fileData,   
                headers: {"X-RequestDigest": digest}
    });
               
    function getFileData(filePath) {
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        var textStream = fso.OpenTextFile(filePath);
        var fileData = textStream.ReadAll();
        return fileData;
    }
}



Monday, October 27, 2014

How to add a tooltip to a SharePoint choice field - the jQuery way

How to add a tooltip to a choice field on a SharePoint list EditForm or NewForm - the jQuery way


In this post I will explain how to add a tooltip to a choice field on a list EditForm or NewForm page. You should already know that in a list EditForm/NewForm page, we cannot display a different tooltip for each SharePoint OOTB choice field item:



Let say that you have named your choice field ChoiceWithTooltip. The idea is to add an HTML select element on the EditForm or NewForm page, which will contain the tooltips that will be displayed on each ChoiceWithTooltip item at runtime. Let me explain:

1-      Open the EditForm or NewForm page in SharePoint Designer, or edit the page on the SharePoint vanilla interface and add a Content Editor Web Part.
2-      Add a div that will contain the following sections:

a-      An HTML select element that has the id selTooltip, in which we will add an option for each ChoiceWithTooltip choice option. The value attribute will have the same value as the ChoiceWithTooltip choice option. The title attribute will contain the tooltip that we want to display on the corresponding choice field.

b-      A jQuery script that will add each selTooltip option title to its corresponding ChoiceWithTooltip choice option.

<div style="display:none">
   <select id="selTooltip">
      <option value="choice 1" title="tooltip1"></option>
      <option value="choice 2" title="tooltip2"></option>
      <option value="choice 3" title="tooltip3"></option>
   </select>
   <script type="text/javascript">
      $(document).ready(function() {
         $("select[title*='ChoiceWithTooltip'] option").each(function() {
            $(this).attr('title', $("#selTooltip option[value='" + $(this).attr('value') + "']").attr('title'));
         });
      });
   </script>
</div>

Et Voila…