Guides and tutorials

How to create good services in Plan✕

How to develop a service

How to structure flows in Plan✕

How to write good planning service content

How to write automations in Plan✕

How to use the calculator component

A-Z Style guide

Glossary of planning terms

How to write good emails

How to maintain good services in Plan✕

  • How to publish new content

    Publishing principles

    Keep your service up-to-date using a publishing schedule

    Test new content using the preview link before publishing

    Push an ad hoc publish to repair high volume submission journeys

    Push an ad hoc publish to repair false negative results for high volume guidance journeys

  • How to review live feedback and request content changes

How to use the Plan✕ Editor

The PlanX editor is a work in progress: In the initial phases of development, we mainly focused on the user interface. We are now developing a more user-friendly editor too. However, you might still experience some weird interactions, missing features, crocodiles and other hazards to watch out for. Nonetheless, it’s still pretty cool - help us make it even better!

 

Introduction to the PlanX editor

Remote video URL

Setting up a new service in PlanX

Remote video URL

Adding a question to a flow in PlanX

Remote video URL

Adding logic rules to a flow

Remote video URL

Flags and results

Remote video URL

Adding data to the passport

Remote video URL

Basic automations

Remote video URL

Automations with blanks

Remote video URL

Advanced automations

Remote video URL

Using the set component

Remote video URL

GOV.UK Pay Metadata

upload video link

Clones

Remote video URL

Internal flows

Remote video URL

External portals

Remote video URL

Publishing flows

Publishing flows_1

Remote video URL

Publishing flows

Publishing flows_2

Remote video URL

A/B Testing in Plan✕

Sometimes you might want to ‘A/B test’ different versions of service content, to see the impact that differences make to users by looking at analytics for a large sample group. You can now do that in Plan✕, using the calculate component. Here’s how:

Remote video URL

Interface and navigation

Remote video URL

User Interaction

Remote video URL

Common Components

Remote video URL

Flow Design

Remote video URL
The staging vs production environment
  • New Plan✕ features and updates are developed and tested across multiple environments.

    As a council officer, you will mainly come across three environments:

    • The production environment (https://editor.planx.uk): This environment is for writing content and building your flows using the Plan✕ Editor. It should not be used for testing integrations **(e.g. ‘Pay’ and ‘Send’ components).
    • The staging environment (https://editor.planx.dev): This is the testing environment. It should **be used for testing integrations (e.g. the ‘Pay’ and ‘Send’ components). It should not be used to write new content, as it will be automatically deleted at midnight.
    • Pizza links: These are temporary links that are sometimes used for the purpose of testing specific features.
Help! I accidentally deleted something
  • The Plan✕ Editor now has a Edit History and a Restore functionality. This means you don’t need to panic if you accidentally delete something. You can open the Edit History on the left menu of your screen and click ‘restore’ to go back to the previous version.

Get a copy of the breadcrumbs or passport to report an issue

  • Sometimes when you’re running through a service and something goes wrong you’ll want to grab a copy of the ‘breadcrumbs’ (all the answers provided as data) or ‘passport’ (all the answers with a given field).
img
  1. In your browser, go to the three dot menu in the top right, and find developer tools (or 'console') (see image from Chrome)
  2. Paste one of the codes below into the console and hit enter.
  3. Go to a slack thread or text document and hit paste (Ctrl V) and it should paste the data in.
  4. Go back to the console and enter the other one and paste that in too.
  5. Voila! You have the passport and breadcrumbs to share!

To get the passport:

copy(window.api.getState().computePassport())

To get breadcrumbs:

copy(window.api.getState().breadcrumbs)

Something missing? Just let us know your ideas for videos you’d like us to add to this library

Subscribe to the ODP newsletter

Become a key part of Open Digital Planning by co-owning the services and contributing towards their development.

Subscribe now