Making a Prop Dependent on Another Prop in a Source?

Help
1

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

How do you make a prop dependent on another prop in a source?

2

To make a prop dependent on another prop in a source, you can use propDefinitions and propDefinition in your component. Here’s an example: const rss = { type: "app", app: "rss", propDefinitions: { urlDef: { type: "string", label: "RSS URL", description: "Enter a URL for an RSS feed.", }, }, }; export default { name: "Prop Definition Example", description: `This component captures an RSS URL and logs it`, version: "0.1", props: { rss, url: { propDefinition: [rss, "urlDef"] }, }, async run() { console.log(this.url); }, }; In this example, the url prop depends on the urlDef prop defined in the rss object. The propDefinition property is used to link the url prop to the urlDef prop.

3

I don’t believe that’s correct. I have one prop that depends on the value of a previously configured prop. How do I reference the value of a prior configured prop in another prop?

4

I apologize for the confusion earlier. To reference the value of a previously configured prop in another prop, you can use the options method in the dependent prop and pass the configuredProps to it. Here’s an example using Trello boards and lists: board: { type: "string", label: "Board", async options(opts) { // ...fetch boards and return options... }, }, lists: { type: "string[]", label: "Lists", optional: true, async options(opts) { const lists = await this.getLists(opts.board); // ...fetch lists and return options... }, } In your component, you can reference the board prop in the lists prop like this: board: { propDefinition: [trello, "board"] }, lists: { propDefinition: [ trello, "lists", (configuredProps) => ({ board: configuredProps.board }), ], }, In this example, configuredProps contains the props the user previously configured (the board). This allows the lists prop to use it in the options method.

5

This latter example (with Trello boards and lists) is the way

6

Appreciate you stress-testing Mario on component questions!

7

Thanks . I setup my component, however I’m still getting an undefined value. I may not be fully understanding this.

My app props:

  propDefinitions: {
    apiKey: {
      type: "string",
      label: "API key",
      description: "Project management API key",
      secret: true,
      optional: false,
    },
    projectId: {
      type: "string",
      label: "Project ID",
      description: "Your project's ID",
      optional: false,
      async options({ $ }) {
        try {
          const { data: { viewer: { projects: { nodes } }}} = await this.request($, 'query projects {viewer {projects {nodes {value: id, label: name}}}}', {});
          return nodes;
          
        } catch (error) {
          console.log("ERROR:", error)
          throw new ConfigurationError(`Could not find projects.`);
        }
      }
    }

The this.request method uses this.apiKey.

The component implementation is:

  props: {
    launchnotes,
    projectId: {
      propDefinition: [
        launchnotes,
        "projectId",
        ({ apiKey }) => ({ apiKey })
      ],
    },
    apiKey: {
      propDefinition: [
        launchnotes,
        "apiKey"
      ]
    }
  },

pd dev is calling the projectId options method before it asks for the apiKey prop

8

Could you place apiKey above projectId in your component? It’s odd because it’s an object, but the order of props does matter in this context

9

Ah!

10

Let me give that a shot