Hooks: set and get properties example?

Elements Custom Components
1

Reference: Conditional Statements | Elements Manual

I note that @if statement can only check a property for being true or false (!property for which there is no example). I think this page would benefit with having a reference section stating expliciitly what is allowed.

The documentation states "When performing complex logic like string comparisons, use the hooks file to perform this logic and provide simple bool values to the template.”.

At the moment the docs don’t have an example of how to do this, AFAICS.

I want to be able to select from a list:

    {
        "title": "Debug",
        "properties": [{
            "title": "Show",
            "id": "debugVisibility",
            "select": {
                "default": "none",
                "items": [{
                    "value": "none",
                    "title": "None"
                }, {
                    "value": "edit",
                    "title": "Edit"
                }, {
                    "value": "preview",
                    "title": "Preview"
                }, {
                    "value": "both",
                    "title": "Edit & Preview"
                }]
            }
        },

Then in hooks.js, set a new property to true for example if I am in preview and the debugVisibility is set to preview or both.

I am not clear how I would use hooks.js to do this, i.e. retrieve the value of debugVisibility and set a new property to true or false that can be @if’d in the template to decide whether to output some html or not.

2

You have to do this check in the hooks file as we don’t support comparison operators in template files (this is to both simplify and optimise our templates). All comparisons and logic should be kept in the hooks file.

With that said, there’s a few different ways to go about it, however, I’ve gone with a switch statement in this instance:

const transformHook = (rw) => {
    // Destructure the necessary properties from rw.props and rw.project
    const { debugVisibility } = rw.props;
    const { mode } = rw.project;

    // Determine whether to show debug information based on the debugVisibility property
    const showDebug = (() => {
        switch (debugVisibility) {
            case "none":
                return false; // If debugVisibility is "none", never show debug info
            case "edit":
                return mode === 'edit'; // If debugVisibility is "edit", only show debug info when mode is "edit"
            case "preview":
                return mode === 'preview'; // If debugVisibility is "preview", only show debug info when mode is "preview"
            case "both":
                return true; // If debugVisibility is "both", always show debug info regardless of mode
            default:
                return false; // For any other value of debugVisibility, default to not showing debug info
        }
    })();

    // Pass showDebug to the template with rw.setProps()
    rw.setProps({ showDebug });
}

exports.transformHook = transformHook;

Added comments for anyone reading this to try and explain what’s happening, but if you have questions let me know :slight_smile:

You now have access to a showDebug property in you template file, so you can something like this:

@if(showDebug)
    Your debug HTML
@endif
3

Thanks for the code example which does exactly what I wanted to achieve.

It is a very useful example of how to handle conditional logic. :slight_smile: