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

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.

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.

Hierarchy Browser (Tree) Structure to show the details

Top Replies