Form with dropdown reference fields and conditional fields

Hi all,

I’m creating the first form for my inventory management app and I’m struggling with how to put all the different bits together.

This form is for editing/adding new products to the system. A client’s user can add a new product and so can a warehouse’s editor. A client can have multiple users and a warehouse can have multiple clients.

My current Bootstrap generated form displays the client_id reference field (from the products table) but it is a number. I’d like it to display the client_name instead (from the clients table) as a dropdown text field. This dropdown field is visible and editable by warehouse editors but is not visible or editable for client users. When a user adds a new product, the client_id field should be set to their respective value in the users table.

I read some posts about making the client_id field hidden and binding it to a text dropdown for the client_name, but I’m not sure how that works exactly and if its the best option for my situation.

So my questions are:

  1. How do I display the client_name field as a dropdown field on this form so it can write the client_id reference field back to my products table?

  2. If the client_id (client_name) cannot be edited by users, will a conditional hide and disable on the form be sufficient? Or do I need to add a conditional rule somewhere else (API action) where only editors can set/update this value? I also have other fields which need to be non-editable by users based on certain conditions.

Here is screenshot of my DB structure and form page:


Have a look here to populate the select menu

The value part will contain the client ID, the text part will show the client name.

When the form is submitted, it will enter the value part into the database.

2 Likes

Thanks for your reply @ben. I understand you’re in Australia too - I’m in Sydney.

I did follow the Dynamic Select Menu tutorial before and got the following results when I used the server connect query that is displaying my list of products:

I believe I’m getting the duplicated Client Names in the dropdown because my query is displaying all the records in the product table. The client_name field is returned from the query where I joined clients table with the products table using the client_id as the reference field.

I tried to find a way to remove duplicates from the dropdown but I’m guessing this is not the correct approach.

Also, when I click on the table row to edit the existing product, the dropdown should display the correct client name. The ‘Product client ID’ is correct, but the ‘Client name’ is just displaying the first dropdown value. I understand I may need to do some additional data bindings, but the other fields in the form are linked OK.

Sorry for the late reply, had a hectic day today.

You can get in touch with me if you like. These are my details:

image

In the meantime, have a look at this video. It may help you:

The second dropdown could be replaced by by form fields. The filtering will remain the same.

1 Like

No need to apologize at all @ben

Thanks for offering your contact details, I really appreciate that. And your video will come in handy too.

I actually managed to get something working by adding a new API that returns all client names and I added a condition to the query where the editor can only view clients that has their warehouse_id.

And to submit the client_id based on the dropdown field, I followed the suggestion in the Disable or Readonly with Select Dropdown post to use the same name and id for both the dropdown and hidden client_id fields.

1 Like