Dynamic Forms for SharePoint: Now with side-by-side

Change log
May 06. 2013
I have released v2.95 – you find it here
April 28. 2013
Bugfixes in v2.94:

  • Fixed a bug regarding comparing date and time columns where the trigger column is empty.

April 14. 2013
Bugfixes in v2.93:

  • Fixed bug in validating required rich text field when using non English letters.
  • Fixed bug where fields appearing in the “orphan fields tab” when using Side by Side.
  • Prevented the ID column from appearing in the “orphan fields tab”.
  • Fixed bug where people pickers lost their value in EditForm in Chrome (and possibly other non-IE browsers).

There are changes in both “DynamicFormsForSharePoint_v2.js” and “default.css” – ensure you update both.

March 29. 2013
Bugfixes in v2.91:

  • Fixed bug in side-by-side functionality regarding the “fields” not getting the correct fieldtype and fielddispname attributes.
  • Fixed bug where the field label was repeated multiple times when combining side-by-side with readonly, and then switching tab.

I have released version 2.90 of Dynamic Forms for SharePoint with these changes:

  • Added content type choice as possible trigger field.
  • Added side-by-sice capabilities.
  • Fixed a bug where the link to add tabs were missing for the first setup.
  • Changed the function that dynamically resizes the dialog. This new function is created by Sing Chan, and can be found here
  • Added a fix for some occurrences where the variable L_Menu_LCID was missing in a SP2013 setup.
  • Fixed a bug in SP.UI.RTE.js that occurs when hiding rich text columns in SP2010. The workaround is provided by John Chapman.

Refer these articles for background information and setup instructions:
Dynamic Forms for SharePoint: Production
Dynamic Forms for SharePoint – Now with Tabs
Dynamic Forms for SharePoint: Now with support for SharePoint 2013

How to use the Content type as trigger

In NewForm and DispForm the content type is not visible other than in the URL. You must use the trigger “URL Query string parameter”, and “This value” like this:

ContentTypeId=YourContentTypeID

Please note that the default content type id not always shows up in the URL. If you click the “New Item” in the ribbon (in SP2010), it is included, but if you click the “Add new item” below the list view, it is not. You should therefore add rules for the “not default content type”.

How to find the ContentTypeId
Go to list settings, click the content type you want the id from, and then look at the URL. You will find it like this:

ctype=0x010300E461AB843CED5C47B6795DF8C440401A

In EditForm, you can select the content type select ine the trigger fields and address it by its display name.

Details on the side-by-side functionality

I have added an option to place fields side-by-side in the tabs like this:
IMG

The configuration is setup like this:
IMG

The yellow input fields is used to specify a common index number for the fields that are to be presented side-by-side. The fields will be lined up with the topmost field in the selection.

The checkbox is used to hide the form label for the fields like this:
IMG

Please consider the side-by-side functionality BETA, and report any bugs back to me by adding a comment below.

Alexander

