Question

Hierarchy Browser (Tree) Structure to show the details

Forum|Forum|11 months ago
August 11, 2025
8 replies
0 views

Hi,

I want to show the following hierarchy image in my interface. How can I achieve this? Please provide the coding.

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

brindas358855Author

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.

stefanhelzle0001

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

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

brindas358855Author

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?

stefanhelzle0001

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.

shubhama926776

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: "â”Œâ”`â”`â”`â”`â”`â”`â”`â”`â”`â”´â”`â”`â”`â”`â”`â”`â”`â”`â”`â”%90",
                        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"
      )
    }
  )
)

harshas2775

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.

Sign up

Login with SSO

Login to the community

Login with SSO