Extending the Operations Dashboard - Recent...
Transcript of Extending the Operations Dashboard - Recent...
![Page 1: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/1.jpg)
Extending the Operations DashboardJay ChenTif Pun
![Page 2: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/2.jpg)
Agenda
![Page 3: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/3.jpg)
Operations Dashboard for ArcGIS
• Monitor and manage your operations
• Ready to use widgets publishers can configure- Maps, Lists- Bar Charts, Gauges- Histograms, Indicators- Details
• Customer Use- Monitor day to day operations- Manage planned and unplanned events- Visualize key performance indicators
Create and ShareViews
Ops Center
Laptops Tablets
![Page 4: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/4.jpg)
Creating and Using Operations Views
Components
Dynamic, Role Based Access
• Widgets• Map Tools• Feature Actions• Data Sources
• Widgets are dynamic, interactive• Maps provide spatial context• Create and Share Focused views…
Two Types of Views • Single Display• Multiple Display
![Page 5: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/5.jpg)
Composition of an Operation View…
Map Tools
Data Sources
Feature ActionsWidgets
![Page 6: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/6.jpg)
Data Sources
Data Source
DataSource
DataSource
DataSource
DataSource
FeatureService/
Dynamic Map Service
Refresh Interval
FeatureLayer
FeatureLayer
![Page 7: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/7.jpg)
Configuring an Operation View…
Widgets
Map Tools
Feature Actions
![Page 8: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/8.jpg)
Extending Operations Dashboard
Map Tool
Feature Action
Widget
![Page 9: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/9.jpg)
An operations dashboard extension is…• A web application loaded in
- A web control in the Windows Operations Dashboard- A iframe in the Browser Operations Dashboard
• Code it once, run in both Windows and browser apps
Web AppHTML + JavaScript +
manifest
Web Server
![Page 10: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/10.jpg)
Making an extension available…
RegisteredExtension Item
Extensionfor
OperationsDashboard
ArcGIS Organization
Web AppHTML + JavaScript
+ manifest
Web Server
![Page 11: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/11.jpg)
Extending Operations Dashboard using Esri JavaScript API
Registerextensions
Catalog of extensions
Web ServerArcGIS organization
Admin
Publisher
User
Use extensionsConfigure extensions
Developer
Write extensions
![Page 12: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/12.jpg)
Custom Map Tools can…
• Workflow in a map• Only 1 tool at the time can be activated• Associated UI is destroyed when deactivated (toolbar or dropdown)• Great for temporary analysis/visualization
- Geo-processing tool- Explore locations- Editing
Do something on the map…
![Page 13: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/13.jpg)
Demo – Buffer Map Tool
![Page 14: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/14.jpg)
Recap – Custom Map Tool
• An extension consists of a manifest, a HTML5 file, a HTML5 template, and optionally a JS file and a css file.
• Refresh the extension to get the changes in the HTML and JS files; Restart the app to get the changes in the manifest
• Life cycle of a custom map tool:- constructor (postCreate) hostReady (main business logic) deactivateMapTool
• Map tools are stateless• Custom map tools usually work with geoprocessing services• Custom map tools usually work with GraphicsLayerProxy• It’s possible to create configurable custom map tools
![Page 15: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/15.jpg)
Custom Widgets can…• Display additional data
- Weather- Video- Related information found in a different data store
• Display data resulting from a geo-processing tool• Keep a state
Widgets coexist with a map or its features…
![Page 16: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/16.jpg)
Demo – Attribute table widget
![Page 17: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/17.jpg)
Recap – Custom Widgets
• To make a widget configurable, add a HTML5 file, a HTML5 template, (optionally) add a JS file, and update the manifest file
• Life cycle of a custom widget:- (constructor) (postCreate) hostReady (main business logic)
• Configurations are stored in the dataSourceConfig object, which will then be written into the operation view when the view is saved.
![Page 18: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/18.jpg)
Deployment
- Requirements for web server
- Public facing
- HTTPS/SSL/valid certificates
- Enable CORS
- Register and share extensions
![Page 19: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/19.jpg)
Registering an extension in an organization
• The Admin for the organization will register the extension by creating an Operations Dashboard Extension Item.(reference the extension manifest http://myDomain/myExtension.json)
![Page 20: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/20.jpg)
Demo – register an extension
![Page 21: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/21.jpg)
Extensibility Roadmap
2014 2015 2016
WindowsOperations Dashboard
WindowsOperations Dashboard
WPF SDK
WebOperations Dashboard
WebOperations Dashboard
WPF SDK
JS API
New Windows
Operations Dashboard
JS API
No More support for WPF SDK
![Page 22: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/22.jpg)
Want to learn more?
• ArcGIS API for JavaScript?- https://developers.arcgis.com/javascript/
• Doc? - https://developers.arcgis.com/javascript/jshelp/operations-dashboard-
extensibility-overview.html
• Samples?- https://github.com/Esri/dashboard-samples
![Page 23: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/23.jpg)
Upcoming Sessions for Operations Dashboard
• WEDNESDAY- 10:30 am – Demo Theater 10 – Extend Operations Dashboard with Custom Widgets- 2:30 pm – Demo Theater 10 – Operations Dashboard: An Introduction- 3:15 pm – Room 32 B – Extending Operations Dashboard (Tech Workshop)
• THURSDAY- 3:15 pm – Room 32 A – Using Operations Dashboard (Tech Workshop)
![Page 24: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/24.jpg)
Thank you…
• Please fill out the session survey in your mobile app• Select Extending the Operations Dashboard in the Mobile App
- Use the Search Feature to quickly find this title
• Click “Technical Workshop Survey”• Answer a few short questions and enter any comments
![Page 25: Extending the Operations Dashboard - Recent …proceedings.esri.com/library/userconf/proc15/tech-workshops/tw_605... · •Widgets • Map Tools • Feature Actions • Data Sources](https://reader031.fdocuments.in/reader031/viewer/2022013015/5b8fb05c09d3f2b01e8ccbc3/html5/thumbnails/25.jpg)