Skip to main content

Version: 24.10

Journey Brokers form development

Overview​

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. Journey Brokers uses Workspaces templates and components that 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.

The Journey Brokers 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.

Prerequisites​

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:

Project setup​

Login to Artifactory​

note

You must obtain your own Artifactory credentials to complete this step.

In the command line or terminal, run the following commands:

  1. 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/

  2. Set the default npm registry for Open UX scoped packages.

    npm config set @transact-open-ux: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 a template project​

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

  1. Navigate to the directory in which you'd like to create the application.

  2. Run the following command:

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

    Replace the following:

    • APP_DIR: The directory in which to create the template project. Specify any name you like and use lowercase.
    • VERSION: A specific template version, such as 24.10.0.

    For example, the following command creates a Workspaces project in a local folder called my-app using the 24.10.0 template:

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

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

    npx create-react-app my-app --template @journey-ui/cra-template-br

Now, you can start your application for development and testing.

Project scaffold​

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

Start application for development​

Use npm to start the project with the mock data provided in the repo.

  1. Change directory to the project directory:

    cd APP_DIR

    Replace APP_DIR with the directory in which you created the template project.

  2. Start the application:

    npm run start

This starts your form in the console. By default, it is available at http://localhost:3000. However, if port 3000 is already in use, the app will offer to run on another port.

note

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