GOV.UK style one question per page transactions made easy
Permalink
Failed to load latest commit information.
config Allow users to configure express-session Aug 23, 2017
docs Document how Interstitial works Mar 8, 2018
examples/test-app add ability to add filters to content files and execute the same as i… Sep 19, 2018
src session is destroyed after render Oct 18, 2018
test session is destroyed after render Oct 18, 2018
.bumpedrc Configure bumped and travis for releasing Aug 31, 2017
.eslintignore Omit dist folders from eslint Feb 27, 2018
.eslintrc.json Fix linter errors to meet @hmcts/eslint-config Aug 14, 2017
.gitignore Ignore webpack built assets in example app Feb 26, 2018
.tern-project Add a simple tern config to enable tern prediction Oct 11, 2017
.travis.yml Update npm token Jul 19, 2018
CHANGELOG.md Release 3.3.1 Mar 9, 2018
Dockerfile set version of node to 9 as dependencies are being affected by 10 May 9, 2018
LICENSE.md Add the MIT Licenses file Nov 5, 2017
Makefile Pass CODACY_PROJECT_TOKEN through to container Aug 18, 2017
Procfile Fix heroku deployments Mar 2, 2018
README.md bump version Sep 18, 2018
checkYourAnswers.js Expose check your answers pieces Nov 23, 2017
docker-compose.yml Prove Question renders correctly by building one in example app Aug 30, 2017
flow.js Expose steps and flow modules Dec 6, 2017
forms.js Expose the forms package Oct 13, 2017
package-lock.json version bump May 17, 2018
package.json session is destroyed after render Oct 18, 2018
steps.js Expose steps and flow modules Dec 6, 2017
yarn.lock Add optional csrf support Aug 22, 2018

README.md

One per page

Easily build GOV.UK style one question per page services using express, nunjucks and webpack.

Features

One per page solves a number of hard problems in building a one question per page service:

  • Capturing and validating users answers
  • Navigating branching journeys
  • Session management
  • Content internationalisation
  • Template management

All documentation is available at https://one-per-page.herokuapp.com

Usage

Add one-per-page and look-and-feel to your package.json:

> yarn add @hmcts/one-per-page @hmcts/look-and-feel

Then create a few steps and wire them to your express app:

app.js

const app = express();

class Start extends EntryPoint {
  next() {
    return goTo(this.journey.steps.CheckYourAnswers);
  }
}

class Name extends Question {
  get form() {
    return form({
      firstName: text.joi('Enter your first name', Joi.string().required()),
      lastName: text.joi('Enter your last name', Joi.string().required()),
    });
  }
  next() {
    return goTo(this.journey.steps.CheckYourAnswers);
  }
}

journey(app, {
  steps: [
    Start,
    Name,
    CheckYourAnswers
  ]
});

app.listen(3000);

And create a template for your step:

Name.template.html

{% extends "look-and-feel/layouts/question.html" %}
{% from "look-and-feel/components/fields.njk" import textbox %}

{% set title %}What is your name?{% endset %}

{% block fields %}
  {{ textbox(fields.firstName, "First Name") }}
  {{ textbox(fields.lastName, "Last Name") }}
{% endblock %}

@hmcts/look-and-feel helps with creating templates

Then start your app:

> node app.js
# listening on port 3000

Contribute

This project is open to accepting contributions. Check out our open issues for ideas on where to start or to raise your own issue. Read our development documentation for help on getting started.

<script type="text/javascript"> function changeImage(id, newImage) { document.getElementById(id).src = newImage; } </script>