Hide or show buttons based on database entry

Ask the community
,
1

Hello everyone,

i am trying to hide elements on a dynamic page based on the info within the database the items are from. There is a field in the database which is a reference to services i created in WIX. That can be empty so some items have a reference to a service and some don´t.
So i thought about building a simple query with an if-statement.
The logic would be:

Query the database → Get the current item → See if it has an entry within the service reference field
→ If it is 0, then hide the button and the text / otherwise, it is shown.

Unfortunately i am not a coder but i guess there is a smart and short solution to this. Looking forward to your anwers.

Greetings, Dawda

2

It is not hard to do it, you just have to start from the query, here: Wix Data Query

You can even filter data to only query the items that have this field in the dataset, that way you you don’t need to hide them.

wixData.query("myCollection")
  .find()
  .then( (results) => {
    if(results.items.length > 0) {
      let firstItem = results.items[0]; //see item below
    } else {
      // handle case where no matching items found
    }
  } )
  .catch( (err) => {
    let errorMsg = err;
  } );
3

Hi there :wave:t2: I do something similar on my site. Since you are already on a dynamic page you do not need to query the database, you can simply use the getCurrentItem function. Below is the working code that I use to accomplish this, just swap out the element IDs for your own and change “yourFieldKey” to the field key of the database item you want to find.

$w.onReady(function () {
    $w("#yourDataset").onReady(() => {
        var item = $w("#yourDataset").getCurrentItem();
            if (item["yourFieldKey"] === "" || item["yourFieldKey"] === null || item["yourFieldKey"] === undefined) {
            // Change "yourFieldKey" to the Field Key of the database column you want to find
            $w("#yourElement").show();
        } else {
            $w("#yourElement").hide();
        }
    });
});

There are many many forum posts that deal with this exact question, you can check out a few of them here:

1 Like
4

The one who can use → the searchbar → is always at an advantage.

5

Thanks for the answer! I was unlucky; i initally found many posts that didnt relate that much to my issue. But that code works perfectly for me too. :slight_smile:

6

@russian-dima I will remember this one. Thanks :smiley:

7

For dynamic Ligthox it not work, any other codes?

8

You need to be a little bit more specific. What did not work in a dynamic lightbox? A query? A filter?

9

I want hide or show items when database item is empty. But i cant find code that work for dynamic lightbox. Now i have Button in reapeater what open filterd lightbox from database. When i use code above it works only for the newest created Item. Not the next items.

10

@michaelstrauss307 Can you post the page code and the lightbox code? I’ll try to help you.

11

@bwprado

Site code:

$w.onReady(() => {

 $w("#dataset13").onReady(() => {

  $w("#repeater8").onItemReady(($item, itemData, index) => {
   $item('#button447').onClick(() => {
 let item = $item('#dataset13').getCurrentItem();
    wixWindow.openLightbox('938256749568369456782683569679267567567', item)
   });
  });

 });

});

Lightbox code:

$w.onReady(() => {
 let theItem = lightbox.getContext();  //item taken from the repeater
 let postID = theItem._id; //field key for the item ID in the database collection

 $w("#dataset11").setFilter(wixData.filter()
   .eq("_id", postID)  //filtering to display the item that matches this ID
  )
  .then(() => {
   console.log("Dataset is now filtered");
  })
  .catch((err) => {
   console.log(err);
  });

});
12

@michaelstrauss307 try this code, couldn’t test.

Page Code//////////////////////////////////////////////////////////////////////////

import { openLightbox } from 'wix-window'

$w.onReady(() => {
  $w('#dataset13').onReady(() => {
    $w('#repeater8').onItemReady(($item, itemData, index) => {
      $item('#button447').onClick(() => {
        wixWindow.openLightbox(
          '938256749568369456782683569679267567567', // Is this the Lightbox name?
          itemData //This is the context data.
        )
      })
    })
  })
})

Lightbox Code ////////////////////////////////////////////////////////////////////

import wixWindow from 'wix-window'

$w.onReady(() => {
  let theItem = wixWindow.lightbox.getContext() //item taken from the repeater
  let postID = theItem._id //field key for the item ID in the database collection

  $w('#dataset11')
    .setFilter(
      wixData.filter().eq('_id', postID) //filtering to display the item that matches this ID
    )
    .then(() => {
      console.log('Dataset is now filtered')
    })
    .catch(err => {
      console.log(err)
    })
})
13

what is Changed? And how i make that atabase not showing on dynamic lightbox?

14

Ok, so, the code is working, I’ve just tested and everything is fine. The data is being passed. You seem to be applying a filter to a dataset (#dataset11) but I don’t know were this dataset is located and to wich repeater is connected so you could see the result of the filter.

If this dataset is inside the Lightbox, then everything shoud be fine. If not, you have to receive the data back, after the lightbox is closed.

15

@bwprado the dataset is inside lightbox. What make the new Code? It hide elements what empty inside database item? Or i need new other code put in lightbox?

16

@michaelstrauss307 First, I need to know what elements are connected to the #dataset11. The code is only filtering this dataset according to the selected data.

17

@bwprado Buttons, Text fields, images

18

@michaelstrauss307 did you check the console.log?

You should have an error or the message: ‘Dataset is now filtered’ .

Change the code in the lightbox to this one and check for any console log feedback.

/////////////Lightbox Code //////////////////////////////////////////////////////////////

import wixWindow from 'wix-window'

$w.onReady(() => {
  let theItem = wixWindow.lightbox.getContext() //item taken from the repeater
  let postID = theItem._id //field key for the item ID in the database collection
  console.log(theItem)

  const filter = wixData.filter().eq('_id', postID)

  $w('#dataset11')
    .setFilter(filter) //filtering to display the item that matches this ID
    .then(() => console.log('Dataset is now filtered'))
    .catch(err => console.log(err))
})