How Can I Utilize the Search and List Feature of an App in Building a Custom Component like the Select Base from Dropdown in Airtable_oauth App?

Help
1

This topic was automatically generated from Slack. You can find the original thread here.

When building a custom component how can i leverage the apps ability to search and list items. Example using airtable_oauth app how can i leverage the Select Base from dropdown in my component props?

2 
baseId: {
      type: "string",
      label: "Base ID",
      description: "The ID of your Airtable base",
      async options() {
        const bases = await this.airtable.listBases();
        return bases.map(base => ({
          label: base.name,
          value: base.id
        }));
      },
    },
3

how can i use functions that exist in the native airtable component in my custom component?

Airtable Component Code:

 type: "app",
  app: "airtable_oauth",
  propDefinitions: {
    baseId: {
      type: "string",
      label: "Base",
      description: "The Base ID.",
      async options({ prevContext }) {
        const params = {};
        if (prevContext?.newOffset) {
          params.offset = prevContext.newOffset;
        }
        const {
          bases, offset,
        } = await this.listBases({
          params,
        });
        const options = (bases ?? []).map((base) => ({
          label: base.name || base.id,
          value: base.id,
        }));
        return {
          options,
          context: {
            newOffset: offset,
          },
        };
      },
    },

In my custom component i want to bve able to use airtable_oauth and also have the user be able to select their base and table dynamically

4

To use functions from the native Airtable component in your custom component, you can define a custom Pipedream component that uses the Airtable app. This allows you to leverage the existing functionality, such as dynamically selecting a base and table. Here’s how you can create a custom component that uses the Airtable OAuth app and allows users to select their base and table dynamically: import { axios } from "@pipedream/platform"; export default defineComponent({ props: { airtable_oauth: { type: "app", app: "airtable_oauth", }, baseId: { type: "string", label: "Base", description: "Select the Airtable Base", async options({ prevContext }) { const params = {}; if (prevContext?.newOffset) { params.offset = prevContext.newOffset; } const { bases, offset, } = await this.listBases({ params, }); const options = (bases ?? []).map((base) => ({ label: base.name || base.id, value: base.id, })); return { options, context: { newOffset: offset, }, }; }, }, tableId: { type: "string", label: "Table", description: "Select the Airtable Table", async options({ baseId }) { const tables = await this.listTables(baseId); return tables.map((table) => ({ label: table.name, value: table.id, })); }, }, }, async run({ steps, $ }) { // Your custom logic here }, }); ### Explanation: 1. Airtable OAuth App: The airtable_oauth prop allows the user to connect their Airtable account, authorizing requests to the Airtable API. 2. Dynamic Base Selection: The baseId prop uses an async options method to dynamically fetch and display the list of bases from the user’s Airtable account. It uses the listBases method to retrieve the bases. 3. Dynamic Table Selection: The tableId prop uses an async options method to dynamically fetch and display the list of tables from the selected base. It uses the listTables method to retrieve the tables. 4. Custom Logic: You can add your custom logic within the run method to perform actions based on the selected base and table. This setup allows you to dynamically select bases and tables in your custom component, leveraging the existing Airtable functionality.

5

and @U05FUC30Q01 not sure if this is accurate documentation or not but this does not work.

6

I recommend you start with an existing component, e.g. list-records, and edit that file code and/or any of its dependencies.

7

Depending on the app/component it may be too complex to do it from scratch

8

so there is no way for me to just simply allow the user to select a base?

9

wdym simply allow the user to select a base? Which user are you referring to, are you in the context of Connect or your own workflow?

10

Custom action in my own workflow. I wanna build reusable components

11

if i build a custom component (my actions) that needs the user to authenticate with airtable and submit a base id and table they cant have the option to select from a list rather than having to go fetch the id and doing a custom entry?

12

have any idea on this one?

13

Yeah so what I meant was that our built-in components already have that functionality for Airtable (this is called async options)

14

So you can edit the existing action and keep the Base prop with async options (along with other props), and then edit the other parts of the code

15

Could we huddle today? I don’t think this works or at least not sure how. The existing action has dependencies.

16

Sorry, we don’t support via huddle. Could you file a ticket at pipedream.com/support and share the code you’re working on there

17

Can you point me to documentation where i can use the built in component and modify?

18
19

Yes I took a look at this documentation already…

20

Could you file a ticket at support? Or you can share your whole code here