Показаны сообщения с ярлыком jQuery. Показать все сообщения
Показаны сообщения с ярлыком jQuery. Показать все сообщения

вторник, 8 июля 2014 г.

SharePoint создать и загрузить текстовый файл используя JSOM & REST

У меня возникла необходимость генерировать txt и загружать его в библиотеку SharePoint.
Сам процесс аналогичен загрузке файла. Точнее ознакомиться с процессом можно по ссылке.
В коде, по ссылке выше есть метод PerformUploadInit(), один из параметров fileData можно заполнить обычной строкой, в случае текста не на латинице я получал такое отображение файла:
Проблема решилась сменой кодировки в CP-1251 из Unicode. Для смены кодировки я использовал функцию от cryo.

Конечный код решения по генерации .txt и его загрузке в библиотеку SharePoint:
var currentWebUrl;
var context;
var web;
var digest = "";
var DMap = {0: 0, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6, 7: 7, 8: 8, 9: 9, 10: 10, 11: 11, 12: 12, 13: 13, 14: 14, 15: 15, 16: 16, 17: 17, 18: 18, 19: 19, 20: 20, 21: 21, 22: 22, 23: 23, 24: 24, 25: 25, 26: 26, 27: 27, 28: 28, 29: 29, 30: 30, 31: 31, 32: 32, 33: 33, 34: 34, 35: 35, 36: 36, 37: 37, 38: 38, 39: 39, 40: 40, 41: 41, 42: 42, 43: 43, 44: 44, 45: 45, 46: 46, 47: 47, 48: 48, 49: 49, 50: 50, 51: 51, 52: 52, 53: 53, 54: 54, 55: 55, 56: 56, 57: 57, 58: 58, 59: 59, 60: 60, 61: 61, 62: 62, 63: 63, 64: 64, 65: 65, 66: 66, 67: 67, 68: 68, 69: 69, 70: 70, 71: 71, 72: 72, 73: 73, 74: 74, 75: 75, 76: 76, 77: 77, 78: 78, 79: 79, 80: 80, 81: 81, 82: 82, 83: 83, 84: 84, 85: 85, 86: 86, 87: 87, 88: 88, 89: 89, 90: 90, 91: 91, 92: 92, 93: 93, 94: 94, 95: 95, 96: 96, 97: 97, 98: 98, 99: 99, 100: 100, 101: 101, 102: 102, 103: 103, 104: 104, 105: 105, 106: 106, 107: 107, 108: 108, 109: 109, 110: 110, 111: 111, 112: 112, 113: 113, 114: 114, 115: 115, 116: 116, 117: 117, 118: 118, 119: 119, 120: 120, 121: 121, 122: 122, 123: 123, 124: 124, 125: 125, 126: 126, 127: 127, 1027: 129, 8225: 135, 1046: 198, 8222: 132, 1047: 199, 1168: 165, 1048: 200, 1113: 154, 1049: 201, 1045: 197, 1050: 202, 1028: 170, 160: 160, 1040: 192, 1051: 203, 164: 164, 166: 166, 167: 167, 169: 169, 171: 171, 172: 172, 173: 173, 174: 174, 1053: 205, 176: 176, 177: 177, 1114: 156, 181: 181, 182: 182, 183: 183, 8221: 148, 187: 187, 1029: 189, 1056: 208, 1057: 209, 1058: 210, 8364: 136, 1112: 188, 1115: 158, 1059: 211, 1060: 212, 1030: 178, 1061: 213, 1062: 214, 1063: 215, 1116: 157, 1064: 216, 1065: 217, 1031: 175, 1066: 218, 1067: 219, 1068: 220, 1069: 221, 1070: 222, 1032: 163, 8226: 149, 1071: 223, 1072: 224, 8482: 153, 1073: 225, 8240: 137, 1118: 162, 1074: 226, 1110: 179, 8230: 133, 1075: 227, 1033: 138, 1076: 228, 1077: 229, 8211: 150, 1078: 230, 1119: 159, 1079: 231, 1042: 194, 1080: 232, 1034: 140, 1025: 168, 1081: 233, 1082: 234, 8212: 151, 1083: 235, 1169: 180, 1084: 236, 1052: 204, 1085: 237, 1035: 142, 1086: 238, 1087: 239, 1088: 240, 1089: 241, 1090: 242, 1036: 141, 1041: 193, 1091: 243, 1092: 244, 8224: 134, 1093: 245, 8470: 185, 1094: 246, 1054: 206, 1095: 247, 1096: 248, 8249: 139, 1097: 249, 1098: 250, 1044: 196, 1099: 251, 1111: 191, 1055: 207, 1100: 252, 1038: 161, 8220: 147, 1101: 253, 8250: 155, 1102: 254, 8216: 145, 1103: 255, 1043: 195, 1105: 184, 1039: 143, 1026: 128, 1106: 144, 8218: 130, 1107: 131, 8217: 146, 1108: 186, 1109: 190};

