Extending Esri Maps for SharePoint with the JavaScript API
Transcript of Extending Esri Maps for SharePoint with the JavaScript API
![Page 1: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/1.jpg)
Extending Esri Maps for SharePoint using the JavaScript API
Dara Burlo, Elitsa Baklova
![Page 2: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/2.jpg)
Agenda
• Overview of Esri Maps for SharePoint• Extending Esri Maps for SharePoint• Writing Extensions• Creating Extension Packs• Adding Extension Packs to Esri Maps for SharePoint• Putting it all together
![Page 3: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/3.jpg)
Introduction to Esri Maps for SharePoint
![Page 4: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/4.jpg)
Esri Maps for SharePoint
• Bring Maps and Location-Based Analysis to SharePoint, the platform everyone in your company uses.
• Extensible, full-featured product built on the latest HTML technology, targeting both SharePoint on-premises and online.
![Page 5: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/5.jpg)
Esri Maps for SharePoint
• Geoenable/Geoenrich lists, including external lists connecting to SQL Server
• Visualize locations of list items
![Page 6: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/6.jpg)
Esri Maps for SharePoint
• Build web pages with maps and map-based analytics
![Page 7: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/7.jpg)
Esri Maps for SharePoint
• Share beyond SharePoint through ArcGIS
![Page 8: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/8.jpg)
Create Rich Interactive Web Maps
• JavaScript-based• Create, edit and publish with
simple dialog-driven control• Mash up your data from
SharePoint Lists, SQL ServerTables, your published MXDsand the global content on Esri’splatform
![Page 9: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/9.jpg)
Esri Maps for SharePoint
• Search for world addresses and places• Geo-statistical hot spot analysis• Point-to-point routing• Polygon and polyline feature support• Setups in 26 languages
![Page 10: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/10.jpg)
Extending Esri Maps for SharePoint
![Page 11: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/11.jpg)
Extensibility Technology
• Familiar & Non-Disruptive- Dojo- ArcGIS JavaScript API
ArcGIS JavaScript API
Dojo
ArcGIS JavaScript API
Dojo
Esri Maps for SharePoint Extensibility
![Page 12: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/12.jpg)
What Are You Extending?Main menu
Map contents toolbar
Map
Too
ls
Layer menu
Select tools
Popup tools
![Page 13: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/13.jpg)
Extension Points
• Tools- E.g. when a button on a tool bar is clicked- User-driven- Functionality initiated by user action
• Behaviors- E.g. when a layer is added to the map- Event-driven- Functionality triggered by events
• Picture Marker Sets- E.g. your organization’s custom symbols
• Packaged in an Extension Pack
![Page 14: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/14.jpg)
Extension Packs
• Extension Pack – folder which contains:- Manifest
- List of tools, behaviors and picture marker symbols
- Tools- Behaviors- Picture Marker Sets- Supporting files
![Page 15: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/15.jpg)
Writing Extensions
![Page 16: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/16.jpg)
App Object
• Entry point into Esri Maps for SharePoint’s extensibility• Exposes map functionality
![Page 17: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/17.jpg)
Tools
• Functionality associated with a button on a toolbar/menu- E.g. when a button on a tool bar is clicked
![Page 18: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/18.jpg)
Creating a Tool
• Dojo Class Inheriting from _Tool
_Tool
MyTool
![Page 19: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/19.jpg)
Behaviors
• Functionality invoked when an event occurs• E.g. when a layer is added to the map
![Page 20: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/20.jpg)
Creating a Behavior
• Dojo Class Inheriting from _Behavior or a Subclass
_Behavior
MyBehavior
![Page 21: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/21.jpg)
Empowering Extensions: Working with SharePoint Data
• SharePoint layers- Is a JS API FeatureLayer based on feature collection
FeatureLayer
![Page 22: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/22.jpg)
Creating Picture Marker Sets
- Symbolize your data using custom symbols- Images such as pngs, jpgs and urls to an image- Define properties such as:
- type- url- width- height- xoffset- yoffset
![Page 23: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/23.jpg)
Picture Marker Sets
• Identify url location of each symbol
![Page 24: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/24.jpg)
Creating Extension Packs for Esri Maps for SharePoint
![Page 25: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/25.jpg)
Creating Extension Packs
• Extension Pack – folder which contains:- Manifest
- List of tools, behaviors and picture marker symbols
- Tools- Behaviors- Picture Marker Sets- Supporting files
![Page 26: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/26.jpg)
Creating the Manifest
• List of Tools, Behaviors and Picture Marker Sets in the Extension Pack• E.g. your organization’s custom symbols
E.g. your organization’s custom symbols
![Page 27: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/27.jpg)
Upload Extension Packs: 3 Options
![Page 28: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/28.jpg)
Adding Extension Packs to Esri Maps for SharePoint
![Page 29: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/29.jpg)
Adding custom tools/behaviors to an Esri Map Web Part
• Upload extension pack to the site• Edit existing Esri Maps Web Part • Configure the Esri Map Web Part • Click the extension point in the Esri Maps
Web Part you would like to add the tool/behavior to
• Add the tool/behavior• Configure the tool/behavior’s settings if necessary• Save map web part
![Page 30: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/30.jpg)
Adding custom tools/behaviors as part of default Esri Map Web Part
• Upload extension pack to the site• Modify Esri Maps Configuration Files
- Found under Site Settings- Edit tool_collection.json & behavior.json- Save changes
• Adds to new Esri Maps Web Parts • Note: Applies to newly created
Esri Map Web Parts
![Page 31: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/31.jpg)
Putting it all together
![Page 32: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/32.jpg)
Tips to Start Developing Extensions
• Download pre-existing samples from help system- Unzip sample
• Edit contents in your preferred IDE (Visual Studio, Source View, Notepad, etc.)- Add code for tool or behavior - Include tool, behavior or picture marker symbols in the manifest file- Include any supporting files (html, graphics, etc.)
• Deploy folder to your preferred web server (IIS, Apache, etc.)
• Add extension as url to SharePoint
• Add an Esri Map Web Part to page
• Configure the Esri Map Web Part to include your tool or behavior
• Debug in your preferred browser- If changes are needed edit files and reload the page
![Page 33: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/33.jpg)
Elitsa BaklovaDemo
![Page 34: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/34.jpg)
Esri Maps for SharePoint Roadmap
![Page 35: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/35.jpg)
Release Roadmap
Already Released• 3.0.1 - current release
(download today from the list of Location Analytics apps at www.arcgis.com)• 4.0 Beta 2 - current beta
(join today at betacommunity.esri.com)
Coming Soon• 4.0 - Late Spring 2015• 4.0.1 - Localization release Summer 2015
![Page 36: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/36.jpg)
Q&A
![Page 37: Extending Esri Maps for SharePoint with the JavaScript API](https://reader038.fdocuments.us/reader038/viewer/2022102520/58a2d5771a28abbf0b8bc965/html5/thumbnails/37.jpg)
Rate This Sessionwww.esri.com/RateMyDevSummitSession