> For the complete documentation index, see [llms.txt](https://documentation.efalia.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://documentation.efalia.com/documentations/efalia-process/vue-ensemble-api/javascript-process.md).

# JavaScript dans Process

Efalia Process permet d'utiliser JavaScript dans les formulaires pour créer des comportements dynamiques côté client. Cette section couvre les différents contextes d'utilisation de JavaScript et les bonnes pratiques associées.

***

## Modes d'Utilisation de JavaScript

Il existe trois façons d'utiliser JavaScript dans Efalia Process :

| Contexte                   | Outil                           | Usage                                                        |
| -------------------------- | ------------------------------- | ------------------------------------------------------------ |
| Comportement du formulaire | **Composant Script JS + WKYJS** | Masquer/afficher des champs, valider, réagir aux changements |
| Logique métier avancée     | **Script JS personnalisé**      | DOM, librairies tierces, logique complexe                    |
| Rendu côté serveur         | **STalk**                       | Valeurs calculées, sujets, colonnes de vue                   |

***

## Le Composant Script JS

### Présentation

Le **composant Script JS** est un composant spécial du Designer HTML. Il accepte du code JavaScript pur qui est injecté dans la page du formulaire lors de son rendu dans le navigateur.

Contrairement à d'autres composants qui s'affichent visuellement, le Script JS n'a **pas de rendu visible** — il exécute uniquement du code.

### Accès à la Bibliothèque WKYJS

Dans un composant Script JS, la bibliothèque WKYJS est disponible via l'objet `wky` :

```javascript
// Disponible sans import — injecté automatiquement par Process
wky.onLoad(function() {
    console.log("Formulaire chargé");
    console.log("Rôle:", wky.getWorkeyRole());
});
```

Pour la référence complète de WKYJS, consultez [Référence WKYJS](/documentations/efalia-process/vue-ensemble-api/reference-wkyjs.md).

***

## JavaScript Vanilla dans les Formulaires

### Accéder aux Éléments du DOM

Les champs Efalia Process sont rendus comme des éléments HTML standard. Vous pouvez les manipuler directement via le DOM :

```javascript
wky.onLoad(function() {
    // Trouver un élément par son sélecteur CSS
    var element = document.querySelector('[data-field="champ_nom"]');
    if (element) {
        element.style.backgroundColor = "#fff3cd";
    }
});
```

{% hint style="warning" %}
**Préférez WKYJS**

L'accès direct au DOM est fragile et peut être cassé par les mises à jour d'Efalia Process. Préférez toujours les méthodes WKYJS quand elles existent.
{% endhint %}

### Utiliser des Bibliothèques Externes

Il est possible de charger des bibliothèques JavaScript tierces dans un formulaire :

```javascript
wky.onLoad(function() {
    // Chargement dynamique d'une bibliothèque
    var script = document.createElement('script');
    script.src = 'https://cdn.example.com/lib.min.js';
    script.onload = function() {
        // Utiliser la bibliothèque après chargement
        initMaBibliotheque();
    };
    document.head.appendChild(script);
});
```

{% hint style="warning" %}
**Ressources internes recommandées**

Pour des raisons de sécurité et de disponibilité, hébergez les bibliothèques tierces sur votre infrastructure plutôt que sur des CDN externes. L'espace de publication Process (`$CONTEXT_PROCESS/publish/public/`) peut être utilisé pour exposer des fichiers statiques.
{% endhint %}

***

## Bonnes Pratiques

### Structure d'un Script JS

```javascript
// 1. Initialisation au chargement
wky.onLoad(function() {
    initialiserFormulaire();
});

// 2. Validation avant soumission
wky.onSubmit(function() {
    return validerFormulaire();
});

// 3. Réactions aux changements
wky.onChange("Type_Document", function(value) {
    adapterFormulaire(value);
});

// 4. Fonctions utilitaires
function initialiserFormulaire() {
    var role = wky.getWorkeyRole();
    if (role === "Lecteur") {
        wky.hideButtonInButtonBar("btn_valider");
    }
}

function validerFormulaire() {
    var erreurs = [];

    var montant = parseFloat(wky.getFieldValue("Montant"));
    if (isNaN(montant) || montant <= 0) {
        erreurs.push("Le montant doit être positif");
        wky.error("Montant", "Valeur invalide");
    }

    var email = wky.getFieldValue("Email_Contact");
    if (email && !wky.isEmailValid(email)) {
        erreurs.push("Email invalide");
        wky.error("Email_Contact", "Format invalide");
    }

    if (erreurs.length > 0) {
        wky.errorBox("Veuillez corriger les erreurs avant de soumettre");
        return false;
    }
    return true;
}

function adapterFormulaire(typeDocument) {
    var sections = {
        "Facture": ["section_facturation", "section_paiement"],
        "Commande": ["section_commande", "section_livraison"],
        "Devis": ["section_devis"]
    };

    // Masquer toutes les sections
    Object.values(sections).flat().forEach(function(s) {
        wky.hideSection(s);
    });

    // Afficher les sections du type sélectionné
    if (sections[typeDocument]) {
        sections[typeDocument].forEach(function(s) {
            wky.showSection(s);
        });
    }
}
```

### Éviter les Conflits

Si plusieurs composants Script JS sont présents dans un formulaire :

* Utilisez des **noms de fonction uniques** (évitez les noms génériques comme `init()`)
* Encapsulez votre code dans des **IIFEs** (Immediately Invoked Function Expressions) si nécessaire

```javascript
(function() {
    // Code isolé
    function monInit() {
        // ...
    }
    wky.onLoad(monInit);
})();
```

***

## Débogage

### Console du Navigateur

Utilisez `console.log()` pour déboguer. Les messages apparaissent dans la console développeur du navigateur (F12).

```javascript
wky.onLoad(function() {
    console.log("State:", wky.getWorkeyDocumentState());
    console.log("Role:", wky.getWorkeyRole());
    console.log("Montant:", wky.getFieldValue("Montant"));
});
```

### Erreurs Communes

| Symptôme                      | Cause probable               | Solution                             |
| ----------------------------- | ---------------------------- | ------------------------------------ |
| Script non exécuté            | Erreur de syntaxe JavaScript | Vérifier la console navigateur       |
| `wky is not defined`          | Chargement avant WKYJS       | Utiliser `wky.onLoad()`              |
| `getFieldValue` retourne null | Nom interne incorrect        | Vérifier le nom dans le Designer     |
| Comportement incohérent       | Conflits entre scripts JS    | Nommer les fonctions de façon unique |

***

Pour aller plus loin :

* [Référence WKYJS](/documentations/efalia-process/vue-ensemble-api/reference-wkyjs.md)
* [Référence STalk](/documentations/efalia-process/vue-ensemble-api/reference-stalk.md)
* [Designer HTML](/documentations/efalia-process/administration/administration-fonctionnelle/designer-html.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://documentation.efalia.com/documentations/efalia-process/vue-ensemble-api/javascript-process.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.