function GenerateAndUploadTXTFileToSharePointLibrary(library,fileName,folder,content){
 var enodedContent = UnicodeToWin1251(content);
 PerformUpload(library,fileName,folder,content);
}

function UnicodeToWin1251(s) {
    var L = []
    for (var i=0; i&lts.length; i++) {
        var ord = s.charCodeAt(i)
        L.push(String.fromCharCode(DMap[ord]))
    }
    return L.join('')
}

function PerformUpload(libraryTitle, fileName, folderTitle, content) {

    var reqExecutor = new SP.RequestExecutor(currentWebUrl);
    var url = "/registry/_api/web/GetFolderByServerRelativeUrl('" + libraryTitle + "/" + folderTitle + "')/Files/add(url='" + fileName + "', overwrite=true)";
    reqExecutor.executeAsync({
        url: url,
        method: "POST",
        headers: {
            //"Accept": "application/json; odata=verbose",
            "X-RequestDigest": digest
        },
        binaryStringRequestBody: true,
        body: content,
        success: function () {
            console.log("Файл удачно загружен.");
        },
        error: function (x, y, z) {
            alert(x); alert(y); alert(z);
            console.log("Не удалось загрузить файл.");
        }
    });
}

function getWebProperties() {
    console.log("Начало выполнения функции 'getWebProperties()'");
    context = SP.ClientContext.get_current();
 web = context.get_web();
 list = web.get_lists();
    context.load(web, 'ServerRelativeUrl');
    context.executeQueryAsync(
 function () {
     console.log("Удалось получить текущий url сайта");
     currentWebUrl = web.get_serverRelativeUrl();
 },
 function () {
     console.log("Не удалось получить текущий url сайта");
 }
   );
}

function myOnload() {
 $.getScript("/_layouts/15/SP.RequestExecutor.js", function (){});
 digest = $("#__REQUESTDIGEST").val();
 getWebProperties();
}

_spBodyOnLoadFunctionNames.push("myOnload");

Пример вызова:
GenerateAndUploadTXTFileToSharePointLibrary('documentLibraryTitle','fileName.txt','folderTitle','Слово');

Прячем подписи к полям на формах SharePoint используя JavaScript и jQuery

При создании столбца мы имеем возможность заполнить его описание:
 Если это сделать, то на формах создания и редактирования, мы сможем видеть описание столбца:
Может возникнуть необходимость оставить описание, но не показывать его на форме.
Для этого подключите к странице jQuery и используйте код:
$('.ms-metadata').hide()

Но для того что бы спрятать описание типа "Пользователь", надо использовать немного другой код:
$('.ms-usereditor span').hide()

Установить ширину столбца списка в SharePoint используя JavaScript и jQuery

Порой возникает необходимость зафиксировать ширину столбцов в представлении списка.
Для этого можно использовать JavaScript и библиотеку jQuery.
Подключите jQuery и добавьте JavaScript функцию:
function setColumnWidth(field, width)
{ 
    $("TH.ms-vh2:contains('" + field + "')").css( "max-width",width );
}
Пример вызова функции:
setColumnWidth('TitleOfColumn', '100px')

понедельник, 28 апреля 2014 г.

Показать поле "Создан" на форме элемента

Некоторые поля, например 'Id' или 'Создано' ('Created') невозможно отображать изначально на формах. В SharePoint Designer они в списке столбцов не отображаются. Заказчик просит изобразить на форме примерно следующее:


Для этого необходимо создать новую форму и добавить в нужное Вам место следующий серверный элемент SharePoint:


В итоге у нас получится примерно следующее:
Не очень красиво, необходимо сменить формат даты. Что бы было еще и на нашем языке.
Для этого мы с Вами попробует библиотеку momentjs.com

Для этого ее надо скачать и подключить к странице. Что бы мы могли отобразить время на нашем языке - качать необходимо moment-with-langs.min.js
Теперь получаем дату в старом формате, меняем и вставляем обратно в страницу.
Что бы пользователь не видел сам процесс обработки - прячем контейнер со старой датой:

