website development invoice sample


(website development invoice sample)For sales staff,useExcelCreating an invoice is very common。But the process usually involves many manual operations that are easy to errors.,For example input data,copy/Paste, etc.。How to implement one can automatically fill data from the database to the invoiceExcelIn the template,No need to work hard to manually,Quell from heavy manual entry,And avoiding errors This is an urgent need for everyone。Insects have been pursuing ideas:Real automation is to solve user pain points,Release heavy labor labor。In this article, we will introduce an foreigner.JavaWriting the automatic program to implement the case of automated invoice generator,A case created in the caseWebapplicationInvoice Builder,UseExcelTemplate file,JavaandKeikaiConvert this manual invoice entry process to integrated automation process。

Overall architecture


The figure below shows the architectural diagram of the invoice generator application:

(website development invoice sample)website development invoice sample(website development invoice sample)

first,Import a sourceExceldocument,It contains2Blank,Customer table and product table。Salesman will choose customers and products from these two tables。

then,Inquiry according to database,Pack customer and product data into the corresponding table。

finally,Import2Invoice template;They are salesmenExcelCreated。These templates will be used later。

work process:After selecting customers and products,Application will create invoices by combining customer and product data with the selected invoice template。

An illustration of the application is now:

website development invoice sample


KeikaiAlso supportMVCmodel,In this applicationMVCmodel,details as follows:

website development invoice sample

(website development invoice sample)view:useZULWrittenXMLdocument。ZKWillzulFile conversion toUIComponents and present in the browser。

Controller:ExpandZKofJavakind,SelectorComposerFor listeningViewTriggering events and controlZK UIAssembly。pass throughSpreadsheetandRangeAPIcontrolKeikai。

Model:In this exampleCustomerService,But it can also be any otherJavaBusiness class,For example, authentication,Data query, etc.。


Build interfaceUI

interfaceUIThe build is actually selected.zul,Of course, you can also choose pureJava(E.gSwing)BuildUI。You can use the creation of componentsnew Image(),Add components toGroupbox(container)appendChild(),And use to register event listeneraddEventListener()。UseAPI,You can create a template preview map on the template list number in the group box.:

website development invoice sample

