topic How to add custom text box to WAB app in ArcGIS Web AppBuilder Questions

How to add custom text box to WAB app

RodKuhns — Mon, 07 Aug 2017 22:37:14 GMT

I have a custom WAB application that zooms to a parcel feature upon startup using URL parameters passed in. I would like to add a Text Box, Title Box or some type of HTML table to display information about the feature, such as Parcel ID, Owner name, County, Township, Range, Section etc. This could be displayed on top of the map, covering a portion of the map in a corner, or in a dedicated area above the map. Can anyone provide some suggestions about how I might go about adding this type of labeling that will come from a JavaSript function? I have the function to retrieve the data elements, I'm in need of ideas on how to display them on the WAB interface.

Thanks!

Rod Kuhns

GIS Applications Architect, MBS

Re: How to add custom text box to WAB app

RobertScheitlin__GISP — Mon, 07 Aug 2017 22:53:09 GMT

Rod,

Do you have popups enabled for the parcel layer? If so then you can just get the map.center geometry and use that to fire a layer click programatically to show the parcels popup.

Re: How to add custom text box to WAB app

RodKuhns — Mon, 07 Aug 2017 23:35:13 GMT

Thanks Robert! We have a unique requirement in that the user department we are building this for wants this interface to highlight and display information only on the parcel passed in on the command line. We have that working in that the WAB site starts up with only the parcel 'requested' highlighted. They specifically don't want this app used for exploring information about neighboring parcels. There is specific reasons that I won't elaborate on. That is a great idea to turn on the popup and pop it up... but in this case, we only want the user to see the attributes for the selected parcel. Given that... can you think of another tool or a way to prevent clicking on other parcels?

Re: How to add custom text box to WAB app

RickeyFight — Mon, 07 Aug 2017 23:42:02 GMT

You could have a form of the filter widget that only shows searched for percales. The other parcels would show on a secondary layer but would not be selectable.

Re: How to add custom text box to WAB app

RobertScheitlin__GISP — Mon, 07 Aug 2017 23:45:49 GMT

Rod,

Well there are several ways to do this but that was the least complicated. So if you already have the parcel highlighted then you must have done a Query using QueryTask so you have the attributes you want. You can use the jimu Message dijit to display the data.

Re: How to add custom text box to WAB app

RodKuhns — Tue, 08 Aug 2017 00:28:18 GMT

Thanks! I do have all the attributes and just need a means to display them. The jimu Message digit sounds perfect. Can you help me find a sample usage or doc or reference on it... I'm not finding any info on it.

Re: How to add custom text box to WAB app

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:25:29 GMT

Here is a snippet (as with much of the WAB library you will not find documentation on it, but if you look at the otb widget you will find many examples):

define([
'jimu/dijit/Message',
.....
],
  function (
    Message,
.....
) {

//Some code to use it
            var msgStr = this.nls.widgetverstr + ': ' + this.manifest.version;
            msgStr += '\n' + this.nls.wabversionmsg + ': ' + this.manifest.wabVersion;
            msgStr += '\n' + this.manifest.description;
            new Message({
              titleLabel: "your title",
              message: msgStr
            });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to add custom text box to WAB app

RodKuhns — Tue, 08 Aug 2017 01:24:45 GMT

Worked Perfectly! Thank you Robert!

Re: How to add custom text box to WAB app

GeorgeKatsambas — Thu, 21 Feb 2019 15:12:15 GMT

I too am looking to add a text box on a WAB map with some sort of disclaimer, in addition to the splash screen, the code you posted earlier where would I add it.

Re: How to add custom text box to WAB app

RobertScheitlin__GISP — Thu, 21 Feb 2019 16:29:24 GMT

George,

The code can go in a custom widget or some widget like the splash widget that open on startup.

Re: How to add custom text box to WAB app

GeorgeKatsambas — Thu, 21 Feb 2019 16:41:06 GMT

In the widget.js or the config, this is not a css rule? Basically I am asking where do I add the code lol

Re: How to add custom text box to WAB app

RobertScheitlin__GISP — Thu, 21 Feb 2019 16:54:05 GMT

George,

No this is not a css rule so it goes in the widget.js in the startup or in the onclose function of the splash widget. All depends on your desired workflow.

Re: How to add custom text box to WAB app

GeorgeKatsambas — Thu, 21 Feb 2019 17:06:01 GMT

I am inserting it in widget.js in splash under widget correct?

Re: How to add custom text box to WAB app

RobertScheitlin__GISP — Thu, 21 Feb 2019 17:16:12 GMT

Correct

Re: How to add custom text box to WAB app

GeorgeKatsambas — Thu, 21 Feb 2019 17:26:53 GMT

OK Robert, I am going to bother you 1 last time at which line add the code and why I keep on getting a syntax error

Re: How to add custom text box to WAB app

RobertScheitlin__GISP — Thu, 21 Feb 2019 17:31:39 GMT

George,

I would have to see what you have done. I am not sure which line of code as I am providing general advice.

Re: How to add custom text box to WAB app

GeorgeKatsambas — Thu, 21 Feb 2019 19:46:03 GMT

I am looking for help on where exactly to add the code that will give me a text box on my screen and the correct syntax

Re: How to add custom text box to WAB app

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:25:32 GMT

George,

define(['dojo/_base/declare',
    'dojo/_base/lang',
    'dojo/_base/html',
    'dojo/on',
    'dojo/keys',
    'dojo/query',
    'dojo/cookie',
    'dijit/_WidgetsInTemplateMixin',
    'jimu/BaseWidget',
    'dojo/topic',
    'jimu/dijit/CheckBox',
    'jimu/utils',
    'esri/lang',
    'jimu/dijit/LoadingShelter',
    'dojo/Deferred',
    'jimu/dijit/Message'
  ],
  function(declare, lang, html, on, keys, query, cookie, _WidgetsInTemplateMixin, BaseWidget, topic,
           CheckBox, utils, esriLang, LoadingShelter, Deferred, Message) {
....‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍


      close: function() {
        this._isClosed = true;
        this._eventHide();
        this.widgetManager.closeWidget(this);
        new Message({
          titleLabel: "your title",
          message: "Hello World"
        });
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to add custom text box to WAB app

GeorgeKatsambas — Thu, 21 Feb 2019 20:19:21 GMT

I am copying and pasting as above, keep on getting a syntax error, can i add this to the start

Re: How to add custom text box to WAB app

RobertScheitlin__GISP — Thu, 21 Feb 2019 20:32:31 GMT

No replace just the text portions provided. The ... mean there is more code that I did not include so leave that portion alone.