Creating an Invoice Application with SpreadsheetWeb Hub

Convert a custom Excel invoice template into a responsive web application while preserving its pricing rules, discounts, taxes, lookup tables, and calculated totals. The resulting application can capture invoices in a central database instead of saving one workbook copy per transaction.

Prepare the invoice workbook

Build the invoice logic in Excel and assign named ranges to every value that will be displayed, edited, calculated, or saved. A typical model can include:

• Customer and company information
• Invoice number and date
• Product descriptions, quantities, and unit prices
• Discount and sales-tax rules
• Subtotals and final amount due

Pricing rules can remain as simple or complex as the business requires. SpreadsheetWeb uses the existing formulas and lookup tables rather than recreating them in the web interface.

Build the invoice interface

Create a new Hub application and upload the workbook. In the User Interface Designer, import the named ranges from the relevant worksheet or add controls individually.

Organize the controls into sections for company details, invoice information, line items, and calculated totals. Adjust labels and layouts so the page follows the natural order of completing an invoice.

For a workbook table containing invoice items, use an input grid. SpreadsheetWeb detects the table columns and their properties, which can then be refined in the control settings. Display calculated values with output or content controls, using number formatting for currency and percentages.

Add an action button and assign a save event so the completed invoice can be stored.

Store invoice records

Create a primary database table for the single-value invoice fields. Add Used Columns can detect the inputs already used in the interface and add them to the table for review.

Create a secondary one-to-many table for the line-item grid because one invoice can contain multiple products or services. Select the grid's named range and confirm its columns and header settings.

This structure keeps the invoice header and repeating line items related while allowing each invoice to be viewed or edited later.

Style, publish, and verify

Apply a built-in or custom stylesheet if the application needs branded colors, typography, or spacing. Preview at different widths to confirm the interface and grid remain usable on smaller screens.

Publish the application and complete a test invoice. Select the save button, then open the application's Data page and confirm the record and its line items were stored. Users with edit permission can reopen a saved invoice, change its values, and save the updated record.