Tree view in main grid

Hi there, I'm currently fumbling around with SP12 and am trying to get a tree grid view to display on the main grid instead of a relationship grid. For instance, I'd want to display all my Part BOMs in the main grid to allow users to manually browse through them. A next step would be to show both Part BOMs and Part Documents so users can navigate through the Part structure to find the Document item they want to work on/review etc. I manage to get the grid up and running in relationship grids using the Tree Grid View and Query builder but can't seem to get it to work in the main grid. To make things easier, our Part items have an "is_top" property to define whether or not the item is the top item in its respective Part BOM, so to gather the top elements for each Part BOM one just has to look for elements where the "is_top" property is set to 1. From there, the rest of each tree can be added.
Parents
  • 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
Reply
  • 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
Children
No Data