Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] How to create a date range slider filter in Webfocus

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED] How to create a date range slider filter in Webfocus
 Login/Join
 
Platinum Member
posted
Hi Everyone,

As a part of our dashboard, I am trying to create a date range slider filter as shown in the url below. Please provide if you have any inputs on how to create this in webfocus. Thank you very much.

Date Slider Image

This message has been edited. Last edited by: FP Mod Chuck,


Webfocus 8105/8202
Windows
All Outputs
 
Posts: 106 | Registered: June 26, 2018Report This Post
Virtuoso
posted Hide Post
I haven't seen a date slider, but there's always the calendar picker.


WebFOCUS 8206, Unix, Windows
 
Posts: 1853 | Location: New York City | Registered: December 30, 2015Report This Post
Master
posted Hide Post
You can use the Range Slider using jQueryUI: https://jqueryui.com/slider/#range

Here is a rough example:
  
-HTMLFORM BEGIN NOEVAL
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Slider - Range slider</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        #custom-handle-0,
        #custom-handle-1 {
            width: 75px;
            height: 1.6em;
            top: 50%;
            margin-top: -.8em;
            text-align: center;
            line-height: 1.6em;
            font-family: Verdana, Arial, sans-serif;
            font-size: 12px;
        }
    </style>
    <script>
        $(function () {
            var minDate = new Date('2019-01-01');
            var maxDate = new Date('2019-12-31');
            var valueHi = new Date(new Date().toLocaleDateString());
            var valueLo = new Date(valueHi.getTime() - 56 * 86400000);
            var dateMin = new Date(minDate.getTime() + minDate.getTimezoneOffset() * 60 * 1000);
            var dateMax = new Date(maxDate.getTime() + maxDate.getTimezoneOffset() * 60 * 1000);
            var handle0 = $("#custom-handle-0");
            var handle1 = $("#custom-handle-1");

            $("#slider-range").slider({
                range: true,
                min: dateMin.getTime() / 1000,
                max: dateMax.getTime() / 1000,
                step: 86400,
                values: [dateMin.getTime() / 1000, valueHi.getTime() / 1000],
                create: function () {
                    handle0.text(dateMin.toLocaleDateString());
                    handle1.text(valueHi.toLocaleDateString());
                },

                slide: function (event, ui) {
                    $("#amount").val((new Date(ui.values[0] * 1000).toDateString()) + " - " + (new Date(ui.values[1] * 1000)).toDateString());
                    handle0.text(new Date(ui.values[0] * 1000).toLocaleDateString());
                    handle1.text(new Date(ui.values[1] * 1000).toLocaleDateString());

                }
            });
            $("#amount").val((new Date($("#slider-range").slider("values", 0) * 1000).toDateString()) + " - " + (new Date($("#slider-range").slider("values", 1) * 1000)).toDateString());
        });
    </script>
</head>

<body>
    <p>
        <label for="amount">Date range:</label>
        <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" size="100" />
    </p>
    <div id="slider-range">
        <div id="custom-handle-0" class="ui-slider-handle"></div>
        <div id="custom-handle-1" class="ui-slider-handle"></div>
    </div>
</body>

</html>
-HTMLFORM END

This message has been edited. Last edited by: Hallway,


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Platinum Member
posted Hide Post
Hi Hallway,

Thanks for taking time to provide this information. I see a "slider" in components tool bar in the html composer. Is it possible to create a date range slider filter with this and pass date ranges to the procedures on the html page.

Regards
BI DEV


Webfocus 8105/8202
Windows
All Outputs
 
Posts: 106 | Registered: June 26, 2018Report This Post
Master
posted Hide Post
quote:
Originally posted by BI Dev:
Hi Hallway,

Thanks for taking time to provide this information. I see a "slider" in components tool bar in the html composer. Is it possible to create a date range slider filter with this and pass date ranges to the procedures on the html page.

Regards
BI DEV


That slider control is only a single slider, not a range slider.

*Edit: Hold that thought. I see a multiple attribute on it. Looking into using dates and will update.


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Master
posted Hide Post
I was able to make it work:

(ignore the black spot on the picture. I converted the picture to base64 so all can see it. However in the code there is the letter k repeated three times and IBI masks it as ***, which of course breaks the base64 data. #cuzIBI So, I had to change one of the k to l and that caused the black)

You need to change the slider attribute "range" to yes, and get the date values from a master file. I created a hold file from ggsales with just the distinct dates
 
TABLE FILE GGSALES
BY DATE AS 'DATEKEY'
ON TABLE SET ASNAMES ON
ON TABLE SET HOLDLIST PRINTONLY
ON TABLE HOLD AS baseapp/gg_dates FORMAT FOCUS
END 


I then referenced the master file in the slider settings. The input box ends up being too small so I just changed the width on the embedded css tab
  
 #slider1 > input {
    width:130px; 
 }
/*the following code will put the input box inline with the slider*/
 #slider1 > div {
    width: calc(100% - 160px) !important;
 }

This message has been edited. Last edited by: Hallway,


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Silver Member
posted Hide Post
Hallway,

I have been working with the WebFOCUS slider range for a few now with techsupport help. Does the data range actually include the default range capabilities the way you are doing it?

