[Solved] Querying a field from the current page. Surely I'm missing something

Ask the community
,
1

Hello again fellow Wix users!

I’m having what I believe to be a small problem that I am just not understanding properly and hope that someone else may be able to help. I really appreciate any time that you may be able to spend on this. I am fairly new to this, so please understand that even my theorizing may be inaccurate!

I’m trying to get a box on dynamic pages to change colors based on a boolean field in the dataset (I’ve already posted about this, but the core problem has changed, and, as per the forum guidelines, I’m making a new post rather than bumping the old one).

I’ve managed to do that, but now I can’t seem to get it to query the row corresponding to the current dynamic page. It seems like no matter which page I preview, the result is the same, even though the boolean for the current page has changed. This is confirmed by the console.log. Originally, I had teh following code which returned the following log:

wixData.query("ProductsDyn")
  .eq("creases", true)
  .find()
  .then( (results) => {
    console.log("results [0] returned from query = " + JSON.stringify(results.items[0]));
 let boolean = results.items[0];
 if(boolean===true){
     $w("#box2").style.backgroundColor = "#ffff";
     console.log("it's true");  
     } 
 else{ 
     $w("#box2").style.backgroundColor = "#ef0"; 
     console.log("it's false"); 
     }
  } )
  .catch( (err) => {
 let errorMsg = err;
  } );

Loading the code for the Products (Dyn) (Title) page. To debug this code, open ae518.js in Developer Tools.

results [0] returned from query = {"image":"wix:image://v1/fc7570_ae9913d461894a7ebb7fc420d828ab83~mv2.png/Image-empty-state.png#originWidth=1920&originHeight=1080","description":"I'm a paragraph. I'm connected to your collection through a dataset. Click Preview to see my content. To update me, go to the Data Manager.","_id":"00000000-0000-0000-0000-000000000001","_owner":"c8bffc82-3f37-4541-a85b-1c3af9a932e7","_createdDate":"2021-02-15T09:13:59.833Z","_updatedDate":"2021-02-15T15:57:38.101Z","whoKnows":["Mint","New Type","Near Mint"],"creases":true,"title":"I am a title 01","link-products-dyn-all":"/products-dyn/","link-products-dyn-title":"/products-dyn/i-am-a-title-01"}

Products (Dyn) (Title)
Line 9

it's false

It makes sense that the console.log information wouldn’t change because I’m calling a specific field (items[0]). So, I thought that I should insert “currentPage” where “items[0]” is. However, this doesn’t return any information in the log:

import wixData from 'wix-data';

wixData.query("ProductsDyn")
  .eq("creases", true)
  .find()
  .then( (results) => {
    console.log("results [0] returned from query = " + JSON.stringify(results.currentPage));
 let boolean = results.currentPage.creases;
 if(boolean===true){
     $w("#box2").style.backgroundColor = "#ffff";
     console.log("it's true");  
     } 
 else{ 
     $w("#box2").style.backgroundColor = "#ef0"; 
     console.log("it's false"); 
     }
  } )
  .catch( (err) => {
 let errorMsg = err;
  } );

Loading the code for the Products (Dyn) (Title) page. To debug this code, open ae518.js in Developer Tools.

results [currentPage] returned from query = 0

Products (Dyn) (Title)
Line 9

it's false

I have tried many variations and commands without any success. What am I missing here?!
Thanks in advance for any advice you may be able to offer!

Andy

2

Andy, though you can use wixData.query on dynamic pages, the data on the page is tied to a dataset. You would be better served using the getCurrentItem function of the dataset to access the data for the page. If you’re wanting this code to run when the page loads, pay close attention to the second example in the documentation that has the getCurrentItem inside the onReady functions of both the page and dataset.

3

I
love
you

I read through the documentation that you linked, followed your advice, and after about 15 minute (most of which was me not knowing what I was doing), it works! I really appreciate it!

Andy

4

By the way, this is the code that I ended up with in case anyone needs it. A checked Boolean field turns the box black, a false one turns it yellow.

$w.onReady( () => {
  $w("#dynamicDataset").onReady( () => {
 let itemObj = $w("#dynamicDataset").getCurrentItem().creases;
 if(itemObj===true){
     $w("#box2").style.backgroundColor = "#ffff";
     console.log("it's true");  
     } 
 else{ 
     $w("#box2").style.backgroundColor = "#ef0"; 
     console.log("it's false"); 
     }
  } )
} );
5

Well done! A good short code with good structured overview.
Perhaps to make it even more simple, you also could just use “black” and “yellow” to set your colors… like …

$w.onReady(() => {
  $w("#dynamicDataset").onReady(() => {
     let itemObj = $w("#dynamicDataset").getCurrentItem().creases;
     
     if(itemObj===true){$w("#box2").style.backgroundColor = "black";} 
     else{$w("#box2").style.backgroundColor = "yellow";}   
  });
});
6

Thank you very much for the advice! That definitely does make it easier for me. I actually had no idea I could do that! XD

7

@mazeboy13
You have 3 or even 4-options how to set your color…

  1. using predefined STRING-colors → “red”, “orange” and so on…
  2. using HEX-colors, like you did → #FF00F0 [normaly always #+6-digits]
  3. using RGB-colors —> "RGB = (149, 55, 255) [3x values from 0 to 255]
  4. using RGBA-colors —> the same as RGB but with OPACY [last-digit = opacy]

Wanna try to create a color-picker?
https://russian-dima.wixsite.com/meinewebsite/home :wink: