none
TAB list forms RRS feed

  • Вопрос

  • Господа, может кто то поделиться работающим алгоритмом ка4к сделать ТАБ на формах списка.

    Кучу перепробовал не работает ничего.

    СПС

    16 января 2015 г. 14:03

Ответы

  • 1.Создаем список.

    Поля :Title, Title2. Наша задача сделать форму с двумя табами. На каждом по одному столбцу.

    2. Создаем кастомную форму NEW.aspx и делаем ее по умолчанию

    3. Закачиваем в библиотеку site assets

    http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css

    http://code.jquery.com/jquery-1.10.2.js

    http://code.jquery.com/ui/1.11.2/jquery-ui.js

    http://jqueryui.com/resources/demos/style.css

    4. в вебе открываем NEW на редактирование и добавляем редактор скрипта. Лучше прописать полный путь к каждому файлу.

    <link rel="stylesheet" href="/SiteAssets/jquery-ui.css">

                    <script src="/SiteAssets/jquery-1.10.2.js"></script>

                    <script src="/SiteAssets/jquery-ui.js"></script>

                     <link rel="stylesheet" href="/SiteAssets/style.css">

                     <script>

                     $(function() {

                      $( "#tabs" ).tabs();

                     });

                     </script>

    5. Открываем дизайнер и открываем NEW. Находим таблицу  полей . Ищем TITLE, Title 2 . Там еще будет attach и куча другого кода. начало таблицы.

                                                                   <table border="0" cellspacing="0" width="100%">

                                                                                  <tr>

                                                                                                  <td width="190px" valign="top">

                                                                                                                  <H3>

                                                                                                                                 <nobr>Title<span> *</span>

                                                                                                                                 </nobr>

    Выше ее вставляем

    <div id="tabs">

    <ul>

        <li><a href="#tabs-1">Nunc tincidunt</a></li>

        <li><a href="#tabs-2">Proin dolor</a></li>

      </ul>

    6. Ниже этого скрипта открываем DIV

    <div id="tabs-1">  Типа открыли первый див.                                              

    Получается :

    <div id="tabs">

      <ul>

        <li><a href="#tabs-1">Nunc tincidunt</a></li>

        <li><a href="#tabs-2">Proin dolor</a></li>

      </ul>

      <div id="tabs-1">                                        

                                                  

                                                                   <table border="0" cellspacing="0" width="100%">

                                                                                  <tr>

                                                                                                  <td width="190px" valign="top">

                                                                                                                  <H3>

                                                                                                                                 <nobr>Title<span> *</span>

                                                                                                                                 </nobr>

                                                                                                                  </H3>

                                                                                                  </td>

                                                                                                  <td width="400px" valign="top">

                                                                                                                  <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>

    7. Находим конец большой таблицы. И ставим после нее </div> Первый Див закрыли.

    8. Открываем второй DIV и сразу его закрываем

    <div id="tabs-2">

    </div>

    9. Идем в большую таблицу и вставляем ее между этими DIV

    10. Оставляем только TITLE2

    <table border="0" cellspacing="0" width="100%">

                                                                                 

                                                                                  <tr>

                                                                                                  <td width="190px" valign="top">

                                                                                                                  <H3>

                                                                                                                                 <nobr>title2</nobr>

                                                                                                                  </H3>

                                                                                                  </td>

                                                                                                  <td width="400px" valign="top">

                                                                                                                  <SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="title2" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@title2')}"/>

                                                                                                                  <SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="title2" ControlMode="New"/>

                                                                                                  </td>

                                                                                  </tr>

                                                                   </table>

    11. в Первом DIV удаляем tiitle 1 от  <tr> до </tr>

    12.  Закрываем еще один </div>          

    И получается

    Если что пишите. Помогу.

    22 января 2015 г. 14:37

