RE: Hierarchy Browser (Tree) Structure to show the details

Stefan Helzle — Mon, 11 Aug 2025 16:53:53 GMT

If you are working on a cloud environment, you can deploy plugins from the admin console.

Edit your profile and select the company you are working for.

RE: Hierarchy Browser (Tree) Structure to show the details

brinda sateesh — Mon, 11 Aug 2025 16:26:31 GMT

When I try to download it is saying that

This app is available to download for Appian Customers, Partners, and Employees. Please make sure to self-associate from your profile.

How can I self-associate from my profile?

RE: Hierarchy Browser (Tree) Structure to show the details

Harsha Sharma — Mon, 11 Aug 2025 16:25:38 GMT

You can refer to example code in the documentation below!

https://docs.appian.com/suite/help/25.2/Tree_Browser_Component.html

Replace the data variables as per your usecase. Let me know here if you get stuck anywhere or face any errors! Hope this helps.

RE: Hierarchy Browser (Tree) Structure to show the details

Shubham Aware — Mon, 11 Aug 2025 15:40:28 GMT

In our project, we used a graph flow UI solely for the business's visual representation. I have made code changes to meet your requirements.
Although some graph plugins exist, I highly recommend using Appian's OOB functions to achieve this, as those plugins are not officially supported by Appian and may cause issues.

Hope this helps you..

