Page 1 of 1

How to add autocomplete to admin fields?

Posted: Sat Jun 21, 2014 9:32 am
by gowthamgutha
I would like to add autocomplete to text fields in the admin module. That is, I would like to add autocomplete that queries from an external site to the admin ProductImpl Name textfield so that when the user enters the name, he will be suggested with the product names.

Also, most importantly, when he selects any product from the autocomplete, the category, retail price etc should automatically be updated without the need of clicking the save button.

I thought of querying for a product object instead of just its name. So, that when user selects a certain product name in the autocomplete while entering, the corresponding fields like retail price and category must be automatically updated as and when he chooses it.

Now, my question is how do I take full control over those text fields in the admin module so that I could add the functionality I need to the text field I want just as easy as I do in a normal HTML page.

Thanks in advance. Hope you will reply as soon as possible.

Re: How to add autocomplete to admin fields?

Posted: Sat Jun 21, 2014 8:48 pm
by RapidTransit
Add custom JS viewtopic.php?f=13&t=2428

For typeahead I reccomend https://github.com/twitter/typeahead.js very nice library

Re: How to add autocomplete to admin fields?

Posted: Mon Jun 23, 2014 11:37 am
by phillipuniverse
You can override any template file in the admin to customize that functionality. The admin application defines the following template resolver:

Code: Select all

<bean id="blAdminWebTemplateResolver" class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
    <property name="prefix" value="/WEB-INF/templates/admin/" />
    <property name="suffix" value=".html" />
    <property name="templateMode" value="HTML5" />
    <property name="cacheable" value="${cache.page.templates}"/>
    <property name="cacheTTLMs" value="${cache.page.templates.ttl}" />
    <property name="characterEncoding" value="UTF-8" />
    <property name="order" value="200"/>         
</bean>


This means that you can create that directory in the admin application (WEB-INF/templates/admin) and then create template paths as they appear in the admin.

For instance, in your case you want to override the STRING field type template within an EntityForm. No problem, just create a fields/string.html file and override it as much as you want. This is the directory that the core Broadleaf admin uses for template files and all of them can be overridden if you supply the same paths: https://github.com/BroadleafCommerce/Br ... /templates.

In your case, you would probably override fields/string.html. In the case of fields, Thymeleaf context expressions (the *{}) are on an EntityForm object so you might use *{ceilingEntityClassname == 'org.broadleafcommerce.core.catalog.Product'} or *{sectionKey == 'product'} to check if you are on a product page.