Skip to main content

Pass data between modules

Business

This page shows how to pass data between a query and a JS module, which allows you to handle and manipulate data efficiently within your JS code.

Prerequisites​

A package that has already been created. For more information, see Package and query modules tutorials.

Configure package​

Follow these steps to set up JS and query modules within the package.

  1. Create a new Query module to fetch data by clicking on the + icon in the top-left corner.

Example: If you want to display product details in a chart widget based on the category selected by the user, you can create a SQL query like:

SELECT * FROM public."product" 
WHERE category = `Apparel`;
  1. Create an Input from the right-side property pane to dynamically pass data to the query.

Example: To dynamically pass category information to your query, use the inputs property as shown below:

SELECT * FROM public."product" 
WHERE category = {{inputs.category}};
  1. Create a new JS module to run the query module and manipulate the query data:

  • To access the Query module data in the JS module, use the reference properties of the query module, like: productData.data.

  • To pass data from the JS module to Query modules, you can pass parameters at runtime using run(), like {{ productData.run({ id: product.category }) }}.

  • To access the JS module data in the Query module, create input parameters and use them inside the query, like {{inputs.category}}.

Example: If you want to visualize inventory data in a chart widget, this JS module fetches product details based on the selected category.

export default {
  async fetchProductsByCategory(categoryName) {
    try {
      // Pass category name to Query module
      const productsData = await fetchProductsByCategoryQuery.run({ category: categoryName });

      // Format product data for display
      const formattedProductsData = productsData.map(product => {
        return {
          x: product.product_name,
          y: product.stock,
          // Add more fields as needed
        };
      });

      return formattedProductsData; // Return formatted product data
    } catch (error) {
      console.error('Error fetching product data:', error);
      throw error; // Propagate the error for handling elsewhere if needed
    }
  },
};
  1. Publish the Package from top-right corner. This allows the changes to reflect on the app side.

If the package is git-connected, you also need to release a new version for the changes to be available. For more details, refer to Package Version Control.

  1. Open your App from the homepage and ensure that both the app and modules share the same workspace.

  2. Select the JS tab on the Entity Explorer, add the JS module, and configure it to Run on page load.

  3. Drag a Chart widget and configure the Series data property to display data from the JS module.

Example:

{{productModule1.fetchProductsByCategory.data}}

  1. Drag a Select widget and configure the Source data property to display a list of product categories.

  2. Configure the onOptionChange event of the Select widget to run the JS module function when an option is selected.

Example:

{{productModule1.fetchProductsByCategory(Select1.selectedOptionValue);}}