Modal

The module allows the creation of a new modal dialog. The module works only with the Context menu that opens it.

Modal Module Read more on the Crowdin Developer Portal.

Sample

index.js

const crowdinModule = require('@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: __dirname,
  imagePath: __dirname + '/' + 'logo.png',
  modal: {
    url: '/modal'
  },
  contextMenu: {
    location: 'source_file',
    type: 'modal',
    module: 'modal'
  }
}

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

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

app.listen(3000, () =>  console.log('Crowdin app started'));

You can use the React JSON Schema forms to define the UI for your modal in a declarative way:

index.js

const configuration = {
  baseUrl: 'https://123.ngrok.io',
  clientId: 'clientId',
  clientSecret: 'clientSecret',
  name: 'Sample App',
  identifier: 'sample-app',
  description: 'Sample App description',
  dbFolder: __dirname,
  imagePath: __dirname + '/' + 'logo.png',
  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!"
      }
    }
  }
};

Configuration

Parameter	Description
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 for the form that will be displayed in the modal.
formUiSchema	JSON schema for the UI of the form that will be displayed in the modal.