> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/tutorials/components/combobox/add-a-create-new-action-to-a-combobox.md).

# Add a Create New Action to a Combobox

Add a New contact action inside a Combobox dropdown that opens a short flow, so agents create a missing contact without leaving the case screen.

A support agent logging a case searches for the caller in a Contact combobox. When the caller is not in Salesforce yet, leaving the screen to create the contact loses the case in progress. A **New contact** action inside the dropdown opens a short flow in a dialog, prefilled with what the agent typed, then refreshes the list so the agent can pick the new contact.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FQGKYMfGJdEXpblAr2Np7%2Fcombobox-add-a-create-new-action-to-a-combobox-result-v2.png?alt=media" alt="Contact combobox with Lena Park typed, no match found, and a New contact action in the dropdown" width="540"><figcaption><p>The New contact action shows while the agent searches.</p></figcaption></figure>

## Before you start

* A Contact combobox with a **Query** data source on Contact and **Show Search** on. [Search Large Lists in a Combobox](/flow/tutorials/components/combobox/search-large-lists-in-a-combobox.md) sets it up. In this tutorial its API Name is `Contact_Picker`.
* An active screen flow that creates the contact, for example `New_Contact`:
  * a Text variable `lastName`, **Available for input**;
  * a screen with First Name, Last Name (default value `{!lastName}`) and Email;
  * a **Create Records** element for the Contact;
  * a Text variable `newContactId`, **Available for output**, that holds the new record Id.

## Steps

{% stepper %}
{% step %}

### Add the action to the dropdown

1. In the **Properties** tab, open the **Actions** group and add an action.
2. Set **Label** to `New contact` and **Name** to `new_contact`. The interaction finds the action by its **Name**, so keep it unique.
3. Set **Icon Name** to `utility:add`.
4. Turn on **Display on Search**, so the action shows while the agent types a name.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FRdnDCvAVU5a0m6BuvV8C%2Fcombobox-add-a-create-new-action-to-a-combobox-action.png?alt=media" alt="Actions group of the Contact combobox with the New contact action and Display on Search turned on" width="320"><figcaption><p>The action's label, name, icon and when it shows.</p></figcaption></figure>

Choose when the action shows:

| You want the action                              | Settings                                                      |
| ------------------------------------------------ | ------------------------------------------------------------- |
| Always visible, pinned at the bottom of the list | **Position** `Bottom`, **Fixed** on                           |
| Only while the agent types                       | **Display on Search** on                                      |
| Only when a search finds nothing                 | **Display on Search** on, then **Display When No Results** on |

**Position** and **Fixed** apply to an action that is always visible: the panel hides them once **Display on Search** is on. **Display When No Results** only appears after **Display on Search** is on.

{% hint style="warning" %}
When the agent clicks an action set to **Display When No Results**, the combobox also adds the typed text as a selected value. That suits a free-text list, not a record picker: the value becomes `Lena Park` instead of a Contact Id. For a contact, account or case picker, use **Display on Search** alone.
{% endhint %}
{% endstep %}

{% step %}

### Open the New contact flow on click

1. In the **Interactions** tab, add an interaction under **Action Click**.
2. In **Target Name**, select the **New contact** action (the picker lists actions by label). Each action needs its own Action Click interaction.
3. Set the type to **Open Flow Dialog** and, in **API Name**, select your New contact flow (the picker lists flows by label).
4. Under **Input Variables**, add a row: **Name** `lastName`, **Type** **Text**, **Value** **Search Term**. The flow opens with the text the agent typed.
5. Set **Modal Header** to `New contact`.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2F3tpS14Qvk0IbRwItUOaP%2Fcombobox-add-a-create-new-action-to-a-combobox-interaction.png?alt=media" alt="Action Click interaction opening a flow dialog with the search term passed to lastName and Refresh Query on finish" width="320"><figcaption><p>Action Click opens the flow with the typed name and refreshes the list after.</p></figcaption></figure>

See [Open Flow Dialog](/flow/component-builder/interactions-panel/open-flow-dialog.md) for the dialog size and footer options.
{% endstep %}

{% step %}

### Refresh the list when the flow finishes

1. In the same interaction, under **On Finish**, add **Refresh Query**. **Components to refresh** already holds this combobox by default: keep it.
2. Optional: add **Show Toast** after it to confirm the contact was created.

**On Finish** runs only when the flow completes. If the agent closes the dialog, **On Close** runs instead, so the list stays as it was.
{% endstep %}

{% step %}

### Reuse the new contact Id and the clicked action (optional)

* To use the new contact later in the flow, add a row under **Output Variables**: **API Name** `newContactId`, **Variable Number** `Variable 1`. After the dialog finishes, read it as `{!Contact_Picker.flowInteractionOutputVariables.variable1.textValue}`. [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md) explains the slots.
* The combobox output **Clicked Action Name** (`clickedActionName`) holds the **Name** of the action the agent clicked. With several actions, use it in a Decision after the screen.
  {% endstep %}

{% step %}

### Save and test

Save the flow and click **Debug** or **Run**. Interactions do not run in the Component Builder preview.

* Type a name that has no contact, for example `Lena Park`: **New contact** appears in the dropdown.
* Click it: the dialog opens with `Lena Park` in Last Name.
* Finish the flow: the dialog closes and the Contact combobox reloads. Search again and pick the new contact.
  {% endstep %}
  {% endstepper %}

## Troubleshooting

<details>

<summary>The action never shows in the dropdown</summary>

With **Display on Search** on, the action only shows during a search, so **Show Search** must be on. With **Display When No Results** on, it only shows when the search returns nothing.

</details>

<details>

<summary>Clicking the action does nothing</summary>

* You clicked it in the Component Builder preview, where interactions do not run. Test with **Debug** or **Run**.
* The Action Click interaction's **Target Name** points to another action. Select the right action by its label.

</details>

<details>

<summary>The dialog opens but Last Name is empty</summary>

* The input **Value** is a flow resource instead of **Search Term**.
* The flow variable is not **Available for input**, or its API name differs from the **Name** in the row.
* The agent clicked the action without typing anything: **Search Term** is empty.

</details>

<details>

<summary>The new contact is not in the list after the dialog closes</summary>

* **On Finish** has no **Refresh Query**.
* The agent closed the dialog before the flow finished, so **On Finish** did not run.
* The combobox query filters out the new record (an account filter the new contact does not match, for example).

</details>

<details>

<summary>The combobox shows a record Id instead of a name</summary>

This happens when the combobox starts with a value (a record Id passed in, or a value restored on Back) and one of its actions has **Display When No Results** on. Turn **Display When No Results** off and keep **Display on Search** on: the name shows, and the action still appears during a search.

</details>

## Related tutorials

* [Search Large Lists in a Combobox](/flow/tutorials/components/combobox/search-large-lists-in-a-combobox.md): the searchable Contact combobox this action sits in.
* [Use a Combobox Selection in a Query or Flow](/flow/tutorials/components/combobox/use-a-combobox-selection-in-a-query-or-flow.md): pass the picked contact to the rest of the flow.
* [Build Combobox Options](/flow/tutorials/components/combobox/build-combobox-options.md): choose the data source before adding actions.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/flow/tutorials/components/combobox/add-a-create-new-action-to-a-combobox.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
