WAB: Change link text with custom widget

[KarstenRank]

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.

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!

[RobertScheitlin__GISP]

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?

[KarstenRank]

Hi Robert,

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

How can I create off panel text ?

[RobertScheitlin__GISP]

Karsten,

   Does your widget have a Widget.html?

[KarstenRank]

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

[RobertScheitlin__GISP]

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

[KarstenRank]

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.

[RobertScheitlin__GISP]

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.

[KarstenRank]

How can I write the code?

[RobertScheitlin__GISP · Accepted solution]

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;
}‍‍‍‍‍‍‍‍‍‍‍