Создать форму для изменения списков sharepoint designer. Создание настраиваемой формы списка с помощью приложения SharePoint Designer

очередь , предназначена для разработки веб-узлов, построенных на технологии SharePoint. В отличие от небогатого набора методов редактирования узлов SharePoint в браузере, SharePoint Designer дает возможность гибкого и удобного управления практически всем спектром свойств веб-страниц. Существенно, что в подавляющем большинстве случаев (по крайней мере, в рамках нашего курса) пользователю не придется обращаться к HTML-коду, ограничиваясь для разработки веб-страниц режимом Конструктор .

Учитывая, что приемы работы с веб-узлами и проектирования HTML- и ASP -страниц были представлены в предыдущих лекциях и полностью применимы и для SharePoint-узлов, мы сосредоточимся в этой и двух следующих лекциях на специфических методах управления узла SharePoint.

Будем изучать вопросы редактирования веб-страниц SharePoint на примере того же самого веб-узла "Рога и Копыта", который был нами создан ранее средствами браузера. После его открытия в SharePoint Designer (в ходе которого необходимо будет пройти процедуру авторизации, подписавшись учетной записью Бендер, т.е. владельца узла), в пределах основной панели мы будем наблюдать файловую структуру веб-сайта, идентичную содержимому панели Список папок (рис. 7.1) .

Перейдем к правке домашней страницы узла.

1. Щелкните дважды по имени домашней страницы default.aspx в списке папок (рис. 7.1) .
2. После открытия домашней страницы в отдельной вкладке (рис. 7.2) поэкспериментируйте с ее содержимым, наводя указатель на различные ее элементы и щелчком выделяя их.

Скорее всего (это зависит от того, включен или нет режим визуальных подсказок ), некоторые элементы будут сопровождаться полупрозрачным текстом-подсказкой, который, возможно, будет Вам на первых порах мешать их восприятию. Кроме того, при наведении указателя на отдельные элементы (например, логотип ), он будет менять свой вид на запрещающий значок, говоря о невозможности редактирования элемента под указателем. Это связано с тем, что, вообще говоря, веб-страница стандарта SharePoint, формируется путем слияния, как минимум , двух веб-страниц:

1. мастер-страницы (или, по-другому, главной страницы узла) – страницы-шаблона, включающей общие элементы для всех страниц узла SharePoint
2. страницы содержимого (контента) – собственно говоря, содержащей уникальное наполнение страницы, отличающее ее от других страниц узла.

Большинство элементов, которые сопровождаются полупрозрачными метками, как раз и приходят не со страницы содержимого (в данном случае, домашней страницы веб-узла default .aspx), а приходят с шаблонной мастер-страницы . Для того, чтобы отключить отображение этих меток, выберите в верхнем меню Вид пункт Визуальные подсказки и отключите в нем опцию Показать (рис. 7.3) . После этого ориентироваться в содержимом страницы станет проще.

Выделение содержимого на веб-странице

Для того, чтобы выделить конкретный элемент веб-страницы, достаточно щелкнуть по нему (рис. 7.4) . Вообще говоря, для выделения веб-страниц в SharePoint Designer предусмотрено несколько способов:

1. мышью в области Конструктор (или Код );
2. щелчком по тегу на панели доступа к тегу , расположенной под закладкой страницы (для элементов, настраиваемых на самой aspx-странице);
3. при помощи панели инструментов Главная страница (для элементов, приходящих с мастер-страниц ).

При наведении указателя мыши на тот или иной элемент очереди тегов на самой странице в области Конструктор происходит виртуальное выделение рамкой соответствующего элемента. Например, наведение указателя мыши на тег, реализующий зону веб-частей , приводит в области Конструктор к обрамлению этой зоны

Мы рассмотрели процесс создания сайта и списка в браузере. Рассмотрим сейчас другие варианты создания списка.

Создание списка в 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.

Списки и библиотеки SharePoint содержат формы списков, позволяющие пользователям отображение, изменение и добавление элементов в список или библиотека. С Microsoft SharePoint Designer 2010 можно создать и настроить эти формы, чтобы упростить для пользователей для добавления и обновления элементов в списке. Формы списка является частью решения, которые вы создали, вам может понадобиться настроить форму таким образом, предназначены для решения и сбор необходимых данных для поддержки решения.

В настраиваемой формы списка можно показать или скрыть определенные поля, реорганизация этих полей, изменение макета формы, добавления форматированного текста и рисунков и в конце концов, измените XSL, HTML или ASP, используемые в форме. Эти задачи можно выполнить только путем создания настраиваемой формы списка в SharePoint Designer 2010.

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

В этой статье

Обзор форм списков по умолчанию

Формы списка расположены в той же папке их связанного списка SharePoint. С помощью SharePoint Designer 2010, можно быстро и легко просматривать формы списка по умолчанию, связанное со списком.

Самый простой способ просмотреть формы по умолчанию, связанные со списком, - открыть страницу сводки списка.

Еще один способ просмотра форм - открытие иерархии сайта с помощью вкладки Все файлы на панели Навигация .

Формы списков DispForm.aspx, EditForm.aspx и NewForm.aspx

