Using widgets from the Esri WebApp Builder in CMV.
Widgets created for the Esri WebApp Builder are very similar to widgets used by CMV. The primary difference between them is WAB widgets rely on the jimu.js library provided by Esri. Since both WAB and CMV widgets are based on the dojo toolkit, any WAB widget could be converted to a CMV widget removing the dependency on jimu.js. That conversion process can be simple or very involved depeding on the complexity of the widget. This repo provides a solution where no conversion is required and WAB widgets can be used directly in CMV without modification.
Another important difference between WAB and CMV is applications developed with the Esri WebApp Builder are dependent on Esri web apps hosted at ArcGIS On-line or within your own implementation of Portal for ArcGIS Server. Both ArcGis Online and Portal require subscriptions at an additional cost. No subscription is required to use the WAB widgets within CMV. Applications developed with CMV use the REST services provided by ArcGIS Server to access AGS resources.
A couple of the custom WAB widgets included in this repo were modified. None of those changes were required for the widget to work with CMV. The changes were for a specific need or to overcome poor code practices in the widget like missing dojo dependencies for the widget's template.
- Basemap Gallery
- Bookmarks
- Coordinate
- Chart
- Directions
- Draw
- HomeButton
- LayerList
- Legend
- Measurement
- MyLocation
- Query
Both of these widgets have been modified from the original to provide additional functionality
-
This method uses the develop branch of cmv.
-
This method supports the following versions of the WebApp Builder:
- version 2.15 released December 2019
- version 2.14 released October 2019
- version 2.13 released August 2019
-
The following versions of the WebApp Builder may also work but are no longer supported:
- version 2.12 released April 2019
- version 2.11 released January 2019
- version 2.10 released October 2018
- version 2.9 released July 2018
- version 2.8 released April 2018
- version 2.7 released January 2018
- version 2.6 released October 2017
- version 2.5 released July 2017
- version 2.4 released March 2017
- version 2.3 released January 2017
- version 2.2 released October 2016
Currently, the process requires 3 simple changes to your CMV application. I anticipate these changes will be incorporated into the main cmv-app project and so most of these steps will be eliminated and it will be a simple configuration exercise to use WAB widgets in CMV.
-
Add the new _WABMixin.js controller mixin to your app. I placed mine in the config folder.
-
Modification to app.js:
-
Add a locale to dojoConfig:
locale: 'en-us',
-
Add packages for jimu, lib and widgets folders from WAB to dojoConfig:
/* customizations for WAB widgets */ },{ name: 'jimu', location: path + 'wab/2.15/jimu.js' },{ name: 'libs', location: path + 'wab/2.15/libs' },{ name: 'wabwidgets', location: path + 'wab/2.15/widgets' /* end customizations for WAB widgets */
-
Add the new mixin to the Controller. JavaScript and css files specific to jimu and wab are loaded here as well.
require(window.dojoConfig, [ 'dojo/_base/declare', // minimal Base Controller 'viewer/_ControllerBase', // *** Controller Mixins // Use the core mixins, add custom mixins // or replace core mixins with your own 'viewer/_ConfigMixin', // manage the Configuration 'viewer/_LayoutMixin', // build and manage the Page Layout and User Interface 'viewer/_MapMixin', // build and manage the Map 'viewer/_WidgetsMixin', // build and manage the Widgets 'config/_WABMixin', // cusom mix-in to use WAB widgets // needed by some wab widgets like Print 'libs/caja-html-sanitizer-minified', // jimu stylesheet needed for WAB widgets 'xstyle/css!jimu/css/jimu-theme.css', // needed so that jimu styles play nice with cmv 'xstyle/css!./css/cmv-jimu.css', // some css tweaks for WAB widgets (optional) 'xstyle/css!./css/cmv-wab.css' ], function ( declare, _ControllerBase, _ConfigMixin, _LayoutMixin, _MapMixin, _WidgetsMixin, _WABMixin ) { var App = declare([ _LayoutMixin, _WidgetsMixin, _MapMixin, _WABMixin, _ConfigMixin, _ControllerBase ]); var app = new App(); app.startup(); });
-
Adding WAB widgets to your CMV application is very similar to adding CMV widgets. Below are several examples with comments to identify the differences needed for WAB widgets.
Coordinate Widget
coordinate: {
include: true,
id: 'coordinate',
type: 'domNode',
srcNodeRef: 'mapInfoDijit',
path: 'jimu/BaseWidgetPanel',
options: {
widgetManager: true,
config: {
widgets: [
{
id: 'WABCoordinate',
uri: 'wabwidgets/Coordinate/Widget' // Note the path
}
]
}
}
},HomeButton and MyLocation Widgets
mapButtons: {
include: true,
id: 'mapButtons',
type: 'domNode',
srcNodeRef: 'homeButton',
path: 'jimu/BaseWidgetPanel', // Note the path
options: {
// use the WAB WidgetManager (required)
widgetManager: true,
// configuration for the BaseWidgetPanel
config: {
// a BaseWidgetPanel can contain multiple widgets
widgets: [
{
id: 'WABHome',
uri: 'wabwidgets/HomeButton/Widget' // Note the path
},
{
id: 'WABMyLocation',
uri: 'wabwidgets/MyLocation/Widget' // Note the path
}
]
}
}
},Draw Widget
draw: {
include: true,
id: 'draw',
type: 'titlePane',
position: 3,
title: 'Draw',
open: false,
path: 'jimu/BaseWidgetPanel', // Note the path
options: {
// use the WAB WidgetManager (required)
widgetManager: true,
config: {
widgets: [
// minimum configuration for the WAB Widget
{
id: 'WABDraw',
uri: 'wabwidgets/Draw/Widget' // Note the path
}
]
}
}
}Query Widget
query: {
include: true,
id: 'query',
type: 'titlePane',
position: 8,
title: 'Query',
open: false,
path: 'jimu/BaseWidgetPanel', // Note the path
options: {
// use the WAB WidgetManager (required)
widgetManager: true,
config: {
widgets: [
{
id: 'WABQuery',
uri: 'wabwidgets/Query/Widget', // Note the path
// more complex configuration passed to WAB Widget
config: {
queries: [
{
name: 'Cities',
url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/SampleWorldCities/MapServer/0',
filter: {
logicalOperator: 'AND',
parts: [
{
fieldObj: {
name: 'POP_RANK',
label: 'POP_RANK',
shortType: 'number',
type: 'esriFieldTypeInteger'
},
operator: 'numberOperatorIs',
valueObj: {
isValid: true,
type: 'value',
value: 3
},
interactiveObj: '',
caseSensitive: false,
expr: 'POP_RANK = 3'
}
],
expr: 'POP_RANK = 3'
},
popup: {
title: '${CITY_NAME}',
fields: [
{
name: 'CITY_NAME',
alias: 'CITY_NAME',
specialType: 'none'
}
]
},
resultsSymbol: {
color: [
0,
0,
128,
128
],
size: 18,
angle: 0,
xoffset: 0,
yoffset: 0,
type: 'esriSMS',
style: 'esriSMSCircle',
outline: {
color: [
0,
0,
128,
255
],
width: 0.75,
type: 'esriSLS',
style: 'esriSLSSolid'
}
},
objectIdField: 'OBJECTID',
orderByFields: []
}
]
}
}
]
}
}
}widget: {
include: true,
id: 'widget',
type: 'titlePane',
position: 0,
title: 'Aloha Threat Zone',
canFloat: true,
resizable: true, // This widget is resizable when floating
open: true,
path: 'jimu/BaseWidgetPanel', // Note the path
options: {
// use the WAB WidgetManager (required)
widgetManager: true,
// This widget requires some height to work properly
style: 'height:400px;',
config: {
widgets: [
{
id: 'WABWidget',
uri: 'widgets/AlohaThreatZone/Widget' // Note the path
}
]
}
}
}saveSession: {
include: true,
id: 'saveSession',
type: 'titlePane',
position: 0,
title: 'Save Session',
open: true,
path: 'jimu/BaseWidgetPanel', // Note the path
options: {
// use the WAB WidgetManager (required)
widgetManager: true,
config: {
widgets: [
{
id: 'WABSaveSession',
uri: 'widgets/SaveSession/Widget', // Note the path
// includes an optional configuration
config: {
fileNameForAllSessions: "cmvSessions.json",
fileNameTplForSession: "cmvSessions_${name}.json"
}
}
]
}
}
}- Currently,
off-panelWidgets are loaded within aBaseWidgetPanel. This is probably unnecessary.
You can find WAB widgets:
- Widgets included with WAB
- Custom WAB Widgets
- This repo from the U.S. EPA has many of the included and custom widgets all in one place. This repo is not up-to-date with WAB 2.0 widgets.