Lesson 6 of 8
Creating an Expense Reporting Application with SpreadsheetWeb Hub
Convert an Excel expense template into a web application with line items, dropdowns, attachments, totals, and saved report records.
2 min readCreate a browser-based expense report that captures report details, repeating expense items, supporting files, and an automatically calculated total. SpreadsheetWeb uses the Excel workbook as the model while adding a responsive interface and centralized record storage.
Design the Excel template
Add named ranges for every value used by the application, including:
- Report date and business purpose
- Employee name and department
- Supporting attachment reference
- Total expense
Use Excel data validation or lookup ranges for controlled selections such as departments and expense categories.
Create a table for repeating line items with columns for date, description, category, and amount. Add a formula that totals the amount column. Assign a named range to the complete table and save the workbook.
Create the application interface
Upload the workbook as a new Hub application and open the User Interface Designer. Import the worksheet's named ranges to generate an initial set of controls, then review the detected control types and order.
Configure the expense table as an input grid. For a category field backed by an Excel list, use the appropriate list mask and select the range containing the valid options. Display the calculated total using its named range.
If the workbook reserves many grid rows, consider the form-based grid style. Users add expense items through a focused form instead of seeing every empty row at once.
Replace the attachment input with a File Upload control. Configure its file-count and size limits according to the documents the process accepts.
Store the expense report
Create a primary database table for the report-level fields. Add Used Columns can detect the inputs already present in the user interface and add them for review.
Create a secondary one-to-many table for the line-item grid because a single expense report can contain multiple expenses. Select the table named range and confirm its detected columns.
Add an action button to the interface and assign the save event. This stores the primary report and its related line items together.
Publish and test the workflow
Preview the application, add several expenses, confirm the total changes correctly, and upload a sample attachment. Apply a built-in or custom stylesheet if needed.
Publish the application and submit a complete test report. Open View Data from the Applications page and confirm that the report, repeating line items, totals, and attachment information were saved as expected.