@wix/auto-patterns 1.17.0 → 1.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/dataSourceAdapters/cms/cmsAdapter.js +0 -2
- package/dist/cjs/dataSourceAdapters/cms/cmsAdapter.js.map +1 -1
- package/dist/cjs/dataSourceAdapters/cms/fetchCmsData.js.map +1 -1
- package/dist/cjs/dataSourceAdapters/cms/filterUtils.js.map +1 -1
- package/dist/cjs/dataSourceAdapters/cms/sortUtils.js.map +1 -1
- package/dist/cjs/hooks/useColumns.js +7 -5
- package/dist/cjs/hooks/useColumns.js.map +1 -1
- package/dist/cjs/types/types.js.map +1 -1
- package/dist/docs/action_cell.md +1 -1
- package/dist/docs/app_config_structure.md +73 -3
- package/dist/docs/auto-patterns-guide.md +367 -80
- package/dist/docs/bulk_actions.md +1 -1
- package/dist/docs/collection_page.md +1 -1
- package/dist/docs/collection_page_actions.md +1 -1
- package/dist/docs/config_schema.md +184 -0
- package/dist/docs/custom_overrides.md +163 -4
- package/dist/docs/entity_page.md +0 -1
- package/dist/docs/index.md +5 -7
- package/dist/docs/schema_config.md +174 -0
- package/dist/docs/sdk_utilities.md +97 -0
- package/dist/docs/wix_fqdn_custom_data_source.md +201 -0
- package/dist/esm/dataSourceAdapters/cms/cmsAdapter.js +0 -2
- package/dist/esm/dataSourceAdapters/cms/cmsAdapter.js.map +1 -1
- package/dist/esm/dataSourceAdapters/cms/fetchCmsData.js.map +1 -1
- package/dist/esm/dataSourceAdapters/cms/filterUtils.js.map +1 -1
- package/dist/esm/dataSourceAdapters/cms/sortUtils.js.map +1 -1
- package/dist/esm/hooks/useColumns.js +3 -1
- package/dist/esm/hooks/useColumns.js.map +1 -1
- package/dist/esm/types/types.js.map +1 -1
- package/dist/types/dataSourceAdapters/cms/cmsAdapter.d.ts.map +1 -1
- package/dist/types/dataSourceAdapters/cms/fetchCmsData.d.ts +2 -3
- package/dist/types/dataSourceAdapters/cms/fetchCmsData.d.ts.map +1 -1
- package/dist/types/dataSourceAdapters/cms/filterUtils.d.ts +3 -4
- package/dist/types/dataSourceAdapters/cms/filterUtils.d.ts.map +1 -1
- package/dist/types/dataSourceAdapters/cms/sortUtils.d.ts +2 -3
- package/dist/types/dataSourceAdapters/cms/sortUtils.d.ts.map +1 -1
- package/dist/types/hooks/useColumns.d.ts.map +1 -1
- package/dist/types/types/types.d.ts +13 -3
- package/dist/types/types/types.d.ts.map +1 -1
- package/package.json +4 -4
- package/dist/docs/recipe-bulk-operations.md +0 -1352
- package/dist/docs/recipe-crud-operations.md +0 -805
- package/dist/docs/recipe-customization.md +0 -1703
- package/dist/docs/recipe-first-dashboard.md +0 -795
- package/dist/docs/sdk_and_schema.md +0 -215
|
@@ -121,7 +121,10 @@ export interface AppConfig {
|
|
|
121
121
|
label?: string; // Text displayed for the action
|
|
122
122
|
collection: {
|
|
123
123
|
collectionId: string; // ID of the Wix Data collection
|
|
124
|
-
entityTypeSource: 'cms'; // Data source type.
|
|
124
|
+
entityTypeSource: 'cms' | 'custom'; // Data source type.
|
|
125
|
+
custom?: {
|
|
126
|
+
id: string;
|
|
127
|
+
};
|
|
125
128
|
};
|
|
126
129
|
create?: { // Required when type is 'create'
|
|
127
130
|
mode: 'page'; // Create mode
|
|
@@ -147,7 +150,10 @@ export interface AppConfig {
|
|
|
147
150
|
entityPageId?: string; // ID of the entity page to navigate to when clicking a row
|
|
148
151
|
collection: {
|
|
149
152
|
collectionId: string; // ID of the Wix Data collection
|
|
150
|
-
entityTypeSource: 'cms'; // Data source type.
|
|
153
|
+
entityTypeSource: 'cms' | 'custom'; // Data source type.
|
|
154
|
+
custom?: {
|
|
155
|
+
id: string;
|
|
156
|
+
};
|
|
151
157
|
reflectQueryInUrl?: boolean; // Reflects query state (search, filters, sorting) in the browser URL. Default: false
|
|
152
158
|
selectAllScope?: 'page' | 'all'; // Controls "Select All" scope. 'all' selects entire collection, 'page' selects only visible items. Default: 'all'
|
|
153
159
|
selectionUpdateMode?: 'preserve' | 'clear'; // Controls selection behavior when data changes. 'preserve' maintains selections, 'clear' clears them. Default: 'clear'
|
|
@@ -403,7 +409,10 @@ export interface AppConfig {
|
|
|
403
409
|
}[];
|
|
404
410
|
};
|
|
405
411
|
collectionId: string; // Related collection ID
|
|
406
|
-
entityTypeSource: 'cms'; // Data source type.
|
|
412
|
+
entityTypeSource: 'cms' | 'custom'; // Data source type.
|
|
413
|
+
custom?: {
|
|
414
|
+
id: string;
|
|
415
|
+
};
|
|
407
416
|
};
|
|
408
417
|
}[];
|
|
409
418
|
}
|
|
@@ -434,6 +443,67 @@ type LayoutContent =
|
|
|
434
443
|
|
|
435
444
|
---
|
|
436
445
|
|
|
446
|
+
## Filters Configuration Notes
|
|
447
|
+
|
|
448
|
+
To configure filters in a `collectionPage`, add a `filters` property inside the page's component configuration object. Each filter must reference a valid field by its `fieldId`, and the supported types are:
|
|
449
|
+
|
|
450
|
+
* `numberConfig`: used with fields of type `NUMBER`
|
|
451
|
+
* `dateConfig`: used with fields of type `DATETIME`
|
|
452
|
+
* `booleanConfig`: used with fields of type `BOOLEAN`
|
|
453
|
+
* `enumConfig`: used with fields of type `ARRAY` or `ARRAY_STRING`
|
|
454
|
+
|
|
455
|
+
### Enum Configuration Implementation
|
|
456
|
+
|
|
457
|
+
When implementing enum filters, you must ask the user to provide the possible option values. Never invent or assume enum values. Here's how to properly handle enumConfig:
|
|
458
|
+
|
|
459
|
+
#### Example: User-Provided Enum Implementation
|
|
460
|
+
|
|
461
|
+
1. First, collect the possible values from the user:
|
|
462
|
+
```
|
|
463
|
+
User requests: "I need a filter for pet types."
|
|
464
|
+
You ask: "What are the possible values for pet types that should be available in the filter?"
|
|
465
|
+
User responds: "dog, cat, bird, rabbit, fish"
|
|
466
|
+
```
|
|
467
|
+
|
|
468
|
+
2. Then, create the `enumConfig` structure:
|
|
469
|
+
```json
|
|
470
|
+
"enumConfig": {
|
|
471
|
+
"options": [
|
|
472
|
+
{ "value": "dog", "label": "Dog" },
|
|
473
|
+
{ "value": "cat", "label": "Cat" },
|
|
474
|
+
{ "value": "bird", "label": "Bird" },
|
|
475
|
+
{ "value": "rabbit", "label": "Rabbit" },
|
|
476
|
+
{ "value": "fish", "label": "Fish" }
|
|
477
|
+
],
|
|
478
|
+
"selectionMode": "multiple",
|
|
479
|
+
"optionType": "checkbox"
|
|
480
|
+
}
|
|
481
|
+
```
|
|
482
|
+
|
|
483
|
+
Notice how the `label` is derived from the `value` by capitalizing the first letter. The user's exact values become the `value` property.
|
|
484
|
+
|
|
485
|
+
### Grouping Filters with Section Title
|
|
486
|
+
|
|
487
|
+
* Filters can be grouped by sections using the `sectionTitle` property.
|
|
488
|
+
* If multiple filter items share the same `sectionTitle`, they will be displayed together in a grouped section in the UI.
|
|
489
|
+
* Filters without a `sectionTitle` will appear in a default section or be displayed individually.
|
|
490
|
+
* Grouping helps maintain clarity, especially when dealing with multiple filter options.
|
|
491
|
+
|
|
492
|
+
### Key Guidelines
|
|
493
|
+
|
|
494
|
+
* **openByDefault**: Automatically expands the filter accordion when the filters panel is opened.
|
|
495
|
+
* **tagLabel**: Specifies the label displayed in a Tag component on the table or grid once the filter is active. For example, if the tagLabel is "Age", the filter display might show: `Age: 7`.
|
|
496
|
+
* **maxInlineFilters**: Limits the number of filters shown inline in the table toolbar. Others are accessible via the panel. Default is 0.
|
|
497
|
+
* **dateConfig.mode**:
|
|
498
|
+
|
|
499
|
+
* `ONLY_PREDEFINED`: user can select only from preset options
|
|
500
|
+
* `ONLY_CUSTOM`: user must select a custom date range manually (no presets)
|
|
501
|
+
* `COMBINE`: both options available
|
|
502
|
+
* **dateConfig.presets** must be omitted if mode is `ONLY_CUSTOM`.
|
|
503
|
+
* **dateConfig.includeTime**: Controls whether time selection is also enabled alongside date (default is `true`).
|
|
504
|
+
|
|
505
|
+
---
|
|
506
|
+
|
|
437
507
|
# Pages Configuration
|
|
438
508
|
|
|
439
509
|
## ⚠️ Critical Page Rules
|
|
@@ -580,7 +650,7 @@ Sticky columns allow you to keep specific columns visible while users scroll hor
|
|
|
580
650
|
|
|
581
651
|
* Must include **exactly one item**.
|
|
582
652
|
* Each component must have:
|
|
583
|
-
* `collection`: Collection configuration with `collectionId` and `entityTypeSource
|
|
653
|
+
* `collection`: Collection configuration with `collectionId` and `entityTypeSource`
|
|
584
654
|
* `layout`: Array of layout items that determine what components to render
|
|
585
655
|
|
|
586
656
|
## Layout Array
|
|
@@ -955,7 +1025,7 @@ export const quickToggle: CustomActionCollectionPageActionOnRowClickResolver = (
|
|
|
955
1025
|
✓ `primaryActions` and `secondaryActions` (if defined) have a valid `type` ("action" or "menu").
|
|
956
1026
|
✓ If `type: "action"`, `action.item` is a valid action item configuration.
|
|
957
1027
|
✓ If `type: "menu"`, `menu.items` is an array of valid action item configurations that can include dividers.
|
|
958
|
-
✓ Each action item contains a unique `id`, and the full `collection` object (`collectionId`, `entityTypeSource
|
|
1028
|
+
✓ Each action item contains a unique `id`, and the full `collection` object (`collectionId`, `entityTypeSource`).
|
|
959
1029
|
✓ Each action item has a supported `type` (`create`, `custom`) and its corresponding configuration block (e.g., `create` block for `type: "create"`).
|
|
960
1030
|
✓ `create` actions specify a `create.page.id` that matches an existing `entityPage` ID in the configuration.
|
|
961
1031
|
✓ `custom` actions (identified by their main `id`) correspond to an action resolver function name registered in the `actions` override.
|
|
@@ -1073,6 +1143,87 @@ interface ToastConfig {
|
|
|
1073
1143
|
|
|
1074
1144
|
SchemaConfig provides complete collection metadata and server actions. Essential for dynamic operations and accessing collection structure information.
|
|
1075
1145
|
|
|
1146
|
+
### TypeScript Interface Definition
|
|
1147
|
+
|
|
1148
|
+
```typescript
|
|
1149
|
+
export interface SchemaConfig {
|
|
1150
|
+
id: string;
|
|
1151
|
+
fields: Record<string, Field | undefined>;
|
|
1152
|
+
displayField: string;
|
|
1153
|
+
idField: string;
|
|
1154
|
+
actions: {
|
|
1155
|
+
get: (entityId: string) => Promise<any>;
|
|
1156
|
+
create: (newEntity: Partial<any>) => Promise<any>;
|
|
1157
|
+
update: (updatedEntity: any) => Promise<any>;
|
|
1158
|
+
delete: (entityId: string) => Promise<any>;
|
|
1159
|
+
bulkDelete: (entityIds: string[]) => Promise<any>;
|
|
1160
|
+
find: (
|
|
1161
|
+
query: Query,
|
|
1162
|
+
options?: {
|
|
1163
|
+
searchableFieldIds?: string[];
|
|
1164
|
+
filterFieldMapping?: Record<string, { fieldId: string }>;
|
|
1165
|
+
},
|
|
1166
|
+
) => Promise<{ items: any[]; total: number }>;
|
|
1167
|
+
};
|
|
1168
|
+
}
|
|
1169
|
+
|
|
1170
|
+
export interface Query {
|
|
1171
|
+
limit: number; // Maximum number of items to return per request (controls page size)
|
|
1172
|
+
offset: number; // Number of items to skip from the beginning (for pagination)
|
|
1173
|
+
page: number; // Current page number (1-based, works with limit for pagination)
|
|
1174
|
+
search?: string; // Text search query applied to searchable fields
|
|
1175
|
+
cursor?: string | null; // Cursor-based pagination token (alternative to offset-based pagination)
|
|
1176
|
+
filters: Record<string, any>; // Field-specific filter conditions (keys = field IDs, values = filter criteria)
|
|
1177
|
+
sort?: { // Sorting configuration for result ordering
|
|
1178
|
+
fieldName: string; // Field ID to sort by (must be sortable per field capabilities)
|
|
1179
|
+
order: 'asc' | 'desc'; // Sort direction
|
|
1180
|
+
}[];
|
|
1181
|
+
}
|
|
1182
|
+
```
|
|
1183
|
+
|
|
1184
|
+
### Supporting Type Definitions
|
|
1185
|
+
|
|
1186
|
+
```typescript
|
|
1187
|
+
export type PatternsFieldType =
|
|
1188
|
+
| 'SHORT_TEXT'
|
|
1189
|
+
| 'LONG_TEXT'
|
|
1190
|
+
| 'NUMBER'
|
|
1191
|
+
| 'BOOLEAN'
|
|
1192
|
+
| 'DATE'
|
|
1193
|
+
| 'DATETIME'
|
|
1194
|
+
| 'URL'
|
|
1195
|
+
| 'ARRAY'
|
|
1196
|
+
| 'REFERENCE'
|
|
1197
|
+
| 'IMAGE';
|
|
1198
|
+
|
|
1199
|
+
interface BaseField {
|
|
1200
|
+
id: string;
|
|
1201
|
+
displayName: string;
|
|
1202
|
+
validation?: {
|
|
1203
|
+
numberRange?: NumberRange;
|
|
1204
|
+
stringLengthRange?: StringLengthRange;
|
|
1205
|
+
required: boolean;
|
|
1206
|
+
};
|
|
1207
|
+
capabilities: {
|
|
1208
|
+
supportedQueryOperators: QueryOperator[];
|
|
1209
|
+
sortable: boolean;
|
|
1210
|
+
};
|
|
1211
|
+
}
|
|
1212
|
+
|
|
1213
|
+
export interface ReferenceField extends BaseField {
|
|
1214
|
+
type: 'REFERENCE';
|
|
1215
|
+
referenceMetadata: {
|
|
1216
|
+
referencedCollectionId: string;
|
|
1217
|
+
};
|
|
1218
|
+
}
|
|
1219
|
+
|
|
1220
|
+
export interface NonReferenceField extends BaseField {
|
|
1221
|
+
type: Exclude<PatternsFieldType, 'REFERENCE'>;
|
|
1222
|
+
}
|
|
1223
|
+
|
|
1224
|
+
export type Field = ReferenceField | NonReferenceField;
|
|
1225
|
+
```
|
|
1226
|
+
|
|
1076
1227
|
### Key Properties
|
|
1077
1228
|
|
|
1078
1229
|
• **id** - `string`
|
|
@@ -1092,20 +1243,53 @@ SchemaConfig provides complete collection metadata and server actions. Essential
|
|
|
1092
1243
|
• **fields** - `Record<string, Field | undefined>`
|
|
1093
1244
|
- Complete field definitions with types and metadata
|
|
1094
1245
|
- Useful for dynamic form generation or validation
|
|
1095
|
-
-
|
|
1246
|
+
- Each field contains type information, validation rules, and capabilities
|
|
1247
|
+
- Example: `schema.fields.name.type === 'SHORT_TEXT'`
|
|
1096
1248
|
|
|
1097
1249
|
• **actions** - Server operation functions
|
|
1098
1250
|
- Pre-configured API calls for CRUD operations
|
|
1099
1251
|
- Use with optimistic actions for best UX
|
|
1252
|
+
- All actions return Promises and handle server communication
|
|
1100
1253
|
- Example: `await schema.actions.update(item)`
|
|
1101
1254
|
|
|
1102
1255
|
### Available Schema Actions
|
|
1103
1256
|
|
|
1104
|
-
|
|
1105
|
-
- schema.actions.
|
|
1106
|
-
- schema.actions.
|
|
1107
|
-
- schema.actions.
|
|
1108
|
-
- schema.actions.
|
|
1257
|
+
#### Individual Entity Operations
|
|
1258
|
+
- **schema.actions.get(entityId)** - Retrieve a single entity by ID
|
|
1259
|
+
- **schema.actions.create(newEntity)** - Create a new entity
|
|
1260
|
+
- **schema.actions.update(updatedEntity)** - Update an existing entity
|
|
1261
|
+
- **schema.actions.delete(entityId)** - Delete a single entity by ID
|
|
1262
|
+
|
|
1263
|
+
#### Bulk Operations
|
|
1264
|
+
- **schema.actions.bulkDelete(entityIds)** - Delete multiple entities by their IDs
|
|
1265
|
+
|
|
1266
|
+
#### Query Operations
|
|
1267
|
+
- **schema.actions.find(query, options)** - Search and filter entities
|
|
1268
|
+
- `query`: Query object with pagination, filtering, sorting, and search criteria (see Query Interface section)
|
|
1269
|
+
- `options.searchableFieldIds`: Array of field IDs that support text search
|
|
1270
|
+
- `options.filterFieldMapping`: Maps filter IDs to actual field IDs for complex filtering
|
|
1271
|
+
- Returns: `{ items: any[], total: number }`
|
|
1272
|
+
|
|
1273
|
+
### Field Type Information
|
|
1274
|
+
|
|
1275
|
+
Each field in the `fields` record contains:
|
|
1276
|
+
|
|
1277
|
+
- **id**: Unique field identifier
|
|
1278
|
+
- **displayName**: Human-readable field name
|
|
1279
|
+
- **type**: One of the supported `PatternsFieldType` values
|
|
1280
|
+
- **validation**: Optional validation rules including:
|
|
1281
|
+
- `numberRange`: Min/max values for numeric fields
|
|
1282
|
+
- `stringLengthRange`: Min/max length for text fields
|
|
1283
|
+
- `required`: Whether the field is mandatory
|
|
1284
|
+
- **capabilities**: Field behavior configuration:
|
|
1285
|
+
- `supportedQueryOperators`: Array of operators this field supports for filtering
|
|
1286
|
+
- `sortable`: Whether this field can be used for sorting
|
|
1287
|
+
|
|
1288
|
+
### Reference Fields
|
|
1289
|
+
|
|
1290
|
+
Reference fields have additional metadata:
|
|
1291
|
+
- **referenceMetadata.referencedCollectionId**: ID of the collection being referenced
|
|
1292
|
+
- Used for establishing relationships between different collections
|
|
1109
1293
|
|
|
1110
1294
|
### Schema Validation Checklist
|
|
1111
1295
|
|
|
@@ -1116,74 +1300,19 @@ Before using schema in operations:
|
|
|
1116
1300
|
✓ Use `schema.idField` for ID operations
|
|
1117
1301
|
✓ Use `schema.displayField` for UI display
|
|
1118
1302
|
✓ Use `schema.actions` for server operations
|
|
1303
|
+
✓ Check field capabilities before applying filters or sorting
|
|
1119
1304
|
|
|
1120
1305
|
### Common Usage Patterns
|
|
1121
1306
|
|
|
1122
1307
|
- **ActionCell**: Use `schema.actions.update()` or `schema.actions.delete()` for single item operations
|
|
1123
|
-
- **BulkActions**: Use `schema.actions.
|
|
1308
|
+
- **BulkActions**: Use `schema.actions.bulkDelete()` for multiple items
|
|
1124
1309
|
- **Dynamic UI**: Use `schema.fields` to build forms or validate data
|
|
1125
1310
|
- **Error Messages**: Use `schema.displayField` to create meaningful user feedback
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
To configure filters in a `collectionPage`, add a `filters` property inside the page's component configuration object. Each filter must reference a valid field by its `fieldId`, and the supported types are:
|
|
1132
|
-
|
|
1133
|
-
* `numberConfig`: used with fields of type `NUMBER`
|
|
1134
|
-
* `dateConfig`: used with fields of type `DATETIME`
|
|
1135
|
-
* `booleanConfig`: used with fields of type `BOOLEAN`
|
|
1136
|
-
* `enumConfig`: used with fields of type `ARRAY` or `ARRAY_STRING`
|
|
1137
|
-
|
|
1138
|
-
### Enum Configuration Implementation
|
|
1139
|
-
|
|
1140
|
-
When implementing enum filters, you must ask the user to provide the possible option values. Never invent or assume enum values. Here's how to properly handle enumConfig:
|
|
1141
|
-
|
|
1142
|
-
#### Example: User-Provided Enum Implementation
|
|
1143
|
-
|
|
1144
|
-
1. First, collect the possible values from the user:
|
|
1145
|
-
```
|
|
1146
|
-
User requests: "I need a filter for pet types."
|
|
1147
|
-
You ask: "What are the possible values for pet types that should be available in the filter?"
|
|
1148
|
-
User responds: "dog, cat, bird, rabbit, fish"
|
|
1149
|
-
```
|
|
1150
|
-
|
|
1151
|
-
2. Then, create the `enumConfig` structure:
|
|
1152
|
-
```json
|
|
1153
|
-
"enumConfig": {
|
|
1154
|
-
"options": [
|
|
1155
|
-
{ "value": "dog", "label": "Dog" },
|
|
1156
|
-
{ "value": "cat", "label": "Cat" },
|
|
1157
|
-
{ "value": "bird", "label": "Bird" },
|
|
1158
|
-
{ "value": "rabbit", "label": "Rabbit" },
|
|
1159
|
-
{ "value": "fish", "label": "Fish" }
|
|
1160
|
-
],
|
|
1161
|
-
"selectionMode": "multiple",
|
|
1162
|
-
"optionType": "checkbox"
|
|
1163
|
-
}
|
|
1164
|
-
```
|
|
1165
|
-
|
|
1166
|
-
Notice how the `label` is derived from the `value` by capitalizing the first letter. The user's exact values become the `value` property.
|
|
1167
|
-
|
|
1168
|
-
### Grouping Filters with Section Title
|
|
1169
|
-
|
|
1170
|
-
* Filters can be grouped by sections using the `sectionTitle` property.
|
|
1171
|
-
* If multiple filter items share the same `sectionTitle`, they will be displayed together in a grouped section in the UI.
|
|
1172
|
-
* Filters without a `sectionTitle` will appear in a default section or be displayed individually.
|
|
1173
|
-
* Grouping helps maintain clarity, especially when dealing with multiple filter options.
|
|
1174
|
-
|
|
1175
|
-
### Key Guidelines
|
|
1176
|
-
|
|
1177
|
-
* **openByDefault**: Automatically expands the filter accordion when the filters panel is opened.
|
|
1178
|
-
* **tagLabel**: Specifies the label displayed in a Tag component on the table or grid once the filter is active. For example, if the tagLabel is "Age", the filter display might show: `Age: 7`.
|
|
1179
|
-
* **maxInlineFilters**: Limits the number of filters shown inline in the table toolbar. Others are accessible via the panel. Default is 0.
|
|
1180
|
-
* **dateConfig.mode**:
|
|
1181
|
-
|
|
1182
|
-
* `ONLY_PREDEFINED`: user can select only from preset options
|
|
1183
|
-
* `ONLY_CUSTOM`: user must select a custom date range manually (no presets)
|
|
1184
|
-
* `COMBINE`: both options available
|
|
1185
|
-
* **dateConfig.presets** must be omitted if mode is `ONLY_CUSTOM`.
|
|
1186
|
-
* **dateConfig.includeTime**: Controls whether time selection is also enabled alongside date (default is `true`).
|
|
1311
|
+
- **Field Validation**: Use `schema.fields[fieldId].validation` for form validation rules
|
|
1312
|
+
- **Query Building**: Use `schema.fields[fieldId].capabilities.supportedQueryOperators` to build dynamic filters
|
|
1313
|
+
- **Data Fetching**: Use `schema.actions.find()` with Query interface for complex data retrieval with pagination, search, and filtering
|
|
1314
|
+
- **Pagination**: Combine `limit`, `offset`, and `page` properties in Query for consistent pagination behavior
|
|
1315
|
+
- **Search Implementation**: Use `search` property with `searchableFieldIds` option for full-text search across multiple fields
|
|
1187
1316
|
|
|
1188
1317
|
---
|
|
1189
1318
|
|
|
@@ -1191,7 +1320,7 @@ Notice how the `label` is derived from the `value` by capitalizing the first let
|
|
|
1191
1320
|
|
|
1192
1321
|
The ActionCell feature adds an interactive action column to collection tables or grid views, enabling users to perform operations on individual entities.
|
|
1193
1322
|
|
|
1194
|
-
|
|
1323
|
+
## Placement and Structure
|
|
1195
1324
|
|
|
1196
1325
|
The ActionCell has a two-level structure:
|
|
1197
1326
|
* `primaryAction`: A single prominent action shown directly in the table/grid row
|
|
@@ -1427,7 +1556,7 @@ AI agents should verify these requirements before generating ActionCell configur
|
|
|
1427
1556
|
|
|
1428
1557
|
The Bulk Action Toolbar feature enables users to perform operations on multiple selected entities simultaneously in collection tables or grids. When configured, it adds checkboxes to each row and displays a toolbar with bulk actions when items are selected.
|
|
1429
1558
|
|
|
1430
|
-
|
|
1559
|
+
## Placement and Structure
|
|
1431
1560
|
|
|
1432
1561
|
The Bulk Action Toolbar is configured within the table / grid / table-grid switch configuration using the `bulkActionToolbar` property. It has a two-level structure:
|
|
1433
1562
|
* `primaryActions`: Actions shown directly in the bulk action toolbar
|
|
@@ -1705,7 +1834,6 @@ All entity pages must have:
|
|
|
1705
1834
|
|
|
1706
1835
|
* Displays details for a **single entity**.
|
|
1707
1836
|
* Always tied to a single Wix collection.
|
|
1708
|
-
* `entityTypeSource` is always `'cms'`.
|
|
1709
1837
|
|
|
1710
1838
|
> The custom actions must be defined inside the `moreActions` array.
|
|
1711
1839
|
|
|
@@ -1982,10 +2110,13 @@ your-page/
|
|
|
1982
2110
|
│ ├── index.tsx
|
|
1983
2111
|
│ ├── name.ts
|
|
1984
2112
|
│ └── date.ts
|
|
1985
|
-
|
|
2113
|
+
├── customComponents/ // Custom entity page components
|
|
2114
|
+
│ ├── index.tsx
|
|
2115
|
+
│ ├── CustomNameField.tsx
|
|
2116
|
+
│ └── InfoCard.tsx
|
|
2117
|
+
└── customDataSources/ // Custom data sources
|
|
1986
2118
|
├── index.tsx
|
|
1987
|
-
|
|
1988
|
-
└── InfoCard.tsx
|
|
2119
|
+
└── myCustomDataSource.ts
|
|
1989
2120
|
```
|
|
1990
2121
|
|
|
1991
2122
|
### Importing Overrides in Your Page
|
|
@@ -1997,8 +2128,9 @@ import * as modals from './components/modals';
|
|
|
1997
2128
|
import * as actions from './components/actions';
|
|
1998
2129
|
import * as columns from './components/columns';
|
|
1999
2130
|
import * as components from './components/customComponents';
|
|
2131
|
+
import * as customDataSources from './components/customDataSources';
|
|
2000
2132
|
|
|
2001
|
-
<PatternsWizardOverridesProvider value={{ modals, actions, columns, components }}>
|
|
2133
|
+
<PatternsWizardOverridesProvider value={{ modals, actions, columns, components, customDataSources }}>
|
|
2002
2134
|
<AutoPatternsApp configuration={config as AppConfig} />
|
|
2003
2135
|
</PatternsWizardOverridesProvider>
|
|
2004
2136
|
```
|
|
@@ -2012,6 +2144,7 @@ For example:
|
|
|
2012
2144
|
- Adding a new modal → Update `./components/modals/index.tsx`
|
|
2013
2145
|
- Adding a new column override → Update `./components/columns/index.tsx`
|
|
2014
2146
|
- Adding a new custom component → Update `./components/customComponents/index.tsx`
|
|
2147
|
+
- Adding a new custom data source → Update `./components/customDataSources/index.tsx`
|
|
2015
2148
|
|
|
2016
2149
|
Without updating the index files, your implementations won't be available to the `PatternsWizardOverridesProvider`.
|
|
2017
2150
|
|
|
@@ -2464,4 +2597,158 @@ PatternsWizardOverridesProvider
|
|
|
2464
2597
|
|
|
2465
2598
|
By using these component overrides, you can tailor the behavior and appearance of your `AutoPatternsApp` to meet specific requirements beyond what the default rendering provides.
|
|
2466
2599
|
|
|
2600
|
+
## Custom Data Sources
|
|
2601
|
+
|
|
2602
|
+
Custom data sources allow you to connect AutoPatternsApp to any data source beyond the default CMS collections. This enables you to integrate with external APIs, custom databases, or any other data sources that require custom implementation.
|
|
2603
|
+
|
|
2604
|
+
### Configuration Structure
|
|
2605
|
+
|
|
2606
|
+
When implementing a custom data source, you need to modify the `collection` configuration in your AppConfig:
|
|
2607
|
+
|
|
2608
|
+
```json
|
|
2609
|
+
{
|
|
2610
|
+
"collection": {
|
|
2611
|
+
"collectionId": "myCustomCollection",
|
|
2612
|
+
"entityTypeSource": "custom",
|
|
2613
|
+
"custom": {
|
|
2614
|
+
"id": "myCustomDataSource"
|
|
2615
|
+
}
|
|
2616
|
+
}
|
|
2617
|
+
}
|
|
2618
|
+
```
|
|
2619
|
+
|
|
2620
|
+
**Key Properties:**
|
|
2621
|
+
- `entityTypeSource`: Must be set to `"custom"` instead of `"cms"`
|
|
2622
|
+
- `custom.id`: A unique identifier for your custom data source implementation
|
|
2623
|
+
|
|
2624
|
+
### Custom Data Source Override Structure
|
|
2625
|
+
|
|
2626
|
+
Custom data sources are implemented through the `customDataSources` property in your `PatternsWizardOverridesProvider`:
|
|
2627
|
+
|
|
2628
|
+
```tsx
|
|
2629
|
+
<PatternsWizardOverridesProvider value={{
|
|
2630
|
+
customDataSources: {
|
|
2631
|
+
myCustomDataSource: async (collectionId: string, context: any) => {
|
|
2632
|
+
return customSchemaConfig; // Must return a SchemaConfig object
|
|
2633
|
+
}
|
|
2634
|
+
}
|
|
2635
|
+
}}>
|
|
2636
|
+
<AutoPatternsApp configuration={config as AppConfig} />
|
|
2637
|
+
</PatternsWizardOverridesProvider>
|
|
2638
|
+
```
|
|
2639
|
+
|
|
2640
|
+
### Implementation Components
|
|
2641
|
+
|
|
2642
|
+
#### Custom Data Source Function
|
|
2643
|
+
|
|
2644
|
+
You must implement a custom data source function that:
|
|
2645
|
+
- Takes `collectionId` and `context` parameters
|
|
2646
|
+
- Returns a Promise that resolves to a `SchemaConfig` object
|
|
2647
|
+
- The `SchemaConfig` object must include:
|
|
2648
|
+
- **id**: Collection identifier
|
|
2649
|
+
- **fields**: Field definitions with types and metadata
|
|
2650
|
+
- **displayField**: Primary field for displaying items
|
|
2651
|
+
- **idField**: Primary key field name
|
|
2652
|
+
- **actions**: CRUD operation functions that handle:
|
|
2653
|
+
- Individual entity operations (get, create, update, delete)
|
|
2654
|
+
- Bulk operations (bulkDelete)
|
|
2655
|
+
- Query operations with pagination, search, filtering, and sorting
|
|
2656
|
+
|
|
2657
|
+
### Example Implementation Structure
|
|
2658
|
+
|
|
2659
|
+
```tsx
|
|
2660
|
+
// customDataSources/myCustomDataSource.ts
|
|
2661
|
+
export const myCustomDataSource = async (collectionId: string, context: any) => {
|
|
2662
|
+
return {
|
|
2663
|
+
id: 'myCustomCollection',
|
|
2664
|
+
fields: {
|
|
2665
|
+
// Field definitions based on your data source schema
|
|
2666
|
+
},
|
|
2667
|
+
displayField: 'name',
|
|
2668
|
+
idField: '_id',
|
|
2669
|
+
actions: {
|
|
2670
|
+
get: async (entityId: string) => { /* Implementation */ },
|
|
2671
|
+
create: async (newEntity: any) => { /* Implementation */ },
|
|
2672
|
+
update: async (updatedEntity: any) => { /* Implementation */ },
|
|
2673
|
+
delete: async (entityId: string) => { /* Implementation */ },
|
|
2674
|
+
bulkDelete: async (entityIds: string[]) => { /* Implementation */ },
|
|
2675
|
+
find: async (query: Query, options?: any) => { /* Implementation */ }
|
|
2676
|
+
}
|
|
2677
|
+
};
|
|
2678
|
+
};
|
|
2679
|
+
```
|
|
2680
|
+
|
|
2681
|
+
### Field Type Mapping
|
|
2682
|
+
|
|
2683
|
+
When implementing custom data sources, you need to map your data source field types to AutoPatterns field types:
|
|
2684
|
+
|
|
2685
|
+
- **Text fields** → `'SHORT_TEXT'` or `'LONG_TEXT'`
|
|
2686
|
+
- **Numeric fields** → `'NUMBER'`
|
|
2687
|
+
- **Boolean fields** → `'BOOLEAN'`
|
|
2688
|
+
- **Date fields** → `'DATE'` or `'DATETIME'`
|
|
2689
|
+
- **Image fields** → `'IMAGE'`
|
|
2690
|
+
- **Array fields** → `'ARRAY'`
|
|
2691
|
+
- **Reference fields** → `'REFERENCE'`
|
|
2692
|
+
- **URL fields** → `'URL'`
|
|
2693
|
+
|
|
2694
|
+
### Error Handling
|
|
2695
|
+
|
|
2696
|
+
Custom data sources should include proper error handling:
|
|
2697
|
+
|
|
2698
|
+
```tsx
|
|
2699
|
+
actions: {
|
|
2700
|
+
get: async (entityId: string) => {
|
|
2701
|
+
try {
|
|
2702
|
+
const result = await yourDataSourceCall(entityId);
|
|
2703
|
+
return result;
|
|
2704
|
+
} catch (error) {
|
|
2705
|
+
throw new Error(`Failed to fetch entity: ${error.message}`);
|
|
2706
|
+
}
|
|
2707
|
+
}
|
|
2708
|
+
}
|
|
2709
|
+
```
|
|
2710
|
+
|
|
2711
|
+
### Validation Requirements
|
|
2712
|
+
|
|
2713
|
+
- **Function Signature**: Custom data source must be a function with signature `(collectionId: string, context: any) => Promise<SchemaConfig>`
|
|
2714
|
+
- **Return Type**: Must return a Promise that resolves to a complete SchemaConfig object
|
|
2715
|
+
- All schema actions must return Promises
|
|
2716
|
+
- Field IDs must match between schema definition and data source responses
|
|
2717
|
+
- The `find` action must support the complete Query interface
|
|
2718
|
+
- Custom data sources must handle pagination, search, and filtering
|
|
2719
|
+
- Error responses should be meaningful and actionable
|
|
2720
|
+
|
|
2721
|
+
### Folder Structure for Custom Data Sources
|
|
2722
|
+
|
|
2723
|
+
```
|
|
2724
|
+
your-page/
|
|
2725
|
+
├── page.tsx // Your main page component
|
|
2726
|
+
├── MyCollectionConfig.patterns.json // Configuration file
|
|
2727
|
+
└── components/ // Page-specific components folder
|
|
2728
|
+
├── index.tsx // Exports all overrides for easy importing
|
|
2729
|
+
├── customDataSources/ // Custom data sources
|
|
2730
|
+
│ ├── index.tsx
|
|
2731
|
+
│ └── myCustomDataSource.ts
|
|
2732
|
+
├── actions/ // Custom actions
|
|
2733
|
+
│ ├── index.tsx
|
|
2734
|
+
│ └── myCustomAction.tsx
|
|
2735
|
+
└── columns/ // Column overrides
|
|
2736
|
+
├── index.tsx
|
|
2737
|
+
└── myColumn.tsx
|
|
2738
|
+
```
|
|
2739
|
+
|
|
2740
|
+
### Registering Custom Data Sources
|
|
2741
|
+
|
|
2742
|
+
In your page component, import and register your custom data sources:
|
|
2743
|
+
|
|
2744
|
+
```tsx
|
|
2745
|
+
import * as customDataSources from './components/customDataSources';
|
|
2746
|
+
|
|
2747
|
+
<PatternsWizardOverridesProvider value={{ customDataSources }}>
|
|
2748
|
+
<AutoPatternsApp configuration={config as AppConfig} />
|
|
2749
|
+
</PatternsWizardOverridesProvider>
|
|
2750
|
+
```
|
|
2751
|
+
|
|
2752
|
+
**Important:** Every time you create a new custom data source, you must add a corresponding export line to the `./components/customDataSources/index.tsx` file. For example, if you create `myDataSource.ts`, you must add `export * from './myDataSource';` to the index file.
|
|
2753
|
+
|
|
2467
2754
|
---
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The Bulk Action Toolbar feature enables users to perform operations on multiple selected entities simultaneously in collection tables or grids. When configured, it adds checkboxes to each row and displays a toolbar with bulk actions when items are selected.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Placement and Structure
|
|
6
6
|
|
|
7
7
|
The Bulk Action Toolbar is configured within the table / grid / table-grid switch configuration using the `bulkActionToolbar` property. It has a two-level structure:
|
|
8
8
|
* `primaryActions`: Actions shown directly in the bulk action toolbar
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
* Must include **exactly one item**.
|
|
14
14
|
* Each component must have:
|
|
15
|
-
* `collection`: Collection configuration with `collectionId` and `entityTypeSource
|
|
15
|
+
* `collection`: Collection configuration with `collectionId` and `entityTypeSource`
|
|
16
16
|
* `layout`: Array of layout items that determine what components to render
|
|
17
17
|
|
|
18
18
|
## Layout Array
|
|
@@ -330,7 +330,7 @@ export const quickToggle: CustomActionCollectionPageActionOnRowClickResolver = (
|
|
|
330
330
|
✓ `primaryActions` and `secondaryActions` (if defined) have a valid `type` ("action" or "menu").
|
|
331
331
|
✓ If `type: "action"`, `action.item` is a valid action item configuration.
|
|
332
332
|
✓ If `type: "menu"`, `menu.items` is an array of valid action item configurations that can include dividers.
|
|
333
|
-
✓ Each action item contains a unique `id`, and the full `collection` object (`collectionId`, `entityTypeSource
|
|
333
|
+
✓ Each action item contains a unique `id`, and the full `collection` object (`collectionId`, `entityTypeSource`).
|
|
334
334
|
✓ Each action item has a supported `type` (`create`, `custom`) and its corresponding configuration block (e.g., `create` block for `type: "create"`).
|
|
335
335
|
✓ `create` actions specify a `create.page.id` that matches an existing `entityPage` ID in the configuration.
|
|
336
336
|
✓ `custom` actions (identified by their main `id`) correspond to an action resolver function name registered in the `actions` override.
|