2 min read

How to Hide Dataset Fields in Wix Velo on Dynamic Pages and Repeaters When They Are Empty

Creating dynamic and clean web pages with Wix involves managing the visibility of elements based on the data present in your datasets. This tutorial will guide you through using Wix Velo to conditionally display elements on both dynamic pages and within repeaters, specifically hiding them when the dataset fields are empty.

Prerequisites

Before starting with the code, make sure that the elements you plan to show or hide based on dataset conditions are initially set to "collapse" in the Wix Editor. This is crucial as it allows our script to "expand" these elements only when appropriate conditions are met.

Dynamic Pages

On dynamic pages, you can easily manage the visibility of elements by checking if specific dataset fields contain data. Here’s how to implement it:

Example Code for Dynamic Pages

$w.onReady(function () {
$w("#dynamicDataset").onReady(()=>{
        if($w("#dynamicDataset").getCurrentItem().fieldName1){
            $w("#elementId1").expand();
        }
        if($w("#dynamicDataset").getCurrentItem().fieldName2){
            $w("#elementId2").expand();
        }
        if($w("#dynamicDataset").getCurrentItem().fieldName3){
            $w("#elementId3").expand();
        }
        // Add more conditions as needed
    });
});
    $w("#dynamicDataset").onReady(()=>{
        if($w("#dynamicDataset").getCurrentItem().fieldName1){
            $w("#elementId1").expand();
        }
        if($w("#dynamicDataset").getCurrentItem().fieldName2){
            $w("#elementId2").expand();
        }
        if($w("#dynamicDataset").getCurrentItem().fieldName3){
            $w("#elementId3").expand();
        }
        // Add more conditions as needed
    });
});

Replace fieldName1, fieldName2, etc., with your dataset field names, and elementId1, elementId2, etc., with the IDs of the elements you intend to show.

Repeaters

For repeaters, where items might contain incomplete data, selectively expanding elements can help maintain a streamlined appearance.

Example Code for Repeaters

$w("#dataset1").onReady(function () {
$w('#repeater1').onItemReady(($item, itemData, index) => {
        if (itemData.imageField) {
            $item("#imageElement").expand();
            $item("#additionalElement").expand();
        }
    });
});

Replace imageField with the dataset field you're evaluating, and imageElement, additionalElement with the IDs of repeater elements you want to control.

This method of selectively displaying elements based on dataset content ensures that your Wix site only shows elements when necessary, enhancing the overall user experience. Tailor the field names and element IDs to suit your site's requirements.

If you're looking for professional assistance with your Wix website, WIXCreate can design and optimize your site to meet your unique needs and preferences. Contact us today to get started!

Discover more about Wix Velo and other web development techniques at WixCreate.com.