Journey Workspaces 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
Workspaces 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, Workspaces 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:
Install the command-line tool
To install the command-line tool (CLI), run the following command in a terminal:
npm install -g @transact-open-ux/[email protected]
Login to Artifactory
Open a command-line tool, and run the following commands.
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/
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/
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
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-ws@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
- Yarn
npm run start
yarn 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
- Yarn
npm run start
yarn 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.