Меню

Клиентская валидация полей на карточке проекта Project Server 2013

LogoPost
Добрый день дорогие читатели и коллеги. Сегодня я хочу поговорить о валидации полей на карточке проекта. Представим себе, что у нас на карточке существует два корпоративных настраиваемых поля типа дата, «Дата начала» и «Дата окончания» и нам требуется элементарная проверка такая как Дата завершения не может быть раньше Даты начала, увы в стандартном функционале Project Server 2013 не может проверять логику заполнения полей, но это не беда, данную проблему можно решить при помощи веб-части Редактор сценариев (Content Editor Web Part) и Javascript (без применения Visual Studio), проделав следующие шаги:

Для начала на страницу PDP на которой у нас отображаются поля дат добавим веб-часть редактора сценариев проделав выполнив следующую последовательность действий:

1. Откроем страницу с «Карточкой проекта» и отредактируем ее нажав на вкладке «Страница» кнопку «Изменить страницу».


Добавим веб-часть Редактор сценариев. Веб-часть «Редактор сценариев» должна быть размещена ниже веб-части полей проекта.

2. Отредактируем содержание веб-части «Редактор сценариев» добавив следующий JavaScript.

Перед вставкой в редактор сценариев откорректируем id элементов. Для получения Id элементов откроем страницу «Карточка проекта» в IE 11, откроем панель инструментов Developer Tools нажав F12.
В разделе DOM Explorer выберем пункт меню Select Element (Ctrl+B) найдем Id наших полей.


Откорректируем скрипт вписав валидные Id.

<script type="text/javascript"> 
function CompareDates(compareElem1,compareElem2) 
{ 
    //Функция сравнения двух дат 
    if (compareElem1 != null && compareElem2 != null && Date.parseLocale(compareElem1.value) != null && Date.parseLocale(compareElem2.value) != null && Date.parseLocale(compareElem1.value) >= Date.parseLocale(compareElem2.value)) 
    { 
        //Пользовательское сообщение 
        PJAlert('u0414u0430u0442u0430 u043du0430u0447u0430u043bu0430 u043du0435 u043cu043eu0436u0435u0442 u0431u044bu0442u044c u0431u043eu043bu044cu0448u0435 u0434u0430u0442u044b u043eu043au043eu043du0447u0430u043du0438u044f', 'u041eu0448u0438u0431u043au0430', false, null);
        return 0; 
    } else return 1;
} 

function DateValidation()  
{ 
    var StartDate; 
    var FinishDate; 
    var arr = document.getElementsByTagName('input');

    for (var i = 0; i < arr.length; i++) 
    { 
        if (arr[i].id == 'idCF_3317c796-5fa1-4231-9212-a4c90a2ce05f')  
        { 
            //Запоминаем значение StartDate      
            StartDate= arr[i];   
        }  
        if(arr[i].id == 'idCF_940d22dc-9be9-e211-942b-10604b9b497f')  
        { 
            //Запоминаем значение FinishDate  
            FinishDate = arr[i]; 
        } 
    } 
  
    if(CompareDates(StartDate,FinishDate) == 0) 
    { 
        for (var i = 0; i < arr.length; i++) 
        {  
            //Очищаем не валидное значение 
            if(arr[i].id == 'idCF_940d22dc-9be9-e211-942b-10604b9b497f'){arr[i].value='';} 
        } 
    } 
} 

function findacontrolForDates()  
{ 
    var arr = document.getElementsByTagName('input');
    //Поиск контролов дата по Id 
    for (var i = 0; i < arr.length; i++) 
    { 
        if (arr[i].id == 'idCF_3317c796-5fa1-4231-9212-a4c90a2ce05f')  
        { 
            //Подписываемся на событие onblur 
            document.getElementById(arr[i].id).onblur = DateValidation; 
        }  
        if(arr[i].id == 'idCF_940d22dc-9be9-e211-942b-10604b9b497f')  
        { 
            //Подписываемся на событие onblur 
            document.getElementById(arr[i].id).onblur = DateValidation; 
        } 
    } 
} 
findacontrolForDates(); 
</script> 

 

Ура наша проверка работает! J

P.S. Аналогична может быть реализована валидация на введенные значения в числовые и текстовые поля. Успехов вам в ваших начинаниях. Сделаем Project Server 2013 удобнее. J