Journey Explorer guide

Enable your consumers to understand the API workflow sequence to complete an operation by using our Journey Explorer. We drive this solution through Open API workflow specs, use the guide below to create and upload your own.

Our Developer Portal features a Journey Explorer that enables developers, business users, and decision-makers to visualize API workflows in an interactive environment. This functionality is powered by Open API specs and Open API workflow specs. By moving beyond individual API endpoints, users can see how they work together to execute specific workflows.

To learn more about Arazzo, the rendering tool that supports the Journey Explorer, visit the Arazzo documentation.

Getting Started

Enabling the Journey Explorer for your API will include 3 steps:

  1. Ensure your Open API spec is in the portal.
  2. Complete a workflow configuration file by providing information on endpoint order.
  3. Optional: Upload the related images to enable UI exploration.

Below is a step-by-step guide describing how to upload your Open API specs, create your workflow specs and upload UI exploration images.

Upload all required Open API specs to the portal

All APIs required in the workflow journey will need to have an Open API spec uploaded to the portal. E.g. If your journey contains Acquisition and Customer steps, the Acquisition and Customer API specs must be available in the portal. The specs must pass the linter to ensure all the relevant information is present. To upload Open API specs to the portal, see the onboarding guide.

Generate a workflow spec

The final workflow spec, as you see it in the journey explorer, is completely generated by our parsing process. What you will need, however, is to create the basic structure of the workflow in question. Use the following code template to create it:

Key Fields:

FieldPurpose
workflowIdUnique ID for the workflow (used in URLs)
summaryTitle for the workflow
descriptionDescription of a workflow
steps.stepIdUnique ID for each step (no spaces)
steps.operationIdOperation ID for the API endpoint. Should use a source name as a prefix to the actual endpoint’s operationId
steps.descriptionDescription of the step’s purpose
steps.imageOptional: Image for UI
steps.enumFilterOptional: Filters for state and substate enum values
steps.contentLinkWidget steps only: Provides a link to the widget content for widget steps
steps.requestSamplesWidget steps only: Provides code snippets for widget steps
steps.outputsWidget steps only: Describes the expected outputs for widget steps

The rest of the information will be sourced by the OpenAPI that your Journey uses.

To recap, you will need to do the following:

  1. Start with the example workflow spec, which defines a group of workflows.
  2. Populate the workflow group specific info and x-pub-settings.
  3. Define the OpenAPI sources.
  4. Create a workflow in the workflows array with the following in mind:

    • summary for the workflow title.
    • workflowId for its url.
    • description for its description.
  5. For each step define:

    • stepId for the step title (please don’t use spaces here).
    • operationId using the source name as a prefix to the actual endpoint’s operationId. Steps without an operationId (widget steps) are not parsed for OpenAPI validation. Instead, they are copied as-is into the parsed output to ensure no critical information is lost.
    • description for its description.
    • Optional: image for defining a step image.
    • Optional: enumFilter to filter state and substate enum values.
    • For widget steps: contentLink, requestSamples and outputs
  6. Upload the file to internal/external -> workflows -> <file-name>.

Upload UI exploration images

You will need to provide images to drive the UI exploration feature. If you provide no images the ‘User Interface’ section will not render, but you can still run Journeys without these. Follow the steps below to provide the images:

  1. Create a figma demo of your journey.
  2. Create png screeenshots of the UI before each API call.
  3. Upload these to the file internal/external -> workflows -> images.
  • What do you want to see next on this page?
  • Are there any features you want for the DevPortal?
  • Are there any tools you want to help with uploading?
  • We welcome any feedback, please let us know your thoughts!
  • For feature requests reach out to Pete Dawson.