@FaizanB4

You can leverage such functionality using Constellation DX Component – I would suggest the following:

Prerequisite:

• Start by defining a property on case level called directory, inside you can have file and directory which are embedded data
• Create a data page (D_FolderTree) with CaseID as param and inside call activity / data transform to return directory structure
• Ensure that data page hold status of API

Assuming you have custom component builder installed and setup, you can create your custom component via `npm run create` > select Field if you want to display component inside work area or you can make it as Widget (like attachments / stakeholders).

Check the following component code:

react-folder-tree is used – an open source project with MIT license.

import PropTypes from 'prop-types';
import FolderTree from 'react-folder-tree';
import { useState, useEffect } from 'react';

function transform(input, isOpen = true, checked = 0.5) {
  const output = {
    name: input.Name,
    checked,
    isOpen,
    children: []
  };

  if (input.File) {
    for (const file of input.File) {
      output.children.push({
        name: file.Name,
        checked: 0
      });
    }
  }

  if (input.Folder) {
    for (const folder of input.Folder) {
      output.children.push(transform(folder));
    }
  }

  return output;
}

const PegaExtensionsDirectoryhierarchy = props => {
  const { getPConnect, datapageName } = props;
  const pConn = getPConnect();
  const actions = pConn.getActionsApi();
  const [response, setResponse] = useState({});
  const onTreeStateChange = (state, event) => console.log(state, event);
  useEffect(() => {
/*
  !!! You should not use this approach for adding styles. !!!
 Instead, you should use the out-of-the-box example provided on npm run create, which uses styled-components.
 Nevertheless, upon careful inspection of the library styles, it is not altering any global styles.
 */
    if (document.querySelector('#react-tree') === null) {
      const componentStyles = document.createElement('link');
      componentStyles.id = 'react-tree';
      componentStyles.rel = 'stylesheet';
      componentStyles.href = 'https://unpkg.com/[email protected]/dist/style.css';
      document.head.appendChild(componentStyles);
    }
  /* fetching data from a datapage, which is passed as parameters in the authoring view. 
   Currently, for the sake of the demo, I have chosen a datapage with a ‘Page’ structure type and no parameters. To extend current 
 check https://docs.pega.com/bundle/pcore-pconnect/page/pcore-pconnect-public-apis/api/getpagedataasync-datapagename-context-parameters-options.html
  */
    window.PCore.getDataPageUtils()
      .getPageDataAsync(datapageName)
      .then(data => {
        if (data !== null) {
          // make response output match input required by react-folder-tree
          setResponse(transform(data.Folder[0]));
        }
      })
      .catch(() => {
        // handle error 
      });
  }, []);
  return (
      <FolderTree data={response} onChange={onTreeStateChange} />
  );
};

PegaExtensionsDirectoryhierarchy.defaultProps = {
  datapageName: '',
  testId: null
};

PegaExtensionsDirectoryhierarchy.propTypes = {
  datapageName: PropTypes.string,
  testId: PropTypes.string
};

export default PegaExtensionsDirectoryhierarchy;

Check below screenshot which illustrate data structure and how react-folder-tree would display the directory tree.