Auto Patterns Features

Auto Patterns supports a comprehensive set of features from Patterns for building dashboard pages in your Wix apps. When you build an app with AI, the AI assistant automatically generates a patterns.json configuration file with these features. Use the feature list below to refine your initial prompt and specify which features you want included. After the initial build, you can't use the AI assistant to update the Auto Patterns configuration file.

Page types

Auto Patterns includes the following main page types for dashboard pages:

• Collection pages: Display a list of items in a table or grid layout. Wix users can view, search, filter, and manage multiple items at once.
• Entity pages: Display a single item from a collection. Wix users can view and edit the item's details. Clicking an item in a collection page opens its entity page.

Collection page features

Layouts

Collection pages support different layout types for displaying data:

Feature	Description
Table layout	Display data in a structured table format with sortable columns, ideal for detailed data comparison and management.
Grid layout	Display data in a card-based grid format, ideal for visual content like images or products.
Table and grid view switch	Automatic toggle between table and grid views, allowing a site's users to switch layouts.

Table features

Table layouts include these customization features:

Feature	Description
Column configuration	Define columns with width, sorting, and display options.
Sortable columns	Enable sorting per column with ascending and descending order.
Default sort order	Set initial sort direction for the table.
Custom columns	Allow a site's users to hide or reorder columns.
Sticky columns	Pin columns when scrolling horizontally.
Column overrides	Custom rendering for specific columns.
Row data access	Access all row data in column renderers.
Show or hide title bar	Toggle column headers visibility.
Section renderers	Group table rows with section headers.

Grid features

Grid layouts include card-based display options:

Feature	Description
Card layout	Display items as cards in a grid format.
Card descriptions	Configure card content with title, subtitle, and image fields.
Card content modes	Full display, title-only, or empty display options.
Image placement	Position images at the top or side of cards.

Actions

Collection pages support various action types for managing items:

Collection page actions

General collection page action buttons:

Feature	Description
Primary actions	Main action buttons displayed prominently, such as create buttons.
Secondary actions	Additional actions organized in menus.
Create actions	To create new items, navigate to an entity page.
Custom collection actions	Execute custom JavaScript methods for collection-level operations.

Row-level actions

Row-level actions appear on individual items in a table or grid:

Feature	Description
Primary action	Main action per row, such as update, delete, or custom actions.
Secondary actions	Additional row actions displayed in a popover menu.
Update actions	To edit an item, navigate to an entity page.
Delete actions	Before removing an item, show a delete confirmation dialog.
Custom row actions	Execute custom JavaScript methods per row.
Inline actions	Actions that appear inline or on hover.
Always visible actions	Actions always shown, not just on hover.

Bulk operations

Bulk operations allow a site's users to perform actions on multiple selected items:

Feature	Description
Bulk delete	Delete multiple items simultaneously with confirmation.
Custom bulk actions	Execute custom JavaScript methods on multiple selected items.
Bulk action toolbar	Toolbar that appears when items are selected.
Primary and secondary bulk actions	Organize bulk operations into primary and secondary actions.
Multi-select	Checkbox selection for bulk operations.
Select all scope	Select all items on the current page or the entire collection.
Selection update mode	Preserve or clear selections when data changes.

Search and filters

Collection pages include search and filtering capabilities:

Feature	Description
Search	Full-text search across a site's collection data.
Filters panel	Side panel with multiple filter types.
Number filters	Min/max range filters with decimal support.
Date and dateTime filters	Predefined presets and custom date ranges.
Boolean filters	True/false filters with custom labels.
Enum filters	Single or multiple selection with various option types.
Tag labels	Visual tags showing active filters.
Filter sections	Group related filters together.
Open by default	Auto-expand specific filters when the page loads.
Reflect query in URL	Sync filters, search, and sort with browser URL.

Query operations

Collection pages include data query operations:

Feature	Description
Pagination	Navigate through large datasets with page-based or cursor-based pagination.
Filtering	Filter data by specific criteria.
Sorting	Sort data by columns or fields.

Entity page features

Layout

Entity pages use a flexible 12-column grid system for organizing content:

Feature	Description
12-column grid system	Responsive layout system for organizing fields and components.
Main section	Primary content area for main entity information.
sidebar section	Secondary content area for additional details or actions.
Card components	Organize content in cards for better visual grouping.
Field layout	Display fields with configurable column spans.
Container layout	Group related fields together.
Custom components	Inject custom React components into entity pages.
Nested containers	Create hierarchical layouts with nested containers.

Actions

Entity pages support additional action types:

Feature	Description
More actions	Additional actions menu on entity pages.
Custom entity actions	Execute custom JavaScript methods on entity pages.

Forms

Entity pages include built-in form functionality:

Feature	Description
Form integration	Built-in react-hook-form integration for form handling.
Field validation	Form validation with error messages.
Create forms	Forms for creating new items.
Edit forms	Forms for modifying existing items.

Shared features

Data sources

Collection and entity pages include the following data source types:

Feature	Description
CMS collections	Connect a site's dashboard pages to Wix CMS collections to display and manage content stored in a site's CMS.
Custom data sources	Connect to external APIs or databases beyond Wix CMS.
FQDN-based custom data source	Integrates with Wix Business APIs using FQDNs.
Schema configuration	Define field types and metadata for data sources.

Routing and navigation

Collection and entity pages include the following routing and navigation features:

Feature	Description
Route configuration	Define routes for collection and entity pages.
Dynamic parameters	Use dynamic route parameters to pass data between pages, such as item IDs.
Page relationships	Link collection and entity pages together.
Reflect query in URL	Sync filters, search, and sort with browser URL for shareable links.

Customization and overrides

Collection and entity pages include the following customization options:

Feature	Description
Column overrides	Custom rendering for table columns.
Custom components	Override field rendering or add standalone UI components.
Slots	Inject custom components into collection pages at specific locations.
Custom actions	Implement custom action handlers with JavaScript.
Custom modals	Create custom modal dialogs.
Custom data sources	Implement custom CRUD operations.
Styling	Apply custom styles to columns, rows, or entire pages.

UI features

Collection and entity pages include the following UI enhancements:

Feature	Description
Empty state	Custom empty state with image, title, subtitle, and call-to-action buttons.
Toolbar title	Title above table/grid with subtitle, and total count.
Page title	Configure page header with title and subtitle.
Total count display	Show or hide item counts.
Loading states	Automatic loading indicators during data fetching.
Error handling	Built-in error states and retry logic.
Toast notifications	Success and error feedback messages.
Optimistic updates	UI updates before server confirmation for better UX.

Advanced features

Collection and entity pages include the following advanced capabilities:

Feature	Description
Select all scope	Select all items on the page or the entire collection.
Selection update mode	Preserve or clear selections when data changes.

See also

• About Auto Patterns
• Build an App with AI
• About AI Prompts for Building Apps