Symphony Messaging Dev Docs
Developer CertificationREST API
  • Start Your Developer Journey
  • Bots
    • Building Bots
    • Planning Your Bot
      • Conversational Bot
      • Interactive Bot
      • Headless Bot
    • Getting Started
      • Getting Started with BDK
      • Creating a Service Account
      • Configuration
      • Truststores
    • Overview of REST API
      • REST API Architecture
      • Overview of Pod API
      • Overview of Key Manager API
      • Overview of Agent API
      • Bot Permissions
      • REST API Reference
    • Authentication
      • RSA Authentication Workflow
      • Certificate Authentication Workflow
    • Datafeed
      • Real-Time Events
      • Overview of Streams
    • Messages
      • MessageML
        • MessageML Basics
          • Content Grouping
          • Text formatting and semantics
          • Tables
          • Images
          • Tags and mentions
            • Enhanced tags notice
          • Style Attributes
          • Special Characters
          • Emojis
        • Elements Interactive Forms
          • Buttons
            • Icon set for Buttons
          • Text Field
          • Masked Text Field
          • Text Area
          • Checkbox
          • Radio Button
          • Dropdown Menu
          • Person Selector
          • Room Selector
          • Date Picker
          • Time Picker
          • Timezone Picker
          • Table Select
          • Regular Expressions - Regex
        • Extensibility UI Actions
          • OpenChat
          • Dialog
        • Entities
          • Standard Entities
          • Custom Entities
      • PresentationML
    • Bots Best Practices
    • Open Source Code Samples
  • Extension Apps
    • Building Extension Apps
    • Planning Your App
    • Getting Started
      • Getting Started with ADK
      • Application Manifest Bundle
      • Add an Extension App to a Symphony Pod
    • Overview of Extension API
      • Initialization
      • Register and Connect
      • Extension API Services
        • Service Interface
        • Register and Subscribe
        • Modules Service
        • Entity Service
          • Entity Advanced Templating
          • Message Format - ExtensionML
        • Applications-Nav Service
        • Share Service
        • Commerce Service
        • Dialogs Service
        • UI Service
          • Receiving Conversation and User Information
          • Filter Function
    • App Authentication
      • Circle of Trust Authentication
      • OBO Authentication
  • Developer Tools
    • Symphony Messaging Generator
    • Bot Developer Kit for Java
      • Build a Conversational Bot
      • Build an Interactive Bot
      • Build a Headless Bot
      • Integrate a Bot with an Identity Provider
    • Bot Developer Kit for Python
    • App Developer Kit
      • Build a Basic Extension App
      • Build an Extension App with App Views
        • Add Buttons and Handlers to an Extension App
        • Add BDK to an Extension App for Circle of Trust
      • Build an Extension App with Message Renderers
    • Postman
    • UI Style Guide
      • Colors
      • Form Elements
      • Buttons
  • Embedded Modules
    • Symphony Messaging URI
      • Symphony Messaging URI for Mobile (deprecated)
    • Desktop interoperability
      • FDC3 intents
        • Message format
      • Configuration guide
        • Configure Interop.io
        • Configure Here Core
        • Configure Finsemble
        • Configure with Embedded Mode
        • Troubleshooting
      • Change log
    • Embedded Mode
      • Get started
      • Configuration parameters
      • Open a chat
      • Send a message
      • Create a room
      • Pin a message
      • Notifications
      • Support for extension applications
      • Open an app
      • Embedded Mode with Sponsored Access
      • Pricing tiers
      • Logout
    • Universal Webhook
      • User guide
        • Example with Splunk
      • Installation guide
  • Symphony REST API
    • Messaging REST API
    • Federation
    • Sponsored Access API
    • Enhanced Directory API
  • Developer Certification
    • Developer Certification
  • Mobile Frameworks
    • Blackberry
    • MobileIron
  • Admin Guides
    • Change Logs
      • API Agent
        • Agent - 25.3 (LTS)
        • Agent - 24.12 (LTS)
        • Agent - 24.9 (LTS)
        • Agent - 24.6 (LTS)
        • Archives
          • Agent - 24.11
          • Agent - 24.10
          • Agent - 23.9 (LTS)
          • Agent - 24.8
          • Agent - 24.3 (LTS)
          • Agent - 24.2
          • Agent - 24.1
          • Agent - 23.12 (LTS)
          • Agent - 23.11
          • Agent - 23.10
          • Agent - 23.7
          • Agent - 23.6 (LTS)
          • Agent - 23.4
          • Agent - 23.3 (LTS)
          • Agent - 23.1
          • Agent - 22.12 (LTS)
          • Agent - 22.11
          • Agent - 22.10
          • Agent - 22.9 (LTS)
          • Agent - 22.8
          • Agent - 22.7
          • Agent - 22.6 (LTS)
          • Agent - 20.14
          • Agent - 20.13
          • Agent - 20.12
          • Agent - 20.10
          • Agent - 20.9 (2.62)
          • Agent - 20.7 (2.61)
          • Agent - 20.6 (2.60)
          • Agent - 20.5 (2.59)
          • Agent - 20.4 (2.58)
      • SBE (Pod API)
        • SBE - 24.1
        • SBE - 20.16
        • SBE - 20.15
        • Archives
          • SBE - 20.14
          • SBE - 20.13
          • SBE - 20.12
          • SBE - 20.10
          • SBE - 20.9 (1.62)
          • SBE - 20.7 (1.61)
          • SBE - 20.6 (1.60)
          • SBE - 20.5 (1.59)
          • SBE - 20.4 (1.58)
      • Client 2.0 APIs
        • Client 2.0 - 25.05
        • Client 2.0 - 25.03
        • Client 2.0 - 24.12
        • Client 2.0 - 24.05
        • Client 2.0 - 23.02
        • Client 2.0 - 22.11
        • Archives
          • Client 2.0 - 20.4
          • Client 2.0 - 20.5
          • Client 2.0 - 20.6
          • Client 2.0 - 20.7
          • Client 2.0 - 20.9
          • Client 2.0 - 20.10
          • Client 2.0 - 20.12
          • Client 2.0 - 22.8
          • Client 2.0 - 22.10
      • Universal Webhook
        • Univ Webhook - 2.6
        • Univ Webhook - 2.4
        • Univ Webhook - 2.2
        • Univ Webhook - 2.1
        • Univ Webhook - 2.0
    • API Change Management
    • Global Throttling
    • Agent Guide
      • Network Topology
      • Agent Download
      • Agent Installation
      • Agent Configuration Fields
      • Agent Server High Availability
      • Agent Performance Tuning
