# Code du Formulaire

## 👨‍💻️ Qu’est-ce que le form code ?

Le form code vous permet d’exécuter du code JavaScript personnalisé pendant que le sondage démarre et s’exécute.

Votre code personnalisé doit étendre l’objet **NGSFormCode** pour être exécuté.

```javascript
/*
 Exemple montrant comment envoyer les réponses du répondant 
 à une API REST tierce.

 Le Form code peut également être utilisé pour insérer des 
 codes API tiers sur votre page de formulaire à l’aide des événements onInit ou onLoaded
*/
class CustomFormCode extends NGSFormCode { 
  /* Le formulaire a été chargé */
  onInit() {}

  /* Un élément de sécurité nécessitant une authentification sera appelé 
     lorsqu’un sondage requiert une authentification depuis un élément de sécurité  
  */
  onAuthenticate(securityItem) {}

  /* Un élément de sécurité nécessitant une authentification sera appelé 
     un élément de sécurité a été authentifié avec succès. 
     Le fait de renvoyer une chaîne depuis cette méthode bloquera 
     l’accès au sondage avec le message défini par la 
     chaîne renvoyée.  
  */
  onAuthenticated(securityItem, securityItemAuthorization) {}

  /* Le formulaire a été autorisé par tous les éléments de sécurité et chargé  
    avec les questions de sa première page visible */
  onLoaded() {}

  /* Déclenché lorsqu’une nouvelle page est en cours de chargement ; une valeur nulle pour la page 
    indique que la page de fin de remerciement est en cours de chargement 
  */
  onPageLoad(page) {}

  /* Déclenché une fois que les réponses de la session du répondant ont été enregistrées sur le serveur.
  action définit l’action qui a déclenché l’enregistrement de la progression ; elle peut prendre l’une des valeurs suivantes
  None = 0, Button = 1, PageChange = 2, QuestionChange = 3, Email = 4, Auto = 5 
  */
  onSaveProgress(ngsRespondent, action) {}

  /* Déclenché une fois que les réponses du répondant ont été enregistrées sur le serveur. */
  onSubmit(ngsRespondent) {
    // Détails du répondant
    console.log(ngsRespondent.respondent);

    // Réponses du répondant
    console.log(ngsRespondent.answers);

    // valeurs des attributs de données des éléments de sécurité
    console.log(ngsRespondent.dataAttributes);
    
    this.formContext.httpClient.post('http://www.yourrestsite.com/yourapi/saveanswers', 
        ngsRespondent.answers, {}).subscribe();
  }

  /* Déclenché une fois que les réponses du répondant ont été mises à jour sur le serveur. */
  onUpdate(ngsRespondent) {console.log('update', ngsRespondent); }
}
```

La classe de base **NGSForm** fournit les propriétés suivantes que vous pouvez réutiliser dans votre classe dérivée. 

```javascript
class NGSFormCode {
    // Sondage actuel
    survey;
    // Classe d’assistance du contexte du formulaire
    formContext;
    // Réponses actuelles du répondant
    respondentAnswers;
    // Répondant actuel
    respondent;
    // Code de langue en cours d’exécution
    language;
    // Valeurs actuelles des attributs de données provenant des éléments de sécurité
    dataAttributesValues;
 }
```

**FormContext** fournit les propriétés suivantes que vous pouvez utiliser depuis votre classe dérivée de NGSFormCode via la propriété formContext.

```javascript
export class FormContext {
    // Réponses actuelles du répondant
    private respondentAnswers$: Observable<RespondentAnswer[]>,
    // Attributs de données actuels des éléments de sécurité
    private dataAttributesValues$: Observable<RespondentAnswer[]>,
    // Langue actuelle du répondant
    private language$: Observable<Language>,
    // Client HTTP Angular
    private httpClient: HttpClient,
}
```

**Respondent** correspond aux propriétés du répondant

```javascript
export interface Respondent {
  id: string;
  surveyId?: string;
  panelistId?: string;
  contextUsername?: string;
  resumeUId?: string;
  resumePageId?: string;
  resumeQuestionId?: string;
  startDate: Date;
  voteDate?: Date;
  archiveDate?: Date;
  iPSource?: string;
  changeUID?: string;
  progressSaveDate?: Date;
  languageCode: string;
  timeToEnd?: number;
  validated: boolean;
  userAgent?: string;
  platform?: string;
  platformOS?: number;
  mobileOS?: boolean;
  longitude?: number;
  latitude?: number;
}
```

**Respondent** correspond aux propriétés du répondant

```javascript
export interface Respondent {
  id: string;
  surveyId?: string;
  panelistId?: string;
  contextUsername?: string;
  resumeUId?: string;
  resumePageId?: string;
  resumeQuestionId?: string;
  startDate: Date;
  voteDate?: Date;
  archiveDate?: Date;
  iPSource?: string;
  changeUID?: string;
  progressSaveDate?: Date;
  languageCode: string;
  timeToEnd?: number;
  validated: boolean;
  userAgent?: string;
  platform?: string;
  platformOS?: number;
  mobileOS?: boolean;
  longitude?: number;
  latitude?: number;
}
```

&#x20;**SecurityItemAuthorization** suit la trace de toutes les propriétés renvoyées par un élément de sécurité authentifié.

```javascript
export interface SecurityItemAuthorization {
  securityItemId?: string;
  authorizationToken?: string;
  sessionCode?: string;
  sessionRespondent?: NGSRespondent;
  sessionPanelist: NGSPanelist;
  dataAttributesValues?: SecurityItemDataAttributeValue[];
}
```


---

# Agent Instructions: 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:

```
GET https://docs.ngsurvey.com/fr/form-management/form-designer/form-settings/form-code.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.