Js code forms don't work

Forms SharePoint 2019
1

Hello New in JS & Plumsail. (shp 2019 & plumsail forms)
My code don't work and i don't kwow why.
the function : "hideOrShowDateFin" alone is working but when i try to code other function i've got error

can you help me please . thanks

My function

fd.spRendered(function() {
// Fonction pour gérer la visibilité des onglets
function handleTabVisibility() {
var demandeType = fd.field('Type_x0020_de_x0020_demande').value;

    if (demandeType === 'Création') {
        fd.container('Tab').tabs[0].visible = true;  // Onglet "Votre demande"
        fd.container('Tab').tabs[1].visible = false; // Onglet "Modification"
        fd.container('Tab').tabs[2].visible = false; // Onglet "Validation"
        fd.container('Tab').activeTab = 0;           // Activer "Votre demande"
    } else if (demandeType === 'Modification') {
        fd.container('Tab').tabs[0].visible = false; // Onglet "Votre demande"
        fd.container('Tab').tabs[1].visible = true;  // Onglet "Modification"
        fd.container('Tab').tabs[2].visible = false; // Onglet "Validation"
        fd.container('Tab').activeTab = 1;           // Activer "Modification"
    }
}

// Gérer la visibilité du champ "Date de Sortie" en fonction du champ "Type de contrat"
function hideOrShowDateFin() {
    var contratType = fd.field("Type_x0020_de_x0020_contrat").value;
    if (contratType === "CDI") {
        $(fd.field('Date_x0020_de_x0020_Sortie_x0020').$parent.$el).hide();
    } else {
        $(fd.field('Date_x0020_de_x0020_Sortie_x0020').$parent.$el).show();
    }
}

// Appeler les fonctions lors du changement de valeur des champs respectifs
fd.field('Type_x0020_de_x0020_demande').$on('change', handleTabVisibility);
fd.field('Type_x0020_de_x0020_contrat').$on('change', hideOrShowDateFin);

// Appeler les fonctions au chargement du formulaire
handleTabVisibility();
hideOrShowDateFin();

// Style des onglets
function styleTabs() {
    fd.container('Tab').tabs.forEach(function(tab) {
        if (tab.visible) {
            tab.$el.style.backgroundColor = 'green';
            tab.$el.style.color = 'white';
        } else {
            tab.$el.style.backgroundColor = 'blue';
            tab.$el.style.color = 'white';
        }
    });
}

// Appliquer le style au chargement du formulaire et lors du changement de valeur des champs
fd.spRendered(styleTabs);
fd.field('Type_x0020_de_x0020_demande').$on('change', styleTabs);
fd.field('Type_x0020_de_x0020_contrat').$on('change', styleTabs);

});

2

Hi @Francois,

It would be helpful to see the error. Could you share some screenshots of the browser's console (F12)? There should be red error messages.

3

Hi Ilia Lazarevskii
Thanks for your help
The sceen shot of the console. Il seems the code don't work for some part but works for the function "hideOrShowDateFin" but not hide the tabs

image

4

Hi @Francois,

The errors don't seem to be relevant. Try using this method to hide the tabs: Tabs — Plumsail SharePoint Forms Documentation

5

Ok thank you for responding.

1 Like
6

Hello @Francois ,

  1. What is the field data type of "Type_x0020_de_x0020_demande"?
    • It may return a wrong data, try:
var demandeType = fd.field("Type_x0020_de_x0020_demande").value;
console.log(demadeType);
  1. What is this code at the end of it?
    • I think this line of code does nothing - the magic happens on line 52 and 53.
fd.spRendered(styleTabs);
// (Line 51 in VS code editor)

Enjoy Plumsail Forms :slight_smile:

Stepan

1 Like
7

Hello, thanks . i will try that. have a good day

8

@Francois
This revised code ensures that the form elements are manipulated correctly based on the input values, the functions are structured for readability, and the event handlers are attached properly. This should resolve any errors you were encountering and ensure that the functions work seamlessly together.

fd.spRendered(function() {
    // Function to handle tab visibility
    function handleTabVisibility() {
        var demandeType = fd.field('Type_x0020_de_x0020_demande').value;

        if (demandeType === 'Création') {
            fd.container('Tab').tabs[0].visible = true;  // Tab "Votre demande"
            fd.container('Tab').tabs[1].visible = false; // Tab "Modification"
            fd.container('Tab').tabs[2].visible = false; // Tab "Validation"
            fd.container('Tab').activeTab = 0;           // Activate "Votre demande"
        } else if (demandeType === 'Modification') {
            fd.container('Tab').tabs[0].visible = false; // Tab "Votre demande"
            fd.container('Tab').tabs[1].visible = true;  // Tab "Modification"
            fd.container('Tab').tabs[2].visible = false; // Tab "Validation"
            fd.container('Tab').activeTab = 1;           // Activate "Modification"
        }
    }

    // Function to handle visibility of "Date de Sortie" based on "Type de contrat"
    function hideOrShowDateFin() {
        var contratType = fd.field("Type_x0020_de_x0020_contrat").value;
        if (contratType === "CDI") {
            $(fd.field('Date_x0020_de_x0020_Sortie_x0020').$parent.$el).hide();
        } else {
            $(fd.field('Date_x0020_de_x0020_Sortie_x0020').$parent.$el).show();
        }
    }

    // Function to style tabs
    function styleTabs() {
        fd.container('Tab').tabs.forEach(function(tab) {
            if (tab.visible) {
                tab.$el.style.backgroundColor = 'green';
                tab.$el.style.color = 'white';
            } else {
                tab.$el.style.backgroundColor = 'blue';
                tab.$el.style.color = 'white';
            }
        });
    }

    // Attach event handlers to respective fields
    fd.field('Type_x0020_de_x0020_demande').$on('change', function() {
        handleTabVisibility();
        styleTabs();
    });

    fd.field('Type_x0020_de_x0020_contrat').$on('change', function() {
        hideOrShowDateFin();
        styleTabs();
    });

    // Initial function calls on form load
    handleTabVisibility();
    hideOrShowDateFin();
    styleTabs();
});
1 Like