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.
Regards,
This is very very close to expectations from MES [New Feature Development] Manufacturing Execution System(MES)
@rohit_w fyi
@ankush,
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?
Regards,
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?
Regards,
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 
I had asked them regarding this option before I posted here but they do not want to use spreadsheets to make entries.
Regards,
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.
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?
Regards,
I found these two videos which I hope will get me up and running in building a new Interface.
Regards,
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
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.
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.
I could not agree more.
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.
I checked this DocType but could not understand as to what is going on here.
Can you please explain this is simple terms.
Regards,
@peterg,
Thank you for putting together a working example. This has already got me started!
I have a few questions.
Q1. Will I be able to use all the features of DataTable here like being able to add search boxes in each column, record pagination, Column sorting, etc.?
Q2. As the UI that I want to build is quite complex, will I be able to use html tags to define it and bind it to frappe.ui for validation of user input, etc.?
I will eventually discover how things work but your experience is more then mine so your inputs will prove to be invaluable for me.
Regards,
There are no constraints imposed by Frappe. I’m not especially familiar with the DataTable library, but the docs seem to suggest that you can include filters and sorts.
Do you mean frappe-ui, the Vue library? I don’t know much about how that library works yet, so I really couldn’t say. You can certainly use Vue, though, and I would definitely recommend that for anything non-trivial.
Probably I am not able to explain my question. let me try again.
It would be easy for a developer to use pure HTML tags like <div>, etc. along with appropriate CSS styles to create a custom page layout.
Now once the layout is created it would be necessary to interact with user at various levels like show them a Modal dialog or Confirmation dialog or validate that data entered by user on the page, etc.
For such interactions will it be possible to leverage the power of frapp.ui by linking it to the HTML tags defined in the page?
Regards,