Powered by GitBook
On this page
  • Create Project
  • Install Dependencies
  • Add Script Commands
  • Add Configuration
  • Add Application Manifest
  • Build the App
  • Start the App
  • Load the App in Symphony Messaging
  • Test the App
  • Next Steps

Was this helpful?

Export as PDF
  1. Developer Tools
  2. App Developer Kit

Build an Extension App with App Views

Last updated 1 month ago

Was this helpful?

This guide will provide an overview on how to use the Symphony Messaging App Developer Kit (ADK) to build an extension app that has app views. This app will add entries into the left navigation that will each launch a separate app view. The project will use React and ADK's React and Webpack configuration for app view generation.

Prerequisite: Install NodeJS first, either or via

Create Project

Create a working directory and initialize it using npm.

mkdir adk-example-views && cd $_
npm init -y

Install Dependencies

Install the Symphony Messaging ADK, the ADK React and Webpack configurations, React itself, Symphony Messaging UI Toolkit for UI Components, Typescript, Webpack and the required loaders.

npm install \
  @symphony-ui/adk \
  @symphony-ui/adk-react \
  react \
  react-dom
npm install --save-dev \
  @symphony-ui/adk-webpack \
  @symphony-ui/uitoolkit-components \
  css-loader \
  style-loader \
  babel-loader \
  @babel/preset-react \
  webpack \
  webpack-cli \
  webpack-dev-server
npm install \
  @symphony-ui/adk \
  @symphony-ui/adk-react \
  react \
  react-dom
npm install --save-dev \
  @symphony-ui/adk-webpack \
  @symphony-ui/uitoolkit-components \
  css-loader \
  style-loader \
  ts-loader \
  typescript \
  webpack \
  webpack-cli \
  webpack-dev-server

Open the project directory in an editor of your choice

Add Script Commands

Edit the package.json file, replacing the scripts section with the following:

"scripts": {
  "start": "webpack-dev-server --mode=development",
  "build": "webpack --mode=production"
},

This adds two commands:

  • npm start for starting the development web server

  • npm run build to launch the production build process

Add Configuration

Create a .babelrc file with the following contents:

.babelrc
{
  "presets": [ "@babel/preset-react" ]
}

Create a webpack.config.js file with the following contents:

webpack.config.js
const SymADKWebpack = require('@symphony-ui/adk-webpack');
const packageJson = require('./package.json');
const config = {
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  }
};
module.exports = SymADKWebpack(config, packageJson.name);

Create a tsconfig.json file with the following contents:

tsconfig.json
{
  "compilerOptions": {
    "jsx": "react",
    "lib": ["ES2015", "DOM"],
  },
  "include": ["src/**/*"],
}

Create a webpack.config.js file with the following contents:

