# Modal

The module allows the creation of a new modal dialog. The module works only with the [Context menu](/app-project-module/tools/context-menu/) that opens it.

[Modal Module](https://support.crowdin.com/developer/crowdin-apps-module-modal/)

## Sample

```js ins={14-24} title="index.js"
    import crowdinModule from '@crowdin/app-project-module';

    const app = crowdinModule.express();

    const configuration = {
      baseUrl: 'https://123.ngrok.io',
      clientId: 'clientId',
      clientSecret: 'clientSecret',
      name: 'Sample App',
      identifier: 'sample-app',
      description: 'Sample App description',
      dbFolder: import.meta.dirname,
      imagePath: import.meta.dirname + '/logo.png',
      modal: [{
        key: 'sample-modal',
        url: '/modal'
      }],
      contextMenu: [{
        key: 'modal-context',
        location: 'source_file',
        type: 'modal',
        module: 'modal',
        moduleKey: 'sample-modal'
      }]
    }

    const crowdinApp = crowdinModule.addCrowdinEndpoints(app, configuration);

    app.get('/modal', (req, res) => res.sendFile(import.meta.dirname + '/modal.html'))

    app.listen(3000, () =>  console.log('Crowdin app started'));
    ```
  ```ts ins={16-26} title="index.ts"
    import crowdinModule from '@crowdin/app-project-module';
    import type { ClientConfig } from '@crowdin/app-project-module';
    import { ContextOptionsLocations, ContextOptionsTypes } from '@crowdin/app-project-module/modules/context-menu';

    const app = crowdinModule.express();

    const configuration: ClientConfig = {
      baseUrl: 'https://123.ngrok.io',
      clientId: 'clientId',
      clientSecret: 'clientSecret',
      name: 'Sample App',
      identifier: 'sample-app',
      description: 'Sample App description',
      dbFolder: import.meta.dirname,
      imagePath: import.meta.dirname + '/logo.png',
      modal: [{
        key: 'sample-modal',
        url: '/modal'
      }],
      contextMenu: [{
        key: 'modal-context',
        location: ContextOptionsLocations.SOURCE_FILE,
        type: ContextOptionsTypes.MODAL,
        module: 'modal',
        moduleKey: 'sample-modal'
      }]
    }

    const crowdinApp = crowdinModule.addCrowdinEndpoints(app, configuration);

    app.get('/modal', (req, res) => res.sendFile(import.meta.dirname + '/modal.html'))

    app.listen(3000, () =>  console.log('Crowdin app started'));
    ```
  You can use the [React JSON Schema forms](/app-project-module/user-interface/) to define the UI for your modal in a declarative way:

```js "formSchema" "formUiSchema" title="index.js"
    import crowdinModule from '@crowdin/app-project-module';

    const configuration = {
      baseUrl: 'https://123.ngrok.io',
      clientId: 'clientId',
      clientSecret: 'clientSecret',
      name: 'Sample App',
      identifier: 'sample-app',
      description: 'Sample App description',
      dbFolder: import.meta.dirname,
      imagePath: import.meta.dirname + '/logo.png',
      modal: [{
        key: 'registration-modal',
        formSchema: {
          "title": "A registration form",
          "description": "A simple form example.",
          "type": "object",
          "required": [
            "firstName",
            "lastName"
          ],
          "properties": {
            "firstName": {
              "type": "string",
              "title": "First name",
              "default": "Chuck"
            },
            "lastName": {
              "type": "string",
              "title": "Last name"
            }
          }
        },
        formUiSchema: {
          "ui:submitButtonOptions": {
            "submitText": "Confirm Details"
          },
          "lastName": {
            "ui:help": "Hint: Choose cool lastname!"
          }
        }
      }]
    };

    crowdinModule.createApp(configuration);
    ```
  ```ts "formSchema" "formUiSchema" title="index.ts"
    import crowdinModule from '@crowdin/app-project-module';
    import type { ClientConfig } from '@crowdin/app-project-module';

    const configuration: ClientConfig = {
      baseUrl: 'https://123.ngrok.io',
      clientId: 'clientId',
      clientSecret: 'clientSecret',
      name: 'Sample App',
      identifier: 'sample-app',
      description: 'Sample App description',
      dbFolder: import.meta.dirname,
      imagePath: import.meta.dirname + '/logo.png',
      modal: [{
        key: 'registration-modal',
        formSchema: {
          "title": "A registration form",
          "description": "A simple form example.",
          "type": "object",
          "required": [
            "firstName",
            "lastName"
          ],
          "properties": {
            "firstName": {
              "type": "string",
              "title": "First name",
              "default": "Chuck"
            },
            "lastName": {
              "type": "string",
              "title": "Last name"
            }
          }
        },
        formUiSchema: {
          "ui:submitButtonOptions": {
            "submitText": "Confirm Details"
          },
          "lastName": {
            "ui:help": "Hint: Choose cool lastname!"
          }
        }
      }]
    };

    crowdinModule.createApp(configuration);
    ```
  ### Multiple Modals

You can define multiple modal dialogs by providing an array:

```js title="index.js"
const configuration = {
  // ... other configuration
  modal: [
    {
      key: 'first-modal',
      url: '/modal-1',
      name: 'First Modal'
    },
    {
      key: 'second-modal',
      formSchema: {
        // ... schema definition
      },
      name: 'Second Modal'
    }
  ],
  contextMenu: [
    {
      key: 'first-context',
      location: 'source_file',
      type: 'modal',
      module: 'modal',
      moduleKey: 'first-modal'
    },
    {
      key: 'second-context',
      location: 'translated_file',
      type: 'modal',
      module: 'modal',
      moduleKey: 'second-modal'
    }
  ]
};
```

## Configuration

| Parameter<div class="w-32"/> | Description                                                                                                    |
|------------------------------|----------------------------------------------------------------------------------------------------------------|
| `key`                        | Unique identifier for the modal.                                                                               |
| `name`                       | Display name for the modal (optional, defaults to app name).                                                   |
| `url`                        | The relative URL to the content page of the module that will be integrated into the UI.                        |
| `uiPath`                     | Folder where UI of the module is located (`js`, `html`, `css` files).                                          |
| `formSchema`                 | [JSON schema](/app-project-module/user-interface/) for the form that will be displayed in the modal.           |
| `formUiSchema`               | [JSON schema](/app-project-module/user-interface/) for the UI of the form that will be displayed in the modal. |