I searched Focal Point and I didn't find a discussion talking exactly about this issue so if I missed it, please let me know of any previous posts addressin this topic.

My issue is that I created a GUI page for our users to run a report and I used the Double List Control as a way for the user to easily select multiple items from the window on the left (selectfrom) and move them over to the window on the right (selectto). This works great!! One of my users found an issue while testing the GUI page. She noticed that if she selected a value and moved it from the left window to the right window and then decided to move it back to the left window, it puts the value at the very bottom of the list. This wouldn't be so bad if there were only a few values in the list. When there are hundereds of values in the list, it looks like a bug to the end user. In her words, 'It gets lost' at the bottom of the list and never get's put back into alphabetical order of the list on the left.

Is there a work-around for this? I just re-created it using the CAR file and it behaved the same way so it's my assumption that the Double List control dosn't do this type of re-sort. We have someone on our team that can go in and add Java Script to HTML Composer files and create some very user-friendly items but he is even stumped on how to get the list to re-sort after you press the ''removebutton' button. Any help would be appreciated!

Thanks!

This message has been edited. Last edited by: <Kathryn Henning>,

Hi kfreers,

From our technicals: That is the expected behaviour and would have to write JavaScript code to resort the listbox. To sumbit a New Feature Request, please open a case with Customer Support Services. The phone number is 1-800-736-6130, or you may access online at InfoResponse.

Cheers,

Kerry

Maintaining the sort order has already been implemented. No need for a new feature request.

quote:

Maintaining the sort order has already been implemented. No need for a new feature request.

David could you be kind enough to point us to the release and some documentation please I also would like to use this feature

Thank you

The release where this was changed is release 8 and 7703 hotfix. There is no documentation because it seems self explanatory. The order of the values is kept when doing Save Selection.

David,

Thanks for the information. We are currently using 7703 but I'm not sure how to tell if the hot fix has been installed. Our HelpDesk does all of the installations and updates. Here is the 'About' info I got from Dev Studio on my pc:

Version:7703
Gen:06062011
Packaging ID:7703_060611

Can you tell from this if the hot fix has been applied to my version of Dev Studio?

Also, if I have a HTML page already created using HTML Composer, would I need to re-create the Double List Control in HTML Composer in order for the sorting to work?

Thanks,

Keith

The answer is no, you do not have the latest.
From Tech Support, you need to log in:

WebFOCUS 7.7.03M and HotFixes

There are 5 Hotfixes, latest just came out April 3, 2012...

Ok, so the values are kept in order when doing 'save selection', but what if we check the sort option via the gui in html composer?

It seems obvious that if the user moves the value to the right and then moves it back that the left box would be sorted correctly since we wanted it sorted ascending or descending in the first place.

If we are doing a more complicated sort I understand there is no way to determine how we want the values sorted, but it seems like a bug when we select sort by value ascending and the values aren't sorted when returned but instead are just put at the bottom.

To determine the Hot Fix, navigate to this URL:

http://server[:port]/ibi_apps/diagnostics/about.jsp

This will provide a Gen Number, which corresponds to a Hot Fix. It would be very nice if Information Builders referred to Hot Fixes by their Gen Number or if the JSP page provided the Hot Fix number.

The Hot Fixes for WF 7.7. are detailed here:

HotFixes for WebFOCUS Release 7.7

On our sandbox server, we have WF 7.7.03, Gen Number 284, which corresponds to Hot Fix 7, the latest available one.

Unfortunately, the double list box items are still not sorted.

I was hoping to not have a situation like this:

Exactly! Double-list control that we specify to be sorted ascending/descending in html composer should remain sorted ascending/descending (at least in the selectfrom box) even after moving things back and forth.

quote:

The order of the values is kept when doing Save Selection.

So a New Feature Request is still needed? For those many non-Save-Selection situations...

In the meantime, how might we resort the selectfrom(left) box without resetting the control?

I should say how might we resort this based on the display value rather than the actual?

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

It appears in 8002M, it's the same thing, when pushing selections back

It looks like we need a FFR (Fix Feature Request) for this one. I am not sure how to workaround this one without tapping into the vast untouchable ibi libraries.

Can I put in a NFR for a FFR option?

While we are at it, when 'ALL' is selected, other options should be moved to the left side. I also don't see why IBI decided to make the top value selected automatically forcing the user to un-select it most of the time (I don't want no selection because I want to force the user to make a selection).

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

You need two things -- a method to re-sort the list, and a way to have the transfer of rows trigger it.

