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: Suppose you want to display a list of countries in a Select widget. You can create a query to fetch a list of unique countries, like:

SELECT * FROM public."product" 
WHERE category = 'Apparel';
  1. Create a JS module to format or transform the data fetched from the query module.

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

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

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

Example: If you want to transform query data into a format suitable for a Select widget, you can add a JS function like:

export default {
  async fetchCountriesData() {
    try {
      
      const countriesData = await fetchCountryDataQuery.run();
      this.countriesList = countriesData.map(country => {
        return {
          name: country.name, // 'country.name' is where the country name is stored
          code: country.code  
        };
      });
      return this.countriesList; // Return the formatted list of countries
    } catch (error) {
      console.error('Error fetching country data:', error);
    }
  },
};

This code fetches country data, formats it into a list of country names and codes, which can be reused to display the data in a Select widget.

  1. Publish the package.

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

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

  4. Drag a Select widget and set the Source data property to fetch the data:

Example:

{{ countryModule.fetchCountries.data }}

With this, you can reuse the same JS module to display a list of countries in different apps and pages.