Tree view in main grid

Hello, There is an example of how a TGV can be inserted into an HTML document under \Innovator\Client\Modules\aras.innovator.TreeGridView\Examples\RelationshipTab.js . This seems to be intended to be done to the RelationshipsGrid, but you could also take these steps and apply them to a Form item with an HTML field by using the steps below.

1. Create a new Form named "My Part-Document TGV"
2. Add an html field to the Form
   1. Remove the label from the field
   2. Set the position of the field to (0, 0)
   3. Add the code below to the HTML code field and update the tgvID in the place marked
   4. `<script>var topWindow = aras.getMostTopWindowWithAras(window); var tgvdIdParam; var startConditionProviderParam; var parametersProviderParam; tgvdIdParam = 'tgvdId=9935955AA610437E86591DB44AF53B1B'; // <-- Change this ID to the ID of your TGV var tgvUrl = aras.getBaseURL('/Modules/aras.innovator.TreeGridView/Views/MainPage.html?'); var allParams = [tgvdIdParam, startConditionProviderParam, parametersProviderParam]; for (var i = 0; i < allParams.length; i++) { if (allParams[i]) { tgvUrl += (i === 0 ? '' : '&') + allParams[i]; } } var iframe = document.createElement('iframe'); iframe.id = 'tree_grid_viewer'; iframe.width = '100%'; iframe.height = '100%'; iframe.frameBorder = '0'; iframe.scrolling = 'auto'; iframe.src = tgvUrl; document.body.insertBefore(iframe, document.body.childNodes[0]); </script>`
3. Confirm that your TGV appears as expected in the Form Preview
4. Create a new dummy ItemType to represent this TGV in the TOC
5. Navigate to the TOC View tab of this ItemType
6. Create a new TOC View
   1. Set the Identity to World or whoever should be able to see this TGV
   2. Set the Form [...] property to the form we created in step 2
7. Save the ItemType
8. Navigate to this ItemType in the TOC and confirm that your TGV appears as expected

This is a very interesting use case, and I hope this helps accomplish everything you need to! Chris

---

Christopher Gillis Aras Labs Software Engineer

Dear Christopher, When implementing this solution both the Form preview and the main grid displayed blank. I expect that this is because the startConditionProviderParam is empty. When the grid is appended to a Part item, it can use this Part item as its context and starting point. In my case however I'll have to provide a condition along the lines of "where [part].[is_top] = '1'". I had configured this in the Query Definition as "[is_top] = 1" but this doesn't seem to suffice. I guess the question here is this: How can we tell our Tree Grid View what its starting condition/query (where [part].[is_top] = '1') should be? Edit: I tried a different approach. Instead of creating the Tree Grid View for a Relationship Grid, I let set Tree Grid View Usage to JavaScript Method. This gave me a chunk of code which I then placed in the HTML element on the Form. This almost worked. When saving the Form or selecting the dummy itemtype from the TOC it now creates a pop-up with the Tree Grid View (with content as desired). I suspect the last problem to be in this piece of code: topWindow.ArasModules.MaximazableDialog.show('iframe', dialogParameters).promise.then(function() { delete topWindow.CustomStartConditionProvider; delete topWindow.CustomParametersProvider; } For now it points to a dialog box where it should just point to the main grid. So... How do we go about doing that?   To give you a little bit more insight in the use case, I work for an engineering bureau that uses the Systems Engineering methodology to engineer the electrical installation and software for large infrastructural objects. As such, our hardware and software engineers are used to thinking in System Breakdown Structures (or SBS). This means that when they want to work on a specific document they find it easier to browse through the SBS to find it rather than search for it in the Document grid. I have some more ideas to incorporate in this particular view and later to automate some steps that are currently being executed by users manually, but first things first. My job basically is to make life easier for everyone in the company using ARAS and to make sure we keep up with the latest developments.

Another minor update. I do think I'll need to add some parameters. The Tree Grid View that now pops up in a window seems to display each tree an infinite number of times.

Hello, If you're getting the TGV to display in a dialog, all you should need to do is replace the call to create a dialog with a call to insert an 'iframe' into the document like the example below.

var tgvUrl = aras.getBaseURL('/Modules/aras.innovator.TreeGridView/Views/MainPage.html?');
var allParams = [tgvdIdParam, startConditionProviderParam, parametersProviderParam];
for (var i = 0; i < allParams.length; i++) {
if (allParams[i]) {
tgvUrl += (i === 0 ? '' : '&') + allParams[i];
}
}
/* This call to a dialog is replaced with the code below
var dialogParameters = {
dialogWidth: 800,
dialogHeight: 600,
title: 'Tree Grid View Sample',
content: tgvUrl
};
topWindow.ArasModules.MaximazableDialog.show('iframe', dialogParameters).promise.then(function() {
delete topWindow.CustomStartConditionProvider;
delete topWindow.CustomParametersProvider;
});
*/
// Use this code instead to insert an iframe directly into the HTML instead of opening it through a dialog
var iframe = document.createElement('iframe');
iframe.id = 'tree_grid_viewer';
iframe.width = '100%';
iframe.height = '100%';
iframe.frameBorder = '0';
iframe.scrolling = 'auto';
iframe.src = tgvUrl;
document.body.insertBefore(iframe, document.body.childNodes[0]);

In regards to the other issue you're seeing with trees being displayed many times, this may be an issue with your query itself or the starting parameters that you're passing in. I'd suggest reviewing the query in the Query Definition editor and use the "Execute Query" action to test that the arguments you're passing in are giving the results you expect. Chris

---

Christopher Gillis Aras Labs Software Engineer

Dear Chris, The form now works as desired, thank you so much for your help! For now I've tried it with a different query, which seems to function as expected. I'll just rebuild the query step by step so I can easily see where I go wrong. Are there any easy ways to query for an entire tree rather than expand the query layer by layer? I.e. in the Part BOM scenario, is it possible to easily query for the entire Part - Part BOM - Part tree instead of building a large enough Part - Part BOM - Part - Part BOM - Part - Part BOM - Part structured query?

Hello, There is indeed an easy way to get an entire tree! You can check out this blog post and look for the section that covers the Reuse Query Element Definition action. This will allow you to very easily build a recursive query that searches the entire way down an item structure while requiring you to only specify one level of it. Chris

---

Christopher Gillis Aras Labs Software Engineer

Hi, I managed to get the tree up and running using the Reuse Query Element Definition. Thank you so much for your help! Remco

One final minor issue remains. While the Refresh and Modify Parameters buttons of the Tree Grid View display properly in the form editor, when accessing the form on the TOC those buttons show as some sort of image missing icons. I guess they somewhat resemble a torn page or something along those lines. Do you have any idea how I can fix this? Could it be some issue with the html page the Tree Grid View uses (or is it completely different)?

Hello, The issue appears to be that the context of the HTML on the main grid is causing the relative paths to the image files to point to the wrong location. If I open the Chrome debugger tools and manually move the image path up two folders the image is displayed correctly. (../javascript/dojo/../../cbin/../Images/Refresh.svg becomes ../../../javascript/dojo/../../cbin/../Images/Refresh.svg) I haven't yet discovered a way to resolve this programmatically, but hopefully this information helps in your own search. Chris

---

Christopher Gillis Aras Labs Software Engineer

I'll probably end up editing the HTML page in the code tree. Seems like the easiest solution. Thanks again for all your help!