studio app builder datasource

Design and control how your application interacts with live data sources.

The Datasource tab in Xuda Studio App Builder defines the bridge between your visual components and the underlying data they consume. It provides developers with a clear and modular interface to connect to different types of data structures, manage query logic, and apply custom filtering for optimized performance.

From the header, users can toggle between source types such as DB Table, Array, JSON, CSV, or None. The screenshot illustrates a DB Table configuration, showing key controls that govern how data is fetched and organized:

  • Table — select which table to connect to within the project’s database.
  • Filter mode — choose between Index and Query for different data retrieval strategies.
  • Index — specify the index to optimize access speed and lookup accuracy.
  • Sort — define sorting order, Ascending or Descending, for structured output.
  • Reduce — toggle reduction to aggregate or condense multiple records.
  • Key, Range From / To, Locate From / To — fine-tune results with precise range limits and navigation anchors for large datasets.

The left-side Programs panel (with Sales chart selected) indicates how datasources are defined per component, while the top workspace tabs (globals, Contact Form, dashboard, Sales chart, Main Router, Main) allow developers to switch between modules seamlessly. Together, this view enables complete control over how each component accesses and manipulates information.

Datasource configurations are reusable across multiple components, making them an essential foundation for building scalable, data-reactive applications within Xuda Studio.

Visual Data Configuration

Intuitively link your components to live tables, arrays, or APIs through a simple, visual interface.

Flexible Fetching Modes

Switch between index-based and query-based retrieval for optimized or dynamic data access.

Structured Sorting and Reduction

Sort datasets ascending or descending, and enable reduction to aggregate results for analytics.

Advanced Range and Key Filters

Define keys, ranges, and locator fields to control pagination and dataset precision efficiently.

Reusable Logic Across Components

Reuse the same datasource logic across multiple app modules for consistency and maintainability.

FAQs

The Datasource tab defines how your application connects to and interacts with live data sources, providing control over structure, filtering, and performance.

You can connect to multiple source types such as DB Table, Array, JSON, CSV, or None, depending on your project’s data architecture.

The DB Table option allows you to link a visual component directly to a table within your project’s database, managing queries and filtering dynamically.

Index mode retrieves records based on pre-defined indexes for speed, while Query mode allows custom filtering and search logic for flexible data access.

Sorting defines the order of displayed results—ascending or descending—ensuring that data is presented logically and consistently across components.

The Reduce toggle aggregates or condenses multiple records into summarized output, which is useful for analytics, charts, and performance optimization.

You can use range parameters like Key, Range From/To, and Locate From/To to fine-tune data retrieval for specific records or result subsets.

Yes. Configurations can be reused across multiple components, ensuring consistency and reducing redundant setup throughout your project.

Yes. Each visual component in Xuda Studio can be assigned its own datasource, or multiple components can share a unified source for synchronized updates.

Datasource setup defines how components interact with data, ensuring efficient retrieval, scalability, and real-time responsiveness across your app.

Develop. Deploy. Stay Productive.

Xuda is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.

Schedule a demo