Каждый современный человек владеет ноутбуком, но как самому убрать возникающие...
В этой статье я расскажу как создавать свои собственные формы в SharePoint изменять их стили, применять правила к полям формы,
делаю комментарии к записям прямо в формах.
SharePoint 2013 включает в себя мощные средства по настройке форм.
Вы можете использовать неограниченное количество условий, правил и политик для любых частей представления.
Мне требуется скрыть некоторые поля формы для определенной группы людей.
Достаточно открыть дизайнер форм, отредактировать все необходимое и сохранить.
Но для того чтобы InfoPath заработал в SharePoint 2013 (об этом может говорить кнопка во вкладке список
Кнопка настройка формы (Customize Form) открывающая InfoPath Designer доступна для администраторов сайта в браузере IE.
После активации Enterprise лицензии данная возможность сразу появляется на всех сайтах Sharepoint.
Требования:
1. На сервере активирована лицензия SharePoint Enterprise 2013
2. На компьютере установлена InfoPath Designer 2013
3. Открыт сайт SharePoint под пользователем администратора сайта в Internet Explorer
4. Активированы компоненты Enterprice в настройках сайта
Собственно как настроить поля в форме SharePoint 2013
Открываем нужный нам список и переходим в ленте инструментов на вкладку СПИСОК
первым делом я перехожу в настройки списка
в дополнительных параметрах включаю открытие формы в окне (рекомендуется делать в самую последнюю очередь , это поможет открывать формы без открытия в новых вкладкой правой кнопкой мышки, как это я делаю ниже)
возвращаюсь к списку и нажимаю НАСТРОЙКА ФОРМЫ:
открывается InfoPath Designer 2013
Это на самом деле очень мощная вещь, заслуживающая пристального внимания, и намеренно была выведена в более дорогой продукт, завязана на многих компонентах всей системы SharePoint, позволяет централизовано использовать их.
Итак я уже создал настраиваемый список, настроил открытие форм в диалоговых окнах, теперь я настрою версионность:
Возвращаемся к параметрам списка
в разделе параметры управления версиями,
там включаем переключатель Создавать версию при каждом изменении элемента в этом списке типа "Список"?
в положение Да
после этого в параметрах списка создаем столбец с названием comments
даем название и ставим переключатель Внесение изменений в существующий текст
Тут нужно учесть в случае если мы изменили форму то добавляемые столбцы уже не будут сразу появляться в форме, в этом случае нужно открывать редактор формы InfoPath Designer и добавлять это поле в форму.
после каждого изменения формы
нажимаем кнопку быстрой публикации
или нажимаем сочетания клавиш CTRL+SHIFT+Q
создание представлений форм просмотра
на вкладке макет страницы, нажимаем Создать представление
даем название нашему представлению test_view1
получаем пустую форму
в эту форму перетаскиванием можно вставлять наши поля из списка справа.
Буквально через несколько секунд у меня получается следующий результат
Публикуем сочетанием клавиш Ctrl+Shift+Q.
Я это делаю следующим образом (для 2013й версии):
В браузере открываю форму правой кнопкой мышки в новой вкладке
изменяем веб-часть InfoPath
И меняем представление по умолчанию
сохраняем изменение
во всех случаях повторяем действия
а вот в случае для формы Изменения нужно добавить ссылку в представлении списка
заходим в настройки представления списка и выводим еще один столбец
теперь и эту форму можно открыть в новой вкладке
и для этой вебчасти выбираем уже другую форму infoPath которая у нас называлась как Edit Item
Статья написана по шагам, вы поймете какие шаги можно пропустить после их выполнения. Они дают понимание, далее надеюсь я сокращу статью более точно указывая последовательность шагов.
если есть вопросы обязательно пишите в комментариях, отвечу.
Мы рассмотрели процесс создания сайта и списка в браузере. Рассмотрим сейчас другие варианты создания списка.
Создание списка в InfoPath Designer
Как уже упоминалось ранее, одно из ключевых преимуществ SharePoint – интеграция с продуктами Microsoft. Продемонстрируем это на конкретном примере.
Для создания списков воспользуемся Microsoft InfoPath Designer 2010, в стандартных шаблонах которого есть Список SharePoint (рис. 3.12.). По нажатию на Конструктор форм предлагается ввести адрес веб-сайта, на котором будет публиковаться форма.
Рис. 3.12. Начальная страница Microsoft InfoPath Designer 2010
После чего нужно ввести название нового списка, мы вводим Книги (рис. 3.13.), нажимаем на Далее , и затем Готово (в это время происходит публикация списка на портал).
Рис. 3.13. Окно создания нового списка в Microsoft InfoPath Designer 2010
После создания списка открывается Конструктор форм (рис. 3.14.). Справа расположена панель Поля , из которых может состоять форма.
Рис. 3.14. Конструктор форм
У книги должны быть следующие атрибуты – название, автор, издательство, год, страницы, ISBN, тираж и жанр.
Для создания нового поля нужно кликнуть на Добавить поле в группе Действия на панели Поля , в результате чего появится соответствующее окно (рис. 3.15.). Достаточно указать отображаемое имя, выбрать тип данных из выпадающего списка, при необходимости указать заполнить по умолчанию и указать, является ли поле обязательным. После чего кликнуть на ОК .
Рис. 3.15. Окно добавления поля или группы (на примере авторов)
Аналогичным образом создаются остальные поля. Готовые поля добавляются на форму простым перетаскиванием, причем их можно расположить в любом порядке. В результате получилась следующая форма (рис. 3.16). Можно сделать внешний вид более привлекательным, если поработать с командами, вынесенными на ленту.
Остается опубликовать форму, для чего можно использовать комбинацию клавиш Ctrl + Shift + Q , или кликнуть на пункт меню Файл , далее Сведения и Быстрая публикация .
Рис. 3.16. Форма, готовая для публикации
Для добавления нового элемента в список нужно кликнуть на Добавить элемент и появится диалоговое окно (рис. 3.17.). Такое же окно появляется при редактировании записи.
Рис. 3.17. Окно создания нового элемента в списке Книги
Создание списка в SharePoint Designer
Важной особенностью данного инструмента – отсутствие возможности создания веб-приложений и семейств веб-сайтов, можно создавать лишь дочерние сайты.
Для начала нужно открыть существующий сайт, воспользовавшись пунктом Открыть сайт в группе Открытие сайта SharePoint (рис. 3.18), где нужно ввести имя сайта и затем авторизоваться в качестве администратора семейства веб-сайтов.
Рис. 3.18. Стартовая страница SharePoint Designer 2010
Для того чтобы создать новый сайт, в группе Шаблоны сайтов выберем Пустой сайт (рис. 3.19.) Название нового сайта нужно указать в виде http ://<Веб приложение>/[<Путь>]/<Название сайта> , где в качестве пути могут указываться сайты, которые будут родительскими для нового сайта. Кликнув на ОК , создается новый сайт.
Рис. 3.19. Создание сайта в SharePoint Designer 2010
После создания сайта мы видим следующее (рис. 3.20). Первым дело можно изменить название сайта. На эту же страницу для удобства вынесены настройки разрешений. Также с разрешениями можно поработать, кликнув на соответствующее название в левой панели.
Рис. 3.20. Главная страница настроек сайта в SharePoint Designer 2010
Создать список можно аналогичным способом, описанным ранее в пункте Создание списка в InfoPath Designer либо воспользоваться механизмом для работы со списками, заложенным в SharePoint Designer. Таким образом, сайт можно считать готовым.
Преимущество SharePoint Designer заключается в том, что он предоставляет больше возможностей для разработчика (чем браузер), в чем мы убедимся в следующих главах данного руководства.
Создание списка в Visual Studio 2010
Создание веб-приложения и семейства веб-сайтов было подробно описано в начале настоящей главы.
Создадим список, для этого нужен новый проект List Definition в группе шаблонов проектов для SharePoint 2010 (рис. 3.21.)
Рис. 3.21. Окно создания нового проекта в Visual Studio 2010
После нажатия на кнопку ОК появляется окно для развертывания решения, где предлагается два способа:
1. Развертывание в песочнице – осуществляется владельцем семейства сайтов, обеспечивается безопасность и ограниченный доступ к ресурсам.
2. Развертывание в качестве решения фермы – осуществляется администраторами, имеет силу во всей ферме.
Выберем второй способ, после чего кликнем на Далее , где будет предложено ввести отображаемое название списка (Книги) и выбрать его тип (в нашем случае Custom List), после чего нажать на Finish .
Далее переименуем названия списка в обозревателе решений (рис. 3.22.) на Список книг и Книги соответственно. Также можно подправить параметры в файле Elements . xml (на уровень ниже Книг ), такие как Title (название), Url (ссылка списка) и Description (описание). Также можно внести изменения во второй файл Elements.xml .
Рис. 3.22. Обозреватель решений
Для создания полей в файле Schema . xml между тегами < Fields > нужно добавить код (рис. 3.23.) Идентификаторы получены с помощью программы guidgen, входящей в поставку Visual Studio.
Рис. 3.23. Код для добавления столбцов к списку.
Столбцы созданы, но еще их нужно добавить в представление по умолчанию, которое можно найти в этом же файле внутри тега View , где атрибут BaseViewID =”1” . Внутри есть теги ViewFields , которые нам и нужны. В результате добавления столбцов в представление списка по умолчанию можно увидеть следующий код (рис. 3.24.)
Рис. 3.24. Код для добавления столбцов в представление по умолчанию
После чего список можно считать готовым, и его можно развернуть, воспользовавшись главным меню (Build => Deploy ) или кликнув правой кнопкой по решению выбрать из контекстного меню Deploy .
В целом все выглядит неплохо, но при попытке добавить новый элемент появляется странное окно (рис. 3.25.), в котором явно чего-то не хватает.
Рис. 3.25. Окно для создания нового элемента списка Книги
Причина этого очень проста – мы не создали типы контента, которые определяются в файле Schema . xml (рис. 3.26) Мы не будем этим заниматься, вместо этого удалим полностью этот блок.
Рис. 3.26. Определения типов контента
В процессе развертывания списка появится следующее окно (рис. 3.27), которое говорит нам о конфликтах развертывания. Кликнем на кнопку Resolve Automatically (Разрешить автоматически) .
Рис. 3.27 Конфликты развертывания
После чего можно обновить страницу и еще раз попытаться добавить новый элемент. Больше такой проблемы нет!
Итак, в этой главе мы рассмотрели создание сайта школьной библиотеки с помощью браузера, SharePoint Designer 2010 и Visual Studio 2010. Даже на таком простом примере видны плюсы и минусы разных подходов.
В рассматривается настройка внешнего вида сайтов SharePoint 2010.
Краткая аннотация (до 255 знаков): В лекции излагаются базовые приемы редактирования статическихHTML-страниц в программе Microsoft Office SharePoint Designer 2007. Рассматриваются вопросы работы с изображениями, стилямиCSS, таблицами, гиперссылками и некоторые другие приемы классического веб-дизайна.
Список ключевых терминов .SharePointDesigner, тег, стили, каскадные таблицы стилей,CSS, клипы, рисунки, изображения.
Цель лекции . Представить программуSharePointDesignerв качестве средства разработкиHTML-страниц, сделав акцент на предусмотренные в ней средства визуального проектирования.
Преамбула
Несмотря на то, что программа SharePointDesigner, в первую очередь, предназначена для редактирования веб-узловSharePoint, ее, тем не менее, довольно удобно использовать в качестве неплохого средства традиционного веб-дизайна. Поэтому посвятим данную главу основам примененияSharePointDesignerдля разработкиHTML- иASPX-страниц, не касаясь особенностей технологииSharePoint, однако, имея в виду, что приведенные в главе сведения пригодятся и при разработке страницSharePoint. Ведь почти все элементы управленияHTML- иASP- допускается размещать на веб-страницах стандартаSharePoint.
При изложении материала в этой главе подразумевается, что читатель владеет самыми основными приемами HTML-дизайна.
Начнем с неотъемлемого приема современного веб-дизайна, связанного с использованием каскадных таблиц стилей .SharePointDesignerобладает развитыми средствами по применению стилей, главным из которых является панельСвойства CSS .
Подключение css-файла
Мы начнем с применения к создаваемым в SharePointDesignerвеб-страницам уже существующей таблицы стилей, которая, возможно, использовалась Вами при проектировании других узлов и хранится в некотором файле с расширением.CSSна Вашем компьютере.
Разместите на экране одновременно окно Проводника WindowsиSharePointDesigner(рис. 6.1).
Перетащите файл каскадной таблицы стилей из папки Проводника на панельСписок папок (рис. 6.1)
Рис. 6.1. Перенесите CSS-файл на панельСписок папок
Перетащите CSS-файл из панелиСписок папок на областьКонструктор (рис. 6.2).
Рис. 6.2. Перетащите CSS-файл прямо на областьКонструктор
Откройте область задач Свойства CSS .
На панели Свойства CSS просмотрите свойства стиля, который определяет форматирование тега, размечающего выделенный объект. В нашем примере это тег
, указанный в спискеПримененные правила (рис. 6.3).
Рис. 6.3. Результат применения таблицы стилей
Отредактировать сам файл, описывающий таблицу стилей (т.е. файл с расширением.CSS ), можно непосредственно в SharePoint Designer. Для этого достаточно двойным щелчком открыть его в отдельной вкладке и править, как в обычном текстовом редакторе (рис. 6.4). Второй вариант изменения самих стилей – это выбор желаемого форматирования на панелиСвойства CSS .
Рис. 6.4. Редактирование файла с таблицей стилей
Назначение и редактирование стилей
Для, собственно, назначения существующих стилей CSSслужат области задачПрименение стилей иУправление стилями . Следует отметить, чтокаскадные таблицы стилей подразумевают последовательное применение стилевой разметки, которая может описываться, как в коде самой веб-страницы, так и в обособленныхCSS-файлах, с ней связанных. Кроме того, стили могут использоваться для различных целей: форматирования текста и графики, позиционирования объектов на веб-странице и т.д. Принцип каскадного назначения стилей иллюстрируется рис. 6.5. Как видно из панелиПрименение стиля , стили, назначенные выделенному фрагменту на веб-странице, имеют выделяются обрамлением.
Рис. 6.5. Каскадное применение стилей
Для того, чтобы применить к выделенному фрагменту какой-либо стиль, достаточно щелкнуть по имени этого стиля на панели Применение стиля (рис. 6.6).
Рис. 6.6. Назначение стиля посредством панели Применение стиля
Обратите внимание на атрибут classтега
(или другого
тега), который, собственно, и определяет,
каким стилем размечен фрагмент
веб-страницы (рис. 6.6). На рис.6.7 приведена
сводка элементов интерфейсаSharePointDesigner, на которых отображаются
название и свойства стиля, назначенного
выделению. Таким образом, пользователь
имеет определенную свободу в выборе
панелей, которые он будет применять для
настройки стилейCSS.
В этом фрагменте, правда, отсутствует прорисовка заголовков и описаний полей, но пусть это будет домашним заданием:)
Рис. 6.7. Сводка мест отображения назначенного стиля
Помимо панели Применение стиля , для назначения и редактирования стилей может применяться и панельУправление стилями (рис. 6.8).
Примечание: Вопросам применения стилей вSharePointDesignerпосвящена лабораторная работа 6.1.
Рис. 6.8. Использование панели Управление стилями
В частности, вызывая из области названия некоторого стиля контекстное меню и выбирая в нем пункт Изменить стиль , Вы получаете доступ к редактированию параметров данного стиля в диалоговом окне (рис. 6.9). Выбор командыПерейти к коду открывает фрагмент кода выбранного стиля в отдельной вкладке (см. рис. 6.4).
Рис. 6.9. Настройка стиля
И уже почти создали одностраничный сайт . Теперь продолжаем его оформление. Открываете программу SharePoint Designer , а в ней файл index.html , который уже делали раньше, в папке Вашего одностраничного сайта.
Вы уже, наверное, заметили, что таблица, в которой Вы размещали текст и картинки для Вашего одностраничного сайта, расширяется на все окно браузера и на всю рабочую область программы SharePoint Designer . В этом легко убедиться, подвигав правую и левую области рабочего окна.
Если Вы в программе SharePoint Designer поставите курсор внутри таблицы, и зайдете в пункт меню Таблица — Свойства таблицы — Таблица , то увидите, почему это так: ширина таблицы задана в процентах от ширины экрана, причем стоит 100% , то есть действительно на весь экран. Ставите ширину в точках, и задаете ее, например, равной 950 точек , точнее, пикселей. Таблица получит постоянную ширину, и сместится влево. Чтобы поставить ее по центру, опять заходите в свойства таблицы, и делаете выравнивание по центру.
Давайте теперь сделаем границы для этой таблицы. Заходите в свойства, делаете размер границы 10
, а цвет границы светло-серый, чтобы она не сильно бросалась в глаза.
Теперь посмотрите свой одностраничный сайт в браузере: откройте в нем свой файл index.html . В браузере будет лучше все видно. В частности, Вы увидите, что текст и картинки располагаются слишком близко к границам таблицы. Чтобы эти элементы от границ отодвинуть, в программе SharePoint Designer заходите опять в свойства таблицы, и изменяете либо Поля ячеек (расстояние между границами ячеек и их содержимым), либо Интервал ячеек (расстояние между ячейками). Можете поэкспериментировать, изменяя величины этих полей, и наблюдая результат.
Осталось вставить в пустую правую ячейку Вашей подписной страницы форму подписки на рассылку. Естественно, у Вас уже . Если Ваша рассылка сделана на , то заходите на этот сервис, затем выбираете там пункт меню Формы
, выбираете дизайн формы, берете ее код и ставите в программе SharePoint Designer в ячейку. Чтобы поставить код, ставите сначала в нужное место курсор, затем выбираете пункт меню Вставка — Веб-компонент — Дополнительные элементы управления — HTML
, и нажимаете кнопку Готово
. Затем вставляете код в то окошко, которое появится. Форма подписки в программе SharePoint Designer видна не будет, но если Вы посмотрите свою подписную страницу в браузере, то форму подписки увидите.
Похожим образом ставите на своей подписной странице код видео, если нужно. Сначала Вам нужно разместить видео на одном из сервисов. Рекомендую для этого использовать сервис YouTube
. Если Вы в нем не зарегистрированы — регистрируетесь. Затем заходите в свой аккаунт, нажимаете Добавить видео
, выбираете файл видео у себя на компьютере, пишете название, описание и ключевые слова.
Видео о том, как на одностраничном сайте в программе SharePoint Designer размещать форму подписки и видео
Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.
Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
На этот раз, мне потребовалось внести изменения на формы стандартного SharePoint"овского списка. Таких форм существует три вида, и вы все их прекрасно знаете:
- DisplayForm - форма отображения элемента списка
- EditForm - форма изменения элемента списка
- NewForm - форма создания нового элемента списка
- Чтобы сохранилась возможность добавлять новые поля в список
- Чтобы можно было перемещать поля из одной вкладки в другую, и менять порядок их следования
- Чтобы поля рендерились стандартными средствами
И вот, после долгих исследований и поиска в интернетах, мне-таки удалось понять, как же это делается правильно, и воплотить в жизнь вот такую вот красивую форму:
Как видите, часть полей (ФИО и фотография) здесь рендерятся по-особому. Остальные поля рендерятся обычным образом, но разбиваются на вкладки (пользователь может менять порядок полей и принадлежность полей разным вкладкам).
В общем, функционал на мой взгляд, весьма интересный, и в этом посте я расскажу подход к подобным изменениям.
Как делают все
Оказалось, что когда дело доходит до форм списков, большинство SharePoint-разработчиков использует крайне сомнительные подходы:
- Создание новой формы в виде aspx-страницы, которая кладется в _layouts. Форма полностью "кастомная", и если в список добавить поле, это поле придется руками добавлять и на форму...
- Javascript и jquery-хаки. К примеру, такие известные проекты, как Virto Ajax List Form Extender и SPServices - на самом деле парзят содержимое страницы с формой уже после её загрузки, и затем вносят свои изменения.
Создание целиком новой формы вообще пошло из SharePoint Designer, то есть это кустарное решение, решение для сисадминов.
Что же касается jquery, то это типичный клиентский подход, изобилующий собственными минусами:
- В таких решениях, чаще всего даже невооруженным взглядом видно, что сначала форма загружается в обычном виде, а через мгновение - меняется (например, добавляются вкладки, и т.д.). Чем больше полей, тем лучше это видно.
- jQuery использует механизм, который в профессиональной среде называется скринскрэпингом (screen scraping, data scraping), а даже само слово это - дурно пахнет! По сути, скрипт парзит HTML-код или же ищет элементы DOM-модели по некоторым признакам - в любом случае, признаки эти официально нигде не заявлены, и никто не гарантирует, что после очередного обновления SharePoint, ваш код останется работоспособным.
Через некоторое время поисков, я понял, что если мне что-то и поможет, то только механизм RenderingTemplate . Этот механизм позволяет задавать т.н. шаблоны отображения форм списков для типов содержимого (класс SPContentType , свойства EditFormTemplateName , NewFormTemplateName и DisplayFormTemplateName ).
RenderingTemplate представляет собой обычный ASP.Net контрол, реализующий интерфейс ITemplate , и позволяющий задать шаблон для отображения формы списка. Куча RenderingTemplate"ов лежит в файлике 14\TEMPLATE\CONTROLTEMPLATES\DefaultTemplates.ascx . Среди них, присутствует и шаблон под именем ListForm , который представляет собой стандартный шаблон для отображения всех форм списка.
Центральным элементом шаблона ListForm является контрол ListFieldIterator . Собственно, он и отображает все поля. И что интересно, от него можно отнаследоваться, а затем переопределить метод Render , чтобы изменить отображение так, как нам вздумается.
FormContext
Когда мы переопределяем метод Render в новосозданном потомке ListFieldIterator , сразу же возникает вопрос: а как рендерить поля? Откуда взять сведения о том, какие у нас есть поля, каковы их значения, и т.д. Оказалось, всё очень просто, и решается с помощью коллекции SPContext.Current.FormContext. FieldControlCollection . Эта коллекция хранит объекты типа BaseFieldControl , каждый из которых содержит, среди прочего, свойства Field и ItemFieldValue , которые позволяют получить любые сведения о поле, и значении этого поля.
Также, каждый из этих контролов имеет метод RenderControl , благодаря чему их можно спокойно отображать штатными средствами, ровно также, как это сделал бы SharePoint.
Ниже представлен шаблонный пример класса-потомка ListFieldIterator
:
public class CustomFieldIterator : ListFieldIterator { protected override void Render(HtmlTextWriter output) { foreach (BaseFieldControl fieldControl in SPContext .Current.FormContext.FieldControlCollection) { if (fieldControl.Field == null ) continue ; // небольшой хак, если его не использовать, // IsFieldExcluded будет всегда возвращать true, // т.к. считает, что контрол уже есть, и еще раз // добавлять его не требуется. fieldControl.Visible = false ; if (!this .IsFieldExcluded(fieldControl.Field)) { output.AddAttribute("class" , "my-field" ); output.AddAttribute("id" , "field" + fieldControl.FieldName); output.RenderBeginTag(HtmlTextWriterTag .Div); output.Indent++; // Восстанавливаем видимость и рендерим контрол fieldControl.Visible = true ; fieldControl.RenderControl(output); output.Indent--; output.RenderEndTag(); } } } }
В этом фрагменте, правда, отсутствует прорисовка заголовков и описаний полей, но пусть это будет домашним заданием:)
Кстати, возможностей данный подход открывает великое множество, если подумать...
Проект-пример
Проект, демонстрирующий описанный выше способ, доступен для скачивания .
P.S. Мои исследования во многом основывались на статье Виталия Баума Расширяем возможности ListFieldIterator , спасибо ему большое за эту статью!
Собственно, там описан практически такой же результат, который получил и я, только Виталий объединял поля не во вкладки, а в секции:
Кроме того, сведения о секциях хранились у Виталия в схеме типа содержимого, а не присоединенными к полям, что накладывало некоторые ограничения и неудобства.
Но вообще, статья обрывочная, вот честно. Фрагменты кода в надерганы очень куцо, мне по ним было крайне сложно сориентироваться, почти до всего пришлось доходить самому.
В целом, надеюсь, мой пост прольет еще больше света на это очень правильное направление.
Рекомендуем почитать
На сегодняшний день ценность внутриигровых вещей в Counter-Strike: Global...
Статьи и ЛайфхакиВопрос о том, как установить дату и время на Nokia , волнует...
