How to Hide or show List or Library control

Forms SharePoint Online
1

Hi I would like to show/hide fields based on toggle.

the below code i tried is working if its text field but not for list and library control.

SPDataTable3 is the table i would like to hide

hideOrShow();
function hideOrShow() {

  if (fd.field('ProfessionalIndemnityInsurance').value) {
      $(fd.container('SPDataTable3').$parent.$el).show(); 
   } else {
       $(fd.container('SPDataTable3').$parent.$el).hide(); ; 
   }

}
fd.field('insuranceclaimslevied').$on('change', hideOrShow);
fd.field('ProfessionalIndemnityInsurance').$on('change', hideOrShow);

2

Hello @Rinu,

To hide/show List or Library control dynamically you need to:

  1. Give control a CSS class, e.g. 'table-to-hide'
    image
  2. And use this code to show/hide the control:
//hide control
$('.table-to-hide').hide();
//show control
$('.table-to-hide').show();

Please find more information about how to work with fields/control/containers in JavaScript here.

3

Thank you Mnikitina, was it the same for any controls such as RichText etc

4

Dear @Rinu,
Yes, you can use the following method for anything on the form. Moreover, you can give the same class to a number of cells, and hide multiple at the same time, like a group.

5

Hello @Nikita_Kurguzov ,
is there any way that I can require a file to be uploaded?
Like this:
$('.table-to-hide').required = true;

Best regards
Corinna

6

@Sternchen,

What field or control do you want to make required?

7

I want to make the document libary required:

image

Presumably, however, this is not possible.
I tried to use a attachment but sadly this isn´t working.

image

8

@Sternchen,

You can make the List or Library control required by adding a custom form validator:

fd.validators.push({
    name: 'MyCustomValidator',
    error: 'Upload files',
    validate: function(value) {
        if (fd.control('SPDataTable1').widget.dataItems().length < 1){
            return false;
           }
        return true;
    }
});

Please note that Attachments fields form the Common fields section don't save files to SharePoint site. Files are saved to your Plumsail Account.

9

It looks like it is not working. I changed the SPDataTable1 to 2.
I have put the valdidator once before the render function and once as in here. However, I can save the form even if no document is uploaded.

image

10

@Sternchen,

Try adding the validation after the control is ready like this:

fd.spRendered(function() {

    fd.control('SPDataTable1').ready(function(dt) {
         fd.validators.push({
            name: 'MyCustomValidator',
            error: 'Upload files',
            validate: function(value) {
                if (fd.control('SPDataTable1').widget.dataItems().length < 1){
                    return false;
                   }
                return true;
            }
        });
    });
});

If that won't work, please share the screenshot of all errors from the browser console(F12).

11

Here are all the errors:

image
image786×635 54.1 KB

These are the errors I get, when i hit the save button:

image
image786×329 28 KB

12

@Sternchen,

These errors are not related to the code I've shared.

Please comment out all code except for the part I've shared and test. Make sure you are using the control internal name in the code.

14

I just used your code .

image
image1192×857 94.6 KB

And after I hit save:
image
image731×281 23.6 KB

May I asked is there a possibility to outsource my json code? So I only have one json code for 3 forms.

15

@Sternchen,

Please share the full code you used when testing the form and got these errors.

Not sure I understood you. Do you want to store the code in a file and re-use it on multiple forms? If so, please see this post.

16

I just used the code you have sent me.

17

@Sternchen,

Please export the form with the List or Library control and the code you've been testing and send it to me. I'll check it on my side.

18

test_form.xfds (36.0 KB)
Here is my form with your code.
Thank you :slight_smile:

19

I really don´t know why it is working now but this code works for me:

fd.validators.push({
name: 'MyCustomValidator',
error: 'Upload files',
validate: function(value) {
    if (fd.control('SPDataTable1').widget.dataItems().length < 1){
        return false;
       }
    return true;
}

});

It was your first code and now it seems working.
image
Thank you @Margo :slight_smile:

Now I want to make it require only when the IBAN field has a value.
I tried it like this:

if(fd.field('IBAN').value != ''){
fd.validators.push({
name: 'MyCustomValidator',
error: 'Please upload a IBAN file',
validate: function(value) {
if (fd.control('SPDataTable1').widget.dataItems().length < 1){
return false;
}
return true;
}
});
else{
}

But this isn´t working. Hope you can help me.

20

@Sternchen,

I'm glad the validation is working.

You need to add a condition inside the validator instead, like this:

fd.validators.push({
name: 'MyCustomValidator',
error: 'Upload files',
validate: function(value) {
    if (fd.control('SPDataTable1').widget.dataItems().length < 1 && fd.field('IBAN').value){
        return false;
       }
    return true;
}
});
21

Thank you :slight_smile:
This solved my problem. Just so simple.

1 Like