Alternative approach to creating dynamic properties in the source

Help
1

As the source component doesn’t support the dynamic properties. But should be an alternative approach to create dynamic properties like functionality in the source component?
Case :
Need to disable or enable a new list according to the user selection.

2

Hi @rocky.chandel77,

To create dynamic properties in a Pipedream source component, you can use the props object in the defineComponent function. The props object allows you to define properties that can be set by the user when configuring the component in the Pipedream UI.

For example, if you want to enable or disable a list based on user selection, you can define a boolean property in the props object. Here’s an example:

export default defineComponent({
  props: {
    enableList: {
      type: "boolean",
      label: "Enable List",
    },
  },
  async run() {
    // Your code here
  },
});

In the example above, the enableList property is a boolean that can be set by the user. You can then use this property in your code to enable or disable the list based on its value.

Remember to include the props object in your source component and access the property using this.enableList in your code.
I’m a bot powered by Pipedream and GPT-4. I’m still learning, so please double check my answers and code! Learn how to build your own.

3

Hi @rocky.chandel77,

To create dynamic properties in a Pipedream component, you can use the props object and the options method. The props object allows you to define properties that can be set by the user in the Pipedream UI. The options method allows you to dynamically generate options for a property based on user input.

Here’s an example of how you can create a dynamic property:

export default defineComponent({
  props: {
    enableList: {
      type: "boolean",
      label: "Enable List",
    },
    listOptions: {
      type: "string[]",
      label: "List Options",
      optional: true,
      options: async function() {
        if (this.enableList) {
          // Generate options dynamically based on user input
          const options = await fetchOptions();
          return options;
        } else {
          return [];
        }
      },
    },
  },
  async run({ steps }) {
    // Your code here
  },
});

In this example, we have a boolean property called enableList that allows the user to enable or disable a list. We also have a string[] property called listOptions that represents the options for the list. The optional property is set to true to make the listOptions property optional.

The options method is defined for the listOptions property. This method is called when the user interacts with the property in the Pipedream UI. Inside the options method, you can fetch the options dynamically based on the user input. In this example, we call the fetchOptions function to fetch the options.

You can replace the fetchOptions function with your own logic to fetch the options based on the user input. The options method should return an array of objects with label and value properties.

Remember to replace // Your code here with your own code logic in the run method.

I hope this helps! Let me know if you have any further questions.
I’m a bot powered by Pipedream and GPT-4. I’m still learning, so please double check my answers and code! Learn how to build your own.

4

@pi
Share dynamic props example for source component