Page Mockup:
Page Layout: This page consists of a main grid/form for forecasting, a forecasting totals block that follows the user as they scroll down, and a "favorites" block that contains To Be Hired templates (grad student, research assistant, research scientist, etc.) and any spending favorites (trip to Provence in Spring, etc.). The forecasting form/grid is further broken down into GL sections, one for each of the high level CEMIT or Approved GLS. Each GL block contains a subtotals block at the bottom.
Functional Summary: On first entry, the left nav is hidden, the name and description are blank, all GL blocks are open, and the people are shown in their data range view. If the user wants, they can close each block of existing commitments. Above each existing commitment in each GL block is an empty row so users can immediately begin forecasting. When a user gets to the last input field in the row, a new blank row is automatically added. In addition and not shown in the image is a "Add new row" button on each block. If a user wants to add a To Be Hired, they click on them and a new row is added that contains the defaults from the To Be Hired they clicked on, which can then be edited.
Any time a user creates a new forecast, they are taken here and have to supply a new name and description. If they are editing an existing forecast, they also come here but the name and description are open for editing. If a user edits the title, this does NOT create a new forecast, it just edits the existing name (we maintain a unique forecast id under the hood). A forecast is saved in a special table in the backend, one per user. This table allows users to edit one forecast as much as they want without committing it. When they click Save, the system will validate the forecast and save it if it passes validation.
Description of the Page: Specify user all actions available on the page. Specify destination of navigation buttons or hyperlinks. Insert one or more annotated screen mock ups to show the page in representative states.
Table 1: Common User Interface Elements for the Forecasting Detail Page
This table includes all elements that appear on this page. Flag elements that have appeared on other pages.
Element |
Control |
Functional Description |
Technical Rules |
|---|---|---|---|
Name field |
text input |
User stores and edits Forecast name |
Defaults to "MIT-All Forecast", key is COMMON (which is MITALL) |
Show's actuals and commitments |
checkbox |
User clicks on it to show and hide existing commitments |
Defaults to checked, should be placed closer to grid it controls |
Show/Hide Accordion |
button |
Shows and hides all commitments in GL block |
Overrideable by the Show Actuals and Commitments checkbox (if user hides people block, clicks hide all, then clicks show all, people block is visible) |
Person name field |
text input |
User can search for person (autocomplete) including TBHs |
After third keydown, set timeout for 300 miliseconds, if no further keydown, execute search call (wait until the user pauses). Make timeout length a setting, let us play with it, hide setting for January release and default to best guess. Show default if users complain. |
Appointment field |
dropdown list (select) |
Until you choose a person, the only thing in the Appointment field is "choose a person". If you choose a person, the appointment field gets filled with the one or more appointments they have. If they choose a TBH, the appointment is filled in by the choice. |
|
Start Date |
text input with calendar widget |
Normal calendar widget behavior (opens auto on focus of field, can be overridden by user) |
Normal Calendar widget behavior |
End Date |
text input with calendar widget |
Normal calendar widget behavior |
Normal Calendar widget behavior |
Allocation |
text input |
User enters number |
Floating number rounded to nearest two decimals (percentage) |
Hours per week |
text input |
User enters number |
Floating number rounded to nearest two decimals. |
Tuition |
text input |
User enters number for tuition |
Floating number locked to two decimals (money). |
Comment |
text area |
User enters description. User can grow text box if wanted |
Shrink text area to make inline row, let them expand it they want. |
Add Row |
button |
Adds new row of the same type below existing lines |
|
Table X: Validation Rules for [name of page] Page
Validation |
Message |
|---|---|
cell A1 |
Lorem ipsum dolor sit amet |
cell B1 |
Consetetur sadipscing elitr |
cell C1 |
Sed diam nonumy eirmod tempor inviduant ut labore |
cell D1 |
Labore et dolore magna aliquyam erat, sed diam voluptua |
Repeat for each screen of the application.