topic Re: Time Slider Widget Customization - Single handle in Web AppBuilder Custom Widgets Questions

Time Slider Widget Customization - Single handle

ByronMoldofsky — Tue, 05 Sep 2017 13:39:57 GMT

I posted this as a discussion but only got one reply, so maybe better as a question. The Time Slider widget appears with two handles or thumbs to define the time period shown on the map. However in many cases for historical data we want to show a "snapshot" i.e. the situation at a single point in time, not over a period, and certainly not over an adjustable period. For example, to show a single census year's data you don't want to bracket more than one decade. The two handles can be brought together, but this may be confusing for the user. I have looked into the Time Slider widget code but cannot find a straightforward way of customizing this. I have also looked through the list of custom Widgets and cannot find it. Anyone tried this or can point me in the right direction? thanks.

Re: Time Slider Widget Customization - Single handle

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:34:31 GMT

Byron,

In the Widget.js file find the getTimeSliderProps function and make this simple addition (line 11):

      getTimeSliderProps: function() {
        if (!this._timeSliderPropsDef) {

          this._timeSliderPropsDef = new Deferred();
          this.own(this._timeSliderPropsDef);
          //var itemInfo = map && map.itemInfo;
          this.timeProcesser.getTsPros().then(lang.hitch(this, function (tsProps) {
            if (null !== tsProps &&
              (this.timeProcesser.needUpdateFullTime() || true === tsProps._needToFindDefaultInterval)) {
              this.timeProcesser._getUpdatedFullTime().then(lang.hitch(this, function (fullTimeExtent) {
                tsProps.thumbCount = 1;‍‍‍‍‍‍‍‍‍‍‍
        ..........‍‍‍‍‍‍‍‍‍‍‍‍

Re: Time Slider Widget Customization - Single handle

ByronMoldofsky — Tue, 12 Sep 2017 15:06:31 GMT

Hello Robert:
Thanks very much for the reply. I added the one line as you suggested to the getTimeSliderProps function but this did not appear to change anything effectively on the widget. The I am copying the whole function below to make sure I am not missing something else.

getTimeSliderProps: function() {
if (!this._timeSliderPropsDef) {

this._timeSliderPropsDef = new Deferred();
this.own(this._timeSliderPropsDef);
//var itemInfo = map && map.itemInfo;
this.timeProcesser.getTsPros().then(lang.hitch(this, function (tsProps) {
if (null !== tsProps &&
(this.timeProcesser.needUpdateFullTime() || true === tsProps._needToFindDefaultInterval)) {
this.timeProcesser._getUpdatedFullTime().then(lang.hitch(this, function (fullTimeExtent) {
// Next line added to reduce handles to only one - see Geonet response R. Scheitlin
tsProps.thumbCount = 1;
var start = fullTimeExtent.startTime.getTime();
var end = fullTimeExtent.endTime.getTime();

if (tsProps.startTime > end || tsProps.endTime < start) {
tsProps.startTime = start;
tsProps.endTime = end;
} else {
if (tsProps.startTime < start) {
tsProps.startTime = start;
}
if (tsProps.endTime > end) {
tsProps.endTime = end;
}
}

if (true === tsProps._needToFindDefaultInterval) {
tsProps.timeStopInterval = this.timeProcesser.findDefaultInterval(fullTimeExtent);
}

this._timeSliderPropsDef.resolve(tsProps);
}));
} else {
this._timeSliderPropsDef.resolve(tsProps);
}
}));
}

return this._timeSliderPropsDef;
},

Thanks for any further suggestions you can make.

Byron

Re: Time Slider Widget Customization - Single handle

RobertScheitlin__GISP — Tue, 12 Sep 2017 16:28:10 GMT

Byron,

Are you adding the code to the stemApp widgets folder or your actual apps widgets folder?

Re: Time Slider Widget Customization - Single handle

ByronMoldofsky — Tue, 12 Sep 2017 16:38:58 GMT

Robert: stemapp widget folder:
C:\arcgis_web_appbuilder_2.5\WebAppBuilderForArcGIS\client\stemapp\widgets
Is that incorrect? Some other customizations do seem to be working.

thanks

Re: Time Slider Widget Customization - Single handle

RobertScheitlin__GISP — Tue, 12 Sep 2017 16:47:27 GMT

That folder is correct if you have not already added the widget to your app or you are creating a new app. If you are working with an existing app you need to make the edits to the apps widgets folder.

Re: Time Slider Widget Customization - Single handle

ByronMoldofsky — Tue, 12 Sep 2017 18:05:45 GMT

Right. I created a new app from scratch and tried the widget but I still get two handles. I assume that your line of code worked for you? So I am not sure what is incorrect.

There was another question on this site that suggested a change to the setThumbIndexes values:
https://community.esri.com/message/592667

However that did not work for me either.

Any advice much appreciated.
thanks

Re: Time Slider Widget Customization - Single handle

RobertScheitlin__GISP — Tue, 12 Sep 2017 18:15:37 GMT

Byron,

Yes in my testing it worked fine for me so I am not sure what else to tell you.

Re: Time Slider Widget Customization - Single handle

ByronMoldofsky — Wed, 13 Sep 2017 20:04:39 GMT

Hi again:

I did not get your solution to work, but I was directed to an alternative in the Javascript API by an ESRI staff member. This seems custom-made for the situation where one wants the time slider to reference a single date or time rather than a range. It is counter intuitive in that it only works when the time layer on the map is configured as cumulative or "progressive." It is the timeSlider.singleThumbAsTimeInstant() function. See:
TimeSlider | API Reference | ArcGIS API for JavaScript 3.21
Thanks again.
Byron