Select to view content in your preferred language

WAB: Change link text with custom widget

1446
10
Jump to solution
07-02-2019 01:03 PM
KarstenRank
Occasional Contributor III

Hi,

I'm developing a widget that checks a webhook payload if the map has been updated. 

https://community.esri.com/thread/236190-re-popup-alert-when-webmap-has-a-new-save-date

If the payload timestamp is newer then the widget timestamp created at startup a popup window appears.

web mapping application

How can I additionally add something like "status of app" with my widget at the time the popup occurs?

Thanks for your help!

Karsten

Victor Tey Thank you for your tip!

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Apps main config.json

  "widgetOnScreen": {
    "widgets": [
      {
        "uri": "themes/FoldableTheme/widgets/HeaderController/Widget",
        "position": {
          "left": 0,
          "top": 0,
          "right": 0,
          "height": 40,
          "relativeTo": "browser"
        },
        "version": "2.12",
        "id": "themes_FoldableTheme_widgets_HeaderController_Widget_1",
        "name": "HeaderController"
      },
      {
        "uri": "widgets/Scalebar/Widget",
        "position": {
          "left": 7,
          "bottom": 25,
          "relativeTo": "map"
        },
        "version": "2.12",
        "id": "widgets_Scalebar_Widget_2",
        "name": "Scalebar"
      },
      {
        "uri": "widgets/ReloadWebMap/Widget",
        "position": {
          "left": 0,
          "top": 5,
          "relativeTo": "app",
          "width": "100%",
          "zIndex": 9999
        },
        "version": "2.12",
        "id": "widgets_ReloadWebMap_Widget_1",
        "name": "ReloadWebMap"
      },
...

Widget.js

///////////////////////////////////////////////////////////////////////////
// Robert Scheitlin - Reload WebMap
///////////////////////////////////////////////////////////////////////////
/*global define, setTimeout, clearTimeout*/
define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'jimu/BaseWidget',
    'dojo/dom-class'
  ],
  function(
    declare,
    lang,
    BaseWidget,
    domClass) {
    var clazz = declare([BaseWidget], {
      handle: null,
      name: 'ReloadWebMap',

      startup: function() {
        this.inherited(arguments);
        setTimeout(lang.hitch(this, function(){
          domClass.remove(this.ReloadDiv, 'hidden');
        }), 5000);
      }
    });

    return clazz;
  });

Widget,html

<div>
	<div class="reload hidden" data-dojo-attach-point="ReloadDiv">RELOAD</div>
</div>

Manifest.json

{
  "name": "ReloadWebMap",
  "platform": "HTML",
  "version": "2.12",
  "wabVersion": "2.12",
  "author": "Robert Scheitlin",
  "description": "Reload WebMap",
  "copyright": "2019",
  "license": "http://www.apache.org/licenses/LICENSE-2.0",
  "properties": {
    "inPanel": false,
    "hasLocale": false,
    "hasStyle": true,
    "hasConfig": false,
    "hasUIFile": true,
    "hasSettingPage": false,
    "hasSettingUIFile": false,
    "hasSettingLocale": false,
    "hasSettingStyle": false,
    "IsController": false
  }
}

style.css

.hidden {
  display: none;
}

.reload {
  font-weight: bolder;
  color: red;
  width: 100%;
  text-align: center;
  font-size: xx-large;
}

View solution in original post

10 Replies
RobertScheitlin__GISP
MVP Emeritus

Karsten,

   If you develop your widget based on a link in the header controller widget then you will be limiting your widget to work well with only certain themes. Why not have your widget add an off panel text like the coordinate widget or scalebar widget for example?

0 Kudos
KarstenRank
Occasional Contributor III

Hi Robert,

the widget is already off panel and invisible and starts automatically. 

How can I create off panel text ?

 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Karsten,

   Does your widget have a Widget.html?

0 Kudos
KarstenRank
Occasional Contributor III

Yes I have and I gave him the position -1000,-1000 for not showing in the application. 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

So change the position back into view and add your text to it.

0 Kudos
KarstenRank
Occasional Contributor III

This was my first idea I had.

But in my opinion would it be nicer if only RELOAD is written like shown in the picture below.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

That should totally be possible by setting a div in the Widget.html innerHtml to "RELOAD" and set that div to display: none when you don't want it to show. You will need to set the z-index to be higher than the HeaderController widget too.

0 Kudos
KarstenRank
Occasional Contributor III

How can I write the code?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Apps main config.json

  "widgetOnScreen": {
    "widgets": [
      {
        "uri": "themes/FoldableTheme/widgets/HeaderController/Widget",
        "position": {
          "left": 0,
          "top": 0,
          "right": 0,
          "height": 40,
          "relativeTo": "browser"
        },
        "version": "2.12",
        "id": "themes_FoldableTheme_widgets_HeaderController_Widget_1",
        "name": "HeaderController"
      },
      {
        "uri": "widgets/Scalebar/Widget",
        "position": {
          "left": 7,
          "bottom": 25,
          "relativeTo": "map"
        },
        "version": "2.12",
        "id": "widgets_Scalebar_Widget_2",
        "name": "Scalebar"
      },
      {
        "uri": "widgets/ReloadWebMap/Widget",
        "position": {
          "left": 0,
          "top": 5,
          "relativeTo": "app",
          "width": "100%",
          "zIndex": 9999
        },
        "version": "2.12",
        "id": "widgets_ReloadWebMap_Widget_1",
        "name": "ReloadWebMap"
      },
...

Widget.js

///////////////////////////////////////////////////////////////////////////
// Robert Scheitlin - Reload WebMap
///////////////////////////////////////////////////////////////////////////
/*global define, setTimeout, clearTimeout*/
define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'jimu/BaseWidget',
    'dojo/dom-class'
  ],
  function(
    declare,
    lang,
    BaseWidget,
    domClass) {
    var clazz = declare([BaseWidget], {
      handle: null,
      name: 'ReloadWebMap',

      startup: function() {
        this.inherited(arguments);
        setTimeout(lang.hitch(this, function(){
          domClass.remove(this.ReloadDiv, 'hidden');
        }), 5000);
      }
    });

    return clazz;
  });

Widget,html

<div>
	<div class="reload hidden" data-dojo-attach-point="ReloadDiv">RELOAD</div>
</div>

Manifest.json

{
  "name": "ReloadWebMap",
  "platform": "HTML",
  "version": "2.12",
  "wabVersion": "2.12",
  "author": "Robert Scheitlin",
  "description": "Reload WebMap",
  "copyright": "2019",
  "license": "http://www.apache.org/licenses/LICENSE-2.0",
  "properties": {
    "inPanel": false,
    "hasLocale": false,
    "hasStyle": true,
    "hasConfig": false,
    "hasUIFile": true,
    "hasSettingPage": false,
    "hasSettingUIFile": false,
    "hasSettingLocale": false,
    "hasSettingStyle": false,
    "IsController": false
  }
}

style.css

.hidden {
  display: none;
}

.reload {
  font-weight: bolder;
  color: red;
  width: 100%;
  text-align: center;
  font-size: xx-large;
}