Web Framework - SplunkJS Stack - TimeRangeView dialogOptions property Not Working

[jhowkins]

I'm having trouble implementing a custom TimeRange picker using Splunk 6 & SplunkJS (splunkjs/mvc/timerangeview -- dialogOptions property). Here is an example of the template that has the issue...

...
{% block content %}
   <div id="mytimerangeview" />
{% endblock content %}

{% block js %}
<script>
   var deps = [
   "splunkjs/ready!",
   ...
   "splunkjs/mvc/timerangeview"
   ];
   require(deps, function(mvc,_) {
   ...
   var TimeRangeView = require("splunkjs/mvc/timerangeview");

   var dlgopts = {
     showPresets:false,
     showPresetsRealTime:false,
     showPresetsRealTimeOnly:false,
     showPresetsRelative:false,
     showPresetsAllTime:false,
     showCustom:false,
     showCustomRealTime:false,
     showCustomRelative:false,
     showCustomDate:true,  // Only show CustomDate
     showCustomDateTime:false,
     showCustomAdvanced:false,
     enableCustomAdvancedRealTime:false
   };

   var mytimerange = new TimeRangeView({
     id: "mysearch_id",
     managerid: "mysearch_mgr_id",
     preset: "Yesterday",
     dialogOptions: dlgopts,
     el: $("#mytimerangeview")
   }).render();

   mytimerange.on("change", function() {
     mysearch.search.set(mytimerange.val());
   });
   ...
)};

I left out the SearchManager bits to prevent confusion. Note that everything works except the dialogOptions property. I am still seeing everything, despite trying to hide everything but the CustomDate option. I've tried following the example on Splunk's website found here:
http://docs.splunk.com/DocumentationStatic/WebFramework/1.1/compref_timerange.html

Not sure if I'm doing something wrong or if this isn't working for anyone else. I noticed that the dialogOptions property was not available in WebFramework 1.0 -- see here:
http://docs.splunk.com/DocumentationStatic/WebFramework/1.0/compref_timerange.html

I'm not sure which version Splunk 6 has "built-in" -- more importantly, does it actually support the TimeRangeView dialogOptions property. Whatever the case, I'd like to use it. Any good info on this problem would be a great help.

[samolsencrc]

I've had similar trouble with this component using Splunk 7.2. Examining the source in $SPLUNK_HOME/share/splunk/search_mrsparkle/exposed/js/splunkjs/mvc/timerangeview.js it seems the view is now presented using a React component from $SPLUNK_HOME/share/splunk/search_mrsparkle/exposed/js/splunkjs/mvc/components/TimeRangePickerDropdown.jsx.

There's a different set of options supported by this component, which I can't find documentation for. I've been able to hack around how my widget is presented by changing the options sent into that component (below), but can anyone suggest the right way to do this? I'm concerned the underlying API isn't public, and subject to change. Thanks.


define(['splunkjs/mvc/timerangeview'], function(TimeRangeView){
return TimeRangeView.extend( {
getMenuSettings: function () {
return {
showAdvanced: false,
showDate: true,
showDateTime: false,
showPresets: false,
showRealtime: false,
showRelative: false
}
}
} )
});


[jpsulisz]

Has there been any update to this?

Tried above solution and can't seem to get it to function.

[kkarthik2]

Me too, i have tried different combination, its not working, but im getting duplicate drop down options. But is not working. im get struck in mvc.js, any one having the solutions

var deps=[
"splunkjs/ready!",
"splunkjs/mvc/searchmanager",
"splunkjs/mvc/timerangeview"
];
require(deps,function(mvc) {
var SearchManager=require("splunkjs/mvc/searchmanager");

var TimeRangeInput = require("splunkjs/mvc/timerangeview");

  var mysearch = new SearchManager({
        id: "search1",
        preview: true,
        search : "index=new_regulator | rename \"Report Date\" as RD | eval RD1=RD |eval earliest=if(isnum(\"$T.earliest$\"),\"$T.earliest$\",relative_time(now(),\"$T.earliest$\"))       
        required_field_list: "*"
    });
  var field_new = new TimeRangeInput({
         id: "field1",
         managerid: "search1",
         el: $('#field1')
        }).render();

 field_new.on("change", function() {
        mysearch.settings.set(field_new.val());



     var mypresetsettings={

        showCustomDate:false,
        showCustomAdvanced:false
    };

     var mytimerange_custom = new TimeRangeInput({
         id: "field1_id",
         managerid: "mysearch",
         dialogOptions: mypresetsettings,
     el: $('#field1_id')
        }).render();


    mytimerange_custom.on("change", function() {
        mysearch.settings.set(mytimerange_custom.val());
    });
});

plz solution for this issue.

[fwallner]

You must set showCustom on true (showCustom: Indicates whether to show the panels other than Presets.). Your dialog options have to look like this:

var dlgopts = {
 showPresets:false,
 showPresetsRealTime:false,
 showPresetsRealTimeOnly:false,
 showPresetsRelative:false,
 showPresetsAllTime:false,
 showCustom:true, // <-- indicates whether or not to show other panels then the presets panel 
 showCustomRealTime:false,
 showCustomRelative:false,
 showCustomDate:true,  // Only show CustomDate
 showCustomDateTime:false,
 showCustomAdvanced:false,
 enableCustomAdvancedRealTime:false

};

[jhowkins]

I've tried several different combinations, including the one you've suggested, without success. I've even tried the example provided by Splunk... also no luck. I should note that this was previously an implementation of Splunk 5 prior to getting upgraded to 6. Perhaps there is a known issue with Web Framework when upgrading? If so, what is the solution? Perhaps this is an issue Splunk's internal Web Frameworks developers might be able to answer...

[kasu_praveen]

Did you get any solution for this @jhowkins ? I also tried this, didn't work out for me.

[jhowkins]

Still no resolution for this issue @kasu_praveen

Should I find the answer, I will definitely post it here.