Tabular data
Ask users to supply a spreadsheet of data, select the data from their spreadsheet that is relevant to your service, and review that the supplied data matches the service's expectations.
Start the user journey
Explain to users that they are about to upload data, and what data will be required.
User selects a spreadsheet
Use the GOV.UK Design System file upload component to get the user to select a file.
User selects a worksheet (optional)
Users often include explanatory information, summaries, pivot tables or charts on extra sheets. Your service should allow them to ignore these.
If the file type supports multiple sheets (i.e. it is a Microsoft Excel (XLSX) file or OpenDocument Sheets (ODS) file), use the GOV.UK Design System radios component to get the user to select one of the sheets.
You can skip this step if the file only contains one sheet.
User selects column headers
Users often add extra titles above the first row of headers that should be ignored. Data may also not start in the first column as users often leave blank columns to provide padding.
Use the table view component in to display the contents of the selected spreadsheet and ask the user to select column headers.
User selects bottom of their data
Users often include extra summary rows (such as "subtotals") after the last row of data that should be ignored.
Use the table view component to display the contents of the selected spreadsheet and ask the user to select where rows end.
User maps input columns to required names
Uesrs often include extra columns (such as "notes") in amongst the columns of interest. Your service should allow users to ignore these. They may also pick different names for columns depending on their other needs.
Use a set of select dropdowns to allow the user to select which columns in the input spreadsheet correspond to required data for your service.
User reviews rejected rows
Use the table view component to display the results of row validation and highlight any rows that weren't considered valid.
The component will also display a summary of the number of rows it contains, and how many are not valid.
Users should then be able to go back to modify any options that might fix the issue or upload a different spreadsheet with any broken rows fixed. Depending on your service, you may also allow users to proceed with the valid rows and come back later to upload new rows to replace the invalid ones.
User receives receipt of upload
Use the GOV.UK Design System Panel component to provide confirmation that the upload was successfully received and is being processed.
The panel component should include any relevant statistics that reassure the user that the correct action is being taken, such as the number of operations that will be carried out in response or the number of affected items.
Link your data submission pages together
Each page you create from a template needs to be linked to the next page in the user journey. The Prototype Kit documentation explains how to link simple pages together.
The templates above where the user uploads data, chooses a
worksheet, selects headers or footers, or identifies columns use
a <form> tag to link pages together. The
action on the <form> tag
contains a special value that allows the data the user has
submitted to be processed before sending them to the next page.
For each page you create from one of the above templates:
- Open the page that you just created
- Find the line with the
<form>tag which has anactionattribute that looks likeaction="{{importerSomethingPath('/next-page')}}" - Change the path in the single quotes to be the next page the user should go to
For example, if you have just created a page from the Upload a file template and want the
next page to be /my-custom-page, change the
<form> tag in your new page to be:
<form action="{{importerUploadPath('/my-custom-page')}}" method="POST" enctype="multipart/form-data">
Alternatively, use the default names for data submission pages which will link to them from the previous page without any required changes.
| Template | Default name |
|---|---|
| Upload a file | /upload |
| Select a worksheet | /select-sheet |
| Select header rows | /select-header-row |
| Identify your columns | /mapping |
| Review your data | /review |
| Upload complete | /success |