Adding text to a hierarchy of items

Question

Given a predefined hierarchy of foods, a user while viewing a specific food on the back-end can add/edit text associated with that specific food, its parent, and its grandparent. Text for each level is optional, and can be left blank.

For instance, if they are viewing "Beef Wellington", they can add "Common for weddings." to the specific food, "It's whats for dinner." to the parent (Beef), and "Has high protein." to the grandparent (Meat). The text in the parenthesis shows sample text which they entered.

1. Meat (Has high protein.)
   1. Beef (It's whats for dinner.)
      1. Beef Wellington (Common for weddings.)
      2. Beef Stroganoff (Great for a cold day.)
   2. Chicken (Very versatile.)
      1. Chicken Cordon Bleu (Nice and cheesy.)
      2. Chicken Marsala (Great with mushrooms.)
2. Vegetables (Low fat.)
   1. Broccoli (null)
      1. Steamed Broccoli (Yummy!)
3. Grain (Good carbs.)
   1. Rice (A cheap grain.)
      1. Fried Rice (null)

Now, when another user is viewing "Beef Wellington" on the front-end, they would see (not able to edit):

• Has high protein.
• It's whats for dinner.
• Common for weddings.

And if that user views "Beef Stroganoff" on the front-end, they would see:

• Has high protein.
• It's whats for dinner.
• Great for a cold day.

How should the back-end user be able to add and edit text for the specific food, its parent, and its grandparent while viewing a specific food?

EDIT. I don't necessarily like this approach, but this is one idea which might better communicate what I am trying to do.

Answer 1

On the back-end, you could handle this using an XML prop/config file that the back-end user could manually edit. The entire hierarchy would appear and the back-end user could add or edit attributes as necessary.

Or, to make it easier, implement a UI or console app so they can see the hierarchy and tag the level with the appropriate text. Something like this:

1. Meat (Has high protein.) [edit link]
   1. Beef (It's whats for dinner.) [edit link]
      1. Beef Wellington [add tag link]
      2. Beef Stroganoff (Great for a cold day.) [edit link]

Answer 2

I'd consider two views in the backend:

1. A basic view (a visual view) similar to what KD Martin mentioned. E.g. editing only the given tree item within the tree by clicking the edit link. An example of something similar would be the way Wordpress handles Menu Appearance in their backend (admin system):

---

2. An advanced view (a text view) where you actually edit the code of the tree structure (can be pseudocode or whatever - think BBCode, or similar to what we have in the "Your Answer" textarea here on UX.stackexchange :)

Answer 3

From back-end perspective efficiency and speed are important factors, so to acomplish this goals, the fundamental is choice of specific structure of data (tree?, type of tree?, heap?)

if it will be tree:

From the designer perspective, it is important to create an interface so that at every level (level I, level II or level III, it is possible to create new branches based on existing needs patterns) eg.

it is also worth considering the issues of structuring and categorizing (should the types of food or names of meals (lunch dinner) be the primary category?)

• Lvl 2: Dinner
• Lvl 3: Meat
• Lvl 4: Beef
• Lvl 3: Vegetables
• Lvl 3: Dessert

---

As for the properties of the added products visible on the frontend - these are the parameters of the model:

e.g. Beef (already (specific instance, not category - tree leaf):

• type
• quality
• expiration date
• protein factors (1-5)

, which are variables that can be edited at what level in a specific role. (e.g. a chef in a system can define dishes)

Then you can create relationships and conditions between levels and products. (here is the moew abstract level of programming architecture and concepts) (e.g. an abstract class for wedding products)

---

But how do you solve the problem?

At the beginning I would go on to analyze the problem and define the business and user needs, then on this basis, together with the programmers, iteratively created a prototype, then an interface and interface grinding.

If the process allows, it is also worth half-validating with the end user.

---

How should the back-end user be able to add and edit text for the specific food, its parent, and its grandparent while viewing a specific food?

Here is example screen: