{{ totalCount }} products found
No products match your filters. Try adjusting your criteria.
Query engine, models, lists"] LOADER["@dcupl/loader
Config & data loading"] COMMON["@dcupl/common
Shared types & utilities"] end subgraph DataSources["Data Sources"] direction TB CONSOLE["dcupl Console
Managed backend"] LOCAL["Local Files
JSON, CSV"] API["Custom APIs
JSON or CSV over HTTP"] end subgraph Runtime["Runtime"] direction TB MODELS["Models & Data"] LISTS["Lists"] QUERY["Query API"] RESULTS["Query results"] end DataSources --> LOADER LOADER --> CORE COMMON -.-> CORE COMMON -.-> LOADER CORE --> MODELS MODELS --> LISTS LISTS --> QUERY QUERY --> RESULTS ``` ### Package responsibilities | Package | Purpose | | --------------- | ------------------------------------------------------ | | `@dcupl/core` | The query engine - models, lists, query API | | `@dcupl/loader` | Configuration fetching, resource loading, transformers | | `@dcupl/common` | Shared TypeScript types and utilities | ## The data flow Here's how data moves through the system: ```mermaid flowchart LR subgraph Setup["1. Setup"] direction TB DEF["Define Models"] LOAD["Load Data"] end subgraph Init["2. Initialize"] INIT["dcupl.init()"] end subgraph Query["3. Query"] direction TB LIST["Create List"] FILTER["Add Filters"] EXEC["Execute Query"] end subgraph Output["4. Results"] direction TB ITEMS["Items"] FACETS["Facets"] AGGS["Aggregations"] end Setup --> Init --> Query --> Output ``` **Step by step:** 1. **Define Models** - Create schemas for your data 2. **Load Data** - Add data inline or via DcuplAppLoader 3. **Initialize** - Call `dcupl.init()` to process models and data 4. **Create Lists** - Create filtered views of your models 5. **Query** - Use query API to filter, sort, analyze 6. **Get Results** - Items, facets, aggregations, pivot tables ## Simple example Let's see all three concepts in action: ```typescript import { Dcupl } from '@dcupl/core'; // Create instance const dcupl = new Dcupl(); // 1. Define MODEL with properties dcupl.models.set({ key: 'Product', properties: [ { key: 'name', type: 'string' }, { key: 'price', type: 'float' }, ], data: [ { key: 'p1', name: 'Laptop', price: 999 }, { key: 'p2', name: 'Mouse', price: 29 }, ], }); // Initialize await dcupl.init(); // 2. Create LIST const list = dcupl.lists.create({ modelKey: 'Product' }); // 3. QUERY via catalog list.catalog.query.addCondition({ attribute: 'price', operator: 'gte', value: 100, }); const results = list.catalog.query.items(); // Results: [{ key: 'p1', name: 'Laptop', price: 999 }] ``` ## Key takeaways 1. **Models** define structure (properties + references) 2. **Lists** are filtered views of data 3. **Query** is how you filter and analyze data 4. You can have multiple lists for the same model 5. Everything starts with `dcupl.init()` and ends with `list.catalog.query` ## Next steps - [Models](/sdk/core-concepts/models) — Learn about model configuration, properties, and references - [Lists](/sdk/core-concepts/lists) — Master list management and events - [Query](/sdk/core-concepts/query-overview) — Learn the query structure: conditions, groups, and options ## Explore patterns - [Faceted search](/sdk/advanced/faceted-search) — Build filter UIs with facets - [Master-detail](/sdk/advanced/master-detail) — Navigate related data - [Real-Time Updates](/sdk/advanced/realtime-updates) — Live data synchronization --- # Models Source: https://docs.dcupl.com/sdk/core-concepts/models Description: Define the structure and schema of your data with properties, types, and references. # Models Define the structure and schema of your data with properties, types, and references. ## What is a model? A `ModelDefinition` is a configuration object that describes the structure and schema of your data. - **Properties**: the fields in your data structure - **Data types**: the type of each property (string, int, boolean…) - **References**: relationships to other models - **Data**: optional inline data Think of models as **blueprints** or **table schemas** for your data. ```typescript filename="product.model.ts" import type { ModelDefinition } from '@dcupl/common'; const productModel: ModelDefinition = { key: 'Product', properties: [ { key: 'name', type: 'string' }, { key: 'sku', type: 'string', index: true }, { key: 'price', type: 'float' }, { key: 'tags', type: 'Array
' + s.value + ' (' + s.keys.length + ')
')
.join('');
}
// Attach to input
document.getElementById('search')!.addEventListener('input', (e) => {
handleSearchInput((e.target as HTMLInputElement).value);
});
```
**Category filter suggestions**
Get all category values for a filter dropdown, showing counts based on current filters.
```typescript
const productList = dcupl.lists.create({ modelKey: 'Product' });
// An empty search term returns every value (up to max)
const categories = productList.catalog.fn.suggest({
attribute: 'category',
value: '', // Empty = all values
max: 50, // default is 20
relevantData: 'filtered', // Respect current filters
});
// Build filter options with counts
const filterOptions = categories.map((s) => ({
label: s.value,
count: s.keys.length,
}));
console.log('Available Categories:');
filterOptions.forEach((opt) => {
console.log(' ' + opt.label + ' (' + opt.count + ')');
});
```
**Brand search with icons**
Enrich suggestions with additional metadata like counts and custom icons.
```typescript
const productList = dcupl.lists.create({ modelKey: 'Product' });
// Brand icon mapping
const brandIcons: Record{products[index].name}
}
- '
renderProducts(productList.catalog.query.items
- {product.name} ))}
-
{items.map((product) => (
{{ product.name }}
}
`,
})
export class ProductListComponent {
private readonly list = inject(DcuplService).getDcupl().lists.create({ modelKey: 'Product' });
products = this.list.catalog.query.items{{ product.name }}
{{ product.description }}
${{ product.price.toFixed(2) }}
Initializing dcupl...
Error: {{ error.message }}
Failed to initialize dcupl
Product Browser
Powered by dcupl + Vue