How to show different elements while Editing and Viewing Node.

[bipinemp]

new FamilyTree(treeContainer.current, {
        mode: "dark",
        template: "hugo",
        nodeMenu: {
          edit: { text: "Edit" },
          details: { text: "Details" },
        },
        nodeTreeMenu: true,
        nodeBinding: {
          field_0: "name",
          img_0: "img",
        },
        editForm: {
          generateElementsFromFields: false,
          addMore: "",
          readOnly: true,
          elements: [
            { type: "textbox", label: "Name", binding: "name" },
            {
              type: "textbox",
              label: "Gender",
              binding: "gender",
            },
            { type: "textbox", label: "Date of Birth", binding: "dob" },
            { type: "textbox", label: "Date of Death", binding: "dod" },
            { type: "textbox", label: "Email", binding: "email" },
            { type: "textbox", label: "Image", binding: "img" },
            {
              type: "select",
              options: users,
              label: "Select User",
              binding: "gender",
            },
            {
              type: "textbox",
              label: "User's Generation",
              binding: "generation",
            },
          ],
        },

        mouseScrool: FamilyTree.none,
        toolbar: {
          zoom: true,
          fit: true,
          expandAll: true,
          fullScreen: true,
          layout: true,
        },

        nodes,
      });

While editing the node i want to show only these elements and while editing i want all of them except these elements :

 {
              type: "select",
              options: users,
              label: "Select User",
              binding: "gender",
            },
            {
              type: "textbox",
              label: "User's Generation",
              binding: "generation",
            },

[ZornitsaPesheva]

Here is a code example: https://code.balkan.app/org-chart-js/hide-a-field-in-detail-mode#JS