MENU
    Data Source-Views (List)
    • 16 Minutes to read
    • Contributors

      Data Source-Views (List)


        Article summary

        A List View is a flexible and dynamic way to visualize data. It displays information from a Data source in a table-like format, resembling a grid report, and allows you to apply background colors to data columns for easier identification of patterns and trends. Additionally, it serves as an actionable report, enabling you to perform various tasks directly on individual records, such as printing, editing, or launching an app to advance a related workflow.

        Why Use a List View?

        • Data Overview: Organizes data in rows and columns for easy understanding.

        • Customization: Offers personalized settings for column properties, colors, filters, and actions.

        • Efficiency: Facilitates real-time actions, such as editing, printing, and launching related apps.

        USE CASE

        Example 1: Inventory Management

        Retail chains with multiple warehouses often face challenges in monitoring stock levels, managing reorder points, and tracking product statuses. Using the List View in Quixy, managers can efficiently organize inventory data into actionable tables, enabling:

        • Filtering of low-stock items for immediate action.

        • Sorting by quantity or warehouse location.

        • Applying color-coded highlights to prioritize critical products.

        This streamlined approach ensures timely restocking and optimizes inventory management across all locations.

        Example 2: Employee on boarding Process

        For companies like Tech Solutions on boarding new hires, ensuring timely completion of tasks is essential. The List View in Quixy provides HR teams with a centralized and interactive way to track:

        • Employee details such as names, departments, and roles.

        • Training progress and task completion.

        • Issued equipment and required documentation.

        By simplifying the on boarding process, organizations can ensure new employees are fully prepared and ready to contribute from day one.  

        How a List view Simplifies Inventory Tracking?

        With Example 1 as our focus, let’s explore how the List View in Quixy simplifies inventory tracking. By leveraging its intuitive features, raw data can be transformed into meaningful insights, enabling smarter decisions and seamless operations. Here's how it works in practice:

        Pre-requisites:

        Before you begin, make sure the following are ready:

        1. Data Table: Set up a data table with the necessary fields. For instance, in an inventory management scenario, fields might include:

          1. Product Name

          2. Stock Level

          3. Reorder Level

          4. Warehouse Location

          5. Status

          6. Supplier Name

        2. Data Source: Use the data table to create a Data Source that serves as the foundation for your List View. Save the data source after its creation.

        NOTE

        If your workflow requires advanced functionality, such as generating reorder alerts or printing records, you can either select an existing Add-on or create one while setting up the List View.

        Creating a List View in Quixy can be done in two different ways:

        From the Data Source List Page

        1. Navigate to the Data Source List Page where your data sources are listed.

        2. Select a Data Source by clicking on it. This will open the Actions side panel on the right.

        3. In the Actions panel, click on the "+" icon next to the Views option. This will allow you to start creating a new view based on your selected data source.

        Using the Admin Menu

        1. Go to Admin Menu -> Reports -> Create View.

        2. A pop-up will appear. Name your view and give it a suitable display name.

        3. If necessary, choose or create an Add-on at this stage.

        4. Under View Type, select List View and then click Next.

        The List View Landing Page

        The List View landing page acts as a centralized hub for streamlined data management, featuring three key components:

        • Title Bar: Displays the page title and provides quick access to essential actions.

        • Tool Bar: Offers navigation and customization options for an intuitive user experience.

        • List View Area: A dynamic space to view, filter, and analyze data, optimized for workflows like inventory tracking.

        Configuring View 

        Hide Columns: Once the List View page is created, it automatically displays data from your configured data source, with rows representing records and columns reflecting their fields. To streamline your view, use the Hide Column option to remove unnecessary columns or unhide relevant ones, such as Product Name, Stock Level, or Warehouse Location, tailoring the List View to your specific needs.

        Aggregates: Aggregates in Quixy summarize key metrics like total stock, average stock levels, and item counts directly in your List View, providing insights for efficient inventory management. You can perform real-time calculations without exporting data, and customize the title displayed after each aggregate label.

        To Create Aggregates:

        • In the List View, locate a column where you want to apply an aggregate, such as the Quantity in Stock column.

        • Click on None under the selected column footer. This opens the Aggregates panel.

        • Select an aggregate type like Count, Sum, Min, Max, or Average by checking the box next to it.

        • Customize the Title displayed after the aggregate label, if needed.

        • Click Ok to save the changes or Cancel to discard them.

        EXAMPLE

        When selecting Count in the Aggregates panel for the Quantity in Stock column, it may initially display the title as Count of Quantity in Stock. However, you can edit this title to something clearer, such as Total Quantity in Stock, for better understanding. Aggregates are useful for summarizing numerical data and providing quick insights. Here’s how each Aggregate work:

        • Count: Displays the total number of records.

        • Sum: Calculates the total sum of the selected numerical field.

        • Min: Identifies the smallest value in the selected field.

        • Max: Identifies the largest value in the selected field.

        • Average: Calculates the average value of the selected numerical field.

        Apply Color Coding: Assign colors to specific columns or rows based on predefined rules, making it easier to spot key information at a glance. You can choose between two color coding options: Field-Level Color and Row-Level Color.

        1. Set Field-Level Color: Apply colors to individual fields based on conditions.    

          Example: Highlight suppliers in Warehouse B or A in green, and all other locations in grey.

        2. Set Row-Level Color: Apply colors to entire rows based on conditions.    

          Example: Highlight rows with an Active status in green and those with Inactive status in red.

        Additional Settings

        Once you've set up your List View with columns, aggregates, and color coding, you can further refine it using Additional Settings to improve usability and navigation.

        • Show Aggregate Title: Display titles for aggregated columns to track summarized data.

        • Color Alternate Row: Add alternating row colors for better readability.

        • Fit to Grid: Regardless of the number of columns available/selected in a grid report, when this option is enabled, it will auto-adjust the column widths of all data columns evenly.

        • Enable Serial Number: This will assign consecutive serial numbers to all of the records in the grid report.

        • Hide Grid Header: Enabling this will remove the column headers of list.

        • Hide Aggregates Title When Exported: Enabling this option ensures that aggregate titles such as Sum, Average, or Count are not displayed in exported files.

        • Hide Column Name in Grouping: Admins can utilize this option to hide the column name that is used for grouping and structuring the data.

        • Hide Record Count in Grouping: This feature allows admins to hide the record count displayed alongside grouped data. It is useful when the count is irrelevant or could clutter the grouped view.

        • Hide Main Filters: Admins can utilize this option to hide the filter icon within a list view which limits the user's ability to filter the data displayed in the view.

        • Load View by Default: The Load View by Default option enhances the functionality of the List View by integrating with the Quick Filters feature, giving you greater control over how data is displayed.

          • When Enabled: The List View automatically loads and displays data filtered through pre-configured Quick Filters when users open the view. This ensures that end-users immediately see the most relevant and filtered data without additional input.

          • When Disabled: The List View remains blank initially. Users must manually adjust the Quick Filters to their desired values and click the Search button to display the filtered data.

        • Generate Report with Quick Filters: Admins can utilize this option to hide the column name that is used for grouping and structuring the data.

        • Auto Refresh: Enabling this will cause the list screen to automatically refresh at a set interval.

        • Search Columns: Optimize the global search for faster results by selecting specific columns from the grid report. The platform will search only through the chosen columns to locate the requested data efficiently.

        • Default Pagination per Record: Control the number of records visible per page to manage large datasets efficiently.

        Now that we've explored the Additional Settings to refine the List View for enhanced usability and navigation, it's time to take it a step further. This is where Add-ons come into play and elevate the overall user experience. Let’s dive into how add-ons can transform your List View!

        What is an Add-on?

        An add-on is a feature that enhances a List View by adding extra functionality or customization. It includes tools like Smart Columns, Rules, and Actions, which help automate tasks, organize data more effectively, and improve the overall user experience.

        Creating an Add-on

        You can select an existing add-on from the dropdown on the Create View page or create a new one by creating it separately and adding it as a plugin later. Learn how to create a Add-on..

        Smart Columns: Smart Columns enhance data organization by adding static data fields to the List View alongside fields from the data source. These columns can be updated dynamically using business rules.

        EXAMPLE

        Imagine you have an Inventory Management data source with fields like Product Name, Category, Quantity in Stock, Supplier Name, and Product Status.

        You're creating a List View to track stock levels, monitor product availability, and manage reorder cycles, but you don't have columns for Discount Eligibility and Product Restock Priority. Using Smart Columns, you can add these static fields and automate updates based on other data. For instance, the platform can automatically update each order's Discount Eligibility and Restock Priority based on other column values, giving you clear visibility into each order's details.

        The Smart Columns configuration includes:

        • Column Name: Assign a name to the static field (e.g., Discount Eligibility).

        • Type: Select a field type:

          • Boolean

          • Calculate

          • Date

          • Date Time

          • Email ID

          • Number

          • Drop Down

          • Phone Number

          • Text

          • Time

        • Value: Define a value for the static field or leave it blank if you plan to update it using business rules.

        • Business Rules: Business Rules allow you to set conditions based on your specific use case, enabling automatic updates to fields based on criteria defined using business rules. When applied to your List View, they help modify data efficiently.

        EXAMPLE

        You can use business rules to automatically update the Discount Eligibility field based on specific criteria, such as setting it to Yes or No depending on the product name. Similarly, the Product Restock Priority field can be updated based on the current stock levels. Let’s say:

        • If the stock quantity is between 20 and 99, the priority is set to Low.

        • If the stock quantity is between 100 and 200, the priority is set to Medium.

        • If the stock quantity is above 250, the priority is set to High, ensuring that critical items are restocked promptly.

        These business rules ensure that your List View displays accurate and up-to-date restocking priorities, enabling more efficient inventory management with minimal manual effort.

        Field Properties

        Customize field appearance and behavior for a clear presentation across the Web UI (desktop) and Mobile Layout, ensuring an optimized experience on all devices.

        Web UI Customization: In the Web UI tab, you can tailor the List View for a better desktop experience.

        • Header Customization:

          • Text Wrap: Wrap long header text.

          • Font Style: Choose bold, italic, or underline.

          • Alignment: Align text (left, center, or right).

          • Width: Set column width (e.g., 200px).

          • Border/Background Color: Customize header colors.

        • Data Customization:

          • Text Wrap: Wrap data text in cells.

          • Font Style: Apply bold, italic, or underline for data.

          • Alignment: Align data text (left, center, or right).

          • Width: Adjust data column width.

          • Border/Background Color: Customize cell colors.

          • On-hover Effects: Change row background and text color when hovered.

        Mobile App Customization

        Under the Mobile App tab, you can customize how data appears on smaller screens using the following options:

        1. Card Layout: Define how fields are displayed in the mobile list view:

          1. Select Card Layout: Use the dropdown menu in the Card Layout section to choose a predefined layout.

          2. Update Fields: After selecting a layout, click the Update Fields button. This opens a field configuration window where you can:

            • Choose which fields to display in the mobile layout.

            • Preview changes in real time.

            • UI Preferences: Click the UI Preferences button within the Update Fields window to further refine the layout's appearance.

              • Header and Data Customization: Adjust text styles, alignment, and colors for improved readability.

              • Background: Set a background color or image to enhance visual appeal.

                The customization window provides a real-time preview to validate changes before saving.

            • Hide unnecessary field labels by toggling the Show Label option:

              • Show Label On: Displays the selected fields along with their labels.

              • Show Label Off: Hides the labels so that only the field data is visible.

            • Enable Preview: Ensure the Preview toggle is turned on to see the changes live as you adjust settings and click the Save button after finalizing the layout.

        2. Default Pagination: Specify how many records appear per page to improve navigation and user experience. Adjust the record count to suit your needs.

        3. List View Field Selection:

          After finalizing the Card Layout and Pagination:

          1. Field Selection: Choose which fields to display in the mobile list view.

          2. Adjust Column Width: Refine the width of the selected columns to enhance readability and usability.

        Layout Customization

        Now that you've set up your List View to be user-friendly and efficient, it's time to adjust the layout to fit your specific needs. Layout customization allows you to:

        • Freeze Columns: Keep selected columns fixed while scrolling to ensure key information remains visible.

        • Stack Headers: Group related columns (e.g., Product ID, Product Name, and Price) under a single header for a cleaner layout

        • Row Height: Choose from Compact, Default, or Expanded to adjust the space each row occupies.

        • Group: Organize data by categories (e.g., Electronics, Furniture). Expand or collapse groups to focus on specific sections.

        • Filter: Apply filters to display relevant data (e.g., Active products or products stored in Warehouse B) and toggle between filter options.

        • Sort: Organize data by specific columns in ascending or descending order, such as Stock Level or Product Name. For more detailed analysis, apply multi-level sorting to make it easier to interpret the data.

        NOTE

        • Selecting a particular column in the List View also opens the Field Properties panel, which allows you to modify the column name, text style, alignment, width, and colors for both the header and data. After making changes, click Apply to save and update the column's appearance and behavior.

        • You can also rearrange columns to align with your priorities. For example, move the Product Name column to the first position and place the Product ID column second. This flexibility ensures key information is easy to find and work with.

        Enhancing Your Workflow: Actions

        Actions are interactive buttons available in Views when using an Add-on. After setting up your List View with custom columns, color coding, and layout adjustments, you can enhance its functionality with Actions.

        Actions allow you to automate tasks and interact directly with your data—no need to switch between apps. With Actions, you can add records, print reports, or view data from the same screen.

        Here’s how you set it up:  

        1. Give Your Action a Name: Start by naming your action (e.g., Add Record, Open Report, and Open Kanban). This helps you easily identify what it does.

        2. Choose an Action: Now, select the action that best fits your needs. Here are the available options:

          1. Inline Edit: This action allows users to edit data directly within the list view, streamlining updates directly without navigating to a separate form or page.

          2. Open Add Record: This action opens an app in Add Record mode, allowing you to quickly add new data and perform transactions.

          3. Open App as Report: This action opens a related app-form with previously entered data, helping you quickly review or edit information.

          4. Open List Screen: This action lets you jump to a different list screen, giving you more flexibility within your app.

          5. Open Kanban: With this action, you can switch to a Kanban view, perfect for managing tasks or workflows in a dynamic, card-based layout.

          6. Open Report: Instantly open a related report to help you make data-driven decisions, right when you need them.

          7. Print: Need a hard copy of a report? This action lets you print directly from the record you're viewing. For example, if you're looking at a list of invoices, you can print the details of a selected invoice without losing track of the others.

          8. Submit Add Record: This action is similar to Open Add Record, but it streamlines the process by skipping the usual steps and submitting the record immediately.

        Let's discuss the configuration process for the above actions:

        Inline Edit in List View

        To enable Inline Edit in the List View, follow these steps:

        1. Configuring the Inline Edit Action

          1. Navigate to the Add Action page and Select Inline Edit from the available actions.

          2. The Inline Edit Action page opens.

        2. Define Action Name: Provide a name for the action in the Action Name field.

        3. Select the column from the List View to be edited from the Select List View Column drop-down.

        4. Select the workspace in which you have the referred app from the Select Workspace drop-down.

        5. Select the related app from Select Reference drop-down.

        6. Select the related app field from the Reference Element drop-down.

        Configure Mapping Elements

        1. After clicking Next, proceed to the Mapping Element screen.

        2. Map the fields as follows:

          1. Data Source Element: Select the field from the List View.

          2. Select Reference Element: Choose the corresponding field from the application.

        3. Click on Save to apply the settings and enable inline editing.

        Open Add Record in List View

        To enable Open Add Record in the List View, follow these steps:

        1. Configuring the Open Add Record Action

          1. Navigate to the Add Action page and Select Open Add Record from the available actions.

          2. The Open Add Record Action page opens.

        2. Define Action Name: Provide a name for the action in the Action Name field.

        3. Choose how the action should open from the available options in the interface  

          1. New Tab: Opens the action in a new browser tab.

          2. Self: Executes within the same screen.

          3. Popup: Opens as a modal window (small, medium, or large).

          4. Side Panel: Opens the action in a side panel for quicker access.

        4. Data Action Type: You can select the appearance of the action, such as:

          1. Icon: Displays an icon for the action.

          2. Global Icon: Applies the action icon globally across rows.

          3. Link: Displays the action as a clickable link.

          4. Button: Displays a button for the action.

          5. Global Button: Creates a global action button applicable across rows.

        5. Select List View Column: Select the column in the List View where the Open Add Record Action will be applied.  

        6. Select Workspace: Select the workspace where the corresponding application resides.

        7. Select Reference: Pick the relevant application to link the action.

        Configure Mapping Elements

        1. After clicking Next, proceed to the Mapping Element screen.

        2. Map the fields as follows:

          1. Data Source Element: Select the field from the List View.

          2. Select Reference Element: Choose the corresponding field from the application.

        3. Click on Save to apply the settings.

        Access Page Overview

        1. Manage Roles: To manage roles, select a workspace, click Add Access, assign a role with the required permissions, and click Next to proceed.

        2. Columns & Filter Access: This section allows you to control both column visibility and data access within the List View:

          • Column Access: Manage visibility and editing permissions for each column:

            • Hide: Prevent users from viewing the column.

            • Enable: Allow users to view and edit the column.

            • Disable: Allow view-only access.

          • Data Access: Configure permissions for data rows:

            • Restrict: Limit access to specific rows of data.

            • No Restrict: Grant full access to all data rows.

          • Click Next after configuring these settings.

        3. Data Access: Define advanced permissions to control data visibility and access based on roles and user requirements, then click Save to apply these settings.


        Was this article helpful?