SeaTable plugin development process¶

In this guide, we will demonstrate step by step how to write a plugin to SeaTable. This plugin can display the basic information of the base, including

Number of tables
Number of records
Number of collaborators

The code of the plugin development example is very simple. You can click this github link to get the source code.

The plugin development process is as follows.

The basic process of plugin development¶

1. Install development tool¶

Using npm:

$ npm install -g create-dtable-plugin

2. Create plugin¶

$ create-dtable-plugin init seatable-plugin-table-info

Install dependencies

$ cd seatable-plugin-table-info
$ npm install

3. Modify the plugin configuration¶

Modify the info.json configuration file in the plugin-config folder.

"name": '',                   // The name can only contain letters, numbers and underscores
"version": '',                // Plugin version number
"display_name": '',           // The name displayed by the plugin
"description": '',            // Description of plugin

There is no need to add other configuration parameters, other parameters are automatically generated by the packaging tool.

Optional operation

Add a custom icon.png to the plugin-config folder as the icon of the plugin (it may not be provided, the default icon is used. The icon.png requires 128x128 pixels)
Add a custom card_image.png to the plugin-config folder as the background image of the plugin icon (it may not be provided, the default background is displayed. The card_image.png requires 560x240 pixels)

4. Modify the plugin registration function in the entry.js file¶

Modify

window.app.registerPluginItemCallback('test', TaskList.execute);

to

window.app.registerPluginItemCallback(name, TaskList.execute);

The name value here is the "name" value in plugin-config/info.json.

5. Add plugin development configuration file¶

There is a file setting.local.dist.js in the project src folder, copy it and name it setting.local.js

The content of the file is as follows, and you can modify it according to the comments

const config = {
  APIToken: "**",               // The apiToken of the dtable
  server: "**",                 // The deployment URL of the dtable
  workspaceID: "**",            // The workspaceID of the dtable
  dtableName: "**",             // The name of the dtable to which the plugin
  lang: "**"                    // Plugin default language type, 'en' or 'zh-cn'
};

6. Start development¶

Run local development environment

$ npm start

Open localhost:3000 on the browser, you can see that the plugin dialog has been opened, and the interface function provided by the dtable-sdk library is displayed by default in the dialog 1. getTables: obtained table information of the dtable base 2. getRelatedUsers: get detailed information of dtable collaborators

Main code and purpose

/src/index.js: entry file for local development plugin
/src/entry.js: follow the entry file when SeaTable is run as a plugin
/src/app.js: the main code of the plugin

7. Display basic information of the table¶

Write a TableInfo component, this component needs to pass in two props, tables and collaborators

class TableInfo extends React.Component {
}

const propTypes = {
  tables: PropTypes.array.isRequired,
  collaborators: PropTypes.array.isRequired,
};

TableInfo.propTypes = propTypes;

export default TableInfo;

Get the number of tables

getTablesNumber = (tables) => {
  return (tables && Array.isArray(tables)) ? tables.length : 0;
}

Get the number of records

getRecords = (tables) => {
  let recordsNumber = 0;
  if (!tables) return recordsNumber;
  for (let i = 0; i < tables.length; i++) {
    const table = tables[i];
    const rows = table.rows;
    if (rows && Array.isArray(rows)) {
      recordsNumber += rows.length;
    }
  }
  return recordsNumber;
}

Get the number of collaborators

renderCollaborators = (collaborators) => {
  if (!collaborators || !Array.isArray(collaborators)) {
    return null;
  }
  return collaborators.map((collaborator, index) => {
    return (
      <div key={index} className="collaborator">
        <span className="collaborator-avatar-container">
          <img className="collaborator-avatar" alt='' src={collaborator.avatar_url}/>
        </span>
        <span className="collaborator-name">{collaborator.name}</span>
      </div>
    );
  });
}

Interface rendering: the number of tables, the number of records and the number of collaborators

render() {
  const { tables, collaborators } = this.props;
  return (
    <div>
      <div>{'Number of tables: '}{this.getTablesNumber(tables)}</div><br/>
      <div>{'Total number of records: '}{this.getRecords(tables)}</div><br/>
      <div>{'Number of collaborators: '}{collaborators ? collaborators.length : 0}</div><br/>
      <div className="plugin-collaborators">{this.renderCollaborators(collaborators)}</div>
    </div>
  );
}

In the parent component app.js, use the TableInfo component , modify the render function in app.js, and pass in tables and collaborators.

import TableInfo from './table-info';

class App extends React.Component{
  let tables = this.dtable.getTables();
  let collaborators = this.dtable.getRelatedUsers();
  render() {
    return (
      <Modal isOpen={showDialog} toggle={this.onPluginToggle} contentClassName="dtable-plugin plugin-container" size='lg'>
        <ModalHeader className="test-plugin-header" toggle={this.onPluginToggle}>{'Plugin'}</ModalHeader>
        <ModalBody className="test-plugin-content">
          <TableInfo tables={tables} collaborators={collaborators}/>
        </ModalBody>
      </Modal>
    );
  }
}

Add the css/table-info.css file and modify the style of the plugin.

Run npm start again, you can see the following information on the browser localhost: 3000.

Number of tables: X
Total number of records: XXX
Number of collaborators: X

8. Package upload plugin¶

Execute npm run build-plugin to package the plugin, and the path of the packaged plugin is /plugin/task.zip
Upload the plugin task.zip to dtable