Seatable plugin development process

In this guide, we will show step by step how to write a SeaTable plugin. This extension can display basic table information, including

• Number of sub-tables
• Total number of records
• Number of collaborators

The plug-in development example code is very simple, you can click this GitHub link

The plug-in development process is as follows.

Basic process of plugin development

1. Install plugin development tool

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 plugin configuration

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

"name": '', // English name of plugin, can only contain letters, numbers, underscores, and underscores
"version": '', // plugin version number
"display_name": '', // name of the plugin display
"description": '', // description of plugin function

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

Optional operation

• Add a custom icon.png as the icon of the plugin in the plugin-config folder.
• Add custom card_image.png as the background image of the plugin icon in the plugin-config folder (not provided, the default background is displayed. card_image.png requires 560x240 pixels)

4. Modify plugin registration function in entry.js file

  Update window.app.registerPluginItemCallback ('test', TaskList.execute);
  ⬇️
  To: window.app.registerPluginItemCallback (name, TaskList.execute); where the value of name is the value of "name" 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: "**", // apitable of dtable to add plugin
  server: "**", // The deployment URL of the dtable to which the plugin needs to be added
  workspaceID: "**", // The id value of the workspace where the dtable of the plugin needs to be added
  dtableName: "**", // The name of the dtable to add the plugin to
  lang: "**" // plugin default language type, en or zh-cn
};

6. Start development

Run the local development environment

npm start

Open localhost: 3000 on the browser. You can see that the plug-in dialog box has been opened. The dialog box displays the result of interface functions provided by the dtable-sdk component library by default

1. (getTables) Get the subtable information of the dtable table
2. (getRelatedUsers) Get detailed information of dtable collaborators

The main code and purpose

/src/index.js Entry file for local development plugins

/src/entry.js According to the entry file when running as a plugin after SeaTable

/src/app.js plugin main code

7. Display basic table information

Write a TableInfo component. This component needs to be passed in 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 sub-tables

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

Get the total 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 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 subtables, the total number of records, and the number of collaborators

render () {
  const {tables, collaborators} = this.props;
  return (
    <div>
      <div> {'Number of child tables:') {this.getTablesNumber (tables)} </ div> <br/>
      <div> {'Total 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>
  );
}

Call the TableInfo component in the parent component app.js, and modify the render function in app.js, passing 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 css/table-info.css file to modify the style of the plugin.

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

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

8. Package upload plugin

1. Run npm run build-plugin to package the plugin. The package path after packaging is /plugin/task.zip
2. Upload the plugin task.zip to dtable