Skip to main content

Custom Label and Dropdown

Intro​

In data management and UI customization, you can control which field values appear in dropdowns. This feature allows you to tailor the experience by choosing specific fields like Collection, Reference, and Derived Fields.

Whether simplifying the interface or highlighting key data, you can easily configure dropdowns for a personalized and efficient interaction, aligning the system with your unique needs.

Let's delve into this usecase for a thorough understanding.

In this video tutorial you will learn to control the field values you wish to display in the dropdown options. You can select the fields you want to include in the dropdown, such as Collection Field, Reference Field, and Derived Field.

1. Create Collection 1​

Go to collection and click on Add New to create collection 1.

DrapCode Builder Collection Field

2. Create Collection 2​

As above, go to collection and click on Add New to create the second collection.

DrapCode Builder Collection Field

3. Create Fields For Collections​

Now you can begin to add fields in your collection. For this choose the field type that can be say, Text and name them.

DrapCode Builder Collection Field

4. Create Reference Field of Collection 2 in Collection 1​

In your collection, create a reference field by going to Configuration. Add the collection name and click Update.

When you name the reference field you would also have to specify the collection (2) you are linking to collection 1 and its related field.

DrapCode Builder Collection Field

5. Drop the Collection Form for Collection 1​

Drop any Components, say, Collection Form. Open its Settings and choose the collection to bind to it.

DrapCode Builder Collection Field

6. Choose the Collection 1 Reference Field for Collection 2​

DrapCode Builder Collection Field

7. Change the Field Dropdown Calue of Collection 2​

You can update the Dropdown Label Field from Settings of the field to change its value form the default to some other field.

DrapCode Builder Collection Field

8. Preview Data​

To view the Dropdown with the selected Field of Collection 2 in Collection 1 Form; choose Preview. The field which is selected, the values will show up in the dropdown.

DrapCode Builder Collection Field

9. Test the Changes​

To test the feature, add a new record and click Preview or reload the preview page to view it. You can add a new record from the builder in Collection 2 and that new record will also show up in the dropdown in Collection 1 form.

DrapCode Builder Collection Field

Conclusion:​

Dropdowns with preset options and custom labels make it easier for users to pick the right information. This way, there are fewer chances of making mistakes or typing errors. Users see a clear list of choices, making it less likely for them to choose the wrong or invalid options. In simple terms, it helps people enter data accurately and quickly.