Display Rich Content using Wix Dynamic Page with Database Connection - Velo

WHAT WAS COVERED:

00:00 CN Intro

00:53 Setup of Website

01:44 Add Dynamic Dataset Connections to Page & Rich Content Element

04:24 Dynamic Page Dataset Settings Explained

06:07 Wix Rich Content Element Settings

08:50 Rich Content Style Editor Explained

14:03 Version Control/Create Duplication for Templates of Rich Content

15:10 Dynamic Dataset OnReady Function & Filtering Dynamic Dataset Element

19:02 Page Loader Code / Display dates based on UpdatedDate or CreatedDate field keys

20:45 Preview Website & Perform Dynamic Dataset Filtering

22:11 Make changes to the dynamic page URL, SEO, & more

25:56 Outro

---

// API Reference: https://www.wix.com/velo/reference/api-overview/introduction
// “Hello, World!” Example: https://learn-code.wix.com/en/article/1-hello-world

import wixData from 'wix-data';

$w.onReady(function () {

    $w("#dynamicDataset").onReady(async () => {
        
        pageLoader();

        $w("#ppbutton").onClick(async (events) => {
            $w("#dynamicDataset").setFilter(wixData.filter().contains("legalType", "PP").eq("isActive", true)).then(() => {
            pageLoader();
            });
        })

        $w("#tcbutton").onClick(async (events) => {
            $w("#dynamicDataset").setFilter(wixData.filter().contains("legalType", "TC").eq("isActive", true)).then(() => {
            pageLoader();
            });
        })

    })
});

function buttonSwitch(legalType) {
    if (legalType == "PP") {
        $w("#ppbutton").disable();
        $w("#tcbutton").enable();
    } else if (legalType == "TC") {
        $w("#tcbutton").disable();
        $w("#ppbutton").enable();
    }
}

async function pageLoader() {
    let item = await $w("#dynamicDataset").getCurrentItem(),
        updatedDate = new Date(item._updatedDate),
        createdDate = new Date(item._createdDate);
        buttonSwitch(item.legalType);

    $w("#date").text = "Last Updated: ";

    if (updatedDate === createdDate) {
        $w("#date").text = $w("#date").text + " " + createdDate.toLocaleDateString('en-US', { 'month': 'long', 'year': 'numeric' });
    } else {
        $w("#date").text = $w("#date").text + " " + updatedDate.toLocaleDateString('en-US', { 'month': 'long', 'year': 'numeric' });
    }

    $w("#content").expand();
    $w("#date").show();
}

Have Fun!