Node Map is a good component to visualize Top-Down-Structures.

https://developer.servicenow.com/dev.do#!/reference/now-experience/tokyo/shared-components/sn-node-m...

Examples of use cases:

• SAFe: Structure of Epics/Stories/Tasks
• PPM: Structure of Programs/Projects/Subprojects/Project Tasks
• TSM/OMT: Customer Order/Order Line Items/Domain Orders/Tasks

To display a node map 2 arrays of data must be prepared: Nodes and Edges

Example of nodes:

[{        "id": "2fd12eca1b70d91053f075d8cd4bcb4b#sn_ind_tmt_orm_order#in_progress",        "viewData": {            "primaryLabel": "ORD0001422/Product",            "secondaryLabel": "GBER_PO-V14-007 #009 - 21.07.2022 08:00:00",            "icon": "contract-history-fill"        }    }, {        "id": "2fd12eca1b70d91053f075d8cd4bcb4e#sn_ind_tmt_orm_order_line_item#in_progress",        "viewData": {            "primaryLabel": "ORDL0002524",            "secondaryLabel": "DT14SDWAN_Network",            "icon": "list-fill"        }    }, {        "id": "8c622a8e1b70d91053f075d8cd4bcb80#sn_ind_tmt_orm_product_order#3",        "viewData": {            "primaryLabel": "PO0001551",            "secondaryLabel": "Product Order for DT14SDWAN_Network",            "icon": "gear-fill",            "status": " positive"        }    }

]

I have used the default viewData object.

Decoration with icons is a good idea to visualize the type of a node. The list of defined icons are available here:

https://developer.servicenow.com/dev.do#!/reference/now-experience/tokyo/now-components/now-icon/gal...

The status attribute is useful to highlight components in the structure.

The node status can be used to displayed an indicator icon in the corner of the avatar.

Type: ("none" | "positive" | "error" | "warning")

Default: "none"

Examples of edges:

[{        "id": "line#2fd12eca1b70d91053f075d8cd4bcb4e#sn_ind_tmt_orm_order_line_item#in_progress",        "sourceId": "2fd12eca1b70d91053f075d8cd4bcb4b#sn_ind_tmt_orm_order#in_progress",        "targetId": "2fd12eca1b70d91053f075d8cd4bcb4e#sn_ind_tmt_orm_order_line_item#in_progress"    }, {        "id": "line0#8c622a8e1b70d91053f075d8cd4bcb80#sn_ind_tmt_orm_product_order#3",        "sourceId": "2fd12eca1b70d91053f075d8cd4bcb4e#sn_ind_tmt_orm_order_line_item#in_progress",        "targetId": "8c622a8e1b70d91053f075d8cd4bcb80#sn_ind_tmt_orm_product_order#3"    }, {        "id": "line1#78626a8e1b70d91053f075d8cd4bcbb7#sn_ind_tmt_orm_product_order#5",        "sourceId": "8c622a8e1b70d91053f075d8cd4bcb80#sn_ind_tmt_orm_product_order#3",        "targetId": "78626a8e1b70d91053f075d8cd4bcbb7#sn_ind_tmt_orm_product_order#5"    }, {        "id": "line1#dc622a8e1b70d91053f075d8cd4bcbb0#sn_ind_tmt_orm_product_order#5",        "sourceId": "8c622a8e1b70d91053f075d8cd4bcb80#sn_ind_tmt_orm_product_order#3",        "targetId": "dc622a8e1b70d91053f075d8cd4bcbb0#sn_ind_tmt_orm_product_order#5"

    }]

Please remember: The id’s must be unique over all nodes and edges. Otherwise, the Node Map is not drawn.

Example page: