Build a new Interface for allowing user to make Data entry faster

The process of entering relevant data in ERPNext proves to be very lengthy in some cases.

For example in the company there are around 7000 Work Orders created every year.

Each Work Order in turn has 12 to 16 Job Cards (depending on item being manufactured).

Currently what is happening is that if a use has to make entry in a particular Job Card then the user will have to first find the Work Order then open it and then go to Job Card and then make an entry in Job Card. This will again create Material Transfer Entry and then one has to Submit it, etc.

Add to this the fact that in some Items which have multiple sub assemblies the complexity seems to multiply multi folds!

This task becomes very laborious looking at the amount of data that is produced and the process of reaching to the relevant DocType and entering data in it.

Instead of so many steps what I am looking to do is show user data of Work Order and the Job Cards in a Table and allow a user to click on the Job Card to access it and perform necessary activity.

In this view it would be possible for user to see all Work Orders that are open and all the Job Cards for each Work Order and all batches that are completed and ones that are pending with Qty.

Any ideas how we can achieve something like this?

Have we to create a New DocType for this?



The easiest way to do this would probably be to create a custom desk page. You need to have your own app, but it will allow you to write any arbitrary html and JavaScript to interact with the frappe apis.

@peterg, Thanks for your suggestion.

After posting my query here I was exploring possibilities and on reading about Frappe Reports feature here. I feel that I may be able to use this feature for building this interface.

Personally I have no experience and know how regarding Desk Page.

Am I heading in the right direction?


1 Like

You might be able to do what you want with a report, but I was actually thinking of the Page api:

The documentation on pages isn’t great, but there are some good examples if you search for Page from the desk. The bank reconciliation tool, for example, is conceptually similar in some ways to what you’re trying to do.

With pages, you’re really building whatever UI you want from scratch. This takes some work but is completely flexible.


Looking at the documentation it seem that one can build the whole page using Client Script. The documentation is truly inadequate for such a powerful feature.

I will surely try this option out also. But first I want to try the Frappe Report route.

Thanks for your invaluable suggestion.


This is very very close to expectations from MES [New Feature Development] Manufacturing Execution System(MES)

@rohit_w fyi


Thanks for the link but it seems the project was not finished.

By the way is any part of that idea implemented in latest version of ERPNext?


I agree that the documentation could use a boost, especially regarding how to get started. I’m working on a few pages right now and I’ll try to come up with some minimal examples for the docs in the process.

That said, part of the reason that the API is so minimal is that it’s pretty much a blank slate. You can add whatever code you want directly to the parent defined in make_app_page, and from there it’s all just regular js/html/vue/whatever.

The new frappe-ui library seems to be a very interesting addition for all this:


If there is some kind of basic documentation it would help in getting started.

Because it is Blank Slate a small working example in the documentation would help immensely.

This UI Library is powered by VueJS and in this post [New Feature Development] Manufacturing Execution System(MES) - #6 by rmehta @rmehta had advised to avoid using VueJS as there is no class hierarchy support in VueJS.

@peterg do you feel I should explore and try to use this in my case?


As a implementor my thought is that it is best to use optimized Data Import Templates in excel for such things rather than changing UI. Users may need training but they get used to it :slight_smile:

1 Like


I had asked them regarding this option before I posted here but they do not want to use spreadsheets to make entries.


1 Like

I’m not sure if Rushabh’s opinions on Vue have changed or if others in the organization have been championing it, but more and more in frappe is being written with the framework. If you’d prefer not to use Vue, though, you can design Pages with vanilla JavaScript as well.

Pages are great for highly interactive UX with specialized layout. See the POS, the bank reconciliation tool, or the customize form tool for examples. The only downside is development time and energy.

1 Like

I check this but it contains only 167 lines!! There is another file included bank-reconcilation-tool.min.js but it is unreadable so I am not able to understand much here.

I am still stranded at how to build a web page using the Page API.

I also checked the Frappe UI on Github but this set of components does not have support for Grid.

What I want to achieve is create a grid which will show data from database and on each row I want to give a button to allow a user to click on the button to start or complete a Job.

Most of the data will come from Work Orders, Job Cards and Quality Inspection.

I want to allow a user to search in grid and also sort on a column the user clicks on.

Can someone please get me started in building a web page using Page API?


I found these two videos which I hope will get me up and running in building a new Interface.



In my opinion, the Page API quickly becomes a tangling mess a jquery code. Feels like going 20 years back…

I hope they integrate Frappe-UI soon enough in ERPNext. The app they build with it looks super slick: GitHub - frappe/desk: Customer Service Software. I wish there was a getting-started tutorial to build something like this.

Ok, back on the subject :slight_smile:

I would suggest you look into creating a ‘dummy’ Single Doctype, then create a Child Table, and fill the child table on load of the form with whatever query you want. Then hide the save button of the form. ERPNext is using this technique, you can check Quick Stock Balance which is defined as a single doctype only to help building the UI form (from my understanding).

Another option would be to add an HTML field to the Single Doctype, and load a Vue component inside it. You can get some guidance how to do this here: Vue component inside from html field


I put together a simple example, but it got a bit long so I spun it off into a separate thread:

Let me know if anything isn’t clear.

1 Like

That’s a great idea about the single doctypes. That would allow a lot to be done purely client side, without the need for a custom app.

As far as pages go, I don’t think they’re any more or any less jquery-ladened than anything else. The API itself doesn’t do much, mostly just managing the chrome around the page. For the page content itself, you’re on your own to use whatever you feel comfortable with. For anything complicated, my preference would certainly be Vue.

We were creating ~100 Work Orders per day, and found that the workflow was to clunky to run this effectively. We ‘optimized’ by having a single job car per Work Order, and a script to create the material transfer entry automatically.

However, the issue isn’t the existing workflow, the whole Manufacturing Module workflow requires a rethink.

As a manufacturing user, I can discuss ideas with developers interested in taking this up.

1 Like

I could not agree more.

1 Like

Off topic apologies!

This isn’t a tutorial by any means, but there’s a “starter” library with instructions for setup. I haven’t tested on production yet, but I was able to get the trivial example running in ~10 minutes:

I’m excited for this direction of development. The possibility of integrating a modern frontend with a frappe backend has limitless potential.