List Control Alphabet Buttons - making my own

[kingcarol]

I am working on setting up a template for myself for using List Controls in UX components (since I am thinking of moving a lot of my grids to list controls). On the grids, I quite often use the Alphabet Search buttons, but could not find anything comparable for the List Control. So.... I launched off and made my own on a template, which involved creating 36 buttons, quite tedious... The reason I am posting this is that I wondered if anybody might have a suggestion for how to set those up so that each time I make a new UX component with these, I don't have to go through all 36 buttons and change them to search the right field in the list control. Here is a video that might explain this better: http://screencast.com/t/oCRjAZHl

Also attached is my template ux component and anyone is welcome to use it if it helps you in any way. (maybe someone will post a new and improved one here, though.... fingers crossed)
ZZZ_ListControlSearchTemplate.zip

[Steve Workings]

Re: List Control Alphabet Buttons - making my own

Well, you've already set your buttons to look at CompanyName. So, one method is to always make sure you have the key/search field named as CompanyName (though if you choose this path you may want to change everything once to "SearchField" or something like that.)

So even if your table has, say, FacilityName your Select statement would be "..... FacilityName as SearchField...."

As a slight alternative, you could still bring in FacilityName but also bring in "...FacilityName as SearchField...." and perhaps even hide it with CSS, but still have it present for your buttons.

But wait and see - someone will probably come up with something more clever and fitting here.

[kingcarol]

Re: List Control Alphabet Buttons - making my own

Steve, good idea!

[kingcarol]

Re: List Control Alphabet Buttons - making my own

I tried Steve's idea and am not succeeding. See the button labeled TestA in the revised component attached.

ZZZ_ListControlSearchTemplate_2.zip

[DBM]

Re: List Control Alphabet Buttons - making my own

This is a bit clunky but I had a go at extracting some of the logic for the values that need to be set in the filter.(as you can tell I am not a trained programmer) It works on it's own but haven't figured how to make it work with the search message on and hide events you have.

1) Instead of the List Control Action you have for the filter put the following code in each of the button controls

MyButtonFilter(this.id);

you can obviously call it anything you like.

2) Then use a JavaScript function to do the filtering. Within the function you only need to amend the List ID reference and the search field reference when the control is re-used.

function MyButtonFilter(ButtonID) {

// Button ID looks like this example  DLG1.V.R1.BUTTON_23
// Extract ID part at the end
var ActualButtonID = ButtonID.substr(10,ButtonID.length-10); 


// Create the command code to get the button Text
var CommandText = '{dialog.Object}.getValue('+'\''+ActualButtonID+'\''+')';
// Now get the Button Text
var ButtonText = eval(CommandText);


//------------------------------------------------------------------------
// The two parts needing to be amended for each implementation of the list
//------------------------------------------------------------------------
// Amend ListName ID and SearchField Name
var ListName = 'LIST1';
var SearchField = 'CompanyName';


// Create Filter Command Text
var CommandText_Part1 = '{dialog.object}._filterList('+'\''+ListName+'\'';
var CommandText_Part2 = ','+'\''+'lower( left('+SearchField+', 1) )= ';
var CommandText_Part3 = 'lower('+'\\'+'\''+ButtonText+'\\'+'\''+')'+'\''+','+'\''+'\''+','+'\''+'\''+')';
var FilterCommandText = CommandText_Part1+CommandText_Part2+CommandText_Part3;
 

var ApplyFilter = eval(FilterCommandText);

}

[DBM]

Re: List Control Alphabet Buttons - making my own

An update on the earlier post. If the input to the function is the actual button ID

MyButtonFilter2('BUTTON_27');

instead of this.id it overcomes the earlier issue but does mean entering the specific code for each button.

then alter the function at the top to skip the translation from full id to the actual button ID. This works OK with your other code. I guess the context of using this.id is disrupted when the other code is run. Maybe one of the experienced guys can solve it.

