Best answer

Need Help with Creating a Dynamic Searchable List in Trigger

  • 20 March 2021
  • 1 reply
  • 193 views

Userlevel 1

I'm trying to create an App using Zapier CLI.

 

I was successfully able to create a Trigger. 

 

Trigger is followed by API Key Authentication, this step also works fine. 

 

After this step, I need to show users a dynamic searchbox, for every character they type in the searchbox, I need to send the text they enter to my REST API and fetch the latest results to show it to the user.

 

I'm able to hit the API, but the searchbox text is not being sent. 

 

Here is my code. 

 

 

Initial Event - lead.js 

const listLeads = (z, bundle) => {



return [{

title: 'File Name',

description: 'File Description',

embed_key: 'abcdefgh'

}]

}

module.exports = {

key: 'lead',

noun: 'Lead',

display: {

label: 'New File',

description: 'Trigger when a new File is Created'

},

operation: {

inputFields: [{

key: 'search',

type: 'string',

helpText: 'Title or Description of File',

dynamic: 'search.title.description',

required: true,

altersDynamicFields: true

}],

perform: listLeads,

sample: {

title: 'File Name',

description: 'File Description',

embed_key: 'abcdefgh'

}

}

 

I'm able to hit the API, but the searchbox test is not being sent. 

Search Trigger File - search.js 

 

module.exports = {

key: 'search',

noun: 'Search',

display: {

label: 'Find a File',

description: 'Search for File by title or description',

},

operation: {

inputFields: [

],

perform: (z, bundle) => {

const url = 'https://f03a51102182.ngrok.io/searchFile';

const options = {

params: {

search : bundle.inputData.search,

},

};

return z.request(url, options).then((response) => response.data);

},

// In cases where Zapier needs to show an example record to the user, but we are unable to get a live example

// from the API, Zapier will fallback to this hard-coded sample. It should reflect the data structure of

// returned records, and have obviously dummy values that we can show to any user.

sample: {

title: 'File Name',

description: 'File Description',

embed_key: 'sajfh479',



},

// If the resource can have fields that are custom on a per-user basis, define a function to fetch the custom

// field definitions. The result will be used to augment the sample.

// outputFields: () => { return []; }

// Alternatively, a static field definition should be provided, to specify labels for the fields

outputFields: [

{ key: 'embed_key', label: 'File Unqiue ID' },

{ key: 'title', label: 'File Title' },

{ key: 'description', label: 'File Description' },

],

},

};

 

 

From search.js, it's hitting my REST API when I enter something in the search box, query parameter is being passed as ?search, but the value is empty. 

IMage for reference. 

Screenshot 2021-03-20 at 2.48.29 PM.png

 

 

Could you help or guide me in the right direction whether I'm doing it the right way or not? 

icon

Best answer by SamB 17 August 2021, 17:39

View original

This post has been closed for comments. Please create a new post if you need help or have a question about this topic.

1 reply

Userlevel 7
Badge +11

Just wanted to follow up here as noticed that @anirudhmaddy also reached out to our Support Team about this and they confirmed that it’s not possible to dynamically search on an API while the user is typing text into a search box. 

To allow a user to search and select an available value from an API, a Dynamic Dropdown field would need to be used. Users can start typing into the search box in Dynamic Dropdown field, which will then automatically filter the list of values to show only the ones most relevant to their search terms.

More details on how to do that can be found in our guide here: How to Use Dynamic Dropdowns in Zapier CLI