2

I have converted my forms to tabs by following the informations as described here: http://www.markrackley.net/2015/12/03/tabify-your-sharepoint-forms/

This works fine however for multi line text boxes (not plain text) the value in the field doesn’t show up on the edit form. It shows up on the display form. If I change the multi line text boxes to plain text then the value shows up but I want the field to be rich text so this isn’t an option.

Can anyone help?

2

for the love of god DO NOT USE HILLBILLY!!!! its buggy as hell, had a third party put it in and was put all over the place. Client was angry why they could only multi select more than 2 items at a time, the Ribbon area breaks when no item is selected and more than one item is selected. After i looked into it... its a bug in hillbilly tabbing that is still an issue 3 years later and the creator said he isnt going to look into it.

So I changed the code to JqueryUI (https://jqueryui.com/tabs/) which is far more stable and everything works as it should by a reputable company. hillbilly is a big no no in my eyes and your asking for trouble unless you feel like going into the code and re-engineering his code to fix the async issues.

lol when i explain the issues and the client can only focus on the name and said "if we knew they were going to use some 3rd party code with that name we would of never excepted".

EDIT

you need to add all the webparts to the page. In the ribbon click on HTML to look at the code. Now copy all the code and put it in a code editor. seperate each webpart code (between webparts its usually separated by <p> tag). It would look somthing like this:

<p>​</p>
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false"><div class="ms-rtestate-notify  ms-rtestate-read 6748c623-74ae-4a04-a8eb-dafeec74bb6a" id="div_6748c623-74ae-4a04-a8eb-dafeec74bb6a"></div>
<div id="vid_6748c623-74ae-4a04-a8eb-dafeec74bb6a" style="display: none"></div></div>
<p>&#160;</p>

then copy below and add the code above to it:

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
  </script>

  <div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>
            /*webpart 1 code here*/
    </p>
  </div>
  <div id="tabs-2">
    <p>
             /*webpart 2 code here*/
    </p>
  </div>
  <div id="tabs-3">
    <p>
             /*webpart 3 code here*/
    </p>
  </div>
</div>

with the webpart code inside it:

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
  </script>

  <div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>
            <p>​</p>
                <div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false"><div class="ms-rtestate-notify  ms-rtestate-read 6748c623-74ae-4a04-a8eb-dafeec74bb6a" id="div_6748c623-74ae-4a04-a8eb-dafeec74bb6a"></div>
                <div id="vid_6748c623-74ae-4a04-a8eb-dafeec74bb6a" style="display: none"></div></div>
            <p>&#160;</p>
    </p>
  </div>
  <div id="tabs-2">
    <p>
             /*webpart 2 code here*/
    </p>
  </div>
  <div id="tabs-3">
    <p>
             /*webpart 3 code here*/
    </p>
  </div>
</div>

repeat for each webpart. sometimes it doesn't work. That's because you need to load the script stuff and JS stuff beforehand so you can put this:

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
  </script>

inside a script editor webpart.

  • Thanks for this it is really helpful. I have looked on that site and copied the code in, how do I make it show the fields from the list on the form though? – Tom Sanderson Feb 6 '18 at 11:28
  • amended answer for you :) – Ali Jafer Feb 6 '18 at 16:14
  • also would like to know what type of form is this? is it customised and is it out of the box? I know you can hide it in edit mode if you have added some JS code to that view either in the page (goto the page and edit the page. do you see any custom scripts?) or via sharepoint designer? or is this a nintex/infopath form? – Ali Jafer Feb 6 '18 at 20:02
  • I am just using the default SharePoint forms, no alterations or anything. I understood most of your message but I am not sure how to get the code for my forms. You mention clicking on the ribbon click then on HTML to look at the code but I don't see this option. is it in the list view or the form view? – Tom Sanderson Feb 7 '18 at 12:27
  • no, create a site page or page. In the first box area (zone) click on it and then proceed to add the webpart, in your case it would be the list. Once added to the page click on the html tag to see the code. Copy that code ;) now repeat for each list you want to add to each tab area : add list to page support.office.com/en-us/article/… – Ali Jafer Feb 7 '18 at 14:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.