Dropdown search filters

Hi everyone!
I need help about a problem, for which I can't find a clear solution!
I have a CF form with many fields and a CC table, which is listing only 3 columns populated from the form. I'm using "auto listing" for the table layout. One of the columns in the CC listing is linkable, so when it's clicked you can see all of the fields filled by the form. I'm wondering if it's possible to make a dropdown search filters and a search box above the CC listing table? I want at least 4 or 5 dropdown filters, not only about the 3 columns in the table, but also about more fields in the CF form(they are not displayed at the CC listing). First of all I need help about the code for the filters! Are there any tutorials about several dropdown search filters and a search box working together in ChronoConnectivity v4?

Any help will be highly appreciated!
Thanks in advance!

Hi probnik,

I'm not expert as Max set it up but the FAQs page here works with a ChronoForm linked to a ChronoConnectivity listing. The search form has two boxes but could have more. The SearchForm appears to be linked using the ChronoConnectivity Task action in the ChronoForm.

Bob

Hi Bob, thanks for your answer!

Actually I need something like the FAQs page, but with more dropdowns, which can filter records who are not visualised in the table, but are in the full record.
First of all what should I use to create a search form with dropdowns? I have read alot in the forum, but I can't find a clear answer. Does a DB Multi record loader is all I need? In the tutorials the ChronoConnectivity Task action is used only for listing, editing, but not for searching. Could you please explain some basics about creating such search form?

Thanks in advance!

Hi probnik,

How you set up your drop-downs depends on what you want in them - just like any other drop-down. It it's a fixed list you can add it to the drop-down box, if it's from a DB Table then use a DB Multi-Record Loader. The Category drop-down on the FAQs page uses a FB Multi-Record Loader linked to the jos_categories table.

The other actions are: Load CSS (to style the form); Load JS (with some code I wrote to handle the Clear action and keeping the pagination linked to the filters); Show HTML; and ChronoConnectivity Task (with the Task set to List Data).

Note: the form has other events and pages which display the list; display individual FAQs, and allow them to be edited.

Both the Form and the listing link to the KnowledgeBase FormsApp.

The Listing WHERE box has this code in it which I think is the results from the form plus some filters to limit the listing to published articles/categories:

ArticleExtension.app = 'KnowledgeBase' 
  AND Article.state = '1' 
  AND Category.published = '1'

The Frontend List Settings | Search Settings tab has:

