Multilevel Properties and displaying them readable

[ArneNostitz]

HI,

its kinda hard to formulate the question as im missing the terms. but i want to have what the ObjectList is doing but then roll that up into another/the same page and display it there in a readable format. i do get how to do that hardcoded (if there is a set number of keys) but i dont know how to do that with various. like the address example that is mentioned sometimes.

Basically a "Key: Value - Value" set that can have multiples (like Home, Work, Other Address; Phone; multiple Jobs; Attendees of a Meeting with their Role; ... thats CMS examples - but could be recipe ingredients and amounts too or so many other things). but to have that displayed in a readable (best case editable) format on the page itself and on other pages

As an example:

in a CRM like Vault:
Person 1:
Job 1: Company1 - Jobtitle
Job 2: Company2 - Jobtitle2
Person 2:
Job 1: Company1 - Jobtitle

on the Company1 Page I want to see:
Person 1 - Jobtitle
Person 2 - Jobtitle

that would be easy if they are just part of 1 company. but what to do with people who are parts of multiple companies

or:

How to display multiple adresses of a person, multiple phone numbers (home, work, ...)

this is wrecking my head the past few days and i can not figure it out with the docs... thanks for any help!

[LynetteCullens]

You can Produce this Look
By Using This JavaScript Code
And This CSS Format
Instructions
How to Setup MetaData Menu for Nested Items

Looks Like This

From This

The only way to edit is from the MetaData Menu Field Modal

[LynetteCullens]

A new way to edit the nested properties is via MetaBind if you want to do it inline.

INPUT[editor(showcase):mathLink-blocks["MKS"]]

[LynetteCullens]

HI,

its kinda hard to formulate the question as im missing the terms. but i want to have what the ObjectList is doing but then roll that up into another/the same page and display it there in a readable format. i do get how to do that hardcoded (if there is a set number of keys) but i dont know how to do that with various. like the address example that is mentioned sometimes.

Basically a "Key: Value - Value" set that can have multiples (like Home, Work, Other Address; Phone; multiple Jobs; Attendees of a Meeting with their Role; ... thats CMS examples - but could be recipe ingredients and amounts too or so many other things). but to have that displayed in a readable (best case editable) format on the page itself and on other pages

As an example:

in a CRM like Vault: Person 1: Job 1: Company1 - Jobtitle Job 2: Company2 - Jobtitle2 Person 2: Job 1: Company1 - Jobtitle

on the Company1 Page I want to see: Person 1 - Jobtitle Person 2 - Jobtitle

that would be easy if they are just part of 1 company. but what to do with people who are parts of multiple companies

or:

How to display multiple adresses of a person, multiple phone numbers (home, work, ...)

this is wrecking my head the past few days and i can not figure it out with the docs... thanks for any help!

I've gotten ChatGPT to rewrite the template .js code. Now we can view and edit our properties.

const { fieldModifier: f } = MetadataMenu.api; // destruct metadata-menu api to use fieldModifier function and give an alias: "f"

const rootKey = "__root__";

if (input && dv) {
  const properties = dv.el("div", "", { cls: "note-properties", attr: { id: "properties-container" } });
  // Set up a tree-like dict of all the directory {path : ul element} mappings
  let listTree = {};
  let header = "Properties";
  let obj = {};
  const frontmatter = dv.current().file.frontmatter;
  if (Object.keys(input).length === 0 && input.constructor === Object && frontmatter.hasOwnProperty("note type")) {
    const note_type = frontmatter["note type"];
    switch (note_type) {
      case "electrochemical cell":
        header = "Cell Properties";
        obj = frontmatter["cell"];
        break;
      case "device":
        header = "Device Properties";
        obj = frontmatter["device"];
        break;
      case "instrument":
        header = "Instrument Properties";
        obj = frontmatter["instrument"];
        break;
      case "chemical":
        header = "Chemical Properties";
        obj = frontmatter["chemical"];
        break;
      case "electrode":
        header = "Electrode Properties";
        obj = frontmatter["electrode"];
        break;
      case "reference electrode":
        header = "Reference Electrode Properties";
        obj = frontmatter["electrode"];
        break;
      case "process":
        header = "Process Properties";
        obj = frontmatter["process"];
        break;
      case "sample":
        header = "Sample Properties";
        obj = frontmatter["sample"];
        break;
      case "analysis":
        header = "Analysis Properties";
        obj = frontmatter["analysis"];
        break;
      case "lab":
        header = "Lab Properties";
        obj = frontmatter["lab"];
        break;
      default:
        obj = frontmatter;
    }
  } else {
    let key = "";
    // check if input has property "key"
    if (input.hasOwnProperty("key")) {
      obj = frontmatter[input.key];
      key = input.key;
    } else {
      obj = frontmatter;
    }
    if (input.hasOwnProperty("header")) {
      header = input.header;
    } else {
      // if key is not empty, capitalize the first letter
      if (key !== "") {
        key = key.charAt(0).toUpperCase() + key.slice(1);
      }
      header = `${key} Properties`;
    }
  }
  dv.header(2, header, { container: properties });
  listTree[rootKey] = dv.el("ul", "", { container: properties });
  yaml_object_to_list(obj, listTree, 0, "");
}

