Hide Grid on button click

Forms
1

Hi,

I want to hide a grid when clicking a button.

The grid is called 'Grid1'

I have but this code in the button click property, but it doesn't work.

$('.Grid1').hide();

What do I need to do?

Thanks

2

Hello @mrpowergage,

The code looks fine and should work when the button is clicked.

Could you please share the screenshot of the grid settings, like this:
image

3

Here it is:

04

4

Thank you, @mrpowergage!

The code that you are using searches for an element on the page by CSS class. So the last thing you need to do is to assign a CSS class to the grid container, as shown on the screenshot.

image

5

Hiya,

I have a case where all the grids and the fields inside them are hidden on load. They will only appear when a button is clicked.

My problem is, how can I add validation on grids that appear when clicked?

Thank you!

6

Hello @DryChips,

Not sure I understood you. What validation do you need?

7

I'll explain,

Here is a screenshot of my form:

image
image903×370 15.5 KB

If I click "Name", the hidden grid appears with the fields. I want to validate all the fields in that grid if I only select "Name".

image
image812×338 8.53 KB

I don't want he validation to trigger with the fields that are hidden.

I have hidden the grids using this JavaScript: $('.Wiz3-NewName').hide();

8

@DryChips,

You can check whether the grid is hidden or not, and make the fields in the grid required. See the sample code for the button:

if ($('.test').is(":hidden")) {
    $('.test').show();
    fd.field('Field').required = true;
} else {
    $('.test').hide();
    fd.field('Field').required = false;
}
1 Like
9

Thank you!

Is it not possible to add fd.validators to a button for more complex validation? etc. Regex, numerical threshold...

I am using SharePoint 2019 on premises

10

@DryChips,

You can add/remove form or field validation, or change a field property with the code.

For instance, add or remove Attachments field validation:

//add validation
    fd.field('Attachments').addValidator({
        name: 'Attachments validator',
        error: 'Do not attach more than 3 files',
        validate:function(value){
            if(value.length > 3){
                return false;
            }
            return true;
        }
    });

//remove validation
fd.field('Attachments').validators.length = 0;
11

This works great! I just needed to add to the button control to make it work!

I wanted to ask, is it possible to remove the error message at the top in case I decide I no longer want to edit these details?

When I click the wizard step-change button, the validation runs as expected but if I decide, I no longer want to change the detail. The global error message stays at the top. Is there an event I can add to remove it?

As you can see, the message stays even when the New-Name grid is not visible when I remove it:

image
image1137×142 7.03 KB

image
image798×518 22.7 KB

12

@DryChips,

You can validate the form to remove the message when a user clicks the button to remove the section:

if ($('.test').is(":hidden")) {
    $('.test').show();
    fd.field('Field').required = true;
} else {
    $('.test').hide();
    fd.field('Field').required = false;
    //validate the form
    fd.isValid;
}
1 Like
13

Perfect, adding this to the button OnClick property has made this work! Great stuff.

Final thing is adding some validation to stop users from proceeding to the next wizard if they haven't selected anything.

I have created this code and it works but it lets users proceed to the review and submit wizard. I don't want it to let users proceed until they have selected an detail to change.

How can this be done?

Here is my code:

//This code will stop users from proceeding to the next wizard if they haven't selected an option
fd.container('Wizard').widget.$on('on-change', function(prevIndex, newIndex) {
    //This detects whether the user has moved to Wizard 2
    if(newIndex == 3) {
            this.error = "Please select a detail to change";
            alert("Select a detail to change");
    }
})
14

@DryChips,

You can add a field to the step that is hidden by default:
image

Add validation for this field:

fd.rendered(function () {
    fd.field('Field1').addValidator({
        name: 'MyCustomValidator',
        error: 'Error Message',
        validate: function(value) {
            if (!value) {
                return false;
    }
            return true;
        }
    });
});

And update the code in buttons:


    if ($('.test').is(":hidden")) {
    $('.test').show();
    fd.field('Field1').value = 'valid'
    fd.field('Text1').required = true;
    
} else {
    $('.test').hide();
    fd.field('Text1').required = false;
    fd.field('Field1').clear();
    //validate the form
    fd.isValid;
}
1 Like