a!localVariables(
  /* Current approval level (1-5) - get this from your process/database */
  local!currentLevel: 4,
  a!sectionLayout(
    label: "Task Approval Flow",
    contents: {
      a!boxLayout(
        label: "",
        contents: {
          /* Level 1 */
          a!columnsLayout(
            columns: {
              a!columnLayout(),
              a!columnLayout(
                contents: {
                  a!cardLayout(
                    contents: {
                      a!richTextDisplayField(
                        value: {
                          a!richTextIcon(
                            icon: if(
                              local!currentLevel >= 1,
                              "check-circle",
                              "circle-o"
                            ),
                            color: if(
                              local!currentLevel >= 1,
                              "POSITIVE",
                              "SECONDARY"
                            ),
                            size: "MEDIUM"
                          ),
                          "  ",
                          a!richTextItem(
                            text: "Level 1",
                            size: "MEDIUM",
                            style: if(local!currentLevel = 1, "STRONG", "PLAIN"),
                            color: if(
                              local!currentLevel >= 1,
                              "POSITIVE",
                              "SECONDARY"
                            )
                          )
                        },
                        align: "CENTER"
                      )
                    },
                    style: if(local!currentLevel = 1, "ACCENT", "NONE"),
                    padding: "STANDARD",
                    marginBelow: "NONE"
                  ),
                  /* Vertical Line */
                  a!richTextDisplayField(
                    value: {
                      a!richTextItem(
                        text: "│",
                        size: "LARGE",
                        color: if(
                          local!currentLevel >= 2,
                          "POSITIVE",
                          "SECONDARY"
                        )
                      ),
                      char(10),
                      a!richTextIcon(
                        icon: "arrow-down",
                        color: if(
                          local!currentLevel >= 2,
                          "POSITIVE",
                          "SECONDARY"
                        )
                      ),
                      char(10),
                      a!richTextItem(
                        text: "│",
                        size: "LARGE",
                        color: if(
                          local!currentLevel >= 2,
                          "POSITIVE",
                          "SECONDARY"
                        )
                      )
                    },
                    align: "CENTER"
                  ),
                  /* Level 2 */
                  a!cardLayout(
                    contents: {
                      a!richTextDisplayField(
                        value: {
                          a!richTextIcon(
                            icon: if(
                              local!currentLevel >= 2,
                              "check-circle",
                              "circle-o"
                            ),
                            color: if(
                              local!currentLevel >= 2,
                              "POSITIVE",
                              "SECONDARY"
                            ),
                            size: "MEDIUM"
                          ),
                          "  ",
                          a!richTextItem(
                            text: "Level 2",
                            size: "MEDIUM",
                            style: if(local!currentLevel = 2, "STRONG", "PLAIN"),
                            color: if(
                              local!currentLevel >= 2,
                              "POSITIVE",
                              "SECONDARY"
                            )
                          )
                        },
                        align: "CENTER"
                      )
                    },
                    style: if(local!currentLevel = 2, "ACCENT", "NONE"),
                    padding: "STANDARD",
                    marginBelow: "NONE"
                  )
                }
              ),
              a!columnLayout()
            }
          ),
          /* Enhanced Branch Lines to Level 3 and 4 */
          a!columnsLayout(
            columns: {
              a!columnLayout(width: "NARROW"),
              a!columnLayout(
                contents: {
                  a!richTextDisplayField(
                    value: {
                      a!richTextItem(
                        text: "│",
                        size: "LARGE",
                        color: if(
                          local!currentLevel >= 3,
                          "POSITIVE",
                          "SECONDARY"
                        )
                      )
                    },
                    align: "CENTER",
                    marginBelow: "NONE"
                  ),
                  a!richTextDisplayField(
                    value: {
                      a!richTextItem(
                        text: "┌─────────┴─────────┐",
                        size: "LARGE",
                        color: if(
                          local!currentLevel >= 3,
                          "POSITIVE",
                          "SECONDARY"
                        )
                      )
                    },
                    align: "CENTER",
                    marginBelow: "NONE"
                  ),
                  a!richTextDisplayField(
                    value: {
                      a!richTextItem(
                        text: "↓                   ↓",
                        size: "LARGE",
                        color: if(
                          local!currentLevel >= 3,
                          "POSITIVE",
                          "SECONDARY"
                        )
                      )
                    },
                    align: "CENTER"
                  )
                }
              ),
              a!columnLayout(width: "NARROW")
            },
            marginBelow: "NONE"
          ),
          /* Level 3 and 4 in parallel */
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!cardLayout(
                    contents: {
                      a!richTextDisplayField(
                        value: {
                          a!richTextIcon(
                            icon: if(
                              local!currentLevel >= 3,
                              "check-circle",
                              "circle-o"
                            ),
                            color: if(
                              local!currentLevel >= 3,
                              "POSITIVE",
                              "SECONDARY"
                            ),
                            size: "MEDIUM"
                          ),
                          "  ",
                          a!richTextItem(
                            text: "Level 3",
                            size: "MEDIUM",
                            style: if(local!currentLevel = 3, "STRONG", "PLAIN"),
                            color: if(
                              local!currentLevel >= 3,
                              "POSITIVE",
                              "SECONDARY"
                            )
                          )
                        },
                        align: "CENTER"
                      )
                    },
                    style: if(local!currentLevel = 3, "ACCENT", "NONE"),
                    padding: "STANDARD"
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!richTextDisplayField(
                    value: a!richTextItem(
                      text: "Parallel Approval",
                      style: "EMPHASIS",
                      color: "SECONDARY",
                      size: "SMALL"
                    ),
                    align: "CENTER"
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!cardLayout(
                    contents: {
                      a!richTextDisplayField(
                        value: {
                          a!richTextIcon(
                            icon: if(
                              local!currentLevel >= 4,
                              "check-circle",
                              "circle-o"
                            ),
                            color: if(
                              local!currentLevel >= 4,
                              "POSITIVE",
                              "SECONDARY"
                            ),
                            size: "MEDIUM"
                          ),
                          "  ",
                          a!richTextItem(
                            text: "Level 4",
                            size: "MEDIUM",
                            style: if(local!currentLevel = 4, "STRONG", "PLAIN"),
                            color: if(
                              local!currentLevel >= 4,
                              "POSITIVE",
                              "SECONDARY"
                            )
                          )
                        },
                        align: "CENTER"
                      )
                    },
                    style: if(local!currentLevel = 4, "ACCENT", "NONE"),
                    padding: "STANDARD"
                  )
                }
              )
            },
            marginBelow: "NONE"
          ),
          /* Enhanced Merge Lines to Level 5 */
          a!columnsLayout(
            columns: {
              a!columnLayout(width: "NARROW"),
              a!columnLayout(
                contents: {
                  a!richTextDisplayField(
                    value: {
                      a!richTextItem(
                        text: "↓                   ↓",
                        size: "LARGE",
                        color: if(
                          local!currentLevel >= 5,
                          "POSITIVE",
                          "SECONDARY"
                        )
                      )
                    },
                    align: "CENTER",
                    marginBelow: "NONE"
                  ),
                  a!richTextDisplayField(
                    value: {
                      a!richTextItem(
                        text: "└─────────┬─────────┘",
                        size: "LARGE",
                        color: if(
                          local!currentLevel >= 5,
                          "POSITIVE",
                          "SECONDARY"
                        )
                      )
                    },
                    align: "CENTER",
                    marginBelow: "NONE"
                  ),
                  a!richTextDisplayField(
                    value: {
                      a!richTextItem(
                        text: "│",
                        size: "LARGE",
                        color: if(
                          local!currentLevel >= 5,
                          "POSITIVE",
                          "SECONDARY"
                        )
                      ),
                      char(10),
                      a!richTextIcon(
                        icon: "arrow-down",
                        color: if(
                          local!currentLevel >= 5,
                          "POSITIVE",
                          "SECONDARY"
                        )
                      ),
                      char(10),
                      a!richTextItem(
                        text: "│",
                        size: "LARGE",
                        color: if(
                          local!currentLevel >= 5,
                          "POSITIVE",
                          "SECONDARY"
                        )
                      )
                    },
                    align: "CENTER"
                  ),
                  
                }
              ),
              a!columnLayout(width: "NARROW")
            },
            marginBelow: "NONE"
          ),
          /* Level 5 */
          a!columnsLayout(
            columns: {
              a!columnLayout(),
              a!columnLayout(
                contents: {
                  a!cardLayout(
                    contents: {
                      a!richTextDisplayField(
                        value: {
                          a!richTextIcon(
                            icon: if(
                              local!currentLevel >= 5,
                              "check-circle-o",
                              "circle-o"
                            ),
                            color: if(
                              local!currentLevel >= 5,
                              "POSITIVE",
                              "SECONDARY"
                            ),
                            size: "MEDIUM"
                          ),
                          "  ",
                          a!richTextItem(
                            text: "Level 5 - Completed",
                            size: "MEDIUM",
                            style: if(local!currentLevel = 5, "STRONG", "PLAIN"),
                            color: if(
                              local!currentLevel >= 5,
                              "POSITIVE",
                              "SECONDARY"
                            )
                          )
                        },
                        align: "CENTER"
                      )
                    },
                    style: if(local!currentLevel = 5, "SUCCESS", "NONE"),
                    padding: "STANDARD"
                  )
                }
              ),
              a!columnLayout()
            }
          )
        },
        style: "STANDARD",
        padding: "STANDARD"
      ),
      /* Status Summary */
      a!cardLayout(
        contents: {
          a!richTextDisplayField(
            value: {
              a!richTextItem(text: "Current Status: ", style: "STRONG"),
              a!richTextItem(
                text: if(
                  local!currentLevel = 1,
                  "Awaiting Level 1 Approval",
                  local!currentLevel = 2,
                  "Awaiting Level 2 Approval",
                  local!currentLevel = 3,
                  "Awaiting Level 3 Approval (Parallel)",
                  local!currentLevel = 4,
                  "Awaiting Level 4 Approval (Parallel)",
                  local!currentLevel = 5,
                  "Process Completed",
                  "Not Started"
                ),
                color: if(
                  local!currentLevel = 5,
                  "POSITIVE",
                  "ACCENT"
                )
              )
            }
          )
        },
        style: "INFO"
      )
    }
  )
)

RE: Hierarchy Browser (Tree) Structure to show the details

Stefan Helzle — Mon, 11 Aug 2025 15:17:49 GMT

You can use this plugin to show a diagram like this.

community.appian.com/.../network-graph-component

RE: Hierarchy Browser (Tree) Structure to show the details

brinda sateesh — Mon, 11 Aug 2025 14:54:16 GMT

Based on the status, I want to show the entire diagram and highlight the level

RE: Hierarchy Browser (Tree) Structure to show the details

brinda sateesh — Mon, 11 Aug 2025 14:52:29 GMT

It is not staff hierarchy. It's a kind of task approval flow. First the task will be approved by Level 1 group. Then it goes to Level 2 group for approval. Then it goes to level 3 and Level 4 group simultaneously for approval. Finally, Level 5 status will be completed.

RE: Hierarchy Browser (Tree) Structure to show the details

Richard Michaelis — Mon, 11 Aug 2025 14:03:55 GMT

Hello Brinda,

what kind "hierarchy image" do you like to have? Staff hierarchy? should it be flexible depending on data and interactions?
Can you explain what you try to archieve?
kind regards,
RIchard