По умолчанию со списком связано три формы: DispForm.aspx, EditForm.aspx и NewForm.aspx. Ниже приведено три иллюстрации, показывающих формы списка "Извещения" по умолчанию.

Примечание: Библиотеки SharePoint для добавления в библиотеку элементов вместо NewForm.aspx используют другую форму, Upload.aspx.

Создание новых форм списков

Формы списка по умолчанию (в форму элемента отображения формы изменить элемент и форма нового элемента) хранятся в веб-части называется часть Web формы списка (LFWP). LFWP использует CAML (совместной работы приложения Markup Language) для отображения формы, а это нельзя настроить в SharePoint Designer 2010.

Чтобы настроить форму, вставьте данных формы веб частей (использованием DFWP). Он использует XSLT, которые могут быть настроены в SharePoint Designer 2010. В сумм с использованием DFWP замене формы по умолчанию и двумя способами действие.

Создать новую форму списка и связать ее со списком

Самый простой и быстрый способ создать форму списка - создать новую форму и сделать ее формой для списка по умолчанию.

Редактирование существующей формы списка

Еще один способ создания собственной формы списка - напрямую изменить одну из форм по умолчанию, связанных со списком. После этого ее можно вставить (веб-часть формы данных) на странице, которая заменяет форму по умолчанию.

Примечание: В результате, может быть выполните следующие действия на любой странице ASPX в SharePoint Designer 2010. Преимущество редактирования существующую форму является уже связанные со списком.

Используйте для замены форм по умолчанию Office InfoPath 2010

В качестве альтернативы с помощью редактора форм списка в SharePoint Designer 2010 использования Microsoft InfoPath 2010 можно использовать для создания, редактирования и разработке форм. InfoPath 2010 - это мощное средство используется для создания настраиваемых форм, которые могут использоваться для списков, библиотек и рабочие процессы SharePoint.

Дальнейшие действия

После создания настраиваемой формы для списка или библиотеки, следующим шагом является начать настройку формы в соответствии со своими потребностями. Можно добавить или удалить столбцы, изменение макета поля, применять различные шрифты и стили, добавьте пользовательские изображения и так далее. Лента в SharePoint Designer 2010 можно использовать для выполнения этой настройки. В случае изменения, внесенные вами нельзя использовать ленту можно изменить форму XSL непосредственно в представлении «Код». Вы найдете ссылки на дополнительные сведения о настройке форм списка в разделе См .

Чтобы удалить форму, выделите ее на странице сводки и выберите на ленте пункт Удалить . Это приведет к удалению формы с сервера, пользователи более не смогут использовать ее.

Краткая аннотация (до 255 знаков): В лекции излагаются базовые приемы редактирования статическихHTML-страниц в программе Microsoft Office SharePoint Designer 2007. Рассматриваются вопросы работы с изображениями, стилямиCSS, таблицами, гиперссылками и некоторые другие приемы классического веб-дизайна.

Список ключевых терминов .SharePointDesigner, тег, стили, каскадные таблицы стилей,CSS, клипы, рисунки, изображения.

Цель лекции . Представить программуSharePointDesignerв качестве средства разработкиHTML-страниц, сделав акцент на предусмотренные в ней средства визуального проектирования.

1. Преамбула

Несмотря на то, что программа SharePointDesigner, в первую очередь, предназначена для редактирования веб-узловSharePoint, ее, тем не менее, довольно удобно использовать в качестве неплохого средства традиционного веб-дизайна. Поэтому посвятим данную главу основам примененияSharePointDesignerдля разработкиHTML- иASPX-страниц, не касаясь особенностей технологииSharePoint, однако, имея в виду, что приведенные в главе сведения пригодятся и при разработке страницSharePoint. Ведь почти все элементы управленияHTML- иASP- допускается размещать на веб-страницах стандартаSharePoint.

При изложении материала в этой главе подразумевается, что читатель владеет самыми основными приемами HTML-дизайна.

Начнем с неотъемлемого приема современного веб-дизайна, связанного с использованием каскадных таблиц стилей .SharePointDesignerобладает развитыми средствами по применению стилей, главным из которых является панельСвойства CSS .

1. Подключение 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. Редактирование файла с таблицей стилей

1. Назначение и редактирование стилей

Для, собственно, назначения существующих стилей CSSслужат области задачПрименение стилей иУправление стилями . Следует отметить, чтокаскадные таблицы стилей подразумевают последовательное применение стилевой разметки, которая может описываться, как в коде самой веб-страницы, так и в обособленныхCSS-файлах, с ней связанных. Кроме того, стили могут использоваться для различных целей: форматирования текста и графики, позиционирования объектов на веб-странице и т.д. Принцип каскадного назначения стилей иллюстрируется рис. 6.5. Как видно из панелиПрименение стиля , стили, назначенные выделенному фрагменту на веб-странице, имеют выделяются обрамлением.

Рис. 6.5. Каскадное применение стилей

Для того, чтобы применить к выделенному фрагменту какой-либо стиль, достаточно щелкнуть по имени этого стиля на панели Применение стиля (рис. 6.6).

Рис. 6.6. Назначение стиля посредством панели Применение стиля

Обратите внимание на атрибут classтега