private Groupbox templateBox;
private String[] templateFileNameList = {"invoice-template1.xlsx", "invoice-template2.xlsx"};
private void buildTemplatePreview() {
... -> {
Image preview = new Image(fileNameWithoutExt + "-preview.jpg");
preview.setAttribute(TEMPLATE_KEY, fileName);
preview.addEventListener(org.zkoss.zk.ui.event.Events.ON_CLICK, event ->
selectTemplate((Image) event.getTarget()));

Because business people are often usedExceltemplate,The main program interface is usedKeikai Spreadsheet,This can continue to use its existing template。

Keikaibased onZK UIframe,This framework provides completeUIComponent set andXMLFormatUIlanguage。

according toZKSyntax,useXMLThe followingUIComponent builds thisWebApplicationUI:

(website development invoice sample)<hlayout vflex="1" width="100%" apply="io.keikai.devref.usecase.invoice.InvoiceBuilderController"> <spreadsheet height="100%" id="spreadsheet" hflex="8" maxVisibleRows="6" maxVisibleColumns="8" src="/WEB-INF/books/invoice-source.xlsx" showSheetbar="true"/> <vlayout hflex="2" height="100%"> <groupbox id="templateBox" title="Template" style="text-align: center"> </groupbox> <button id="create" label="Create" style="float: right"/> </vlayout> </hlayout>


<hlayout>:Horizontal arrangement of their subsets,<vlayout>Vertical arrangement assembly。

<groupbox>:Component packet with borders and titles。

Each tag supports some properties,E.g:

(website development invoice sample)src:Specify to import toKeikaiofExcelfile path。

(website development invoice sample)maxVisibleRows:controlkeikaiMaximum number of rows when rendering worksheets in your browser。


To specify a controller for the page,Only needapplyThe attribute is specified a fully qualified class name:

<hlayout vflex="1" width="100%" apply="io.keikai.devref.usecase.invoice.InvoiceBuilderController">
(website development invoice sample)Then,This controller can control<hlayout>Son assembly。I usually specify a controller on the root component of the page.。

Automatically populate customers

(website development invoice sample)You can now display spreadsheets and source files,Then you need to automatically fill the data to the table.。

sourceExcelThe file contains only an empty customer table,The table style is like column name and title color。One of the good things here is,thisExcelThe file is used by my sales staffExcelCreated-He knows more clearly what you want to see in this table.。

website development invoice sample

Load customer list from service class,And populate the list to the table:

private void populateCustomers() {
List<String[]> customers = CustomerService.getCustomerList();
Range startingCell = customerTable.toCellRange(0, 1); //the 1st column is for checkbox
for (String[] c : customers) {
RangeHelper.setValuesInRow(startingCell, c);
startingCell = startingCell.toShiftedRange(1, 0);
(website development invoice sample)CustomerService Can also be any of the data entities you provideJavakind。

setValuesInRow() Use strings array(E.gB2,C2,D2 ...)Pave multiple cells in one way

toShiftedRange(1, 0)TransferstartingCellNext line。

Fill data with naming range

Pack data to spreadsheetsUITime,Need to specify a target cell to be filled with。Choosing a range of naming is because it is a flexible approach。

(website development invoice sample)first,Create each template file in several specified ranges, for exampleName,PhoneandEmailCustomer details。End users choose customers and products,The controller extracts each line as a map。Index is title,This value is the corresponding cell value,E.g

{Name: Debra, Phone: 338-8777, Email: debra@...}。

Then,Cloning from the selected template,And populate customer details into the corresponding naming range。

(website development invoice sample)website development invoice sample

@Listen(org.zkoss.zk.ui.event.Events.ON_CLICK + "=#create")
public void createInvoice() {
Book invoiceBook = Books.createBook("invoice.xlsx");
for (Map customer : selectedCustomers) {
Sheet invoiceSheet = Ranges.range(invoiceBook).cloneSheetFrom(customer.get("CompanyName").toString()
, templates.get(getSelectedTemplateFileName()).getSheetAt(0));
populateNamedRange(generateAgentData(), invoiceSheet);
populateNamedRange(customer, invoiceSheet);
private void populateNamedRange(Map<String, Object> fieldMap, Sheet sheet) {
List<String> namedRanges = Ranges.getNames(sheet);
fieldMap.forEach((name, value) -> {
if (namedRanges.contains(name)) {
Range range = Ranges.rangeByName(sheet, name);

User rights control

In this application,Customer data is filled from the database,Do not want users to change,Can only choose these records。therefore,Limit their operations that can be performed on the user interface by way of the following ways:

(website development invoice sample)Hide toolbar and context menu

(website development invoice sample)By designation to make the worksheet tag visibleshowSheetbar="true"。by default,Other content(Toolbar,Formula column and context menu)Be unassable。so,Users will not be changed uninformUIContent displayed。

<spreadsheet ... showSheetbar="true"/>

Enable worksheet protection and disable add worksheet

Enable worksheet protection in the following ways:protectSheet()Set all the worksheets to read-only,And prohibit users from adding worksheetsdisableUserAction()。

private void limitAccess() {
for (int i = 0; i < spreadsheet.getBook().getNumberOfSheets(); i++) {
spreadsheet.disableUserAction(AuxAction.ADD_SHEET, true);

Editable area under worksheet protection

existExcelmiddle,You can uncheck the locked state to make cells to edit under worksheet protection.。Other units will remain read-only。Use this setting,You can allow a range of editable areas that can be allowed in protected drawings.。Import intoKeikaiback,This setting will be retained,So you can never prepare the source fileExcelEnd completion。

website development invoice sample


In the application,have2indivualExceltemplate,I want to import them once,Then use them when needed。

Keikai ImporterWillExcel xlsxFile conversion toBook。canBookAssignSpreadsheetAnd present it to the browser。or,Can be operated directlyBookwith Range,No need to assign it toSpreadsheet。The most common usage is from template book cloning table or replicate cell。Every needExcelThe people of the template can get content from it,No need to import template file again。In the application,WillBook2TemplateExcelThe object of the file is stored inMap(templateWarehouse)middle,In order to use the future:

(website development invoice sample)private static HashMap<String, Book> templateWarehouse = new HashMap<>(); private static Importer importer = Importers.getImporter(); ... private void importInvoiceTemplate() { ... for (String fileName : templateFileNameList) { if (!templateWarehouse.containsKey(fileName)) { //avoid importing again templateWarehouse.put(fileName , importer.imports(new File(WebApps.getCurrent().getRealPath(BookUtil.DEFAULT_BOOK_FOLDER) , fileName), fileName)); } } ... }

importer.imports(new File(...)) Returned oneBook。


In this article, we demonstrate how to handle existing manualExcelThe process of files is converted to haveExceldocument,JavaandKeikaiofWebapplication。The application is integrated with the backend service,Including database and user rights control。The same techniques can be applied toExcelOther solutions for the process,Transform manual workflow into automation and integrationWeb Apps。


website development company american fork


website development company american fork Florida, USA,What is the cost of a dynamic e-commerce website??At the data exitWe are e-commerce website designersThe company provides the best professional web design for small or large companies in

quality management plan for website development


quality management plan for website development Website as a facade in the Internet promotion,Is the display of corporate image,The importance is self-evident。So how to build a high quality website?What issues need to pay attention to during websit

how to choose website development company


how to choose website development company In today's fast-developing economy,Small and medium-sized enterprises have realized the importance of enterprise website to enterprise development。However,The website building market is polarized。Some