how to create dinamyc inputs in my custom action

Developer Support APIs & Integrations
1

Hi!
I am seeking assistance with creating dynamic input fields in my custom workflow actions based on the selection of an option from a dropdown (select) input. Specifically, I need to display additional input fields when a specific option is selected in the select input.

Captura desde 2024-07-03 14-32-38.png
Captura desde 2024-07-03 14-32-38.png396×563 32.2 KB

How can I configure and manage the visibility of additional fields dynamically based on the selected option in this select input within HubSpot’s custom workflow actions?

Thank you for your assistance.

2

Hi @PDelfinHipoli

While HubSpot’s custom workflow actions don’t currently support dynamic input fields based on user selections, kindly try other options by combining conditional logic and hidden fields, you can create a flexible and user-friendly experience.

Foremost, define all the input fields you may need, including the initial dropdown field and any additional fields that should appear based on the selection.

Consequently, set up conditional logic in the workflow action editor using the “If/Else” branch and “Enrollment Property Value” condition to check the value selected from the dropdown field.

After all, manage field visibility by setting the visibility property of each additional field based on the outcome of the conditional logic, showing or hiding it accordingly.

With this, you can create a dynamic and conditional input field experience in your workflow action.

Hope this helps - Happy to help further!!
Thank you very much and have a great one!
Warm regards

3

Hi Humashankar,

Thank you for your response. What I specifically need is to trigger a request to a URL when the select input value changes. The information returned from this URL should be used to create new input fields dynamically. Therefore, declaring all fields upfront isn’t feasible.

Is there a way to achieve this dynamic field creation based on the response from a URL within HubSpot’s custom workflow actions?

Thank you for your assistance!

4

Hi @PDelfinHipoli - Thanks foro adding more insight,

HubSpot’s custom workflow actions currently lack the ability to create dynamic input fields based on a URL response, if you wish to explore other possibilities then the best approach is to explore third party integration tools or building custom code.

Regards

5

I’m not sure if this helps but I would do something along the lines of:

1: Set-up your HTML structure

  • Create a Dropdown menu
  • Add a `select` element to your HTML with various options that a user can select.
  • Add a `div` element to your HTML to hold the dynamically created input fields.

2: Add an event listener to the dropdown

  • Attach event listener
  • Write JS to listen for changes to the dropdown menu. When a change occurs, trigger a function to fetch data based on the selected value.

3: Fetch data from an external API

  • Create/write a function to fetch data
  • Use JS to define a function that makes a request to your API endpoint when the dropdown value changes.
  • Ensure the API endpoint receives the selected value and returns the corresponding dynamic fields.

4: Create dynamic input fields

  • Process the API Response
  • In the function that handles the API response, create new input fields based on the returned data.
  • Append these input fields to the container element.
  • Clear Previous Fields
  • Ensure that previous fields are cleared from the container before adding new ones.

5: Custom-coded action

  • Insert a custom coded action into your workflow to handle the dynamic field creation logic.
  • Write a custom-coded action data from your external API based on the selected value.
  • Structure the response to create dynamic fields and return these fields to the front-end.
  • Use the dynamic fields output in subsequent steps of your workflow, as needed.

6: Implement dynamic field handling

  • Ensure your front-end code fetches the dynamic fields from HubSpot’s custom coded action output and these fields are rendered.
  • Use JS to dynamically create and display input fields in the container element based on the fetched data.

I would also look into some of the serverless function capabilities.