For the triggering, "onafterload" may do it. Declare a handler for "onafterload" of the "from" listbox component, something like

mycontrol_from_onafterload(cntrl) {...}

and see whether it is triggered every time there is a transfer.

Scratch what I said about no selection, that is fine. I know how to work around the when 'ALL' is selected issue. How can I re-sort the list when its values are different from the display and I want to sort the display? How do I access those display values?

Will the onafterload trigger after the user "unselects" a value (clicks the left arrow)? I will test this.

I could very well be wrong but I believe "onafterload" is an IBI invented event and is used once after a control is loaded.

As usual, the documentation is poor.

For the example "Selecting the ALL Value in a Listbox With onafterload" it is shown how to create an alert message:

function listbox1_onafterload(ctrl){
alert(IbComposer_isSelected(ctrl.id, 'ALL'));
}

This message has been edited. Last edited by: Francis Mariani,

Looks like if you are populating the right box via javascript drilldown, it doesn't matter whether you push to an array or unshift it, the value always goes to the top.

Whereas if you push the "right arrow", the value goes to the bottom. I even tried to set the current selection to blank and then repopulate. Still not working.

 
function add(id){
	var array = IbComposer_getCurrentSelection('customselect1');
	array.unshift(id);
	IbComposer_setCurrentSelection('customselect1',array,false);
}
 

vs.

 
function add(id){
	var array = IbComposer_getCurrentSelection('customselect1');
	array.push(id);
	IbComposer_setCurrentSelection('customselect1',array,false);
}
 

Definitely something behind the scenes. If I hardcode the selected value to be in between two other values, it is still pushed to the top.

 
function add(id){
	var array = IbComposer_getCurrentSelection('customselect1');
	var array2 = [];
	array2.push(array[0],id,array[1]);
	IbComposer_setCurrentSelection('customselect1',array2,true);
}
 

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

should you be specifying the id of the overall double-list control, or that of the right-hand list component?

If I am using the IbComposer function, it is the double list control. If I am going to be writing some of my own code, then I will use the right hand side.

The IbComposer functions return a blank if I try to alert when using the right box rather than the double-list control...


I could do onclick events for both the left and right buttons and hand code all of this, but then I might as well come up with my own double list control...

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

You would think that the "onchange" event on the 'To' listbox would be triggered every time the listbox changes, but once you use the up/down buttons, the onchange stops triggering.

I created this function and added an onchange event handler to call the function. It behaves in a flaky manner and stops working when one of the up/down arrow buttons are used.

//Begin function resort
function resort() {
//    alert('resort');
    var lb = document.getElementById('customselect1_selectfrom');
    arrTexts = new Array();
 
    for(i=0; i<lb.length; i++)  {
        arrTexts[i] = lb.options[i].text;
    }
 
    arrTexts.sort();
 
    for(i=0; i<lb.length; i++)  {
        lb.options[i].text = arrTexts[i];
        lb.options[i].value = arrTexts[i];
    }
}
//End function resort

Also, when you add a value from the left side, it puts it at the bottom of the right side. If you add a value via javascript, it puts it at the top whether you use array.push or array.unshift.