webpack.config.js
const SymADKWebpack = require('@symphony-ui/adk-webpack');
const packageJson = require('./package.json');
const config = {
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  }
};
module.exports = SymADKWebpack(config, packageJson.name);

Add Application Manifest

Each extension app requires a manifest (also known as the bundle.json file) to describe the application. Create a file named bundle.json with the following contents:

bundle.json
{
  "applications": [
    {
      "type": "sandbox",
      "id": "adk-example",
      "name": "ADK Example",
      "description": "Symphony ADK",
      "blurb": "Symphony ADK",
      "publisher": "Symphony",
      "url": "https://localhost:4000/controller.html",
      "domain": "localhost"
    }
  ]
}

Build the App

We are now ready to start building the app. Create a src directory and a file named index.js (or index.ts if you're using TypeScript) within it.

src/index.js
import * as ADK from '@symphony-ui/adk';

ADK.start({ id: 'adk-example' }).then(() => {
  ADK.navigation.add('ADK View A', () => {
    ADK.modules.open('view-a', { title: 'ADK View A' });
  });
});

The code ADK.start() initializes the ADK with an app id (adk-example) that must correspond with the value provided in the bundle.json manifest from the previous step. Once the initialization is complete, we use ADK.navigation.add() to add an item to the left navigation bar. This item will have the label "ADK View A" and clicking on it will use ADK.modules.open() to open a module with the app view called view-a. This parameter can either be an actual navigational route (e.g. view.html) or a string that will correspond to a JavaScript or TypeScript file with the same name located in the src/views directory.

Let's proceed to build the app view itself in a file named view-a.jsx (or view-a.tsx if you're using TypeScript) within src/views.

src/views/view-a.jsx
import * as React from 'react';
import * as ADKReact from '@symphony-ui/adk-react';
import { Badge, Icon } from '@symphony-ui/uitoolkit-components';
import { useClientTheme, useUserReferenceId } from '@symphony-ui/adk-react';
import './view-a.css';

const ViewA = () => {
  const { name: theme, layout } = useClientTheme();
  const userId = useUserReferenceId();

  return (
    <div className="main-view">
      <header>
        <h1>
          <Icon iconName="market-place" className="header-icon" />
          Welcome to ADK View A!
        </h1>
      </header>
      <main>
        <hr className='tk-my-2' />
        <h3>Meta Information</h3>
        <div>
          <strong>Theme</strong>: current theme is <Badge variant='positive'>{theme}</Badge> and <Badge variant='positive'>{layout}</Badge>
        </div>
        <div>
          <strong>User Reference Id</strong>: <Badge variant='positive'>{userId}</Badge>
        </div>
        <hr className='tk-my-2' />
      </main>
    </div>
  );
};

ADKReact.createView(<ViewA />, { id: 'adk-example' });

The contents of this app view are entirely arbitrary. You can choose not to use Symphony Messaging's UI Toolkit and employ other component libraries of your choice. The only required line here is calling ADKReact.createView() at the end, passing in your component and a configuration object pointing to the same app id as before.

For aesthetics, let's define some styling in src/views/view-a.css.

src/views/view-a.css
.main-view {
  font-family: "Segoe UI", Roboto, sans-serif;
  margin: 1rem;
}
.main-view header .header-icon { margin-right: 1rem }
.main-view main {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.main-view main hr { width: 100% }

Start the App

We can now start the app using:

npm start

This starts a local development server on https://localhost:4000. Note that this is a TLS-enabled site because all extension apps need to be loaded from TLS-enabled sites. However, because this is a development server, the certificate is self-signed and not trusted by any browser.

Visit https://localhost:4000 in your browser to accept the security warning about the untrusted self-signed certificate. Skipping this step will cause the extension app to not load within Symphony Messaging in the next step.

Load the App in Symphony Messaging

There are 2 ways to load an extension app into Symphony Messaging. For development purposes, we will be using the bundle injection method to temporarily load the app into the current session.

Beyond local development testing, you should get your pod administrator to create a corresponding app entry in the Admin Portal by uploading the bundle.json file.

We can now load the app by injecting the bundle URL as a parameter named bundle behind a pod URL. For example, if you are using the developer sandbox located at develop2.symphony.com, visit the following URL in your browser:

https://develop2.symphony.com/?bundle=https://localhost:4000/bundle.json

Test the App

Acknowledge the warning about being in developer mode. You should notice that a new left navigation item appears and opens an app view when clicked on.

Next Steps

Now that you have built a view-driven Extension App, you can proceed to build out your view and add more as required to complete your app.

directly
nvm
Add Buttons and Handlers to an Extension App
Add BDK to an Extension App for Circle of Trust