Can this be done? Choose and Add

I’d like a form that allows my user to choose from a list of contacts which is stored in my contacts table, but if they do not find a current contact allow them to add a new record.

I tried using the AI component and I could get it to present the way I want, and it looks exactly as I expect, but I cannot get it to pull the current list of contacts, it just places random names in that space. This is connected to the table Contacts.


Would placing a “Add New Contact” button component work in this case, or does it have to be embedded into the list?

You can try my setup here.

Prompt this into your AI component as a first prompt.

<body x-data="state" class="" :class="{ 'cursor-pointer': hasBodyAction }" style="height: auto !important;" data-iframe-overflow="">
    <div x-show="themeLoaded" class="@container w-full body-base antialiased" style="">
      <div :class="{ 'px-4 py-1 sm:px-5 md:px-6 lg:px-7 xl:px-8': mode === 'standalone' }" class="px-4 py-1 sm:px-5 md:px-6 lg:px-7 xl:px-8">
        <div class="w-full">
        <label for="license-plate" class="block text-[rgba(0,0,0,0.95)] text-xs font-semibold mb-2 text-[12px]">
          14. License Plate No.<span class="text-[11px] font-medium text-[rgba(51,51,51,0.70)] px-2 py-1 rounded-full">Required</span>
        </label>
        <div x-data="{ suggestions: [] }" class="relative">
          <input type="text" id="license-plate" x-model.trim="inputPlate" x-on:input="suggestions = inputPlate ? platesBase.split(',').map(plate => plate.trim()).filter(plate => new RegExp(inputPlate, 'i').test(plate)).slice(0, 5) : []" class="w-full px-4 py-2 bg-[#e3e3e3] text-gray-900 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent text-sm" placeholder="Enter license plate number">
          <ul x-show="suggestions.length > 0" class="absolute z-10 w-full mt-1 bg-background border border-gray-200 rounded-lg shadow-lg" data-iframe-overflow="" style="display: none;">
            <template x-for="suggestion in suggestions" :key="suggestion">
              <li x-text="suggestion" @click="inputPlate = suggestion.trim(); suggestions = []" class="px-4 py-2 cursor-pointer hover:bg-gray-100 text-gray-600"></li>
            </template>
          </ul>
        </div>
      </div>
      </div>
    </div>
  
  <script src="//cdn.jsdelivr.net/npm/@iframe-resizer/child@5.2.1"></script>
<div style="clear: both; display: block; height: 0px;"></div></body>

Then connect two things:

A comma-delimited column of your choices.
A field where you want the choice to write to.

It does not have to be embedding in the list, but the way the AI returned it (obviously with the wrong list) is perfectly how I’d do it in a third party form so it’s a nice comfortable way to do it. Just wish it could find my list easily!

Thank you I will spend some time on this tomorrow and may be back with more questions!

1 Like

Is this the right code? I’m getting an output about license plates, not fed ex or shipping related something.

Truthfully about to lose my brain over not being able to figure out something that is so completely simple in even JotForms. Look at a list, select from list and use the field to connect the relation, but if the relation doesn’t exist open a form to add it. Why is this so hard for me? I’ve watched too many videos and read too many vague posts to figure it out so I’m just to the point of confusion now.

If you look at @ThinhDinh’s code, it’s specifically for license plates, but it’s the same concept. You can either adjust the code for your use or just ask the AI to change what you want to be different.

I’m only getting a list separated by commas when I use this code. I’m not super familiar with using code for this type of thing and that’s obviously a limitation to my skillset. I pasted the code exactly as ThinhDinh posted and then I changed the fields, not names. I still only get a comma separated list from the joined list I created.

I find that the AI component behaves differently inside of an edit/form screen. Sometimes it loses context. Is that what’s happening here you think?

That’s a good observation. I did try to follow your video on building a beastly choice component in my form a couple of days ago, I could get the component to build and look how I wanted it to look, but I could not get it to accept any data or populate any of my tables. I gave up on it, but the use case I have seems to be something many businesses need. One location with multiple and possibly changing contacts - in my case, its often GM’s who are moving around to different restaurants or stores.

Is it possible for you to share access to that team to me in a personal message so I can go in and see what I can do?