Enable Search: Yes
Search Parameter: LIKE %...% (as we want partial searched to work)
Search Fields: Article.title,Category.title,Article.metakey,Article.introtext,Article.fulltext
Enable Multi Model Search: Yes
Search Field Name: keywords (the name of the text input in the form)
Search Button Name: kb_search (the name of the submit button in the form)
. . .
Show Search Box: No (we're using the form instead)
Filters Fields names: Category.id (I'm not sure how this works)
Store Filter Data: Yes (needed for paginated listings I think)

I'd suggest that you build a simple experimental search form to see how its works, then add other search fields. I'm not at all clear how you would handle an OR search for example - by default it seems to give AND.

Bob

Hi, Bob!

OK. I started with trying to populate a dropdown with the DB Multi-Record loader, but somethings is not right, the dropdown doesn't load any options. Here is an simple example with the jos_content table just for testing:

Here are the Dropdown element settings:
[attachment=2]2.png[/attachment]

[attachment=1]3.png[/attachment]

DB Multi-Record Loader:
[attachment=0]5.png[/attachment]

The other settings in all other tabs are by default. I think I mess something up in the Dynamic Data tab with the Data path box. What am I supposed to put there about the content table?

Thanks!

Hi probnik,

You have put Content in the Data Path box but the Model ID in the DB Multi Record Loader is empty. These should both be the same, empty is simplest unless you need to manage several dropdowns.

Bob

Hi Bob!

OK. I finally figured out how to properly populate the dropdowns! Now I'm struggling with the search. In the CF form what should I put in the On Submit event, to do the search? Also this ChronoConnectivity Task has to be where? In a new event or in the On Submit event?

Thanks!

Hi again!

I need some searious help, because I can't handle with some problems! 😟
First of all here is my search form events:

[attachment=0]searchform.png[/attachment]
When I test only the form everything is working fine and the dropdowns are populated. But when I test the frontend view of the connection, the dropdowns are empty! The search box is working fine, it gets results but the dropdowns are empty. I'm sure I'm missing something but I ran out of ideas! In the tab Frontend list settings | Search settings | Filters fields names I'm not sure what to insert. Could someone explain this simply: "Comma separated list of fields to be used as filters, if you are using the field 'Model.name' as a filter field then the form field name should = 'filter_model_name'."?

Another question: how to make the clear button actually clear the words in the search box after a searching. It clears only before the button is clicked. After clicking it the word stays in the box and the clear button does nothing!

Any help will be highly appreciated!
Thank you in advance!!!

Hi probnik ,

At a guess, the DB Multi Record Loader needs to be in the same On List event as the Show HTML and CC Task actions for the search form.

Bob

Hi Bob!

Thank you so much for your reply! It worked! The dropdowns are populated.
The search box is working properly, but how to make the dropdowns to filter.
These are the setting in the Search settings tab:

Enable Search: Yes
Search Parameter: LIKE %...%
Search Fields: position,employer (the two fields in the dropdowns)
Enable Multi Model Search: Yes
Search Field Name: keywords (the name of the search box in the form)
Search Button Name: b_search
Search from event: list
Show Search Box: No
Filters Fields names: (empty) (Tried several thing with the Model ID, Field Names of the dropdowns... but nothing worked...
Store Filter Data: Yes

Now how to make the dropdowns actually participate in the searching?

P.S.
Is there any solution about the other problem with the clear button?

Thanks again! I really appreciate your work on this amazing component!🙂

Hi probnik,

Unfortunately I can't access the backend of the ChronoForms FAQs at the moment to see what the settings are :-( (There are some security problems following a DOS attack.)

I wrote some JavaScript to clear the filter boxes on the FAQ - I can see that from the front-end

window.addEvent('domready', function() {
  var category, keywords;
  category = $('filter_category_id').value;
  keywords = $('keywords').value;

  $$('input[name=reset]')[0].addEvent('click', function(event) {
    event.stop();
    $('keywords').value = '';
    $('filter_category_id').value = '';
    clearPaginator();
    return false;
  });
  $('kb_search').addEvent('click', function() {
    if ( ('keywords').value != keywords || $('filter_category_id').value != category ) {
      clearPaginator();
    }
  });
  function clearPaginator() {
    var start, uri;
    start = $$('input[name=limitstart]')[0].value;
    uri = $('chronoform_KnowledgeBase').getProperty('action');
    uri = uri.replace(start, '0');
    $('chronoform_KnowledgeBase').setProperty('action', uri);
    $$('input[name=limitstart]')[0].value = 0;
  }
});

This clears the two input filters and the Paginator when you click 'Clear' (it's actually a reset button); it also clears the Paginator when the Search Button is clicked if the filter values have changed i.e. this is a new search.

Bob

Hi Bob!

Could you please be more specific about this JS code? Where to put it? In my CF On_load and On_submit are empty, I only use list and view_e.

Thanks in advance!

Hi Probnik,

We have quite a complicated form in use and this JavaScript is from a Load JS action in the On List event of the form - which is the event loaded when the list of FAQs is displayed.

Bob

Hi Bob!

I've experimented with your code, but I couldn't make it work. All I need is a clear button which resets the filters to default options. For now the button only clears the selected options before a search is made, but after a search the button is inactive.

Thanks for your help anyway! This is an amazing component!

Hi probnik,

It sounds as though some kind of JavaScript error may kick in after a search - maybe something about the Pagination code if you used that part of it.

Bob

Hi Bob!

I'm using this code:

window.addEvent('domready', function() {
  var category, keywords;
  category = $('filter_position').value;
  keywords = $('keywords').value;

  $$('input[name=reset]')[0].addEvent('click', function(event) {
    event.stop();
    $('keywords').value = '';
    $('filter_position').value = '';
    return false;
  });
  $('kb_search').addEvent('click', function() {
    if ( ('keywords').value != keywords || $('filter_position').value != Всички )
  });

In the form I add a new element - Submit button. For name I choose "reset" and button type - regular button.
With this JS when I click the button, nothing happens. With the debugger I can't see anything wrong. May be I'm missing something but don't know what.

Hi probnik,

The code looks OK (its missing some closing brackets but I guess they just weren't copied and pasted.

You can see my version working on the FAQs page here and check if there are any important differences.

Bob