topic Re: WAB: Change link text with custom widget in Web AppBuilder Custom Widgets Questions

WAB: Change link text with custom widget

KarstenRank — Tue, 02 Jul 2019 20:03:08 GMT

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!

Re: WAB: Change link text with custom widget

RobertScheitlin__GISP — Tue, 02 Jul 2019 20:40:45 GMT

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?

Re: WAB: Change link text with custom widget

KarstenRank — Tue, 02 Jul 2019 21:28:26 GMT

Hi Robert,

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

How can I create off panel text ?

Re: WAB: Change link text with custom widget

VictorTey — Wed, 03 Jul 2019 01:04:16 GMT

Hi Karsten, I have not had the opportunity to look at the DOM in depth but you can basically use dojo query(similar to jquery) to retrieve any DOM by css or by ID. Look for a unique attribute in the DOM and modify the content. Hope that helps

Re: WAB: Change link text with custom widget

RobertScheitlin__GISP — Wed, 03 Jul 2019 12:42:21 GMT

Karsten,

Does your widget have a Widget.html?

Re: WAB: Change link text with custom widget

KarstenRank — Wed, 03 Jul 2019 16:05:23 GMT

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

Re: WAB: Change link text with custom widget

RobertScheitlin__GISP — Wed, 03 Jul 2019 16:15:01 GMT

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

Re: WAB: Change link text with custom widget

KarstenRank — Wed, 03 Jul 2019 19:09:54 GMT

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.

Re: WAB: Change link text with custom widget

RobertScheitlin__GISP — Wed, 03 Jul 2019 19:15:04 GMT

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.

Re: WAB: Change link text with custom widget

KarstenRank — Fri, 05 Jul 2019 18:28:49 GMT

How can I write the code?

Re: WAB: Change link text with custom widget

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:02:02 GMT

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