Get started

The Data Upload Design Kit is available as a plugin that can be installed into the GOV.UK Prototype Kit.

It offers a set of ready-made templates for creating a simple data upload journey for users. This means that the often time-consuming and difficult task of collecting vast amounts of data from different people can be managed in a matter of minutes.

Templates are fully customisable and all components and patterns are compatible with the GOV.UK Design System.

How to install it

To start using this plugin, it first needs to be installed onto your machine. It can be installed directly into the GOV.UK Prototype Kit.

Open up your preferred command line, which you previously used to create a GOV.UK Prototype, and type the following:

npm install 'https://gitpkg.vercel.app/register-dynamics/data-import/lib/importer?main'

After running this command new routes will automatically be added to your prototype’s app/routes.js file. You will then need to configure the plugin, which can be done by editing the app/config.json to look something like the following, replacing the fields with the headings for the data you are interested in.

{
    "serviceName": "Your service name",
    "fields": [
        "Code",
        "Name",
        "Speciality"
    ]
}

You are now ready to use the Data Upload Design Kit. Run the GOV.UK Prototype Kit and visit the internal documentation (which you will be able to view whilst logged into the GOV.UK Prototype Kit) to get started using the Data Upload Design Kit.

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 GOV.UK Prototype Kit documentation explains how to link simple pages together.

The Data Upload Design Kit templates 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 templates:

1. Open the page that you just created
2. Find the line with the <form> tag which has an action attribute that looks like action="{{importerSomethingPath('/next-page')}}"
3. 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
Select footer rows	/select_footer_row
Identify your columns	/mapping
Review your data	/review
Upload complete	/success