# 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[];
}
```