Share Widget Version 2.0.1 - 04/20/16

[#1]

Here is another widget for the Web App Builder.

List of the latest enhancements and changes:

1. Updated for WAB 2.0

Older enhancements or changes

1. Fixed issue with webmaps that were not in webMercator or WGS and the use of map extent
2. Fixed issue with "share current map extent" checkbox not functioning.
3. Fixed issue with backgorund color for icon when hovering in foldable theme being black.
4. Updated widgets styling to be compatible with all themes in Web AppBuilder 1.2.
5. Fixed startup bug in version 1.1.1

Features:

• Ability to share map extent
• Buttons to share the map using Facebook, Twitter, Google+, Email and by Link
• Code window to copy embed code for placing map inside another html page.
• Bitly URL shortening

[berniejconnors]

Robert, I really like your Share Widget.  Have you considered adding the ability to include the map center and scale to the shared link?  The URL parameters for this functionality were just released with the 3.7 version of WAB - http://doc.arcgis.com/en/web-appbuilder/manage-apps/app-url-parameters.htm .  I have posted an "idea" for this functionality on ideas.arcgis.com.

[RobertScheitlin__GISP]

Bernie,

   Yes I have plans to make that available in the next version as soon as esri releases the updated WAB developer version.

[berniejconnors]

Robert,

     That's great to hear.  In my opinion Esri really should have this functionality in the online version of WAB.  Hopefully they will follow your lead.

Bernie.

[AmyKnight]

Robert, Thank You for this app (and the many others!).  It is working well.  A useful enhancement for us would be the ability to share more of the user's custom map display in addition to the extent, for example, the layers currently displayed in the user's map (rather than only the default webmap layers - we only provide a few turned on at startup) and the graphic result of the 'draw' tool. It sounds complicated to implement but would make for a great communication tool. So thought I'd ask. Thanks for your consideration!

-Amy

[RobertScheitlin__GISP]

Amy,

   Thanks for the input. Its a tall order, but definitely worth considering.

[AndrewCallison]

Robert,

Is there a way to change the URL to show a different web application when someone hits the share button? I am thinking of making an Editor Web Application and a Viewer Application. I wanted the editor the ability to share that location and the viewer just being able to clicking on a URL.

[RobertScheitlin__GISP]

Andrew,

   No currently there is no way to change this through configuration. Where the url is set in the code is inside the Widget.js @ line 155 (you could manually edit this file yourself to make the change:

        // create base url

        url = window.location.protocol + '//' + window.location.host + window.location.pathname;

[DanielStoelb]

Are there any plans to adapt this to work with other shortening APIs, such as Go.USA.gov – Create short, trustworthy .gov URLs ?

[RobertScheitlin__GISP]

Daniel,

  Nope, I have no plans for that. Bitly is free so I don't see any need.

[ChristopherHolewinski1]

Hi Robert,

I can't seem to get the "Share current map extent" feature to work correctly.  I tried zooming into several different extents and the URL doesn't update to include the change in extent.  I'm unsure if it's an issue on my end and I'm not configuring it correctly, or if there's something wrong with the base code.

Thanks,

Chris

[RobertScheitlin__GISP]

Chris,

   This was bug it is now fixed.

[FinbarGillen]

Robert,

I have added downloaded the latest release of this widget but WAB builder developer edition does not seem to recognize it. It does recognize the previous version of the widget but not the latest one for some reason.

Any ideas?

Finbar

[RobertScheitlin__GISP]

Finbar,

   Where are you placing the files that you have downloaded in your WAB folder structure?

[FinbarGillen]

arcgis-web-appbuilder-1.2\client\stemapp\widgets

[RobertScheitlin__GISP]

Finbar,

   OK, placing the new files in that location will only apply the updates to any new apps created. If you want to update an existing application then you have to place the updated widget files in the apps widget directory i.e. [install dir]\server\apps\[app number]\widgets\Share.

[FinbarGillen]

Robert,

I seem to have it working now but the map extent will not work. Is the zip file at the top of this thread the latest version?

When I tick "Share current map extent by default" the widget fails to open. See image below

[RobertScheitlin__GISP]

Finbar,

    You can check to see if you are running the latest version by holding the Alt key on the keyboard and clicking anywhere in the widget body and a message dialog should come up show the widget version (this is specific to my widgets) the latest version is 1.2.0.1.

Also you can check your browsers web console and tell me what the error is when you get the message like you do in your screenshot above.

[FinbarGillen]

Robert,

I have the latest version of the app, through I am running it on Web AppBuilder Version 1.2.

This is whats coming back from the Web Console.

[RobertScheitlin__GISP]

Finbar,

   Are you using a custom basemap that is not WKID 102100 or 4326? if so that is the issue. I have not tested with a custom WKID and likely need to make some code changes for this to work with WKIDs other than 102100 or 4326.

[FinbarGillen]

That is it Robert, I should have known as the StreetView Popup Widget would not work because of this either. I am using WKID - 29900 - TM65_Irish_Grid.

Would it take much editing in the code to get the widget working as I could give it a go myself here.

[RobertScheitlin__GISP]

Finbar,

   As you can see from the error it is at line 174 of the share widgets Widget.js and that is where I try to get the gExtents xmin, xmax, etc. the problem is line 172 map.geographicExtent is null because this property is not supported when the map is any WKID other than 102100 or 4326 so the maps extent would have to projected from your 29900 to 4326.

[FinbarGillen]

Cheers for the info Robert! I will look into trying to re-project to that map extent.

[FinbarGillen]

Robert Scheitlin, GISP​,

I have been trying for a while to get this re projection to 29900 but have not succeeded. Do you know what line of code I would have to add?

Regards

Finbar

[FinbarGillen]

Share Tool - current map extent · Issue #35 · Esri/Viewer · GitHub - This link provides info from someone who had the seem problem.

[RobertScheitlin__GISP]

Finbar,

   Nice find. I was already work on a solution for this but Kelly method is much cleaner. I will be releasing a new version that will handle different map wkids probably today (12/10/2015).

[FinbarGillen]

Robert Scheitlin, GISP​,

Widget is working fine, thanks! Would there be a way to link the Share widget with the Draw Widget so that users graphics could pull through in the link?

Cheers!

Finbar

[RobertScheitlin__GISP]

Finbar,

   Not that I can think of offhand.

[MellissaLasslo]

Robert Scheitlin, GISP,

Do you know what URL parameters are available? For instance, if I wanted to share the map with a specific query included is that possible? I would like to have it automatically zoom to a specified parcel instead of a map extent.

[RobertScheitlin__GISP]

Mellissa,

  Currently the only option supported by this widget is the maps extent. You you can manually write other WAB supported url parameters to the embed map window.

Use URL parameters—Web AppBuilder for ArcGIS | ArcGIS

[haThach]

Robert,

How do I comment out these three sharing icons?

I tried comment out in server\apps\#\widgets\Share\Widget.html file, it does seem to be working but the email link did not work.

Whats the best approach to doing this?

Thanks,

Ha T.

[RobertScheitlin__GISP]

Ha T.

In the css folder open the style.css and all the way at the bottom of the file find the icon-twitter:before

rule and add display: none;

.icon-twitter:before {

  content: '\e802';

  display: none;

}

/* ' ' */

.icon-facebook-squared:before {

  content: '\e803';

  display: none;

}

/* ' ' */

.icon-gplus:before {

  content: '\e804';

  display: none;

}

/* ' ' */

[haThach]

Robert,

Once again, Thanks you for all your help. It work like a charm.

[MichelleJean]

Hi Robert Scheitlin, GISP‌ ,

Share Widget looks great.  

Does it only work with the Web App Builder?

I would like to integrate it in my JavaScript 3.20 webapp available on JS Bin.

Thank you,

Michelle.

[RobertScheitlin__GISP]

Michelle,

  Correct this widget is only for WAB. The widget was ported over to WAB based on a AGOL Template widget though.

You can look at the code in the Public Information Map template:

Public Information Map 

[MichelleJean]

Thank you rscheitlin‌ 

[AmyRoust]

Does the current version of this widget work with WAB Developer version 2.4? When I first add it to my map, it works, but subsequent clicks to activate the tool fail. (I just get the "loading" circle, but nothing ever appears.) I'm not sure if this is a compatibility issue or if it's because I am just testing on localhost and have not enabled the map for full use yet. Appreciate any clarification you can offer! - Amy

[RobertScheitlin__GISP]

Amy,

  This widget has not been updated since 2.0 since esri came out with a share widget out of the box. This widget has been superseded by the esri otb Share widget. 

[AmyRoust]

OK, that probably explains my issue. Thank you!

I like the otb Share widget, but I can't use it unless I can figure out a way to turn off the "Query a feature and zoom to it" option. That functionality allows the end user to query our parcel database by owner name, which our county does not want. I can't hide the owner field from the parcel layer because the county wants to show owner information in the pop-up window. (In short, it's OK to see who owns a specific parcel, but it is not OK to allow queries that will quickly highlight every property a person owns.) Do you have any ideas on how I could achieve that? I've been reading through the code, but I fear that the section I need to comment out is not exposed. (I'm a JS noob, so that doesn't help.)

[RobertScheitlin__GISP]

Amy,

   You just need to add style="display: none;" to the that radio option in the appropriate file:

[install dir]\server\apps\[app#]\jimu.js\dijit\templates\ShareLink.html (line 2).

...
        <div class="optionsRow" style="display: none;">
          <input data-dojo-attach-point="queryFeature" class="shareRadios jimu-float-leading" type="radio" name="radios" data-id="queryFeature" data-dojo-type="dijit.form.RadioButton">
          <div class="labels">${nls.queryFeature}</div>
          <div class="optionsMore queryFeature_optionsMore">
            <div class="moreOptions">
              <div data-dojo-attach-point="queryFeature_layer" name="queryFeature_layer" class="queryFeature_layer"></div>
              <select data-dojo-attach-point="queryFeature_field" name="queryFeature_field" data-dojo-type="dijit/form/Select"></select>
              <select data-dojo-attach-point="queryFeature_value" name="queryFeature_value" data-dojo-type="dijit/form/Select"></select>
            </div>
          </div>
        </div>‍‍‍‍‍‍‍‍‍‍‍
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[AmyRoust]

No wonder I couldn't find it! I was looking in client > sitemapp > widgets. This resolved my issue, so thank you for the fast and helpful response.