I would like to create a Hierarchy table and display in Pega Constellation. We are on Pega 8.8.2
The requirement is simple.
We have a root folder, inside which there are multiple parent folders and files and inside each parent folder there can be multiple sub child folders and files and so on.
E.g Sample ti be displayed
Root (Folder)
Parent 1 (Folder)
File 1
Child 1 (Folder)
File Child 1
Parent 2 (folder)
Child 2 (Folder)
File Child 2
I am fetching this data from interface on certain intervals to refresh this data and need to always display it on the case therefore we are storing the whole embedded structure on the case.
How can I achieve this requirement.
In an embedded data view, I can only show the view as Table or Field Group. Even if I go with the field group and use another view inside, I am not sure whether this can be achieved using that. When going with the Table type, I do not see the list property again within the list.
Went through the documents and they are not relevant in this case.
1- Its not related to files directly as they are not stored in Pega.
2- The documentation about configuring fields and forms (the second link) doesn’t mention the Hierarchy table structure which is possible using traditional UI using various controls but we cant seem to find anything similar to use for constellation.
If there is such a OOTB control or way, please suggest.
I hope this can be achieved in Constellation except for indentation for Parent/Child Cases. However, you can leverage expand/Collapse for the drill down.
I did think in this direction using a list however in this approach we can group just once per property. We have folder inside folder inside folder and it is not just limited to 2 or 3 levels. It can b n levels which is dynamic.
We are expecting something similar to that which we can achieve using Tree grid in traditional UI where a page list can have another page list of same data model within itself. Let us know if there is anything we can do for n levels.
Also since we are on the topic of lists and we did a small POC using similar setup you suggested hardcoding to 3 levels, we are facing some issues there. We have two fields folder name and folder url. The list column is url but we display the folder name on UI.
However we can only group by folder url as that is the column present and we see the folder grouped by full url and not the name. We have to in that case display additional column for folder name as well making the columns redundant and not good on UI. Any suggestions there ?
Understood the data model and that is more or less what we have. We could use this previously using the hierarchy table in traditional UI but we aren’t sure how do we translate this in the constellation UI.
Embedded list does not support multi level embedding on UI as per our understanding. Is there any other way to achieve this on UI, please suggest and we may try it out.
Creating the structure is not a problem. Displaying it is the problem.
I have mentioned it in the original post.
Using an embedded data view, I can only show the view as Table or Field Group. Even if I go with the field group and use another view inside, I am not sure whether this can be achieved using that. When going with the Table type, I do not see the list property again within the list.
So basically when using embedded data field in a view, I can add columns only from the current instance and cannot call the field again within itself. What UI component should I use to achieve this ?
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.