<tr>
    <td colspan="2">
        <h1>
            Заявка создана:
            <span id="DateCreationLabel" style="color:navy;display:none">
                <SharePoint:ListItemProperty Property="Created" ID="CreatedDateField" runat="server" />
            </span>
        </h1>
    </td>
</tr>

Над html выше - выполняем JS ниже:

var date = $('#DateCreationLabel').text();
    if (moment(date).isValid()) {
        moment.lang('ru');
        date = moment(date).format('LL');
        $('#DateCreationLabel').text(date);
    }
    $('#DateCreationLabel').show();
После выполнения кода видим следующее:
Вполне приемлемо.

Tabs in SharePoint form

Опишу краткий пример как добавить функционал jQuery UI к формам SharePoint на примере табов.
Каких то особых изменений при добавлении на обычную страницу не имеется.
Создайте новую форму просмотра.
Добавьте на нее html перед таблицей с полями:
<div id="tabs">
    <ul>
        <li><a href="#FieldGroup1">Поле 1 и 2</a></li>
        <li><a href="#FieldGroup2">Поле 3 и 4</a></li>    
    </ul>
    <div id="FieldGroup1"></div>     
    <div id="FieldGroup2"></div>
</div>

Потом сделайте ссылки на необходимые файлы В нашем случае это сама библиотека jQuery, библиотека jQuery UI и на CSS:
<script type="text/javascript" src="/ScriptLibrary/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/ScriptLibrary/jquery-ui-1.10.4.min.js"></script>
<link href="/ScriptLibrary/jquery-ui-1.10.4.min.css" rel="stylesheet">
<script type="text/javascript">
function myOnload(){
    $('#tabs').tabs();
}
_spBodyOnLoadFunctionNames.push("myOnload");
</script>

Как результат Вы увидите табы. Теперь необходимо в них добавить поля. Представим что в нашем списке 2 поля: Title; Title2. Добавьте в div c id="FieldGroup1" html:
<div id="FieldGroup1">
<table border="0" cellspacing="0" width="100%">    
 <tr>
  <td width="190px" valign="top" class="ms-formlabel">
   <H3 class="ms-standardheader">
    <nobr>Title<span class="ms-formvalidation"> *</span>
    </nobr>
   </H3>
  </td>
  <td width="400px" valign="top" class="ms-formbody">
   <SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/>
   <SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="New"/>
  </td>
 </tr>
</table>

а в div c id="FieldGroup2" html:
<div id="FieldGroup2">
<table border="0" cellspacing="0" width="100%">    
 <tr>
  <td width="190px" valign="top" class="ms-formlabel">
   <H3 class="ms-standardheader">
    <nobr>Title2<span class="ms-formvalidation"> *</span>
    </nobr>
   </H3>
  </td>
  <td width="400px" valign="top" class="ms-formbody">
   <SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title2" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title2')}"/>
   <SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title2" ControlMode="New"/>
  </td>
 </tr>
</table>

Для скриншотов я использовал вариант с 4 столбцами: Title,Title2,Title3,Title4.
Все нажатия кнопки "сохранить" все данные удачно попадают в список.

Должен Вас заранее предупредить, что Вам придется самим реализовать механизм, который будет подсвечивать вкладки, в которых имеются незаполненные, но обязательные к заполнению поля. В противном случае пользователь подумает что форма сломалась.

InfoPath умер. Редактирование форм. Замена и аналоги.

Как известно 2013 - последняя версия InfoPath.
Это значит, что в следующей версии SharePoint его не будет. Новость не новая. Но остается ряд вопросов. Понятно, что создавать новые решения на InfoPath, мысль не лучшая. Нет смысла продвигаться в этом направлении в плане знаний и опыта. Так же нельзя будет мигрировать формы на новую версию SharePoint.
Нужно отдать должное - я сэкономил кучу времени используя InfoPath. Хотя и не сразу понял, что создавать большие решения на основе InfoPath это несколько рискованно. Неудобная отладка. При изменении xsd заполненные формы не работали, т.к. не соответствовали новой схеме. Приходилось писать код, который сам обновляет уже созданные формы до последней версии схемы. Но механизм правил позволял мне на лету создавать простые решения, которые потом мог поддерживать менее квалифицированный персонал.

Как можно редактировать формы сейчас? Ниже перечислены основные способы:

  1. JavaScript
  2. Nintex Forms
  3. SPForm
  4. K2
Есть и менее популярные решения, например pistachio.

П. 2 разработан нашими соотечественниками.
Все платные, кроме п. 1, он же и самый трудоемкий.
При самостоятельном редактировании форм, используя JavaScript, помимо привычного jQuery есть крайне полезная библиотека SPServices.