Currently, the range does not have the capability to pass a default range of data. But if creating a hold file as you are doing with the dates will work for creating a default range of values, then maybe I can go that route too.

Thanks,


WebFOCUS 8.2.02M
Windows
Server/8.2.02M
All Outputs
 
Posts: 43 | Location: Odessa, Florida | Registered: July 26, 2011Report This Post
Platinum Member
posted Hide Post
Thank you very much Hallway. It worked for me.

quote:
Originally posted by Hallway:
I was able to make it work:

(ignore the black spot on the picture. I converted the picture to base64 so all can see it. However in the code there is the letter k repeated three times and IBI masks it as ***, which of course breaks the base64 data. #cuzIBI So, I had to change one of the k to l and that caused the black)

You need to change the slider attribute "range" to yes, and get the date values from a master file. I created a hold file from ggsales with just the distinct dates
 
TABLE FILE GGSALES
BY DATE AS 'DATEKEY'
ON TABLE SET ASNAMES ON
ON TABLE SET HOLDLIST PRINTONLY
ON TABLE HOLD AS baseapp/gg_dates FORMAT FOCUS
END 


I then referenced the master file in the slider settings. The input box ends up being too small so I just changed the width on the embedded css tab
  
 #slider1 > input {
    width:130px; 
 }
/*the following code will put the input box inline with the slider*/
 #slider1 > div {
    width: calc(100% - 160px) !important;
 }


Webfocus 8105/8202
Windows
All Outputs
 
Posts: 106 | Registered: June 26, 2018Report This Post
Master
posted Hide Post
quote:
Originally posted by MReeder:
Hallway,

I have been working with the WebFOCUS slider range for a few now with techsupport help. Does the data range actually include the default range capabilities the way you are doing it?

Currently, the range does not have the capability to pass a default range of data. But if creating a hold file as you are doing with the dates will work for creating a default range of values, then maybe I can go that route too.

Thanks,


Using the hold file, the range in the hold file will determine the range of the slider. the defaults will be the max and min values. I'm sure that you could set different default values with JavaScript.


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Master
posted Hide Post
quote:
Can you please let me know how did you pass the date range from "date slider" to the report as a parameter.


Did you figure out how to pass the parameters to the report?


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Expert
posted Hide Post
quote:
new Date(new Date().toLocaleDateString());

Watch out if using this in IE versions.

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report This Post
Guru
posted Hide Post
I'm trying this, but it doesn't seem to work correctly. When my screen comes up, the slider is populated properly, but when I move a slider I get numbers like 1996.1234 instead of dates. I'm on 8.105M.


Webfocus 8
Windows, Linux
 
Posts: 258 | Location: Palm Coast, FL | Registered: February 05, 2010Report This Post
Silver Member
posted Hide Post
Hallway,

Thanks! I will give this a try. Smiler


WebFOCUS 8.2.02M
Windows
Server/8.2.02M
All Outputs
 
Posts: 43 | Location: Odessa, Florida | Registered: July 26, 2011Report This Post
Master
posted Hide Post
quote:
Originally posted by Tony A:
quote:
new Date(new Date().toLocaleDateString());

Watch out if using this in IE versions.

T

Interesting. Good catch. #ripIE

I guess that you would need this instead?
 
new Date(new Date().toDateString()) 


Our company has finally decided to give IE the boot and use designate Chrome and Edge-Chromium as our official browsers. This came about with the adivce from a MSFT rep stating at how vulnerable you are using IE. #happyDays

This message has been edited. Last edited by: Hallway,


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Silver Member
posted Hide Post
Hallway,

Thank you so much for this! It totally worked for my needs. Since I just needed a numeric range from 0-100 to default I was able to create a flat file and a table master off the file. Then just called the master from the dynamic call from the canvas.

I have a meeting set with Barry Solomon tomorrow at 1:00 pm est. He will be happy to be able to log this in his how to do that in WebFOCUS/App Studio.

Thanks again and have a great weeekend!


WebFOCUS 8.2.02M
Windows
Server/8.2.02M
All Outputs
 
Posts: 43 | Location: Odessa, Florida | Registered: July 26, 2011Report This Post
Master
posted Hide Post
Good One

NICE WORK!! I'm glad that you figured it out. Smiler

Don't forget to add [SOLVED] to the post title.


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Silver Member
posted Hide Post
is BI DEV solved? I sorta hijacked his post. Smiler


WebFOCUS 8.2.02M
Windows
Server/8.2.02M
All Outputs
 
Posts: 43 | Location: Odessa, Florida | Registered: July 26, 2011Report This Post
Platinum Member
posted Hide Post
Yes, I was able to.


quote:
Originally posted by Hallway:
quote:
Can you please let me know how did you pass the date range from "date slider" to the report as a parameter.


Did you figure out how to pass the parameters to the report?


Webfocus 8105/8202
Windows
All Outputs
 
Posts: 106 | Registered: June 26, 2018Report This Post
Platinum Member
posted Hide Post
Thank you very much Hallway, It worked for me. I appreciate everyone for taking time to provide their inputs.


Webfocus 8105/8202
Windows
All Outputs
 
Posts: 106 | Registered: June 26, 2018Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] How to create a date range slider filter in Webfocus

Copyright © 1996-2020 Information Builders