How to automate setting properties that are used by masterPage.js?

Ask the community
, ,
1

Question:
How can I automate setting properties that are used by masterPage.js?

Product:
Backend

What are you trying to achieve:
Our masterPage.js uses an import of a properties file to manage a few menu labels. For now I manually edit that properties file whenever they need to be changed. But since those properties ultimately derive from certain CMS entries, I feel I should be able to automate setting them.

What have you already tried:
Today the properties are simply in a properties.js file in the public area. I was looking for a way to upload or modify that file programmatically using REST APIs or backend code. Alternatively I could move those properties into their own CMS, which would solve that problem, but do I want the masterPage.js to wait for a CMS connection and resolve a promise each time? Or is that not a serious issue?

Additional information:

2

If you want to manage your DATA → DYNAMICALLY → i would suggest to do it inside a DATABASE.

If you want to use your data STATIC → then a JS-File is ok.

Where is the big problem using a DATABASE for your purpose instead?

It is nothing else then doing the same like with a JS-FILE, but with the advantage to manage your data dynamically.

You are afraid of big LOADING-TIMES? → Why?

You can simply load your whole data stored inside your DB once into a → VARIABLE and then work with that VARIABLE.

Why you should load the data allt he time? You have a specific usecase?

3

Thanks - This seems to work well with a CMS called Properties that has title/value pairs to override the default menus. I was worried that it would not perform well, but it seems fine. Thanks for your guidance.

import wixData from 'wix-data';

$w.onReady(function () {
    let now = new Date();
    $w('#footerCopyrightText1').text = `© ${now.getFullYear()} Unitarian Universalist Society East`;

	wixData.query('Properties')
    .find()
	.then((props) => {
        //console.log("Menu Helper"+menu_helper.eblast_date)
        let array = $w('#horizontalMenu1').menuItems;
        const happs = array.find(item => item.label === 'Happenings');
        const item1 = happs.menuItems.find(item => item.label === props.items[0].title);
        const item2 = happs.menuItems.find(item => item.label === props.items[1].title);
        
        item1.label = props.items[0].value
        item2.label = props.items[1].value;

        $w('#horizontalMenu1').menuItems = array;
	})
});
1 Like