Hierarchy Browser (Tree) Structure to show the details

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

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.

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

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

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

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"
      )
    }
  )
)

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. 

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?

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.