Alternate Display of Properties in Document for Easier Editing of Nested Values Outside of Source Mode

[LynetteCullens]

Example Vault
Updated: 8/3/24 Hide ObjectList [Object, Object] values
Updated: 6/22/24 Fixed Performance Issues
Updated: 6/17/24 Changed console logs to notifications
Updated: 6/13/24 Added conditional statements to ensure the code only runs if an active file exists in the vault.
Updated: 6/4/24 to use MetaData Menu API to call Frontmatter (Now the edit button won't break for link types and HTML elements)(Also Worked Around Render Issues for Render Plugins)
What it Currently Looks Like

What it Used to looks Like

How to call it.

> [!properties]- Properties
> ```dataviewjs
> await dv.view("/dvviews/properties", {});
> ```

Template File

1. Create a Folder called dvviews in Obsidian Vault
2. Place the Properties.js file there
3. Enable the css snippet below

Properties.js Download

const { namedFileFields, fieldModifier: f } = MetadataMenu.api;

// Constants
const INDENTATION_WIDTH = 50;
const OBJECT_TYPE = 'Object';

// Memoized indentation calculation
const memoizedCalculateIndentation = (() => {
    const cache = new Map();
    return (path) => {
        if (!cache.has(path)) {
            const parts = path.split('.');
            cache.set(path, parts.length - 1);
        }
        return cache.get(path);
    };
})();

// Create field element
const createFieldElement = (dv, ulElement, indexedPath, fieldInfo, currentFilePath) => {
    const modifiedIndexedPath = indexedPath.replace(/____/g, ".");
    const { value, type } = fieldInfo;
    const modifiedField = f(dv, dv.page(currentFilePath), modifiedIndexedPath, { 
        options: { alwaysOn: true, showAddField: true, inFrontmatter: true }
    });

    const indentationLevel = memoizedCalculateIndentation(modifiedIndexedPath);
    const isObject = type === OBJECT_TYPE || (Array.isArray(value) && value.every(v => typeof v === 'object'));

    const liElement = dv.el("li", "", { container: ulElement });
    liElement.style.paddingLeft = `${indentationLevel * INDENTATION_WIDTH}px`;

    const displayText = modifiedIndexedPath.split('.').pop();
    dv.el("div", `${displayText}:`, { container: liElement, cls: "property-key" });

    const inlineWrapper = dv.el("div", "", { 
        container: liElement, 
        cls: "inline-wrapper", 
        attr: { style: "display: flex; align-items: center;" } 
    });

    dv.el("span", `${value}`, { 
        container: inlineWrapper, 
        cls: "property-value", 
        attr: { style: isObject ? "margin-right: 10px; font-size: 0;" : "margin-right: 10px;" } 
    });
    dv.el("span", modifiedField, { 
        container: inlineWrapper, 
        cls: "property-modified-field", 
        attr: { style: "font-size: 0;" } 
    });
};

// Main function
const displayProperties = async (dv) => {
    const activeFile = app.workspace.getActiveFile();
    if (!activeFile) {
        dv.paragraph("No active file");
        return;
    }

    try {
        const filePath = activeFile.path;
        const namedFileFieldsData = await namedFileFields(filePath);

        if (!namedFileFieldsData) {
            throw new Error('Error fetching named file fields');
        }

        const properties = dv.el("div", "", { cls: "note-properties", attr: { id: "properties-container" } });
        dv.header(2, "Field Properties", { container: properties });
        const ulElement = dv.el("ul", "", { container: properties });

        const entries = Object.entries(namedFileFieldsData);
        let i = 0;

        // Function to process a chunk of entries
        const processChunk = () => {
            const chunkSize = 10; // Adjust this size as needed
            const chunkEnd = Math.min(i + chunkSize, entries.length);
            for (; i < chunkEnd; i++) {
                const [indexedPath, fieldInfo] = entries[i];
                createFieldElement(dv, ulElement, indexedPath, fieldInfo, filePath);
            }
            if (i < entries.length) {
                requestAnimationFrame(processChunk);
            }
        };

        // Start processing the first chunk
        requestAnimationFrame(processChunk);
    } catch (error) {
        dv.paragraph(`Error: ${error.message}`);
        console.error(error);
    }
};

// Execute
(() => {
    if (typeof app === 'undefined' || typeof MetadataMenu === 'undefined' || !MetadataMenu.api) {
        dv.paragraph('Required plugins or APIs are not available');
        return;
    }
    displayProperties(dv);
})();

CSS Snippet

Nested Properties.css Download

/* ========================================================
 * PROPERTIES
 * ======================================================== */

.note-properties {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.note-properties ul {
    list-style-type: none;
    padding: 0;
}

.note-properties ul ul {
    padding-left: 22px;
}

.note-properties li {
    display: flex;
}

.note-properties h2 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight: var(--bold-weight);
    /* color: var(--text-muted); */
}

.property-object {
    font-size: 0.9rem;
    font-weight: var(--bold-weight);
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

div.property-key:before {
    content: "";
    display: block;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23797567" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-text"><path d="M17 6.1H3"></path><path d="M21 12.1H3"></path><path d="M15.1 18H3"></path></svg>') no-repeat;
    width: 18px;
    height: 18px;
    float: left;
    margin: 0 6px 0 0;
}

div.property-key[data-type="number"]:before {
    content: "";
    display: block;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23797567" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-binary"><rect x="14" y="14" width="4" height="6" rx="2"></rect><rect x="6" y="4" width="4" height="6" rx="2"></rect><path d="M6 20h4"></path><path d="M14 10h4"></path><path d="M6 14h2v6"></path><path d="M14 4h2v6"></path></svg>') no-repeat;
    width: 18px;
    height: 18px;
    float: left;
    margin: 0 6px 0 0;
}

div.property-key[data-type="date"]:before {
    content: "";
    display: block;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23797567" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>') no-repeat;
    width: 18px;
    height: 18px;
    float: left;
    margin: 0 6px 0 0;
}

div.property-key[data-type="time"]:before {
    content: "";
    display: block;
    background: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23797567" stroke-width="2"><circle cx="12" cy="12" r="11"/><line x1="12" y1="12" x2="12" y2="4"></line><line x1="12" y1="12" x2="18" y2="12"></line></svg>') no-repeat;
    width: 18px;
    height: 18px;
    float: left;
    margin: 0 6px 0 0;
}

div.property-key[data-type="link"]:before {
    content: "";
    display: block;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23797567" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>') no-repeat;
    width: 18px;
    height: 18px;
    float: left;
    margin: 0 6px 0 0;
}

div.property-key[data-type="list"]:before {
    content: "";
    display: block;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%23797567" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>') no-repeat;
    width: 18px;
    height: 18px;
    float: left;
    margin: 0 6px 0 0;
}

.property-key {
    font-size: 0.9rem;
    /* font-weight: var(--bold-weight); */
    color: var(--text-muted);
    min-width: 200px;
}

div.property-key>span {
    padding-bottom: 3px;
}

.property-value {
    font-size: 0.9rem;
    color: var(--metadata-input-text-color);
}

.property-array-value {
    font-size: 0.9rem;
    color: var(--metadata-input-text-color);
    background-color: var(--background-secondary);
    padding: 0.1rem 0.6rem;
    margin-right: 0.1rem;
    border-radius: 15px;
}