101 Comments on “Dynamic Forms for SharePoint: Now with side-by-side”

  1. Hi Alexander, some great new features – thank you!

    One small bug to report – any fields you select to display side by side now appear also in the orphan fields tab.

  2. Hi Alexander, tks for all!

    Is it possible clone rules in another List?
    I created many rules ans want to reply to other List Site, Possible?

  3. Looking great! I did notice, however, that when using the side-by-side feature that the rules that show/hide columns stop working and all columns are shown.

  5. Hello,

    I am new to SharePoint. We are using SharePoint 2007.
    Where are the instructions to create the Dynamic Forms.
    Do I need SharePoint Designer 2007 for this to work?
    Thanks for the help.

    Michael

      1. I have the same as Rudolf. Side-by-side fields are shown on orphan tab also. I use 2.91 on SP2010.

        Mstesson

  8. I was excited to find that Dynamic Forms 2.9 “Added content type choice as possible trigger field”. However, after I installed it I do not see that option in the Trigger Field. What am I doing wrong?

  9. I have an issue with the tabs scripts that maybe others have solved. Its not specific to the new version with side-by-side.

    This did not happen in SP2007, but in SP2010, the DispForm, EditForm or NewForm show in the normal out of the box format for a second or two, and then the body of the page reloads with the tabs.

    The script is unbelievabley useful, but I would like to improve the user experience some. I thought it would have to do with loading several scripts on the form pages, but when I remove everything else except the ones required for tabs, I still see the original form flash for a moment.

    Any suggestions?

      1. Yes, I have tested with 2.5 versions and now 2.9 versions and it still happens. I made sure to use the correct js, css and utility files.

  10. Hi Alex,

    I am trying out side-by-side v2.91 beta in SP2010.

    I have one thing to report:
    For the side-by-side fields I get a horizontal border between the labels and the input elements. It looks very strange and would be better if there was no border between labels and inputs.

    The problem I think is that with ms-formbody you get a border-top. And the td cells with the input element gets ms-formbody css class. Maybe the border-top should be set to none on those td cells?

    Regards

    Mstesson

  11. Sory for repeat.

    Hello Alexander. Me like this solution.
    I want use your script, but i get message “You must specify a value for this required field.”. This message appear when in required field exist Russian symbols. I attempted use different version “DynamicFormsForSharePoint.js”, “jQuery” and “spjs-utility.js”.
    My site work at WSS 3.0 SP3 + language pack (Rus).
    If its problem solve easily, please help me.

    1. In the dynamic forms script you must search for this line:

      thisVal = getFieldValue(fin).replace(/<[^>]*>| |[^a-zA-Z0-9]/g,'');

      I have a regex to extract all a-z characters, and there is your problem. See what you can do – and I’ll make a not of it till the next release.

      Alexander

  16. Pingback: SharePoint form: present fields side-by-side: Updated version « SharePoint JavaScripts

  17. Hi ALex,

    Great work as always!

    Just a quick question which might be out of scope. In our custom list we have added another connected webpart on the dispform.aspx and I was wondering if it is possible to have the ability to add this webpart to a disignated Tab? I know the solution handles fields within the current list but I can’t seem to added another webpart to a tab.

    Thank you again for a top solution!
    Deano …

  18. Hi Alex,

    Does this work in SP2007? I tried adding the script in a CEWP underneath my NewForm just as I always do and the screen goes white where the form should be. Just wanted to know if there was a conflict in SP2007.

      1. Hi Alex,

        I am using it on a brand new list. The funny thing is if I remove the CSS I get some of the javascript appearing (just some of the DynamicForm code – spjutitily seems to be ok)

        Any thoughts?

      1. Hi Alex,

        Not too sure what screenshots to send. Is adding the code different than previosu versions. Version 2.7 and below work fine by adding the code and linking the js files in the CEWP and placing it under the NewForm, DispForm and EditForm.

        I do the exact same process by adding everything to a CEWP and placing it under the NewForm and I get all white space below the title of the fowm (where the form should be).

        Anyone else having issues with running 2.9 on SP2007? I haven’t tried 2.93 yet.

      2. Hi,
        You wrote that some of the code was showing if you removed the css, and this does not sound right to me. Ensure the code is copied correctly, and you do not have any errors in the developer console in IE – you bring it up by hitting F12.

        The reason the form is “white” is because the form is actually hidden in the css, and the javascript sets it visible again when the code had loaded.

        Alexander

  19. Hi Alex,

    Using v2.71 – when trying to set a value to a field i get the following error:

    The attribute “FieldType” is missing. Ensure that you use the function init_fields_v2()

    I am setting a People/Group field with a value from a drop down choice field.

  20. Hi Alex,

    I am running into an issue with non-IE browsers (Chrome, Safari).

    I have a person lookup field, and when someone opens the edit form (with Dynamic Forms present), it clears out any values in the person lookup.

    This behavior is happening on several version of DFFS from 2.65 – 2.91.

    The forms range in complexity, but it only seems to happen if Tabs are configured.

    Any thoughts on what is causing this behavior?

    Thanks,

    Brent

      1. Hi Alexander,

        I just loaded 2.93 and can confirm that it did indeed fix this issue. I’ve tested it on multiple browsers on both a PC and Mac.

        Thanks for your quick turn around on this!!! You rock!!!

        Brent

  21. Hello,

    Have you a suggestion for dealing with the ‘td.ms-formlabel nobr’ restriction. I have sentences for column names that are simply too long, and things I try interfere with DFFS. It would be nice to bring them down to a usable width.

    Thanks,
    M

  22. You are brilliant! Thank you for this. Is there a way to reduce the width of the input fields when it is a text field? I am trying to do 4 fields side by side but it goes beyond the width of the form.
    Thank you!

  23. Buen dia..Estoy trabajando en sharpoint 2007, tengo un formulario el cual quiero agregarle el boton de “Reset” para limpiar lo que cargue anteriormente…en que direccion se crean las tablas para poder agregarle escript ??
    gcias.!!!

  24. Hi –
    I just downloaded the latest spjs-utility.js file and it doesn’t have the sidebyside function. I downloaded the version v1.14 from the spsfiles directory. Is this the correct version? If not, where can I get the latest version please?

  25. Hi
    I was experiencing some issues in IE9 with the old version of the DF solution. The new version did work in the test site in the mock up form. However, when I reference the new solution in the Production site, the issue still persists.

    Issue:
    – The rich text Multiline Text Field is ‘grayed out’ disabled.
    – Cannot save the form.

    Workaround:
    – Use Google Chrome
    – F12 (developer tool) Compatibility view needs to be changed to IE8.

    When I installed the new solution, I didn’t have to set up the rules again. It had all the setting in all three forms stored. Please help. Thank you for the awesome solution.

  26. Buen dia…Quiero poner en un formulario un boton de reset…pero al guardar los datos cargados en el formulario el boton reset funciona pero me devuelve lo cargado anteriormente…lo que quiero es que al querer usar nuevamente el formulario la accion reset borre todo lo que esta cargado ????
    Estoy trabajando con sharepoint designer 2007.

    gcias.

  27. Good day … I want to put a button on a form reset … but when saving the form data loaded into the reset button works but returns the previously loaded me … what I want is that when you want to use the form again reset action delete everything is loaded????
    I am working with sharepoint designer 2007.

    gcias.

    1. Hi,
      It is not possible to reset “EditForm”, what you will have to do, is load the “NewForm” from the “reset button”. All you want to do is:

      <script type="text/javascript">