When you add via the button and it puts it at the bottom, the values become hidden once your selection is larger then box (you have to scroll down to see what you just added...

I didn't start this topic, but I came up with a workaround so that I didn't have to deal with the double-list control. The only thing my solution doesn't include that a double list control does is the ability to select multiple values from the left at the same time. I use fewer than 10 lines of javascript and most of it is IBI provided script.


Bascially I use the double-list control, hide the left box and replace it with a drill down report (you can still support chaining this way). I also hide the right arrow button since the left box is hidden. When a value from the drilldown frame is clicked I use javascript to populate the right value and do refreshing so that the sorting is up to date. The user can still sort the right box with the arrow keys. If anyone wants to hear more about this let me know and I can post some code/screen shots with the car file.

Some of the benefits of doing things this way is sort order can be custom, you can create smarter "controls" that use smarter search capabilities (Webfocus CONTAINS and LIKE with hidden wildcards) Basically the report is replacing part or all of the control with drill-downs.

Now if only I could find a way to select multiple drilldowns at the same time...

How do you limit the report to just the not-yet-selected candidates?

How do you refresh the report when user uses the left-arrow to remove a selection?

1. Jack, to limit the report to the not-yet-selected candidates, I do two things. In the report's drilldown function on the html page, I have this code:

 
function add(id){
	var array = IbComposer_getCurrentSelection('customselect1');
	array.push(id);
	IbComposer_setCurrentSelection('customselect1', array, false);
	IbComposer_execute('report1');
}
 

I get whats already selected (right side) and add the value to the array returned (It doesn't matter if you push or unshift, the other values are remembered behind the scenes and your new values are always added to the top which I think is better than adding to the bottom anyways since you can't see them once the scroll bar appears).

Then I execute the report to "refresh it". In the procedure I have a parameter tied to the double list control and I have that in a where statement so that those values are excluded on refresh.

 
WHERE ID NE &ID_LIST.(AND FIND...
 

2. Refreshing the report when user uses the left-arrow to remove a selection.
This was a little bit trickier. You can't use onclick() because your code will be executed before IBI's code. In my case I also have a no selection option which means I needed code to not refresh when there is no selection and when nothing is selected (you only want to remove values that are highlighted). The event I used was onmouseup (I know that comes before onclick()). In the onmouseup event I do ctrl.click() to execute the click event thus removing the selected value. Then I can refresh the report. I know that after this event, another onclick() event will be triggered, but that event won't do anything since nothing will be selected after the first trigger.

 
//Begin function customselect1_removebutton_onmouseup
function customselect1_removebutton_onmouseup(ctrl) {
	var listbox = document.getElementById('customselect1_selectto');
        //Not "no selection" value and something has to be selected
	if (IbComposer_getCurrentSelection('customselect1') != 'FOC_NOSELECTION' && listbox.selectedIndex != -1) {
			ctrl.click();
			IbComposer_execute('report1');
	}
}
//End function customselect1_removebutton_onmouseup
 

That is all the javascript I use. Now thinking about this, there is another problem. Lets say all employees are listed in this control. A user scrolls down and wants to select two employees with a last name of Smith (maybe a husband, John, and a wife, Kim, that are right next to each other by last name). When they add John, the report is going to refresh causing them to have to scroll to find Smith again (this is if they didn't use our last_name first_name search).

Also, you have to be careful if the user selects all the values from the report. You either need to show an empty report or do some kind of disclaimer message like "No More Results".

What you could do is only refresh if the user is doing a search or changing one of the parent chain controls. When they are just adding or removing a person, if they click on somebody in the drilldown javascript you can cause an error message or something to alert them that the person was already selected.


OR... When doing the "refresh", instead of executing the report, you might be able to remove the table row yourself using javascript... I might look into that. Or I could look into making my own double-list control using two of HTML Composers list controls. I'll keep you posted.

Ok.. I solved that issue. It requires a little more than 10 js lines . (I tested and it works in all major browsers).

Function add:

 
function add(id){
	//get listbox values and all the rows on the page
	var listbox = document.getElementById('customselect1_selectto');
	var array = IbComposer_getCurrentSelection('customselect1');
	var rows = window.frames[0].document.getElementsByTagName("TR");
	var length = rows.length;
	
	//add id to listbox
	array.push(id);
	IbComposer_setCurrentSelection('customselect1', array, true);
	
	//hide row containing id in report
	//start at 1 to exclude column title
	//length minus 1 to exclude blank line at end of report
	for (i=1; i<length-1; i++) {
		if(rows[i].children[1].children[0].innerHTML === id) {
			rows[i].style.display='none';
		}
	}
}
 

Function remove:

 
//Begin function customselect1_removebutton_onmouseup
function customselect1_removebutton_onmouseup(ctrl) {
	//get listbox selected value and all the rows on the page
	var listbox = document.getElementById('customselect1_selectto');
	var id = listbox.options[listbox.selectedIndex].value;
	var rows = window.frames[0].document.getElementsByTagName("TR");
	var length = rows.length;

	//Only execute when an item is selected to be removed
	if (IbComposer_getCurrentSelection('customselect1') != 'FOC_NOSELECTION' && listbox.selectedIndex != -1) {
	
		//display row containing id in report
		//start at 1 to exclude column title
		//length minus 1 to exclude blank line at end of report
		for (i=1; i<length-1; i++) {
			if(rows[i].children[1].children[0].innerHTML === id) {
				rows[i].style.display='';
			}
		}
	}
}
//End function customselect1_removebutton_onmouseup
 

One more thing. In the report with drilldowns you will need:

 
TYPE=REPORT,
     LINES-PER-PAGE=UNLIMITED,
$
 

Or set lines 9999 or whatever it is in your versions. If there are blank lines between pages of a report, it will not work unless you add code to check for those. I thought one page would be the easiest to code. Now instead of refreshing, the row is hidden or displayed and the user keeps their spots.

When there were no results or when the user selected all the items from the left, there I wanted to display custom messages, so I added a little bit extra code:
add:

 
function add(id){
	//get listbox values and all the rows on the page
	var listbox = document.getElementById('customselect1_selectto');
	var array = IbComposer_getCurrentSelection('customselect1');
	var rows = window.frames[0].document.getElementsByTagName("TR");
	var length = rows.length;
	var allHidden = true;
	
	//add id to listbox
	array.push(id);
	IbComposer_setCurrentSelection('customselect1', array, true);
	
	//hide row containing id in report
	//start at 1 to exclude column title
	//length minus 1 to exclude blank line at end of report
	for(i=1; i<length-1; i++) {
		if(rows[i].children[1].children[0].innerHTML === id) {
			rows[i].style.display='none';
		}
		
		//allHidden is true when all values have been selected
		if(rows[i].style.display==='') {
			allHidden=false;
		}
	}
	//if everything is hidden, re-run report to display proper message
	if(allHidden===true) {
		IbComposer_execute('report1');
	}
}
 

remove:

 
//Begin function customselect1_removebutton_onmouseup
function customselect1_removebutton_onmouseup(ctrl) {
	//get listbox selected value and all the rows on the page
	var listbox = document.getElementById('customselect1_selectto');
	var id = listbox.options[listbox.selectedIndex].value;
	var rows = window.frames[0].document.getElementsByTagName("TR");
	var length = rows.length;
	
	//If a message is displaying, re-run the report to populate with the correct data
	if(length === 0) {
		ctrl.click();
		IbComposer_execute('report1');
		var length = rows.length;
	}

	//Only execute when an item is selected to be removed
	if(IbComposer_getCurrentSelection('customselect1') != 'FOC_NOSELECTION' && listbox.selectedIndex != -1) {
	
		//display row containing id in report
		//start at 1 to exclude column title
		//length minus 1 to exclude blank line at end of report
		for(i=1; i<length-1; i++) {
			if(rows[i].children[1].children[0].innerHTML === id) {
				rows[i].style.display='';
			}
		}
	}
}
//End function customselect1_removebutton_onmouseup
 

Now if only there was a way to highlight multiple drilldowns at a time in the report

Edit: BTW If you are using a v.7704 and greater You could use HFREEZE in all the browsers (including chrome and safari which don't work in 7703) to allow the columns to always be shown.

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

I have found another solution for this problem.

In your double listbox, activate the "click" event for the remove button (The one that moves something from the right listbox back to the left one). Then use Francis Mariani's sort method given above, but set a JavaScript timeout event for 100 milliseconds to call on it. This gives the remove button click event time to exit and place the removed item back into the left listbox before the resort function fires:

 
function customselect1_removebutton_onclick(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO: Add your event handler code here

    setTimeout(function(){ resort() }, 100);

    //Begin function resort
    function resort() {
    //    alert('resort');
        var lb = document.getElementById('customselect1_selectfrom');
        arrTexts = new Array();

        for(i=0; i < lb.length; i++)
        {
            arrTexts[i] = lb.options[i].text;
        }

        arrTexts.sort();

        for(i=0; i < lb.length; i++)
       {
            lb.options[i].text = arrTexts[i];
            lb.options[i].value = arrTexts[i];
        }
}
//End function resort

}

(Normally I don't like relying on timing to solve a problem like this, but I didn't see any better way.)

UPDATE: The above sort assumes that the display text the user is seeing is the same as the actual value being selected (Example: Left side of double listbox shows "Account Number," but the value passed to the fex file is "ACCTNO"). If the display text is different from the actual value, use this instead:

function customselect1_removebutton_onclick(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO: Add your event handler code here

    setTimeout(function(){ resort() }, 100);

    //Begin function resort
    function resort() {
    //    alert('resort');
        var lb = document.getElementById('customselect1_selectfrom');
        var arrTexts = new Array();
        for(i=0; i < lb.length; i++)
        {
            arrTexts[i] = new Array(2);
            arrTexts[i][0] = lb.options[i].text;
            arrTexts[i][1] = lb.options[i].value;
        }

        arrTexts.sort(sortFunction);

        for(i=0; i < lb.length; i++)
        {
            lb.options[i].text = arrTexts[i][0];
            lb.options[i].value = arrTexts[i][1];
        }
    }

    function sortFunction(a, b) {
        if (a[0] === b[0]) {
            return 0;
        }
        else {
            return (a[0] < b[0]) ? -1 : 1;
        }
    }
    //End function resort
}

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