Wizard step conditionnal formatting

Forms
1

Hi,

Our customer have some forms with several step in it(wizard).
let say 1 forms has 7 steps.
its possible that step 4 is completed before step 3.

each step have its status field, let say for example
fd.field('Conflit_Etape1')
fd.field('Conflit_Etape2')
fd.field('Conflit_Etape3')
fd.field('Conflit_Etape4')
fd.field('Conflit_Etape5')
fd.field('Conflit_Etape6')
fd.field('Conflit_Etape7')

i there a way to change the text, change the color or the shape of the wizrd step that is completed without affecting the other?

i would like to implement a if logic in javascript like(not actual javascript in example):

if fd.field('Conflit_Etape2') ='completed' then the step number 2 in the wizrd get its text, color or shape updated.
if fd.field('Conflit_Etape4') ='completed' then the step number 4 in the wizrd get its text, color or shape updated.

is this something possible

2

Dear @Maxime,
Sure, you can find how to set step titles or icons here - Wizard — Plumsail SharePoint Forms Documentation

Run these on field change and it should work - Work with SharePoint form fields in JavaScript — Plumsail SharePoint Forms Documentation

Let me know how it goes!

3

Thanks for the feedback and sorry for the late reply @Nikita_Kurguzov , i was put on something else.

Ive tried several thing, one of them is this:

fd.spRendered(() => {

    function changeiconeetat(stepIndex) {
        if (fd.field('Statut_etape_1').value == 'Terminé') {
            // Changer la couleur de l'image/logo de l'Ă©tape
            fd.container('Wizard1').icons[stepIndex] = 'BoxCheckmarkSolid';
            fd.container('Wizard1').step[stepIndex].color = '#00FF00'; // Exemple de couleur verte
        }
    }

    // Appeler changeiconeetat lorsque la valeur de Statut_etape_1 change
    fd.field('Statut_etape_1').$on('change', function() {
        changeiconeetat(0); // Utiliser l'index de l'étape appropriée
    });

    // Appeler changeiconeetat lors du chargement du formulaire
    changeiconeetat(0); // Utiliser l'index de l'étape appropriée
});

This is for step one, step 2-7 would have something similar. each can can be completed before a previous one has been completed.

im a little lost here as Javascript is not really my area of expertise.

Thanks

4

Hi @Maxime,

Unfortunately, changing the color of a select step in a Wizard control is not supported; you can only change the color of all steps at the same time:

fd.container('Wizard1').step[stepIndex].color = '#00FF00'; // this will produce an error

fd.container('Container1').step = {color : '#00FF00'}; // use this instead to change the color of all steps at the same time

Other than that, the code seems solid! Please share a screenshot of the browser's console (F12) if it doesn't work as expected.

5

@IliaLazarevskii

Thanks for the reply,
color aside, i was under the impression that it was possible to change the icon of a completed step, let say with a checkmark icon.

is that possible?

6

Hi @Maxime,

As it turns out, to change the icons you need to assign the array at once. Please try this approach:

fd.rendered(function () {
    changeIcon(fd.container('Wizard1'), 0, 'CheckMark');
    changeIcon(fd.container('Wizard1'), 2, 'Cancel');
});

function changeIcon(wizard, step, newIcon) {
    const icons = wizard.icons;
    icons[step] = newIcon;
    wizard.icons = icons;
}

This code produces the following result:
image

To implement this approach, please add the changeIcon() function to your code and use changeIcon(fd.container('Wizard1'), stepIndex, 'BoxCheckmarkSolid'); instead of fd.container('Wizard1').icons[stepIndex] = 'BoxCheckmarkSolid';.

7

Thanks, that was helpful.

I managed to get something working exactly like i wanted and its expandable to form who are 7 step long too. The logic check if the dropdown is in "terminé" to change to Checkmark, if not it revert back to no special icon.

fd.rendered(function () {
    // Définir les écouteurs d'événements pour les changements de statut
    fd.field('Statut_etape_1').$on('change', function(value) {
        if (value == 'Terminé') {
            changeIcon(fd.container('Wizard1'), 0, 'CheckMark');
        } else {
            changeIcon(fd.container('Wizard1'), 0, '');
        }
    });

    fd.field('Statut_etape_2').$on('change', function(value) {
        if (value == 'Terminé') {
            changeIcon(fd.container('Wizard1'), 1, 'CheckMark');
        } else {
            changeIcon(fd.container('Wizard1'), 1, '');
        }
    });
});

// Fonction pour changer les icĂ´nes
function changeIcon(wizard, step, newIcon) {
    const icons = wizard.icons;
    icons[step] = newIcon;
    wizard.icons = icons;
}

That was a mix of your input, me and Copilot to help me with my javascript skill.
Posted the code because i think it could be helpful to other

1 Like