I'm designing an Excel Add-In UI. there are a few things I want Features I want to lay out
attaching a rough example of how my current add in looks (1st attachment)
Flow: user opens up an Excelbook with add-in open, he clicks Define Mapping. there is a streaming state and then the add-in pops open with some mapping.
-
"Define Mapping" --> this analyzes the workbook and lays out all of the line items of my workbook and how they're defined. I want functionality of being able to define a line item as having multiple segments (e.g. Sales & Marketing might have 3 different items that roll up into that 1 line item) --> see 2nd attachment for functionality example
-
I want there to be a page where I can upload a few PDFs, show a confirmation page of relative data hierarchy (for example, we will prioritize document 1 and 2 information to be most true in case conflicting data, next we will prioritize document 3, then doc 4, 5, 6). these documents will look like SEC filings like GOOG 2024 10-K and GOOG 1Q25. Then I will click a button that says "Template Autofill", which will essentially extract the right numbers from the sources and place them into my Excel workbook
-
Show some loading state
-
After everything is finished, there should be a button somewhere on the add-in UI that says "Examine source", when clicking that button, I will be directed to the right PDF document
Excel Add-In UI Design for ProSights
Based on your requirements, I'll design a comprehensive Excel Add-In UI that includes all the functionality you've described. I'll create a React-based interface that can be integrated into an Excel Add-In.
Excel Add-In UI Design Explanation
I've designed a comprehensive Excel Add-In UI that implements all the features you requested. Here's a breakdown of the functionality:
1. Define Mapping
- Initial State: User opens the add-in and clicks "Define Mapping" button
- Analysis State: Shows a loading progress bar while analyzing the workbook
Mapping Interface: Displays all line items from the workbook with:
- Description of each line item
- Value sign selection (positive, negative, or both)
- Multi-value functionality
- Ability to expand line items to show/define sub-items (as shown in your example)
- Information tooltips for detailed descriptions
2. PDF Upload & Document Priority
- Upload Interface: Allows uploading PDFs via Browse Files, Copy Paste, or Drag & Drop
- Document Priority: After uploading, users can see and reorder documents to set priority
- Template Autofill: Button to extract data from the documents and fill the Excel template
- Processing State: Shows a progress bar during extraction
3. Loading States
Progress indicators for all processing operations:
- Workbook analysis
- Document uploading
- Data extraction and template filling
4. Examine Source
- Source Navigation: After processing, an "Examine Source" button appears in the header
- Line Item View: Shows all workbook line items with links to their source documents
- Document View: Lists all uploaded documents with ability to open and view them
- Data Source Details: Shows the extracted data alongside the original source text
- Context Navigation: Allows viewing the data in its original document context
Design Notes
- The UI follows a clean, modern design with a tabbed interface for easy navigation
- I've implemented expandable sections for line items with sub-items
- The design is responsive and fits well within an Excel Add-In panel
- I've included tooltips and information icons to provide context and help
- The "Examine Source" button is prominently displayed after processing is complete
This implementation matches your requirements and provides a seamless workflow from defining mappings to uploading documents, processing data, and examining sources.
Make the Define Mapping stage after you upload the Documents
make the line items be in the attached pic. the indented rows are actually sub items under the main item. if no sub items, then don't list them. should only be sub items for "Other Expenses", "Net Interest Income / (Expense)", and "Other Income / (Expense)"
Allow me to enter in a row by pressing "Add" on the "Define Mapping" sheet
Remove the + and the minus signs functionality
I'll update the Excel Add-In UI to match your requirements, making the Define Mapping stage come after document upload and implementing the specific line items structure from your image.
Excel Add-In UI Updates
I've updated the Excel Add-In UI according to your requirements:
1. Changed the Flow
- The process now starts with "Upload Documents" as the first tab
- After uploading and processing documents, it automatically switches to "Define Mapping"
- The tab order has been changed to reflect this new flow
2. Updated Line Items Structure
Implemented the exact line items from your image:
- Revenue
- COGS
- Gross Profit
- Sales & Marketing
- Technology & Development
- General & Administrative
- Other Expenses (with sub-items)
- Total operating expenses
- Income (loss) from Operations
- Net Interest Income / (Expense) (with sub-items)
- Other Income / (Expense) (with sub-items)
- Income (loss) before income taxes
- Provision for income taxes
- Net income (loss)
3. Sub-Items Implementation
Added sub-items only for the specified categories:
- Other Expenses (Impairment Expenses, Loss / (Gain) Loss on sale of Business)
- Net Interest Income / (Expense) (Interest income, Interest expenses)
- Other Income / (Expense) (Loss on debt extinguishment, Impairment of available-for-sale debt securities, Impairment of other investments)
4. Add Row Functionality
- Each line item now has an "Add" button that shows an input field to add a new row
- When clicked, it displays a form to enter a new line item name
- The form includes Save and Cancel buttons
5. Removed +/- Signs
- Removed the value sign selection functionality as requested
The UI now follows the exact structure from your image while maintaining the functionality you described in your requirements.