# How to show / hide inputs based on the api response solely

**URL:** <https://community.hubspot.com/t/how-to-show-hide-inputs-based-on-the-api-response-solely/110696>\
**Category:** CRM\
**Created:** [July 4, 2024, 1:47pm UTC](https://community.hubspot.com/t/how-to-show-hide-inputs-based-on-the-api-response-solely/110696 "2024-07-04T13:47:55Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![AqsaQayyum](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@AqsaQayyum](https://community.hubspot.com/u/AqsaQayyum)\
**Post date:** [July 4, 2024, 1:47pm UTC](https://community.hubspot.com/t/how-to-show-hide-inputs-based-on-the-api-response-solely/110696/1 "2024-07-04T13:47:55Z")

</div>

I am creating custom action. I want when this custom action to send an api call to my platform which will return a “Included” or “Excluded” response and based on the response of api, If it’s “Include” then it 4 string type fields should be visible on my action form else those 4 fields should not bbe visible on the action form.  
I tried like following but it is not working the way I want because it is including select dropdown. I don’t want user to select any field and then 4 fields should be visible on the action form.  
I want my api to be called silently which will return “Included” or “Excluded” and based on that api response 4 fields to be shown or not in the action form. Thank you in advance.  
I tried followng code

return {

actionUrl: ‘[https://webhook.site/d4acb54d-e210-4d04-b0e4-7d42351f3ddb](https://webhook.site/d4acb54d-e210-4d04-b0e4-7d42351f3ddb)’,

published: true,

objectTypes: [‘CONTACT’],

inputFields: [

{

typeDefinition: {

name: ‘selectTemplate’,

type: ‘enumeration’,

fieldType: ‘select’,

optionsUrl: `${backendUrl}/template/postCardOptions`,

dynamicOptions: true

},

supportedValueTypes: [‘STATIC\_VALUE’],

isRequired: true

},

{

typeDefinition: {

name: “propertyAddress”,

type: “string”,

fieldType: “text”

},

supportedValueTypes: [“STATIC\_VALUE”],

isRequired: false

},

{

typeDefinition: {

name: “propertyCity”,

type: “string”,

fieldType: “text”

},

supportedValueTypes: [“STATIC\_VALUE”],

isRequired: false

},

{

typeDefinition: {

name: “propertyState”,

type: “string”,

fieldType: “text”

},

supportedValueTypes: [“STATIC\_VALUE”],

isRequired: false

},

{

typeDefinition: {

name: “propertyZipCode”,

type: “string”,

fieldType: “text”

},

supportedValueTypes: [“STATIC\_VALUE”],

isRequired: false

}

],

outputFields: [

{

typeDefinition: {

name: ‘myOutput’,

type: ‘string’,

fieldType: ‘text’

},

supportedValueTypes: [‘STATIC\_VALUE’]

}

],

inputFieldDependencies: [

{

dependencyType: “SINGLE\_FIELD”,

controllingFieldName: “selectTemplate”,

dependentFieldNames: [

“propertyAddress”,

“propertyCity”,

“propertyState”,

“propertyZipCode”

]

}

],

labels: {

en: {

inputFieldLabels: {

selectTemplate: “Select Template”,

propertyAddress: “Property Address”,

propertyCity: “Property City”,

propertyState: “Property State”,

propertyZipCode: “Property Zip Code”

},

actionName: “My Extension”,

actionDescription: “My Extension Description”,

appDisplayName: “My App Display Name”,

actionCardContent: “My Action Card Content”

}

},

functions: [

{

functionType: “PRE\_ACTION\_EXECUTION”,

functionSource: `exports.main = async (event, callback) =\> {

try {

const includeFields = true;

const inputFields = {

propertyAddress: includeFields ? ‘’ : null,

propertyCity: includeFields ? ‘’ : null,

propertyState: includeFields ? ‘’ : null,

propertyZipCode: includeFields ? ‘’ : null,

};

callback({ inputFields });

} catch (error) {

console.error(“Error in PRE\_ACTION\_EXECUTION function:”, error);

callback({ error: ‘Failed to execute pre-action function’ });

}

}`

}

]

};

---

<div class="post-metadata">

**Author:** ![Humashankar](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/humashankar/32/30856_2.png) [@Humashankar](https://community.hubspot.com/u/Humashankar)\
**Post date:** [July 4, 2024, 2:02pm UTC](https://community.hubspot.com/t/how-to-show-hide-inputs-based-on-the-api-response-solely/110696/2 "2024-07-04T14:02:40Z")

</div>

Hi @AqsaQayyum

Looks like PRE\_ACTION\_EXECUTION function, which runs before the API call is made, which is causing the includeFields variable is always set to true, making the conditional logic ineffective

Instead of relying on a pre-defined includeFields variable,

you can use a fetch function within the PRE\_ACTION\_EXECUTION function to call your API and dynamically set the visibility of the input fields based on the response.

This approach enables you to retrieve the necessary data and adjust the input field visibility accordingly, making your code more adaptive and responsive to the API’s output

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

---

<div class="post-metadata">

**Author:** ![AqsaQayyum](https://avatars.discourse-cdn.com/v4/letter/a/bc8723/32.png) [@AqsaQayyum](https://community.hubspot.com/u/AqsaQayyum)\
**Post date:** [July 8, 2024, 8:21am UTC](https://community.hubspot.com/t/how-to-show-hide-inputs-based-on-the-api-response-solely/110696/3 "2024-07-08T08:21:34Z")

</div>

Hi @Humashankar ,  
Thank you for your reply.  
If I use PRE\_ACTION\_EXECUTION then it would be triggered when all the inputs fields are filled and being sent to the server for post processing, but I want to show/hide form input fields when the input changes.

For example:  
I have an input, let say categories so based on the category name/value the dependent field should be hidden or visible on the form.  
Best Regards,  
Aqsa Qayyum

---

<div class="post-metadata">

**Author:** ![Humashankar](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/humashankar/32/30856_2.png) [@Humashankar](https://community.hubspot.com/u/Humashankar)\
**Post date:** [July 8, 2024, 12:28pm UTC](https://community.hubspot.com/t/how-to-show-hide-inputs-based-on-the-api-response-solely/110696/4 "2024-07-08T12:28:02Z")

</div>

Hi @AqsaQayyum

Yes - that is a great point is a constraint,

Lets try to find other options with conditional logic in the workflow for this situation.

**Regards**
