Skip to main content

Introduction

The widget is an extension of the AITable.Through the widget, the data can be more fully and effectively used, and more prosperous data transmission and visualization can be achieved.

Now, the custom widget allows developers to fully use SDK capabilities to develop more apps that match business scenes and personal needs.

What can you do with widget​

If AITable is a visualized database that is friendly to normal users, the widget is the best assistant to turn this database directly into different forms of apps.

Extend the visualization capabilities​

Below are some examples of custom：

  • Cell Viewer: makes it easier for you to browse data of different column types, and to view data in a completely new way from MagicLookUps, TwoWayLinks, Attachments
  • Map: a widget that can show address data of datasheet in Google Maps
  • URL preview: a widget to quickly preview the content of the specified URL

Extend the interactivity capabilities​

Below are some examples of custom widgets：

  • Email notifications: send an email to the specified person when data changes in the form
  • To-do list: quickly enter data to apitable via the to-do list interface

Introduction of the widget development​

Developer requirement​

` Before creating your first widget, make sure you already have the following skills：

  • Be familiar with the basic concepts of AITable, in particular records, fields, views
  • Be familiar with JavaScript and React.Be familiar with JavaScript and React.TypeScript is additional to help you develop more stable widgetsTypeScript is additional to help you develop more stable widgets.
    • If you have not reached JavaScript yet, but have a strong interest in web development, it is recommended that you read MDN JavaScript tutorial and React Tutorial
    • Core capabilities in the widget SDK include React Hooks and React Functional Components
  • Learn about npm or yarn package manager
  • Be familiar with the most basic command-line statements, such as cd entering a directory`

Environment requirement​

  • Google Chrome
  • Install NodeJS, recommend using the latest version v14.16.0, and can be used for more than 12 versions in theory.It is recommended to use nvm to manage your node version.
  • You need a code editor, recommend using the VS Code

Developer Tools​

Widget-cli​

widget-cli is a command line tool that can help you quickly initialize, run, publish, or unmount widgets (build and publish processes that depend on built-in webpack).

Widget-sdk​

Widget-sdk can read/write all types of data in the datasheet and use various built-in methods of AITable to develop powerful custom widgets according to your needs.Widget-sdk can read/write all types of data in the datasheet and use various built-in methods of AITable to develop powerful custom widgets according to your needs.widget-sdk is also a standard npm module that has been declared in package.json.widget-sdk is also a standard npm module that has been declared in package.json.

The widget is essentially a React app, except widget-sdk you can build your own widget like a standard React app to import the npm package you need.

The core of the Widget-sdk is React function components and hooks.

All capabilities in widget-sdk have complete details on API Reference , and you can find an inspiration in the summary below：

  1. Read meta information
    1. Current datasheet information, such as datasheet ID, datasheet name, etc.
    2. The widgets's own information
  2. Read datasheet
    1. Record Data
    2. Field Data
    3. Filtering/sorting data (developing)
  3. Write datasheet
    1. Record Data
    2. Field Data
  4. Key-Value Storage for Real-Time Collaboration
    1. Store data needed by the widget itself and real-time collaboration
  5. Read selection information
    1. Active Cell
    2. Active Selection
    3. Active View
  6. Interact with the main app
    1. Expand and close widget
    2. Expand and close widget settings
    3. Expand a record card

Widget UI components library​

components provide rich UI components to help developers build the widget that is consistent with apitable style and reduce development costs.

  1. Colors
  2. Base components
  3. Other business components

Icons​

In addition to UI components, we provide a well-designed icon library to enrich the dimension of the information further.

Examples​

You can also access developer template widget to see all API usage in an actual widget.