How to create data query buttons
ABOUT
Want to expose random data from a database on your Wix site? Learn how to do it with this guide.
SUITABLE FOR
Editor X, Classic editor
PROJECTS USED
Chapter 01: Layout
01. Add a stylable button with some text
02. Adjust the button’s size and position
03. Set an image as the button fill
04. Customize the button design
05. Set the button’s hover state
06. Add a text element for the title and adjust the style
07. Put your elements inside a section grid
Add paragraph text. Click “Edit Text” to customize this theme across your site. You can update and reuse text themes.
Chapter 02: Database
01. Add a new collection
02. Add a text field and name it “Fact”
03. Add three facts to the column
04. Publish the site
Add paragraph text. Click “Edit Text” to customize this theme across your site. You can update and reuse text themes.
Chapter 03: Velo
01. Turn on Dev Mode
02. Add an element ID to the button
03. Add an element ID to the text
04. Import "wix-data"
05. Paste the "queryShapeFacts()" function
06. Update the elements IDs
07. Paste the "getShapeFacts()" function
08. Open the collection and copy the collection’s name and facts fields
09. Paste the names in the code
import wixData from 'wix-data';
$w.onReady(function () {
queryShapeFacts();
});
async function queryShapeFacts() {
const fadeOptions = { duration: 100, delay: 0 }
const shapeFacts = await getShapeFacts();
const shapeFactsLength = shapeFacts.length;
let index = 0;
$w('#queryBtn').onMouseIn(() => {
if (index > shapeFactsLength - 1) {
index = 0;
}
$w('#changingText').hide('fade', fadeOptions)
.then(e => {
$w('#changingText').text = shapeFacts[index].fact;
index = index + 1;
$w('#changingText').show('fade', fadeOptions);
})
})
$w('#queryBtn').onMouseOut(() => {
$w('#changingText').hide('fade', fadeOptions);
})
}
async function getShapeFacts() {
const results = await wixData.query('ShapeData').isNotEmpty('fact').find();
if (isValidQuery(results)) {
let items = results.items;
return items;
}
return [];
}
// checks if the data is ok
function isValidQuery(queryResults) {
if (queryResults && queryResults.items && queryResults.items.length > 0) {
return true
}
return false
}
