This topic was automatically generated from Slack. You can find the original thread here.
im creating a custom airtable node, and adding dynamic props. under the tableId prop, i can’t seem to get the baseId in the function parameters of options({ baseId })
To resolve the issue with accessing the baseId in the options method for the tableId prop, you need to ensure that the baseId prop is correctly passed to the options method. This can be achieved by using the propDefinition feature in Pipedream components. Here’s how you can modify your component to achieve this: import { axios } from "@pipedream/platform"; export default defineComponent({ props: { airtable_oauth: { type: "app", app: "airtable_oauth", }, baseId: { type: "string", label: "Base", async options() { const response = await axios(this, { url: `https://api.airtable.com/v0/meta/bases`, headers: { Authorization: `Bearer ${this.airtable_oauth.$auth.oauth_access_token}`, }, }); return response.bases.map((base) => ({ label: base.name, value: base.id, })); }, }, tableId: { type: "string", label: "Table", async options(opts) { const { baseId } = opts; const response = await axios(this, { url: `https://api.airtable.com/v0/meta/bases/${baseId}/tables`, headers: { Authorization: `Bearer ${this.airtable_oauth.$auth.oauth_access_token}`, }, }); return response.tables.map((table) => ({ label: table.name, value: table.id, })); }, }, }, }); ### Key Changes: 1. Use opts in options Method: The options method for tableId now uses opts to access the baseId. This ensures that the baseId is correctly passed to the method. 2. Remove Angle Brackets: Ensure that the URLs in the axios requests do not have angle brackets (< >), as they are not needed and can cause issues. By following these steps, the baseId should be correctly passed to the options method for the tableId prop, allowing you to fetch the tables for the selected base.
To explain how to use configuredProps in Pipedream, let’s first understand what props are in the context of Pipedream components. ### Props in Pipedream Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance. You can reference these properties in component code using this (e.g., this.propName). Props allow you to pass input to components and can be used to configure various aspects of the component’s behavior. ### Using Configured Props In Pipedream, you can define custom props directly in the code editor. These props can be used to accept user input when configuring a component. Here’s a basic example of how to define and use a configured prop in a Pipedream component: export default defineComponent({ props: { firstName: { type: "string", label: "Your first name", }, }, async run({ steps, $ }) { console.log(this.firstName); }, }); In this example: - We define a prop named firstName with a type of string. - The label provides a human-readable name for the prop, which will be displayed in the Pipedream UI when configuring the component. - Inside the run method, we can access the value of firstName using this.firstName. When you configure this component in a workflow, Pipedream will render a visual input field in the step configuration UI, allowing you to enter a value for firstName. This value can then be used within the component’s logic. ### More on Props Props can be of various types, including strings, booleans, integers, objects, and more. They can also include options methods for dynamic value selection, and they can be used to manage authentication, data stores, and other functionalities. For more detailed information on using props in Pipedream, you can refer to the Pipedream documentation on components. If you have any specific questions or need further clarification, feel free to ask!
To reference values from previous props in Pipedream components, you need to pass the value of the previous props in a specific way. Here’s an example using Trello as a reference: ### Example Suppose you have two props: Board and Lists. The Lists prop depends on the value of the Board prop. Here’s how you can define these props: board: { type: "string", label: "Board", async options(opts) { const boards = await this.getBoards(this.$auth.oauth_uid); const activeBoards = boards.filter((board) => board.closed === false); return activeBoards.map((board) => { return { label: board.name, value: board.id }; }); }, }, lists: { type: "string[]", label: "Lists", optional: true, async options(opts) { const lists = await this.getLists(opts.board); return lists.map((list) => { return { label: list.name, value: list.id }; }); }, } In the lists prop, opts.board references the board selected by the user. This allows the lists prop to dynamically fetch and display lists based on the selected board. ### Using propDefinitions You can also use propDefinitions to reference values from previous props: board: { propDefinition: [trello, "board"] }, lists: { propDefinition: [ trello, "lists", (configuredProps) => ({ board: configuredProps.board }), ], }, Here, configuredProps contains the props the user previously configured (the board), which allows the lists prop to use it in the options method. For more details, you can refer to the Pipedream documentation on components.