Skip to main content

Field editor

To make it easier for you to understand widget's SDK capabilities, we have provided a field editor widget for testing

GitHub Project：widget-datasheet-operation

Function Description​

Modify field properties

Modify the property configuration of the field. Different types of fields have different property configurations. For example, we can modify the default value of the "Text" field (defaultValue).

Returning null means that this field has no attribute configuration. For details, please refer to FieldType

edit-field-property

Modify the field description

Modify the field description through description, such as modifying the first column as "describe details!"

edit-description

New field

This method can generate new fields according to the pre-edited field configuration.

For example, by configuring the following parameters, you can generate a column of "numbers" that retains 3 decimal places.

add-field

Write format for new field property values, please refer to FieldType

Delete fields

This method can be used to delete columns other than the first column.

Select the corresponding column in the drop-down list and check "Delete/Retain the corresponding field of the associated table directly"

delete-field

Field one-click operation

This method can add/delete columns in bulk on demand.

  • If you select "One-click New Field", the editor content will be initialized as all field types of the datasheet except "One-way link", "Two-way link" and "Magic Lookup"
  • If you select "One-click Delete Field", the editor content will be initialized to all fields in the current view.

add-or-delete-all

Quick start​

Cloning project to local​

git clone git@github.com:vikadata/widget-datasheet-operation.git

Create a self-built widget​

Go to the space, switch to the "Custom" window, and create a self-built widget

The self-build widget of space

Initialize widget

Note: If this is the first development, you need to execute the following command first:

npm install -g @apitable/widget-cli

Modify the project profile​

  1. Get the widget unique ID (starting with wpk) and space ID (starting with spc) in the command of the "initialization" interface.

Get space id

Get widget id

Open the widget.config.json file in the project project and change the packageId and spaceId to your own widget ID and space ID respectively.

widget-config

  1. Use the widget-cli auth command to create authentication files (.apitable.yml), add API Token and host

set-vika-yml

Install the dependency library​

cd widget-datasheet-operation
npm install

Enter the development mode​

widget-cli start

Sample results​

You can preview this widget on the widget panel on the right and currently provides 5 editing methods.You can familiarize yourself with the SDK capabilities of the widget through code debugging in these editing modes

If you have better ideas or suggestions during use, you are welcome to submit a PR to the project to jointly develop and improve the widget.

datasheet-operation

Feature​

Features that have been implemented​

  • Modify the property configuration of the selected field
  • Modify the description of the selected field
  • Add a single field
  • Delete a single field
  • One-click "New/Delete" multiple fields