SmartCRUD Usage Guide #

A low-code CRUD framework built on the SmartChart platform — build data management interfaces quickly via a visual configuration panel.

Table of Contents #

1. Quick Start
2. Architecture
3. Dataset Binding (Data Management)
4. Table Display Configuration
5. Query & Filter
6. Add & Edit
7. Field Type Reference
8. Model Management
9. Advanced Features
10. FAQ

1. Quick Start #

1.1 Open the Config Panel #

Click the 「CRUD Config」 button at the bottom-right of the page. A bottom config drawer appears with 5 tabs:

1.2 Basic Config Flow #

① Data Management → fill in table_id (query dataset)
② Data Management → fill in add_id / update_id / delete_id
③ Table Display → set tableFields and nameDict
④ Add/Modify → set aform (add fields) and constFields (readonly/PK)
⑤ Click Preview → confirm → click Publish

1.3 Three Action Buttons #

2. Config Value Formats #

3. Dataset Binding #

3.1 Core Datasets #

3.2 Extended Datasets #

3.3 Linked Datasets #

3.4 Backend Pagination #

Enable isBackPage = true, then the dataset must return two data frames:

• df0: total count
• df1: paginated data

Framework auto-passes limit and offset parameters.

4. Table Display #

4.1 Field Display #

4.2 Appearance #

4.3 Special Columns #

Tag labels: tagFields = status,category + statusColor = active:green,inactive:red

Header highlight: spotFields = status:red,amount:green

Header tooltip: tooltipDict = code:Unique item code,amount:Amount in CNY

Row merge: mergeFields = department,category — merges adjacent cells with same value

4.4 Pagination #

5. Query & Filter #

5.1 Backend Query (searchDict) #

Submit field values to backend dataset as query params. Date/month types auto-split into _s (start) and _e (end) params.

5.2 Frontend Filter (filterDict) #

Real-time filtering on loaded data without backend requests. Supports =, >, <, >=, <= operators.

5.3 Global Search (isfilter) #

Fuzzy match across all fields. Space-separated keywords (AND logic), highlight matches.

5.4 Header Filter (headerFilter) #

Per-column dropdown filter, auto-generated from full data (frontend filter).

6. Add & Edit #

6.1 Form Fields #

6.2 Button Permissions #

Row-level permissions: If data contains an action field: E=edit, D=delete, custom icon = custom button.

6.3 Form Appearance #

6.4 Advanced Form Behavior #

6.5 Form Row Layout (formRows) #

[{"label":"Basic Info"}, "name,code:16,8", "remark"]

• {"label":"..."} = group separator
• "name,code:16,8" = same row, grid widths after colon (total 24)
• "remark" = full row

6.6 Child Table (Detail Entry) #

ztable_id = 8      // child query dataset, param fid=PK
aform1 = product_code,qty,unit_price   // child add fields

Submit format includes _child with add/modify/delete arrays.

7. Field Type Reference #

Configure via typeDict = field:type:

Options: optionDict = {"status": [[1, "Active"], [0, "Inactive"]]}

8. Model Management #

Visual database table structure management (Dev mode only). Supports MySQL, PostgreSQL, and SQLite.

8.1 Workflow #

1. Enter table name → Query (reads real schema) or leave blank (reads from CRUD config)
2. Modify field attributes in the list
3. Preview → applies to CRUD config
4. Save → saves CRUD config
5. Execute → generates and runs SQL (irreversible)

8.2 Special Auto-Handled Fields #

8.3 Excel Import for Table Creation #

Upload .xlsx — first row = field names, second row = comments, subsequent rows = data samples for type inference.

9. Advanced Features #

9.1 Selection Linkage (selectDsDict) #

When a field changes, call dataset to auto-fill other fields.

9.2 Remote Search (remoteDsDict) #

Dropdown with input search, real-time calls to dataset.

9.3 Custom Action Buttons (viewDsDict) #

icon:dsID — no suffix = view popup, ! = chart popup, !! = silent refresh.

9.4 Iframe Form (iframeFormDict) #

Open another page as iframe dialog from action column.

9.5 Multiple Edit Buttons (editDict) #

Each button has independent dataset and field subset. Supports add: true for copy-add.

9.6 Toolbar Buttons (funDsDict) #

Batch operations: icon:dsID — passes action and updatelist params.

9.7 Batch Actions (actionDict) #

Batch status change for selected rows. {"approved": ["Approve", "green"]}

9.8 Left Tree Menu (tree_ds) #

Tree menu dataset, clicking leaf node passes _label param.

9.9 Pre/Post Submit (addb_id / adda_id) #

• addb_id: Pre-submit validation, return status:200/400
• adda_id: Post-success trigger for notifications/workflows

9.10 Barcode Input #

typeDict = barcode:qr + scanSubmit = true

9.11 File/Image Upload #

typeDict = avatar:img,attachment:file + ossUpload = ali1

9.12 Multi-Tab (tabs) #

Each tab has independent dataset and display config. First tab stores full config; others store only diffs.

9.13 Custom Calculation (calcChange) #

vapp.calcChange = function(key) {
    if (key === 'qty') {
        vapp.form.amount = vapp.form.qty * vapp.form.price;
    }
}

10. FAQ #

Q: Config saved but not effective?

“Save” writes to test config; “Publish” overwrites production. Make sure you click the right button.

Q: Add submit says “no modifications”?

All field values are null. Check that aform config is correct and field names match.

Q: Can’t find PK on modify?

constFields first entry must be the PK field name, and it must exist in the table data.

Q: Dropdown has no options?

Set optionDict for fixed options, or option_id for dynamic loading from dataset.

Q: Child table not loading?

Confirm ztable_id is set and the dataset accepts fid param. Child table must have id field.

Q: Double-click cell edit not working?

Enable cellEditable = true, field must be in mform and not in constFields.

Q: Poor mobile display?

Enable isMobileCard = true for card list mode.

Copyright: SmartChart / SmartCRUD designed by JohnYan