function yaml_object_to_list(obj, listTree, level, parent) {
  if (parent === "") {
    parent = rootKey;
  }

  const objkeys = Object.keys(obj);

  objkeys.forEach(okey => {
    if (obj[okey] instanceof Object) {
      if (obj[okey] instanceof Array) {
        const parentEl = listTree[parent];
        if (obj[okey].length > 0 && obj[okey].some((e) => e instanceof Object)) {
          const listEl = dv.el("li", "", { container: parentEl });
          dv.el("div", okey, { container: listEl, cls: "property-object" });
          listTree[okey] = dv.el("ul", "", { container: parentEl });
          obj[okey].forEach(entry => {
            if (entry instanceof Object) {
              const listEl = dv.el("li", "", { container: parentEl });
              dv.el("div", okey, { container: listEl, cls: "property-object" });
              listTree[okey] = dv.el("ul", "", { container: parentEl });
              yaml_object_to_list(entry, listTree, level + 1, okey);
            } else {
              const parentEl = listTree[parent];
              dv.el("li", `${entry}`, { container: parentEl });
            }
          });
        } else {
          const data_type = "list";
          const listEl = dv.el("li", "", { container: parentEl });
          dv.el("div", okey, { container: listEl, cls: "property-key", attr: { "data-type": data_type } });
          obj[okey].forEach(element => {
            const data_type = get_data_type(okey, obj[okey]);
            dv.el("div", element, { container: listEl, cls: "property-array-value", attr: { "data-type": data_type } });
          });
        }
      } else {
        const parentEl = listTree[parent];
        const listEl = dv.el("li", "", { container: parentEl });
        dv.el("div", okey, { container: listEl, cls: "property-object" });
        listTree[okey] = dv.el("ul", "", { container: parentEl });
        yaml_object_to_list(obj[okey], listTree, level + 1, okey);
      }
    } else {
      const data_type = get_data_type(okey, obj[okey]);
      const parentEl = listTree[parent];
      const listEl = dv.el("li", "", { container: parentEl });
      dv.el("div", okey, { container: listEl, cls: "property-key", attr: { "data-type": data_type } });

      // Always modify fields with fieldModifier
      const currentFilePath = dv.current().file.path;
      const modifiedField = f(dv, dv.page(currentFilePath), okey, {
        options: {
            alwaysOn: true,
            showAddField: true,
            inFrontmatter: true
        }});

      // Add value div as modified by fieldModifier
      dv.el("div", modifiedField, { container: listEl, cls: "property-value", attr: { "data-type": data_type } });
    }
  });
}

function get_data_type(key, value) {
  let data_type = "string";
  if (typeof value === "number") {
    data_type = "number";
  } else if (typeof value === "boolean") {
    data_type = "boolean";
  } else if (typeof value === "object") {
    data_type = "object";
  } else {
    switch (key.toLowerCase()) {
      case "date":
        data_type = "date";
        break;
      case "time":
        data_type = "time";
        break;
      case "link":
        data_type = "link";
        break;
      default:
        data_type = "string";
    }
  }
  return data_type;
}

[ArneNostitz]

FYI: I'm working on a plugin myself right now that shows properties in a side panel - https://discord.com/channels/686053708261228577/840286264964022302/1245883877059198996

[ararrocks]

i released a first itteration of the plugin here: https://github.com/ararrocks/Obsidian_CustomPropPanel

[LynetteCullens]

Any updates on viewing nested properties?

[ararrocks]

nested properties with only one level are supported. like address and socialmedia links. multi level nests are not yet supported.