Create a default filter value

Question:
Would it be possible to add a default filter value in WIX Editor? I’d like to show only a filtered View of the database by opening the website.

Product:
WIX Editor connected with CMS and Velo

What are you trying to achieve:
I have a big database with several media reports sorted by years. By landing on this page, I’d like to show only the current year, or first value.

What have you already tried:
I tried these two properties:
$w(“#dropdown6”).selectedIndex = 0; // select first option as default
$w(“#dropdown6”).value = “2024”; // choose the color red as default

With the first one nothing changes, with the second one “2024” is now written in the field, but it doesn’t filter.

For sure you are using a → DATASET <—

Instead of trying to manipulate your dropdown → try to manipulate your dataset → sitting a filter…

EXAMPLE…

import wixData from "wix-data";

$w.onReady(()=>{}
    $w('#dataset1').onReady(()=>{
         $w("#dataset1").setFilter(wixData
             .filter()
             .startsWith("lastName", "R")
             .contains("firstName", "Dima"),
             .ge("age", "21"),
         );
    });
);

Thanks, but I won’t hide the rest of the database. I just want to choose one filter “2024” by default, but it should also be possible to choose another year or all.

Current it starts with all datasets viewed. But I’d like to start like this:

But the filter should still work for the other years or all, but filters is set by default to “2024”

Sorry for my explanations. :see_no_evil:

Um einen Filter → by default ← zu setzen, musst du dennoch mit → DATASET ← arbeiten. Außerdem solltest du die API-DOCs etwas genauer inspizieren.

Was steht da genau?

Ok, versuchen wirs mal anders.

import wixData from "wix-data";

$w.onReady(()=>{$w(“#dropdown6”).value = '2024'
    $w('#dataset1').onReady(()=>{
         $w("#dataset1").setFilter(wixData.filter()
             .contains("DB_FIELD", $w(“#dropdown6”).value),
         );
    });
});

Was macht der code?

Wenn die Seite geladen ist, wird das VALUE von DROPDOWN6 auf → “2024” gesetzt.
Wenn das DATASET fertig geladen und einsatzbereit ist → starten wir eine direkte Filtration und zwar filtern wir dach dem Jahr → 2024 und verwenden dabei den Suchtyp → ‘contains’ (‘eq’ wäre hierbei auch noch möglich) um festzulegen auf welche Art gesucht werden soll. Man müsste jetzt nur noch angeben in welchem Datenbankfeld, diese Suche gemacht werden soll. → DB-FIELD ← da trägt man dann einfach das Datenbank-FELD (DATENBANK-SPALTE) ein.

Damit legen wir fest, direkt beim Start unsere Daten zu einem Bestimmten wert zu filtern und zwar zu dem Wert aus dem Dropdown, welchen wir ebenfalls manuell (anfangs) festgelegt hatten per code → 2024.

Jetzt sollte 2024 in dem Dropdown stehen und die Daten sollten nach 2024 gefiltern sein (wenn das richtige DB-Feld angegeben wurde).

Vielen Dank für deine Unterstützung, ich brauche dringend einen Code-Kurs. Es klappt leider nicht… Brauch ich noch ein setFieldValue?

Du hast FEHLER im CODE.

Dein DROPDOWN wird nicht erkannt → wird daran liegen dass die Anführungszeichen die falschen sind → bedingt dadurch dass du den CODE aus dem FORUM kopiert hast. Dies passiert weil der Rich-Text-Editor im VELO-FORUM = MÜLL ist.

Jedes mal wenn du also den code aus dem FORUM in dein Projekt einfügst → kontrolliere ob sich am CODE was verändert hat.

→ Du kannst beide Typen von Anführungszeichen verwenden → ‘…’ oder “…”
Ich verwende zum größten Teil → ‘…’

SetFieldValue → Brauchst du, wenn du daten in die Datenbank schreiben willst.
Rein zum filtern brauchst du es normalerweise nicht.

Hier hat es ja bei dir mit dem DROPDOWN schon mal geklappt…

$w(“#dropdown6”).selectedIndex = 0; // select first option as default
$w(“#dropdown6”).value = “2024”; // choose the color red as default

With the first one nothing changes, with the second one “2024” is now written in the field, but it doesn’t filter.

1 Like

Oh wow, vielen Dank! Es funktioniert nun. :partying_face: Vielen Dank für deinen Support.

1 Like

:wink:

Beim coden muss man immer konzentriert sein.
Ein wenig mehr Übung mit der richtigen JS-SYNTAX und das wird schon.

1 Like

Ich glaube, ich habe ein neues Problem. Ich kann nun nicht mehr nach den anderen Jahren filtern. :see_no_evil: es wird einfach nur noch 2024 angezeigt. Und die andern können zwar angewählt werden, aber es ändert sich nichts in der Darstellung.

https://katjaaldidesign.wixsite.com/frauennetz/medienberichte

Gibt jetzt 2 Möglichkeiten.

  1. Ich rekunstruiere dein projekt nach und teste es aus.
  2. Ich behebe den fehler direkt in deinem projekt.

Was du wählst → ist dir überlassen.

Solltest du (1) wählen → dann sende mit einfach eine Einladung zu deinem Projekt (ist auf Vertrauensbasis). → russian-dima@hotmail.de

Für mich ist es natürlich einfach es direkt im projekt zu beheben.

  1. Ich schaue mir das ganze 10-15min (manchmal auch länger) an
  2. Korrigiere das problem.
  3. Und bin wieder raus.
  4. kostenfrei

Plan-B dauert länger :grinning:

1 Like

Was würde ich ohne solche netten und tollen Menschen wie dich machen. :see_no_evil: Hab dich eingeladen.

Done! —> Have fun! :wink:

UPDATE:
Sorry, found one more bug! Now it is running smoothly.
RESET-Button now also works.

Check it out: —> https://katjaaldidesign.wixsite.com/frauennetz/medienberichte

1 Like

Oh, wow! Vielen 1000 Dank. Ich bin super froh, dass du mir so schnell und unkompliziert geholfen hast, darf ich dir was per PayPal senden? Das ist echt nicht selbstverständlich.

UPDATE:
Ich traue mich schon gar nicht mehr. :see_no_evil: Die Daten sind innerhalb des Jahres nun nicht mehr der Reihe nach… und wenn ich auf Alle gehe, erscheint nichts. Evt sollte ich diesen Filter einfach weglassen… :see_no_evil:

Ok, we will switch to → ENGLISH ← so everyone understand what’s going on here inside this post.

I have UPDATED your CODE and made it more UNIVERSAL, so you can use now this code on different pages, without having to code everything, everytime from scratch again and again.

import wixData from "wix-data";

///-------------------- USER-INTERFACE ------------------------------
    let filterStartValue = '2024';  // --> This is the starting filter-value your filter will start with.
    let ddn = "ddnJahr";            // --> ID of your Dropdown here.
    let dataset = 'dataset1';       // --> Dataset-ID here.
    let dbField1 = 'jahr';          // --> Database-Filed for --> FILTERING.
    let dbField2 = 'date';          // --> Database-Field for --> SORTING.
    let sortDirection = 'ascending' // --> Setting the direction of --> SORTING --> (ascending/descending).
///-------------------- USER-INTERFACE ------------------------------

$w.onReady(()=>{$w('#'+ddn).value =filterStartValue;   
    $w('#'+dataset).onReady(()=>{
        set_Filter(dbField1, $w('#'+ddn).value);            
        set_Sort(dbField2);

        $w("#"+ddn).onChange(()=>{
            set_Filter(dbField1, $w('#'+ddn).value);
            $w('#'+dataset).refresh(); 
        });

        $w('#btnReset').onClick(()=>{
            let filter = wixData.filter();
            set_Sort(dbField2);                
            $w('#'+dataset).setFilter(filter);
            $w('#'+dataset).refresh(); 
        });
    });
});

function set_Filter(field, value) {
    let filter = wixData.filter();
    filter = filter.contains(field, value),
    $w('#' + dataset).setFilter(filter);
}

function set_Sort(field) {
    let sort = wixData.sort()[sortDirection](field); // Change to descending for opposite order
    $w('#' + dataset).setSort(sort);
}

Inside the code 2-functions are included, which will do the following automatically, as soon as you have setted-up the USER-INTERFACE correctly.

  1. It will start to filter
  2. It will start to do the sorting.

DO NOT TOUCH THE CODE ITSELF !!!
ALL YOU HAVE TO DO IS → SETTING-UP THE → USER-INTERFACE.

No matter on which page you will paste this code to generate a FILTERING-ENGINE (connected by a DATASET), it will run automatically.

This is the CODE-AREA, where you will have to do all SETUP…

///-------------------- USER-INTERFACE ------------------------------
    let filterStartValue = '2024';  // --> This is the starting filter-value your filter will start with.
    let ddn = "ddnJahr";            // --> ID of your Dropdown here.
    let dataset = 'dataset1';       // --> Dataset-ID here.
    let dbField1 = 'jahr';          // --> Database-Filed for --> FILTERING.
    let dbField2 = 'date';          // --> Database-Field for --> SORTING.
    let sortDirection = 'ascending' // --> Setting the direction of --> SORTING --> (ascending/descending).
///-------------------- USER-INTERFACE ------------------------------

As you can see → it’S working fine now…

About… →

und wenn ich auf Alle gehe, erscheint nichts.

Yes, this is also normal behaviour, because it filters for everything, and you can not filter for everything. A filter should also filter for something specific inside of a big pool of data.

How to solve it ?
What do you think when you are taking a look onto this picture?
2024-07-22 19_17_28-Window

What happens, if you click onto → RESET ← (zurücksetzen) ?
What should happen when you select → ALL ← (Alle) ?

Should’t they have the same function ?

Isn’t RESET not the same, like showing all RESULTS ?

What do you think ?

By the way → no need for any paying → first time always → FREE :wink:

→ you got an e-mail.

1 Like

Thank you so so much for your help, that really can’t be taken for granted!

And, yes, it would be nice if the same thing happened with ‘All’ as with ‘Reset’. But I think the user automatically clicks on ‘Reset’ if nothing happens. :slight_smile: Or is it possible to hide “All”?

The simplest solution would be to generate the same function like RESET, when choosing —> ALLE <—

How to RESET a filter running on a DATASET ?

You already have it inside your code…

let filter = wixData.filter(); $w('#'+dataset).setFilter(filter);

Now you only need to teach your code to start the reset when dropdown has changed to → ALL <----

$w('#'+ddn ).onChange((event)=>{console.log('Dropdown has been changed');
   // running IF-ELSE-CONDITION to check if ....
    // a) Dropdown-Label is --> 'ALLE' ???
    // b) Dropdown-Value is --> 'ALLE' ???
    // c) Drodown-Selected-Index is --> 0 ???

    // Choose the right one (multiple solutions possible).
    // If condition = TRUE ???? --> To do what?
    // else doing what?


    if(...) {.......... do what? ......}
   else {......... do what ?......}
});

If condition = TRUE —> let filter = wixData.filter(); $w(‘#’+dataset).setFilter(filter);