0

I have a custom-list form with a list of countries:

  1. each country is a checkbox.
  2. Once the user clicks on the checkbox, a new textarea should appear.
  3. I need be able to save this on the custom-list, if the user checked 4 different countries, I need be able to retrieve all 4 textarea individually.

It's possible to do something like this on Sharepoint? What options do I have?

Sharepoint version: 15.0.4905.1000

  • Hi Mateus, can you specify the version of SharePoint you are referring to? – Denis Molodtsov Mar 9 '18 at 19:17
  • Hi @DenisMolodtsov 15.0.4905.1000 (I'll add on the description). Thanks. – Mateus Vahl Mar 9 '18 at 19:36
  • Oh, another question: do you need all 200+ countries? or you have a much smaller number? – Denis Molodtsov Mar 9 '18 at 19:42
1

We could do it by using many different approaches, but let's limit them to a couple:

First, start with creating 20 List columns. 10 for the countries and 10 for the respective text boxes. I suggest names like: CountryCanada, DescriptionCanada, CountrySpain, DescriptionSpain etc.

Approach #1. Add a Content Editor Webpart (CEWP) to the new, edit and display forms

This is just a simple example that would handle a single country, but you can improve it so that it works with as many as you want:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script language="javascript" type="text/javascript">
$(document).ready(function () {
    var canadaCheckBox = $("input[ID^='CountryCanada']");

    var showOrHideField = function() {
        if(canadaCheckBox.is(':checked')) {                
            showField('DescriptionCanada');
        }else{
            hideField('DescriptionCanada');
        }
    };

    // run at startup (for edit form)
    showOrHideField();
    // make sure when the user changes the value - we handle it:
    $(canadaCheckBox).on('change', showOrHideField);

});

function hideField(fieldInternalName) {
    return $("h3#" + fieldInternalName).parent().parent().hide();
}

function showField(fieldInternalName) {
    return $("h3#" + fieldInternalName).parent().parent().show();
}

function getField(fieldInternalName) {
    return $("h3#" + fieldInternalName).parent().parent();
}

</script>

Approach #2. Use AngularJs

If you know AngularJs - you can use it to create your custom and good looking forms from scratch: https://github.com/Zerg00s/AngularForms

You can also try using InfoPath, SPServies or to modify the existing form using SharePoint Designer, but I only like the first two approaches.

  • I'm looking for something like option 1, but the problem for me is: 1. The list of countries is checkbox dynamic, so I cannot add static information like "CountryCanada". 2. Later, I'll need recover information about all country descriptions via javascript API. So I will need figure out which description belong to each country. Thanks for the help. – Mateus Vahl Mar 9 '18 at 20:07

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.