Is there a lightweight way to display Tree-Grid-Data in Forms?

Hey Angela did you ever find a solution?  If you could share where you found how to display the TGV in the form directly?  We have a lot of instances with one or two items under relationships and it's laborious for people to go through and click tab by tab.  the TGV is much faster and if it can be presented in the form, it's an effective way for them to access it.  Thanks!

May be Tree Grid Container?

alaxala saw that but the frustrating piece is that the example is all hard-coded, so you can't refer to a TGV that's been built already and re-used.

Tree are my nemesis in 2022.

TGV in Forms is not super hard to do. You use a html element that carries an empty iframe. Then use the standard Method produced by TGV but connect the TGV to the iframe instead of populating a pop-up dialog. I remember there is even some sample on Github (was a question by another user somewhere).

But no: I so far didn´t succeed to make it lightweight without the toolbar and stuff.

In general I am constantly looking for easy to use solutions to build custom trees.

The shown approach by alaxala would be perfect, if AML would return us the levels. Which lead to this unsolved question:
https://community.aras.com/f/development/37188/how-to-get-level-depth-of-items-returned-from-an-getitemrepeatconfig-aml-query

Other tree design are supported by Aras, but they all require much investigations:
https://community.aras.com/f/development/36981/tgvgrids-vs-treegridviews---what-is-the-difference-and-which-one-is-intended-to-be-used

It would be cool if we could add more custom elements in the tgv...
https://community.aras.com/f/development/5565/tree-grid-view-tgv-how-i-can-render-a-cell-as-an-icon-image

The tree I work on right now required a lot of custom elements like images, input fields, button, links, etc. . In this case I ended up using an external jquery library for rendering the tree. In my case the data was federated from another database via SQL. So in this case was able to do the level calculation with SQL. But I would be happy to know an easy way to do it without SQL. Aras TGVs calculate levels, but the used code is very inflexible in the moment.

So I hope you now have get some inspiration about trees in the Forms. I anyone knows even more variants please let me know

Tried several times reply to Angela's last post and each time my answer disappears after page refresh. May be this reply will work?

AML does not returns level, but we can add it by XSL transform. Assume we have this AML query:

<Item type='Part' action='GetItemRepeatConfig' id='9A30F9C89FCD4D26B720A439E2CBF48B' select='id,item_number'>
  <Relationships>
    <Item action='get' type='Part BOM' select='related_id(id,item_number),quantity' repeatProp='related_id' repeatTimes='10'></Item>
  </Relationships>
</Item>

if we apply this XSL to result

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl">
  <xsl:output method="xml" indent="yes"/>

  <xsl:template match="/">
    <table font="Microsoft Sans Serif-8" sel_bgColor="steelbue" sel_TextColor="white" header_BgColor="buttonface" expandroot="true" expandall="false" treelines="1" editable="false" draw_grid="true" multiselect="true" column_draggable="false" enableHtml="false" enterAsTab="false" bgInvert="true" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:aras="http://www.aras.com" xmlns:usr="urn:the-xml-files:xslt">
      <thead>
        <th align="c">Part Number</th>
        <th align="c">Part Name</th>
        <th align="c">Quantity</th>
      </thead>
      <columns>
        <column width="60" edit="NOEDIT" align="l" order="0" />
        <column width="220" edit="NOEDIT" align="l" order="1" />
        <column width="60" edit="NOEDIT" align="r" order="2" sort="numeric"/>
      </columns>
      <menu>
        <emptytag/>
      </menu>
      <xsl:apply-templates select="./Item[@type='Part']"/>
    </table>
  </xsl:template>
  <xsl:template match="Item[@type='Part']">
    <xsl:variable name="level" select="count(ancestor::*)"/>
    <xsl:element name="tr">
      <xsl:attribute name="level">
        <xsl:value-of select="$level div 4"/>
      </xsl:attribute>
      <xsl:attribute name="icon0">
        <xsl:text>../images/Part.svg</xsl:text>
      </xsl:attribute>
      <xsl:attribute name="icon1">
        <xsl:text>../images/Part.svg</xsl:text>
      </xsl:attribute>
      <xsl:attribute name="class">
        <xsl:text>dragClass</xsl:text>
      </xsl:attribute>
      <userdata key="gridData_rowItemID" value=" " />
      <td>
        <xsl:value-of select="item_number"/>
      </td>
      <td>
        <xsl:value-of select="id/@keyed_name"/>
      </td>
      <td>
        <xsl:value-of select="ancestor::Item[1]/quantity"/>
      </td>
      <xsl:apply-templates select="Relationships/Item/related_id/Item[@type='Part']"/>
    </xsl:element>
  </xsl:template>
</xsl:stylesheet>

we'll get xml, ready for TreeGridContainer.InitXML:

Hi Alaxala, 

I had seen your attempts to post something. I even had seen your samples. But of course I closed the window in between. 

I assume your post was classified as spam. The forum use very strict filters since the spam war last year ago. Unfortunately Aras doesn´t seem to actively monitor this forum anymore, so I don´t think anyone of them will help. The last time I tried to write to the Aras Labs team I was more or less ghosted.

I know that you have posted some AML query and an XSL transformation and something else that I don´t remember.

The main question for me is right now, how to make the XSL transformation inside of a Javascript function?

There is one Innovator Method for XSLT transformation, e.g.

aras.applyXsltString(res, xsl_stylesheet);

Problem: This one relies on a "Report" Item to carry the stylesheet. I don´t want to use a Report item. We maybe can store the XSL file inside of the codetree, e.g. as seen here: https://www.w3schools.com/xml/xsl_client.asp . But I don´t have much experience with XSL transformations.

AngelaIp thanks for the pointer!  After some digging I found this thread:  tree-view-in-main-grid

That got me in the right direction, but running into an issue of the method is blankly dumping the TGV into the form, not into the HTML container designated.  I assume I'm missing something to grab the ID of the container or need to change out the document.createElement...?  I've named the HTML container on the form as "tree_grid_viewer", but doesn't seem to work.  The method is set to run onFormPopulated against the Form Body.

Any help would be appreciated!

// eslint-disable-next-line
// @ts-nocheck
var topWindow = aras.getMostTopWindowWithAras(window);
var tgvdIdParam;
var startConditionProviderParam;
var parametersProviderParam;

tgvdIdParam = 'tgvdId=60354DB4DEA04643818D20290DC967DC';
startConditionProviderParam = 'startConditionProvider=ItemDefault({"id":"id"})';

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 = '50%';
iframe.height = '50%';
iframe.position = 'absolute';
iframe.top = '190px';
iframe.left = '167px';
iframe.frameBorder = '0';
iframe.scrolling = 'auto';
iframe.src = tgvUrl;
document.body.insertBefore(iframe, document.body.childNodes[0]);

"the method is blankly dumping the TGV into the form, not into the HTML container designated."

Yeeees...cause this is what your code does right now. It creates a NEW iframe and dumps the TGV straight into the form with document.body.insertBefore.

Why not do something like this:

var iframe = document.getElementById("bplTgvFrame");
...
iframe.src = tgvUrl;

 I should start to write consulting invoices....!

Unfortunately we lost user Alaxala in this threat due to the spam filter. Alaxala showed me another useful approach, but weren´t able to test it yet.