JavaScript scripting

This section will guide you step-by-step through running JavaScript scripts together with Plexus Connect application.

Before you start

Please note

• there is also the Python scripting feature available in Plexus Connect
• JavaScript scripting has limited usage compared to Python scripting
• there is no API package available - this implies that the API can not be used for accessing Plexus Connect data from other systems

Usage and examples

Connect frontend usage

For using JavaScript for scripting in Connect frontend, a subclass of ConnectScript needs to be created first. This lets you react on user input and modify frontend state. ConnectScript is a JavaScript script, which can be called by Connect frontend and can react on user actions like opening a view, clicking, querying, selection etc.

Example of a simple script:

class {
  async onLoad() {
    plexusAPI.response.showMessage('This is scripted view!');
    plexusAPI.response.setFormButtons(
      [
        {id:'test', text: 'test'},
        {id:'test2', text: 'test2'}
      ]
    );
  }
  onClick(id, serverSchemaId) {
    plexusAPI.response.showMessage('You\'ve just clicked...' + id);

    const fieldIds = ["id1", "id2" /*etc......*/];

      // plexusAPI response method, which triggers selection mode in Connect
    // and highlights clickable widgets and their fields for another click action
    // - fieldIds = ids of fields, which will be highlighted in widgets bound to them
    plexusAPI.response.setSelectableFieldsForScripting(fieldIds);
  }

  async onSelectionChange(selection) {
    const session = await plexusAPI.openViewSession(await plexusAPI.getViewByName("Wombat (conditional formatting)"));
    const selectedWeight = (await plexusAPI.currentSession.getData(['Mol Weight'], [selection[0]], undefined))[0][0];
    const wombatMW = session.getFieldByName('Mol Weight');
    await session.query([{ fieldId: wombatMW.fieldId, operator: '<', operands: [selectedWeight]}]);
    await session.sort([{fieldId: wombatMW.fieldId, ascending: false}]);
    const wombatData = await session.getData(['Structure', 'Mol Weight', 'EST.LOGKOW'], [0], 'mrv');
    if (wombatData && wombatData.length) {
      plexusAPI.response.showInPanel(
        plexusAPI.getContentBuilder()
          .addText('Closest WOMBAT structure')
          .addStructure(wombatData[0][0])
          .addText(`Mol Weight: ${wombatData[0][1]}`)
          .addText(`EST.LOGKOW: ${wombatData[0][2]}`)
      );
    } else {
      plexusAPI.response.showInPanel(
        plexusAPI.getContentBuilder()
          .addText(`No WOMBAT structure found for Mol Weight < ${selectedWeight}`)
      );
    }
    session.close();
  }

  /*
   * Method listening for clicks to widgets previously highlighted
   * by plexusAPI.response.setSelectableFieldsForScripting method
   * 
   *   payload = {
   *     data: {
   *       masterEntityId: "id of the root entity in the datatree",
   *       viewId: "view id"
   *       serverSchemaId: "id of schema",
   *       fieldInfo: {
   *           entityId: "entity id",
   *           fieldId: "field id",
   *       },
   *       selection: "selected record number",
   *     }
   *   }
   */
  async onWidgetClick(payload) {
    const fullurl = 'https://chemaxon.com';
    // plexusAPI response method triggers opening new browser tab by Connect to specified url
    plexusAPI.response.openNewWindow(fullurl);
  }
}

const animateText = (text) => {
  return `<?xml version="1.0" encoding="utf-8"?>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="200"  style="background: green">
    <text x="20" y="100" fill="purple" >${text}
      <animate attributeName="x" from="-120%" to="120%" dur="5s" repeatCount="indefinite" fill="freeze" />
    </text>
  </svg>`;
}

const svgToDataURL = svgStr => {
    const encoded = encodeURIComponent(svgStr)
        .replace(/'/g, '%27')
        .replace(/"/g, '%22');

    const header = 'data:image/svg+xml,';
    const dataUrl = header + encoded;

    return dataUrl;
}

For usage from Connect frontend, this script needs to be saved in

• for UNIX ~/.chemaxon/plexus-suite/scripts-data/{schemaId}/
• for Windows ~/chemaxon/plexus-suite/scripts-data/{schemaId}/

and mapped to the view using ViewId in the scripts.conf file in the same directory.

Directories in the scripting folder are automatically created during startup of the Connect server and named according to the deployed schemas. Each deployed schema belongs to a folder with the same name {Schema_ID}. Scripts are classified per schema and identified by Schema_ID.

Content of the script.conf file:

view id;javascriptfile.js;pythonfile.py 213A0E201AB2EB5DA54552018904C869;hello_world.js;;

The ViewId can be obtained from the address bar. When a view is opened in a browser, the Connect URL contains the ViewID as it is shown in the following URL example: http://your_server.com/grid/6C6F63616C6462_213A0E201AB2EB5DA54552018904C869/1