Skip to main content

Version: 22.04

Journey Engage form development

caution

Temenos Journey Manager (TJM) 21.11 introduced changes to the Workspaces REST API that are incompatible with earlier releases. Consequently, the Workspaces 19.11 application cannot be used with a TJM 21.11 or later instance, and you must upgrade your Workspaces application to an Open UX form.

Foreword​

Journey Engage is a production-ready solution and component library for creating a Workspaces Open UX JS app that can be deployed in Journey Manager as a form interfacing with the Workspaces REST API. Workspaces apps are built with React and the Temenos Journey Manager platform. In this release, Journey Engage introduces templates and components that follow the Temenos Design System, designed to improve the user and development experiences.

The application template is stored in Artifactory, a private repository manager. The steps below show how to download the template from Artifactory so you can develop using your local environment.

note

You need to obtain your own Artifactory credentials to complete these steps.

Pre-requisites​

Workspaces is based on ES2015+, React, Redux, and Material UI. Familiarity with these technologies is recommended but not required.

As a Workspaces developer, you need the following installed on your computer:

Login to Artifactory​

Open a command-line tool, and run the following commands.

  1. Set the default npm registry for Unified UX scoped packages.

    npm config set @unified-ux:registry https://internal-artifactory.avoka.com/artifactory/api/npm/npm/

  2. Set the default npm registry for Journey UI scoped packages.

    npm config set @journey-ui:registry https://internal-artifactory.avoka.com/artifactory/api/npm/npm/

  3. Authenticate the npm client to Artifactory.

    npm login --registry https://internal-artifactory.avoka.com/artifactory/api/npm/npm/

    This command prompts you to enter the following Artifactory credentials:

    • username
    • password
    • email

  4. Configure basic authentication.

    npm config set //internal-artifactory.avoka.com/artifactory/api/npm/npm/:always-auth=true

    You may need to repeat this step (setting always-auth=true) each time you do Step 3 (logging in). If you get authentication errors when you create the template (see next section) then you need to repeat this step.

Create the template​

Once the config and login credentials are set, you can create the application on your local dev environment.

Navigate to the directory in which you'd like to create the application and run the following command.

npx create-react-app APP_DIR --template @journey-ui/cra-template-ap@VERSION

In this command:

  • APP_DIR can be any name you choose, specified using lowercase. The template is created in this directory.
  • VERSION is a specific template version.

For example,

npx create-react-app my-app --template @journey-ui/[email protected]
tip

If you want to create a template using the latest version available, omit the @VERSION part of the command.

Then, change directory to your APP_DIR and start the application using npm or Yarn:

npm run start

Scaffolding​

A scaffold is provided which includes common configs for development, testing and springboard, and demonstrates the component library. The project layout is as follows.

├── public                  # Public files
├── src
│   ├── configs             # Space configurations
│   │   ├── default         # Config for default
│   │   ├── development     # Config for development
│   │   ├── testing         # Config for testing
│   │   ├── springboard     # Config for springboard
│   │   └── custom          # Custom config
│   ├── fixtures            # Mock data/fixtures
│   │   ├── default         # Fixtures for default
│   │   ├── development     # Fixtures for development
│   │   ├── testing         # Fixtures for testing
│   │   ├── springboard     # Fixtures for springboard
│   │   └── custom          # Custom fixtures
│   ├── locales             # i18n Messages
│   ├── index.jsx           # App entry
│   └── react-app-env.d.ts  # TypeScript reference for react-scripts
├── README.md               # Getting Started
├── .transact-auth          # Auth credentials
├── transact-config.json    # Transact configuration
├── transact-schema.json    # Transact Schema
└── package.json            # Dependencies

Development​

To start the project with the mock data provided in the repo, open a command-line interface tool, and change directory into your APP_DIR then enter the following command:

npm run start

This starts your form on the command line, and you should be able to see it on http://localhost:3000. The app will offer to run on another port if port 3000 is already in use.

note

Once your form is ready, you need to configure JM to use your form as the default Workspaces Client. For more information, see Form Deployment and Security.