How to Hide Id in dropdow

Screenshot from 2023-10-18 03-29-43

Hii , I want to hide this id (33 , 34 , 35) in dropdown.

Is this a link field? Modify the ā€œTitleā€ and ā€œSearchā€ sections of your custom location doctype that is linked here.

yes it is linked field.

what i have to change in current location doctype view setting to hide id in dropdown.

@Yamen_Zakhour please explain in details ā€¦

@NCP Hey Nihantra this is a issue which is widely faced as showing the database Id in the frontend pose a risk if you could help a bit

Just ā€˜deslectā€™ this in your linked doctype ā†’ view settings.
image

I believe you canā€™t hide the ID without overriding the link query.

Or, if the locations are unique, set the naming series as the location name field and it should work as required. (Donā€™t forget to uncheck the show title in link field in view settings of the doctype.)

@Void_Moon
Thankyou for reply

Location is unique but i will set it as name then i face another issue to show other option in last

if do location as name i canā€™t set other in last

@Praty888
Thankyou for reply.
if i hide that then face this issue

show only id in dropdown

I think only by overriding the link query (using set_query method on the link field and returning a list of items in the order you want) you can achieve your requirement.

https://frappeframework.com/docs/user/en/guides/app-development/overriding-link-query-by-custom-script

Read the above for more info on how to do it.

P.S. For a quick fix, you could try any special characters with the ā€œOthersā€ name and see if it comes to the top of the bottom of the link.

In the ā€˜title fieldā€™ you can provide the ā€˜field nameā€™ which you want to show in the drop-down.
Please refer to the same screenshot which I had provided in the previous screenshot.

If you provide ā€˜location-nameā€™ as title, then the location-name value will be displayed in the referred drop-down list instead of the id.

Hi Community,

I recently worked on a customization to hide the .small class container (which typically holds the ID) for all link fields in Frappe Desk. Hereā€™s how I implemented this using a custom app in Frappe:
Steps:

Create a Custom CSS File
In my custom app named times_crm, I created a CSS file at the following path:

apps/times_crm/times_crm/assets/times_crm/css/times_crm.css

The contents of times_crm.css are:

.awesomplete .small { display: none;}

This targets all link fields that use the .small class to hide the ID container.

Update hooks.py
In the hooks.py file of my custom app, I added the following line:

app_include_css = ā€œ/assets/times_crm/css/times_crm.cssā€

Build Assets
After adding the CSS file, I ran the following command to build and copy the assets:

bench build

This copied the file from:

apps/times_crm/times_crm/assets/times_crm/css/times_crm.css

to:

sites/assets/times_crm/css/times_crm.css

Refresh and Clear Cache
After running bench build, I refreshed my web browser and cleared the cache to ensure the changes took effect.

Outcome:

The CSS works perfectly, hiding the .small class container for IDs in all link fields.

This is a generic solution that can be applied to any Frappe Desk setup where you want to hide the ID container for link fields.

I hope this helps someone looking to achieve similar functionality.

1 Like