Issue
I am having difficulty sharing a JavaScript library between pages in my app. While I can use the "COPY TO PAGE" and "MOVE TO PAGE" options, this means I have to manually update each page when the library is tweaked. I would like to have a common code library for data mapping and other functions, but currently, actions are page-specific.
Resolution
The solution being planned is to implement reusable actions in Appsmith. This will allow users to create a common code library that can be shared across different pages in an app.
Users will be able to define actions that can perform specific tasks, such as data mapping, and then reuse these actions in multiple pages. These actions will be stored as separate units of code that can be imported into different pages as needed.
For example, suppose a user has a data mapping function that they want to use across multiple pages. They can create a reusable action for this function and then import it into each page where it is needed. If they need to make changes to the function, they can update the action and the changes will be reflected in all pages that use it.
Here is some basic code to illustrate how this might work:
// Define a data mapping function
function mapData(data) {
// Do some data mapping here
return mappedData;
}
// Create a reusable action for the data mapping function
const dataMappingAction = {
name: "Data Mapping",
properties: {
description: "A function to map data",
inputs: [{ name: "data", type: "object" }],
outputs: [{ name: "mappedData", type: "object" }]
},
function: mapData
};
// Import the reusable action into a page
import { dataMappingAction } from "./data-mapping-action";
// Use the action in the page's code
const mappedData = dataMappingAction.function(data);