If there is a potential for buttons to be re-named when the component is copied / re-used that would determine if a more generic solution is needed.

[Steve Workings]

Re: List Control Alphabet Buttons - making my own

Yup, sorry that first suggestion didn't work. I hadn't tried it, but I did download your component and did this:

Behind the TestA button, comment out your existing List Control Action. Add, right above or below it, some InLine Javascript:

search('A');

Now, create a javascript function over in the code section:

function search(sv) {
	//{dialog.object}._filterList('LIST1','lower( left(CompanyName, 1) ) = lower(\'A\')','','');
	filter = 'lower( left(CompanyName, 1) ) = lower(\''+ sv + '\')'
	{dialog.object}._filterList('LIST1',filter,'','');
	
}

I left the commented line there because that's the javascript that the action scripting was producing - it's just reference but helps you "see" better what's going on.

So now you have a single javascript function where, for each component you use, you simply need to change the name of the Search field once in the function.

[Steve Workings]

Re: List Control Alphabet Buttons - making my own

Something else you might consider too Carol:

Behind every button, you have this:

A5.msgBox.show('Searching.','<div style=\'padding: 20px;\'>Searching for records that start with your selection.<br>Please wait...</div>','none',function() {});

You could replace this with something like

showwait();

Then, make a javascript function like this:

function showwait() {
     A5.msgBox.show('Searching.','<div style=\'padding: 20px;\'>Searching for records that start with your selection.<br>Please wait...</div>','none',function() {});
}

This also allows you to modify the message easily if you decide to -- don't have to do it 36 times.

[Davidk]

Re: List Control Alphabet Buttons - making my own

Here's a real brute force, 10 second way of doing what you'd like. I'd also bet Selwyn's got List Alpha Search Buttons in his back pocket somewhere.

Open up your excellent, button filled, UX... and Select all your Alpha search buttons.

Then... Menu, Copy Selected Controls to Clipboard.

Next... open up your new UX... let's say it's brand new... no controls...

Menu, Paste Controls from Clipboard... then ok.

There's all your nice buttons.

Now... at the botton tab area click XBasic.

Position your cursor on the top row. Right-click, Replace. Now replace CompanyName with MyNewName and click Replace All. There are 109 of them by the way... yikes.

Now click the Settings tab... and Alpha will happily save your changes. Not very fancy... but...

[Steve Workings]

Re: List Control Alphabet Buttons - making my own

David's response reminded me of how we used to do this (some still do) on the desktop forms (yeah I feel like an old-timer reminiscing...) and how this might translate to the web forms. The answer is a ButtonList control. I don't have time to model one right now but it's pretty simple, I'm pretty sure it would work. And I'd probably use javascript very similar to what I suggested earlier.

[kingcarol]

Re: List Control Alphabet Buttons - making my own

I'm going to be trying your suggestions, Steve. But, in response to David's suggestion, I don't see Xbasic in a bottom tab area on the ux component like I do on grid components. His suggestion was actually the first one I thought of for how to replace the field names, but I couldn't find the xbasic tab.

[Davidk]

Re: List Control Alphabet Buttons - making my own

I was thinking the same thing about the ButtonList control last night. In fact, the ButtonList control has sample JSON data for Alpha Button Searches. You just need to add your numbers in there to complete the list. Here's a UX implementing the ButtonList control, searching against a List.

[joegrun4]

Re: List Control Alphabet Buttons - making my own

Carol, this is the xbasic tab David was talking about.

xbasicbutton.PNG

[kingcarol]

Re: List Control Alphabet Buttons - making my own

thanks, Joe, but I don't have that tab and I have the latest release. here's a screenshot

12-2-2014 4-44-26 AM.jpg

[GGandhi]

Re: List Control Alphabet Buttons - making my own

I am no where near aa version 12 but in a ux or dialog the xbasic is still below that level, you may have to scroll down the whole page using the extreme right scroll bar to see the xbasic, setting tabs,
I think.

http://screencast.com/t/TXpLHy4HB