New form based on a choice dropdown

[crolle]

Hi. I´m wonder if and how it should be possible to make a new form based on a choice i a dropdown?

If I for example choice "kund" Only the field who is related with kund shows in the form.

[Nikita Kurguzov]

Hello, crolle!
There are at least a couple of ways to achieve this result. For example, you can hide and show certain fields depending on the value of the dropdown - this option is good if you only have limited amount of fields, no more than 60 preferrably. This can be done using CSS classes and JQuery.

Another option would be to redirect user to a different form after certain dropdown value is selected, it's better to do if you have large number of fields, but in this case field values won't be saved(unless the script is used to first save the item and then redirect user to Edit Form).

The correct approach comes down to a number of factors, so if you could answer these questions, we'll try to give you as detailed instruction as possible:
1) Are you using Sharepoint Online or Sharepoint On-Premises(2010,2013/2016)?
2) Is it New Form or Edit Form? Dialog mode or regular mode?
3) How many fields are you using on this form?

[crolle]

Hallo Nikita
I´m using sharepoint online
It`s for a new form- The edit form should hav all the data because I answer on the form
I have ca. 20 fields

[crolle]

I´m not so god at programming

[Nikita Kurguzov]

Hello, Crolle!
I will try to give you as simple an example as possible. In Forms Designer, fields and other elements have CSS Class property:

CSS class.png (2.48 KiB) Viewed 1935 times

You will need to give special CSS class for every element that you want to hide. For example, you can give CSS class type1 to first group, type2 to second group and type3 to third group.

This will allow you to hide and show elements based on their class. Give same class to the elements in the same group, don't give classes to elements you don't want to hide.

Here is an example code you can use for dropdown Choice field with my comments:

Code: Select all

//this function will run several times and it will show and hide different fields
function hideAndShowFields(){
  //first, hide all fields that can be hidden
  $('.type1').hide();
  $('.type2').hide();
  $('.type3').hide();
  
  //Replace '1', '2' and '3' with the actual values of Choice like 'kund'
  if(fd.field('Choice').value() == '1'){
    //if value of Choice field is 1, show type1 fields
    $('.type1').show();
  } else if(fd.field('Choice').value() == '2'){
    //if value of Choice field is 2, show type2 fields
    $('.type2').show();
  } else if(fd.field('Choice').value() == '3'){
    //if value of Choice field is 3, show type3 fields
    $('.type3').show()
  }
}

//first runs the function when page opens, so it hides all the necessary fields
hideAndShowFields();

//then this function will run every time value of Choice field changes, use Dropdown for Choice
fd.field('Choice').change(hideAndShowFields);

Insert this code into JavaScript editor in Forms Designer on the New Form:

JS editor.png (8.6 KiB) Viewed 1935 times

You will need to replace Choice in the code with the name of your dropdown choice field and values with actual values from your choice field. If you want to have more than three groups, you can add them by replicating the code I've already shown you, making it a little longer.

Important! I do not recommend hiding Required fields as the form will not save if required fields are not filled.

[crolle]

It almost work but when i pick kund or leverantör thefield dosent show

//this function will run several times and it will show and hide different fields
function hideAndShowFields(){
//first, hide all fields that can be hidden
$('.type1').hide();
$('.type2').hide();

//Replace '1', '2' and '3' with the actual values of Choice like 'kund'
if(fd.field('Ange kategori').value() == 'Leverantör'){
//if value of Choice field is 1, show type1 fields
$('.type1').show();
} else if(fd.field('Ange kategori').value() == 'Kund'){
//if value of Choice field is 2, show type2 fields
$('.type2').show();
}
}

//first runs the function when page opens, so it hides all the necessary fields
hideAndShowFields();

//then this function will run every time value of Choice field changes, use Dropdown for Choice
fd.field('Ange kategori').change(hideAndShowFields);

[Nikita Kurguzov]

Please, check the internal Name of field('Ange kategori') - it's likely not 'Ange kategori', but slightly different.
You can select it in Forms Designer and check its Internal Name in Menu on the right:

InternalName.png (4.54 KiB) Viewed 1929 times

[crolle]

It works!! Thank you very much.