Hierarchy Browser (Tree) Structure to show the details

Question

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

Stefan Helzle · Answer

You can use this plugin to show a diagram like this. 
 community.appian.com/.../network-graph-component

Shubham Aware · Answer

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

Harsha Sharma · Answer

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.

Stefan Helzle · Answer

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.