Context Menu

The module allows creating the item in the context menu where possible. A context menu item can open a specified app module with additional context related to the selected record or custom URL.

Context Menu Module Read more on the Crowdin Developer Portal.

Sample

Redirect to Integration App

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',
  contextMenu: {
    location: 'source_file',
    type: 'redirect',
    module: 'project-integrations'
  },
  projectIntegration: {
      // integration app logic
  }
}

Open in New Tab

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',
  contextMenu: {
    location: 'source_file',
    type: 'new_tab',
    uiPath: __dirname + '/' + 'public',
    signaturePatterns: {
      fileName: '.*.json'
    },
    name: 'Check file structure'
  }
};

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

app.get('/result', (req, res) => {
  res.json({
    organizationId: req.query.organization_id,
    projectId: req.query.project_id,
    fileId: req.query.file_id
  });
});

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

Please note that the App defines a new endpoint /result by utilizing the Express instance provided by the Crowdin module. The endpoint is used to receive the context data from the Crowdin app.

Open Modal

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!"
      }
    }
  },
  contextMenu: {
    location: 'source_file',
    type: 'modal',
    module: 'modal'
  }
};

Read more about Modal and React JSON Schema forms.

Configuration

Parameter	Description	Allowed values
location	The location in UI where the context menu can be added.	tm, glossary, language, screenshot, source_file, translated_file
type	The type of action this module will perform.	modal, new_tab, redirect
module	UI Modules type.	modal, redirect
uiPath	Folder where UI of the module is located (js, html, css files).	-
name	The label of the context menu item displayed to the user.	-
signaturePatterns	Contains fileName and/or nodeType used to detect file	-

Detecting File Type

index.js

    signaturePatterns: {
      fileName: '.*.json',
      nodeType: [0, 1]
    },

Parameter	Description	Allowed values
fileName	Contains fileName regular expressions used to detect file type.	Regex
nodeType	Array of node types	0 - folder, 1 - file, 2 - branch