1 (edited by Scott5114 09/23/2013 08:41:52 am)

Topic: Better UI for customer management (mockup inside)

Hello devs,
As it currently stands, FrontAccounting has a pretty rudimentary system to select a customer on the "Add/Manage Customers" page. It works but it is not very powerful (can only search by name) or intuitive. If search is enabled, it is quite easy to miss the tooltip telling you to press space to display the search box, and without that tooltip, you will probably never guess to do that.

I've made a mockup of an easier-to-use customer lookup system. I've used something like this in conjunction with a database with hundreds of thousands of customer entries, and the UI design works quite well in that context, so I think it would be a very useful addition to FrontAccounting.

Initial display—all customer entries are shown by default (split across several pages as appropriate, of course). If you know this is a new customer you can go ahead and click "Add New". If you want to search for an existing customer, you can search by Name or other appropriate fields (perhaps an GSTNo. or some other kind of customer ID number?) or you can browse the entries manually (which might be faster for smaller companies). Clicking the 'Edit' icon brings up the familiar customer edit form currently in FrontAccounting.

After entering search—only customers that match the search query are displayed.

This customer lookup system would be useful not just for Add/Manage Customers, but in any case where customer records are being used, e.g. when creating an invoice.

Somewhat related: it would probably be useful to add a field to the customer table for an ID/account number. For example, I sell mostly on Amazon, so it would be useful to be able to associate a customer's Amazon account number with their record. Then I could look them up simply by keying in their account number.

Re: Better UI for customer management (mockup inside)

Also Multiple Delete Option ( check-box )

Re: Better UI for customer management (mockup inside)

Multiple Search boxes to be strung together with "and/or" would be useful too.

The Amazon Account Number could be in another table related to the customer table (more than one Amazon Account Number per client) and the module made into an extension so that it may be installed at will without disturbing the existing schema.

Re: Better UI for customer management (mockup inside)

Scott5114 wrote:

I've made a mockup of an easier-to-use customer lookup system. I've used something like this in conjunction with a database with hundreds of thousands of customer entries, and the UI design works quite well in that context, so I think it would be a very useful addition to FrontAccounting.

...

Scott5114 wrote:

This customer lookup system would be useful not just for Add/Manage Customers, but in any case where customer records are being used, e.g. when creating an invoice.

+1!

I think this would be a useful UI for Suppliers, too.

The current UI for selecting a Supplier is very unintuitive, as is demonstrated by five posts I found with a quick search after I experienced a problem with it myself.  It took me half an hour delving into the code to work out that it was related to the "search suppliers" flag in the company setup.  Of course, I probably should have just searched the forum first, but it was an interesting learning experience, anyway.  :-)

5 (edited by Scott5114 02/14/2014 09:53:40 am)

Re: Better UI for customer management (mockup inside)

Since there seemed to be a reasonable amount of support for this feature, I went ahead and added it to Mantis.

Re: Better UI for customer management (mockup inside)

Or a bootstrap like typeahead like this one might work well.

Cambell https://github.com/cambell-prince

Re: Better UI for customer management (mockup inside)

If such functionality is not used often, then a kludge like:

phpMyEdit,
grocerycrud,
jqueryeasycrud,
ajaxcrud, 
Adminer

and other such CRUD apps can be used where phpMyAdmin might be overkill.

Re: Better UI for customer management (mockup inside)

This is really useful:

cambell wrote:

Or a bootstrap like typeahead like this one might work well.

Re: Better UI for customer management (mockup inside)

The typeahead sample has been edited to be self contained for modification / study in implementing it for FA.

Post's attachments

typeahead.zip 236.1 kb, 8 downloads since 2014-11-09 

You don't have the permssions to download the attachments of this post.

Re: Better UI for customer management (mockup inside)

@Apmuthu if you've changed the code please fork the repo on github so the original author (me) can track your modification.  A zip file in this forum is unlikely to be tracked by me.

Cambell https://github.com/cambell-prince

11 (edited by apmuthu 11/10/2014 01:57:23 pm)

Re: Better UI for customer management (mockup inside)

Actually I found your code interesting except that it could not be used offline (non internet environment) - so I just downloaded the necessary js and other supporting files and made it into a simple example for study and implementation. I have not really modified the code except for file paths and localization.

If I intend to use it, I certainly will fork the repo and create my branch for it. Thanks.

I have linked it on GitHub as well for cross-reference purposes.

Re: Better UI for customer management (mockup inside)

Excellent idea.

Cheers

G