Skip to main content

Version: 21.11

Journey Engage form development

caution

Temenos Journey Manager (TJM) 21.11 introduces 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. To learn more, see Workspaces release compatibility > Breaking changes in TJM 21.11.

Foreword​

Workspaces (Applicant Portal) is a production-ready solution and component library for creating a Workspaces Open UX JS app which can be deployed in Journey Manager as a form that interfaces with the Work Spaces war file (API). The new Workspaces (Applicant Portal) introduces templates and componentsthat follow the Temenos Design System, designed to improve the user and development experiences.

Workspaces apps are built with React and the Temenos Journey Manager platform.

info

Your feedback is welcome and much appreciated. With your help, we can continue to develop more elegant and better-designed components that will contribute to an improved Workspaces (Applicant Portal) experience for you and your customers.

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​

In the command line or terminal, 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 will be able to 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@5^ my-app --template @journey-ui/[email protected]

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, cd <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.