function resetMyForm(){
	var mURL = "/Lists/MyList/NewForm.aspx";
	// For SP2010
	if(GetUrlKeyValue("IsDlg") === "1"){
		mURL += "?IsDlg=1";
	}
	// Redirect
	location.href = mURL;
}
</script>
<input type="button" onclick="resetMyForm()" value="ResetForm" />

      Alexander

      1. thank you very much Alexander / / / add the button that I have to be inserted from the Toolbox
        from html, sharepoint or ASP? Then in turn my eye attributes to NewForm EditForm? it?? thank you!! Alex

      1. Ale .. I works as you said to me HTML script too … but when you bring the NewForm I have to put the title to the task …. and charge me again if form.en Lists sight I saved as new ___ task?? My idea is to refresh the form to load the data well from scratch ..
        I spend my mail:
        elmesiasahora@yahoo.com.ar

      2. Alex, I did as you indicated, the Reset button brings NewForm me, but of course, if I charge the NewForm and recorded on the panel … I created another list???? there any way that I believe that other list and “press” / “Over write” the first thing loaded??

        I thought to see the possibility of changing the title perhaps from Designer???
        gcias.

  28. Hi,

    I created a EditForm with DynamicForm and Cascadigd DropDown.
    I has 2 computers whith Chorme (same version, last version), Computer A and B.
    When edit one item on computer A, it’s works.
    Then, the same item on computer B…some values disappear.

    Another Computer (C), Mozilla works and Chorme I have problem.

    Can you help me?

  29. What is the best method to set up rule(s) that displays another column only when the value of the column is ‘No’. When the value is either null, Yes, or N/A the additional column should not appear?

    I tried setting up one rule for null, a second rule for both N/A, Yes, and a third for No. If any value is selected it displays the additional column but it should only do that when it is ‘No’.

  30. Hi Alexander. Thank you again for this great script. I have encountered a few issues I wanted to ask you about.
    1. If I add to my NewForm.aspx page via content editor all works fine. If I create a custom new item page (say CustomNew.aspx) and duplicate the setup from NewForm.aspx a couple of things don’t work.

    a. I don’t get the link to go into setup and have to modify teh url manually.
    b. When I get the prompt asking if me if I would like to clone one of the existing pages and I select the original NewForm.aspx the clone never works.

    Does this solution work only with the original unmodified forms, or have I missed something?

    1. I have also observed that when I try to apply this to a custom form it doesn’t find any field names when you click “Add field”. So I guess it only works with the OOB forms that are created along with the list.

      1. Alex … do not find a way to manipulate a editform.aspx with Designer ……. I want to manipulate a form with preselected fields … and
        add fields such as checkbox next to each other .. which is impossible to do from the options offered sharepoint from “create coloumna” etc …. you have some tutorial or manual?
        gcias.

  31. Is the v2.94 version compatible with IE8, IE9, and IE9 Compatibility browser mode? We are getting an Error occuring when trying to save on Edit Form only. If we change the browser from IE9 to IE8 or IE9 compatibility it works.

    We are stumped as to what is happening and why the error doesn’t occur on New Item save but only Edit Item save.

  32. Have issue with Required Drop Down selection with Option to ‘Specify your own value’. In Edit Form it’s making me fill in the Own Value field. Doesn’t seem to recognize a selection from the drop down as satisfying the requirement.

  34. Hello,
    I’ve created a situation on the edit form where when an item has an attachment and any rule gets triggered, the form does not submit. The window scrolls up a bit and nothing else happens. It’s as though I have a hidden required field. This doesn’t happen when there isn’t an attachment. Wondering if I’ve overlooked something?

    Thanks.

    1. Turns out its also happening to list items that do not have attachments. Perhaps I just don’t know how work the rules. It was working great before I added more triggers. Back to drawing board I guess.

    3. Thanks Alexander.
      I’ve sent you the details. Any insight into how best to approach configuring rules/triggers is much appreciated.

      Mark

  35. Hi,

    I’ve found an issue that seems to apply to Dynamic Forms v2.93 and later. In the new and edit item forms the vertical scroll bar shows then, as soon as I try scrolling, it vanishes. I can tab through the fields and have it scroll but cannot use the scroll bar. It seems to be an issue in Chrome and behaves better in IE.

    Am I missing something?

    SP2010 Foundation, spjsutility v1.15 and Chrome 26.0.1410.64

  36. Pingback: Dynamic Forms for SharePoint: Now with field tooltip « SharePoint JavaScripts

  37. Hi,

    Love this solution! You wouldn’t believe how often users have requested functionality like this, thank you!

    A quick question though. I have a list that has multiple content types where the fields differ content type to content type. However, since I’ve applied your solution, I can’t seem to set the use of tabs or the fields on those tabs for each content type. I only have fields for the default content type available. I read over the section about using the URL query string parameter so I could set rules there for hiding and showing tabs, but then i have to throw all my fields into one content type, kind of defeating the purpose of the content type.

    Is there a way to set fields/tabs per content type on the new form?

    Thanks!!
    Ryan

    1. Hi Ryan,

      All you need to do is create a content type with all of your fields. While you’re configuring your DFF, you’ll need to set the content type with all of your fields as the default. Once you’re finished configuring the form, you can set your default back to the one it should be, and remove the content type with all the fields from the CT choice list (don’t delete it entirely). Then, when you create an item based on one of your content type, only the fields available for that CT will show up on the form.

      However, if you want the same field to be in a different location based on the content type, I think you’re out of luck.

      Brent

  38. Thanks Brent for the quick reply. I had an epiphany last night on how to handle this, not the greatest, but it works.

    I keep all my different contents types and keep the dynamic forms off the the newform. Then, on submit, I use a workflow to change the various content types to a general content type that has all the fields on all the other content types. I also use the workflow to store what the original content type was before i converted it to this general one, “request type”. I then apply the dynamic forms to the disp and edit forms. I can then configure dynamic forms to key off of the “request type” and hide and show fields/tabs as necessary. Since i only need the show/hide and tabs on the edit/disp forms, this works well. I miss out on the tool tips and conditionally showing/hiding fields on the newform, but not a deal breaker. Thanks again though!

  39. I’m having another issue with hiding/displaying certain tabs based on the content type of the newform. I created a tab for each content type so that I can just display the tab I want based on the content type instead of hiding/displaying all the fields on one. I can set the url query parameter and set up the tabs fine. But when I go to fill out a newform, the correct tab for the content type I selected appears to show, but upon further inspection, the fields are incorrect. It you click on the tab itself, the form refreshes and the fields are all correct. This only happens when I select a content type where the tab I want to display isn’t in position 0. Any thoughts?

    1. Hi,
      Are there any errors in the developer console (hit F12 in Internet Explorer)?

      If you used content types – how can you have the wrong fields visible? are there more fields in the content type than the ones you display in the tab?

      Alexander

      1. Hi Alexander, thanks for the reply. I do not see any errors in the console

        There are some shared fields across the content types. I had to add all the differing fields to the first (default) content type in order from them to show up visible in the DFF. I then wanted to show tab 0 if content type 1 and tab 1 if content type 2. If I do a new content type 1, everything is good and tab 0 shows and tab 1 hidden. But when I do a new content type 2, the correct tab 1 shows up and tab 0 is hidden, but the fields on tab 1 are missing the fields unique to tab 1. BUT if i click on the tab itself, the unique fields appear. If only there was a way to have this refresh done on page load, not when i click the tab. Hope that makes sense. Thanks in advance!

        PS I did solve this VERY laboriously by adding all fields to 1 tab and then hiding/showing fields by content type. this worked great albeit the tab setup looks like a mess, even though it works. It would be much easier to simply hide and show different types using the content type = method.

  40. Is it possible to use a rule to set the value of a Yes/No Boolean (check box) field? I have tried setting the value to both “true” and “yes”. Neither one seems to be recognized. Thanks!

  41. I have a multiselect lookup column. What’s the best way to widen each of those columns so that the long text I have can be more easily read?

    This is truly amazing. Thank you!

      4. Sorry for the late reply (holiday). This will be fixed in the next release, in the meantime you can fix it by updating this line in the function “dffs_multiLookupVertical”:

        $(td).find('select').css({'width':"100%"});

        Like this:

        $(td).find(isSP10 ? "select" : "div").css({'width':"100%"});

        Alexander

      5. Thank you so much! That worked. Again, really appreciate all of your efforts with this.

  42. Thanks Alexander

    A very fine and sound solution that will keep me amused for a while working out how far I can push SharePoint,

    Our version is locked down very tightly and this is the ideal solution to bypassing the restrictions to make the sites very user friendly.

    I will see what I can do about some beer money after I have fully tested out the solution

  43. Pingback: Dynamic Forms for SharePoint v3 « SharePoint JavaScripts

    1. Hi,
      You can use something like this in the “Custom JS” in the “Misc” tab:

      var dffsStatus = getFieldValue("Title");

switch(dffsStatus){
case "1":
if(GetUrlKeyValue("sTab") !== "1"){
location.href = location.href+"&sTab=1";
}
break;
case "2":
if(GetUrlKeyValue("sTab") !== "2"){
location.href = location.href+"&sTab=2";
}
break;
}

      In this example I have used the value 1 or 2 in the Title field to control which tab to select.

      Alexander

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.