# Form Code

## 👨‍💻️ What is form code ?

The form code allows you to run and execute some custom javascript code while the survey is starting and running.

Your custom code must extends the **NGSFormCode** object to be executed.

```javascript
/*
 Sample that shows how to post respondent 
 answers to a third party REST API.

 The Form code can also be used to insert third party 
 API codes to your form page using the onInit or onLoaded events
*/
class CustomFormCode extends NGSFormCode { 
  /* Form has been loaded */
  onInit() {}

  /* A security item requires authentication will be called 
     when a survey requires authentication from an security item  
  */
  onAuthenticate(securityItem) {}

  /* A security item requires authentication will be called 
     a security item has been succesfully authenticated. 
     Returning a string from this method will block the 
     access the survey with the message defined by the 
     returning string.  
  */
  onAuthenticated(securityItem, securityItemAuthorization) {}

  /* Form has been authorized by all security items and loaded  
    with questions of its first visible page */
  onLoaded() {}

  /* Trigger when a new page is being loaded a null value for the page 
    indicates that the end thank you page is being loaded 
  */
  onPageLoad(page) {}

  /* Trigger once the respondent session answers have been saved on the server.
  action defines the action that triggered the save progress it can be any of following values
  None = 0, Button = 1, PageChange = 2, QuestionChange = 3, Email = 4, Auto = 5 
  */
  onSaveProgress(ngsRespondent, action) {}

  /* Trigger once the respondent answers have been saved on the server. */
  onSubmit(ngsRespondent) {
    // Respondent details
    console.log(ngsRespondent.respondent);

    // Respondent answers
    console.log(ngsRespondent.answers);

    // security items data attributes values
    console.log(ngsRespondent.dataAttributes);
    
    this.formContext.httpClient.post('http://www.yourrestsite.com/yourapi/saveanswers', 
        ngsRespondent.answers, {}).subscribe();
  }

  /* Trigger once the respondent answers have been updated on the server. */
  onUpdate(ngsRespondent) {console.log('update', ngsRespondent);}
}
```

The **NGSForm** base class provide following properties that you can reuse in your derived class. 

```javascript
class NGSFormCode {
    // Current survey
    survey;
    // Form context helper class
    formContext;
    // Current respondent answers
    respondentAnswers;
    // Current respondent
    respondent;
    // Current running language code
    language;
    // Current data attribute values from security items
    dataAttributesValues;
 }
```

**FormContext** provides following properties that you can use from your NGSFormCode derived class through the formContext property.

```javascript
export class FormContext {
    // Current respondent answers
    private respondentAnswers$: Observable<RespondentAnswer[]>,
    // Current security items data attributes
    private dataAttributesValues$: Observable<RespondentAnswer[]>,
    // Current respondent language
    private language$: Observable<Language>,
    // Angular HTTP client
    private httpClient: HttpClient,
}
```

**Respondent** is the respondent properties

```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** is the respondent properties

```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** ikeeps track of all the properties returned by an authenticated security item.

```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/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.