Все ответы

  • http://sptypescript.codeplex.com/SourceControl/latest#SPTypeScript/Sample_CSRTabs/

    Только кодом. Адски сложно и нифига не документировано. 


    Business Solutions Architect, SharePoint Expert, Trainer, Speaker and Author http://gandjustas.blogspot.com/ Join Russian SharePoint Community at https://www.facebook.com/groups/sharepointrussian/

    17 января 2015 г. 4:05
  • замороченно. У А. Маркелова к примеру есть статья попроще. Но нифига не получется. Подожду еще других предложений. Плюс поставил. Спасибо.
    17 января 2015 г. 16:50
  • Попроще не получится, только с потерей функционала.

    Business Solutions Architect, SharePoint Expert, Trainer, Speaker and Author http://gandjustas.blogspot.com/ Join Russian SharePoint Community at https://www.facebook.com/groups/sharepointrussian/

    17 января 2015 г. 17:35
  • вот эта штука http://markeev.com/Articles/fields-tabs-sharepoint.aspx не запустится никогда?

    на 2013.

    19 января 2015 г. 6:23
  • проще всего Easy-Tabs

    скрипт, вставляете на него ссылку, он преобразует все  веб-части в табы.

    на кастомизировать трудно.

    Все остальные варианты это скорее создание специальной разметки и превращение ее в табы с помощью CSS и JQ коих миллион гуглится.

    Т.е. вы создаете табы средствами HTML а уже в них можно вставить тег webpartzone


    19 января 2015 г. 7:58
  • вот эта штука http://markeev.com/Articles/fields-tabs-sharepoint.aspx не запустится никогда?

    на 2013.


    Запустится и даже заработает, только не все поля будут работать так как в 2013. Но и в 2013 свои мелкие детали есть. Напрмиер если workflow-форма для 2013 WF. то так делать нельзя.

    Кстати ссылку я давал на код - тоже Андрей писал.

    Business Solutions Architect, SharePoint Expert, Trainer, Speaker and Author http://gandjustas.blogspot.com/ Join Russian SharePoint Community at https://www.facebook.com/groups/sharepointrussian/

    19 января 2015 г. 8:06
  • проще всего Easy-Tabs

    скрипт, вставляете на него ссылку, он преобразует все  веб-части в табы.

    на кастомизировать трудно.

    Все остальные варианты это скорее создание специальной разметки и превращение ее в табы с помощью CSS и JQ коих миллион гуглится.

    Т.е. вы создаете табы средствами HTML а уже в них можно вставить тег webpartzone



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

    Business Solutions Architect, SharePoint Expert, Trainer, Speaker and Author http://gandjustas.blogspot.com/ Join Russian SharePoint Community at https://www.facebook.com/groups/sharepointrussian/

    19 января 2015 г. 8:07
  • Большое спасибо. Попробую в тесте т.к. для 13-го не заявлен функционал.
    19 января 2015 г. 9:30
  • спасибо. не буду даже тогда пробовать.
    19 января 2015 г. 9:31
  • Вот у меня ничего и не получается. Тупо беру и копирую

    Copy-paste DataFormWebPart several times

    После чего в дизайнере в аспх странице все исчезает.. Видимо нужно что то удалить после копирования.  Главное что ссылка рабочая. Буду дальше крутить вертеть.

    Вот нашел еще, вдруг кому пригодится:

    http://summit7systems.com/tabbed-web-parts-in-sharepoint-2013-office-365/

    http://www.ashokraja.me/post/Tab-Pages-WebPart-in-SharePoint-2013-based-on-jQuery-Easy-Tabs-without-combining-multiple-web-parts.aspx

    http://www.sharepointhillbilly.com/Lists/Posts/Post.aspx?ID=42

    https://sharepointtabs.codeplex.com/

    Всем большое спасибо

    19 января 2015 г. 9:39
  • Приветствую, можете помочь?

    на форме создания есть 10 столбцов.

    нужно вставить один таб. на первом 5 столбцов на другом 5.

    Создаю форму 1. удаляю 5 столбцов. в нее добавляю вебпарт контент едитор и вставляю скрипт с easytabs

    Создаю форму 2. удаляю другие 5 столбцов столбцы.

    Как мне вставить вебпарт 2 в форму 1?

    Если делать по Маркелову он не дает копировать DataFormWebPart .

    Спасибо

    21 января 2015 г. 13:55
  • Станислав ниже говорит, что не получится. Но в тоже самое время еще ниже - что работать будет.

    Запустится и даже заработает, только не все поля будут работать так как в 2013. Но и в 2013 свои мелкие детали есть. Например если workflow-форма для 2013 WF. то так делать нельзя.

    У меня такая же ерунда как в коментах

    I use this way in NewForm and EditForm. but when I want to add an item in the NewForm, item can not be saved. the window is closed but item not shown in the list. 
    Also, in the EditForm, when I want to edit an item, item can not be changed, the window is closed but item does not changed.
    Please help me!

    21 января 2015 г. 13:57
  • Вот описание как jQuery Tabs приделать.
    22 января 2015 г. 8:19
  • Александр, спасибо.

    у меня вопросы

    1. куда вставлять второй Ваш скрипт? в какое именно место.

    2. Можно ли использовать http://jqueryui.com/resources/download/jquery-ui-1.11.2.zip ? потому как jquery-ui-1.10.4.min.css" я нигде не нашел.

    3. Правильно ли я понимаю, что после вставки 2-го скрипта я уже должен увидеть ТАБ. даже до того как я в них добавил нужные столбцы.

    Понимаю, что мои вопросы совсем базовые.. Но мне очень нужно решить эту задачу , а знаний в верстке и дизайне у меня нет.

    Спасибо.

    22 января 2015 г. 8:58
  • Я рекомендую сначала попробовать реализовать это не в SharePoint, а на простой html страничке.
    Вот по этой ссылке можно ознакомиться как просто табы сделать все SharePoint. (view source нажать надо для просмотра кода)
    22 января 2015 г. 9:24
  • Александр, сделаю все что Вы скажете. Хорошо я попробую отдельно создать HTML страницу. Хотя EASY TAB с вебпартами у меня уже работал.

    А в вашей ссылке , также, не написанно откда они взяли  <link rel="stylesheet" href="/resources/demos/style.css">.Ок. я попробую сделать это. Могу я Вас попросить всетаки ответить на мои вопросы. И главный вопрос. Вы предлагали в начале поста создать форму просмотра, а в конце она стала формой изменения. Как это получилось? Спасибо большое.

    22 января 2015 г. 9:36
  • Как я понимаю. Просто берем код, копируем и сохраняем в HTML. все ссылки там на инет кроме style.css

    Страница получается такая же как по Вашему алгоритму. сверху 3-ссылки. Снизу один текст. ТАБОВ НЕТ

    22 января 2015 г. 9:46
  • Смысл в том, что jQuery Tabs плагин переделает html.
    Так же должна вызываться ф-ия JavaScript:
    $( "#tabs" ).tabs();

    22 января 2015 г. 10:02
  • Ура получилось.

    Пока на странице

    22 января 2015 г. 11:00
  • Ничего не получается. после вставки кода номер два с блога ТАБов нет
    22 января 2015 г. 12:28
  • получилось. сейчас будет инструкция
    22 января 2015 г. 13:42
  • 1.Создаем список.

    Поля :Title, Title2. Наша задача сделать форму с двумя табами. На каждом по одному столбцу.

    2. Создаем кастомную форму NEW.aspx и делаем ее по умолчанию

    3. Закачиваем в библиотеку site assets

    http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css

    http://code.jquery.com/jquery-1.10.2.js

    http://code.jquery.com/ui/1.11.2/jquery-ui.js

    http://jqueryui.com/resources/demos/style.css

    4. в вебе открываем NEW на редактирование и добавляем редактор скрипта. Лучше прописать полный путь к каждому файлу.

    <link rel="stylesheet" href="/SiteAssets/jquery-ui.css">

                    <script src="/SiteAssets/jquery-1.10.2.js"></script>

                    <script src="/SiteAssets/jquery-ui.js"></script>

                     <link rel="stylesheet" href="/SiteAssets/style.css">

                     <script>

                     $(function() {

                      $( "#tabs" ).tabs();

                     });

                     </script>

    5. Открываем дизайнер и открываем NEW. Находим таблицу  полей . Ищем TITLE, Title 2 . Там еще будет attach и куча другого кода. начало таблицы.

                                                                   <table border="0" cellspacing="0" width="100%">

                                                                                  <tr>

                                                                                                  <td width="190px" valign="top">

                                                                                                                  <H3>

                                                                                                                                 <nobr>Title<span> *</span>

                                                                                                                                 </nobr>

    Выше ее вставляем

    <div id="tabs">

    <ul>

        <li><a href="#tabs-1">Nunc tincidunt</a></li>

        <li><a href="#tabs-2">Proin dolor</a></li>

      </ul>

    6. Ниже этого скрипта открываем DIV

    <div id="tabs-1">  Типа открыли первый див.                                              

    Получается :

    <div id="tabs">

      <ul>

        <li><a href="#tabs-1">Nunc tincidunt</a></li>

        <li><a href="#tabs-2">Proin dolor</a></li>

      </ul>

      <div id="tabs-1">                                        

                                                  

                                                                   <table border="0" cellspacing="0" width="100%">

                                                                                  <tr>

                                                                                                  <td width="190px" valign="top">

                                                                                                                  <H3>

                                                                                                                                 <nobr>Title<span> *</span>

                                                                                                                                 </nobr>

                                                                                                                  </H3>

                                                                                                  </td>

                                                                                                  <td width="400px" valign="top">

                                                                                                                  <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>

    7. Находим конец большой таблицы. И ставим после нее </div> Первый Див закрыли.

    8. Открываем второй DIV и сразу его закрываем

    <div id="tabs-2">

    </div>

    9. Идем в большую таблицу и вставляем ее между этими DIV

    10. Оставляем только TITLE2

    <table border="0" cellspacing="0" width="100%">

                                                                                 

                                                                                  <tr>

                                                                                                  <td width="190px" valign="top">

                                                                                                                  <H3>

                                                                                                                                 <nobr>title2</nobr>

                                                                                                                  </H3>

                                                                                                  </td>

                                                                                                  <td width="400px" valign="top">

                                                                                                                  <SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="title2" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@title2')}"/>

                                                                                                                  <SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="title2" ControlMode="New"/>

                                                                                                  </td>

                                                                                  </tr>

                                                                   </table>

    11. в Первом DIV удаляем tiitle 1 от  <tr> до </tr>

    12.  Закрываем еще один </div>          

    И получается

    Если что пишите. Помогу.

    22 января 2015 г. 14:37
  • и кстати работают все остальные скрипты. Я там много переворачиваю и проверки. и обязательность полей.
    Скрипт в номере 4 лучше добавлять отдельным вебпартом - редактор сценариев.
    22 января 2015 г. 14:40
  • Андрей, не совсем понял что где удалять надо.
    13 ноября 2015 г. 12:36
  • Сори, не заметил вопрос.

    Создавал я это чудо давно. всего уже не вспомню.

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

    30 ноября 2015 г. 12:37