Plug-in (Component)Free

Interactive SVG Map Component

by Appian Corporation

Description

The possibility to insert and highlight business KPIs with colors on tailored custom maps and to drill down into details from that is a common need in several sectors such as: Retail for stores Public Sector for geographical area Logistic for warehouses Office Space design/allocation and many others

Leveraging an SVG integration, we provide a way to customer to use their own svg maps into Appian SAIL.

Features

interactiveSvgMapComponent allows to:

  • Provide a custom svg map image
  • Specify as parameter a list of area for which we can apply a different color (standard appian colors or hex code) , show a custom tooltip , decide the best way to highlight area on mouse hover and optionally allow click event on the area itself
  • Zoom in and Zoom Out into the map with mouse , buttons or icons
  • Pan the map within the component area
  • Use Appian document generation template format to populate text field in the map image with Appian values
  • As result the component will return the index of selected area (across the ones specified as parameter) which can be used in sail to show the details data related to that
  • By leveraging Rich text editor image upload connected system it's also possible to convert the resulting map into PNG image document to be used in documents for reporting purpose or in sail interfaces for read-only users

Release notes

FIX:

  • Fixed an error that prevented viewBox parameter to use the minX value to properly position the SVG in the component
Version history (8)

6.0.2

FIX:

  • Updated the plugin to work with the latest version of Rich Text Editor Image Upload Connected System (https://community.appian.com/b/appmarket/posts/rich-text-editor-image-upload-connected-system) as this introduced changes to retrieve document Id of the uploaded image

6.0.1

FIX:

  • Component Height now properly fit to content when the SVG source is dynamically changed from SAIL
  • Description of mapAreaParameters parameter in designer now reflect the latest updates of the plugin

NEW in version 6:

  • Icons to zoom in zoom out can be used as alternative to buttons
  • You can now zoom up to 10 times a SVG Image
  • You can set/override viewBox attribute of the SVG for proper sizing in the interface

New Parameters:

  • zoomControlsIcons (Boolean): When true icons for zooming in/out and reset view are shown instead of buttons
  • maxScale (Number (Integer)): Maximum Scale when zooming in accepted values 2 to 10 (default is 4)
  • svgViewBox (Text): json dictionary to define/override viewBox attribute in SVG tag format is {minX: number (Integer), minY: number (Integer), width: number (Integer), height: number (Integer) }

6.0.0

New Features:

  • Icons to zoom in zoom out can be used as alternative to buttons
  • You can now zoom up to 10 times a SVG Image
  • You can set/override viewBox attribute of the SVG for proper sizing in the interface

New Parameters:

  • zoomControlsIcons (Boolean): When true icons for zooming in/out and reset view are shown instead of buttons
  • maxScale (Number (Integer)): Maximum Scale when zooming in accepted values 2 to 10 (default is 4)
  • svgViewBox (Text): json dictionary to define/override viewBox attribute in SVG tag format is {minX: number (Integer), minY: number (Integer), width: number (Integer), height: number (Integer) }

5.0.0

  • New conversion of SVG Map to PNG document Image (requires Rich Text Editor Image Upload Connected System https://community.appian.com/b/appmarket/posts/rich-text-editor-image-upload-connected-system)

4.0

  • New Zoom In and out into SVG Map thru gesture/mouse wheel/component built-in controls
  • New Pan feature to move the map within component area allowing to focus on specific area
  • New Options to enable/disable Pan and Zoom features
  • New Option to show/hide zoom controls and to specify their position and color when shown

3.0.0

This has been done on appian laptop with development key Plugin documentation available as PDF file , sample application has been exported in 20.4 New in version 3.0:

  • Added support to replace the keys denoted with ### placeholder in SVG <text> node with values passed as parameter to allow dynamic text in SVG from Appian
  • Optimized tooltip to make it consistent with standard web tooltip design
  • It is no longer needed to pass an array for map parameters when pointing to a single element in the SVG

New in version 2.0:

  • Optional click behaviour by adding selectable parameter in reference Json parameter in order to have an area highlighted with click disabled (default true to preserve V1 behaviour and compatibility)
  • New component parameter hoverEffect to drive the behaviour of highlighted area on mouse hover by using outline (default to preserve V1 behaviour and compatibility ) or darkener or lightener the selected area (refer to readme V2 for details)

2.0.0

This has been done on appian laptop with development key

We added 2 new functionalities:

  • Optional click behaviour by adding selectable parameter in reference Json parameter in order to have an area highlighted with click disabled (default true to preserve V1 behaviour and compatibility)
  • New component parameter hoverEffect to drive the behaviour of highlighted area on mouse hover by using outline (default to preserve V1 behaviour and compatibility ) or darkener or lightener the selected area (refer to readme V2 for details)

New files uploaded Plugin Zip V2 , Demo App V2 and Readme V2 , prefixed the attachments with OLD those related to V1 and with NEW to highlight the files needed for this new version

1.0.0

This has been done on appian laptop with development key

The idea was born when a customer requested the possibility to highlight business KPIs with colors on tailored custom map and have possibility to drill down into details from that. By studying this requirement we realized that this is more common need in several sector such as Oil and Gas in relation to plants (initial request), Retail for stores , Public sector for geographical area and logistic for warehouses but also others may apply. Therefore we leverage SVG integration with HTML in order to provide a way to customer to use their own svg map into Appian Sail without breaking Appian paradigms..

Resources

  • Documentation also included in the Demo Application.pdf

    User Guide

    Download