Acumatica TreeView: Understanding and Customizing in Acumatica ERP

Hello everyone! Today, I'd like to share my knowledge about the TreeView control in Acumatica, focusing on what it is, how to create a custom TreeView, and adding additional fields to an existing one.

1. What is TreeView in Acumatica ERP?

In Acumatica, a TreeView is a crucial user interface element utilized to showcase hierarchical data in a tree-like structure. It empowers users to navigate through a hierarchy of records or data in a visually organized manner. Each node in the tree signifies a record or a category, with child nodes nested under their parent nodes, forming a hierarchical structure.

Acumatica employs numerous screens with these controls:

2. How to Create a Custom TreeView?

1. Add a table with NoteID and ParentID values:

b. Add DAC class:

[Serializable]
[PXCacheName("CustomTreeView")]
public class CustomTreeView : IBqlTable
{
    public new abstract class noteID : BqlType<IBqlGuid, Guid>.Field<noteID>
    {
    }
 
    [PXDBGuid(false, IsKey = true)]
    [PXUIField(Visibility = PXUIVisibility.SelectorVisible)]
    public virtual Guid? NoteID
    {
        get; set;
    }
 
    public new abstract class parentUID : BqlType<IBqlGuid, Guid>.Field<parentUID>
    {
    }
 
    [PXDBGuid(false)]
    [PXUIField(DisplayName = "Parent Folder")]
    public virtual Guid? ParentUID
    {
        get; set;
    }
 
    public new abstract class name : BqlType<IBqlString, string>.Field<name>
    {
    }
 
    [PXDefault]
    [PXDBString(InputMask = "", IsUnicode = true)]
    [PXUIField(DisplayName = "ID", Visibility = PXUIVisibility.SelectorVisible)]
    public virtual string Name
    {
        get; set;
    }
 
    public abstract class title : BqlType<IBqlString, string>.Field<title>
    {
    }
 
    [PXDefault(PersistingCheck = PXPersistingCheck.Nothing)]
    [PXString(InputMask = "", IsUnicode = true)]
    [PXUIField(DisplayName = "Name", Visibility = PXUIVisibility.SelectorVisible)]
    public virtual string Title
    {
        get; set;
    }
 
    public abstract class pageID : BqlType<IBqlGuid, Guid>.Field<pageID>
    {
    }
 
    [PXGuid]
    [PXUIField(Visibility = PXUIVisibility.SelectorVisible)]
    public virtual Guid? PageID
    {
        get; set;
    }
}
 

 c. Add a view in your Graph for selecting these values from the database and logic:

public SelectFrom<CustomTreeView>.View.ReadOnly Articles;
 
protected virtual IEnumerable articles(string PageID)
{
    Guid parentID = GUID.CreateGuid(PageID) ?? Guid.Empty;
 
    PXResultset<CustomTreeView> customTrees = null;
    if (PageID != null)
    {
        customTrees = SelectFrom<CustomTreeView>.Where<CustomTreeView.parentUID.IsEqual<BqlPlaceholder.P.AsGuid>>.View.ReadOnly.Select(Base, parentID);
    }
    else
    {
        customTrees = SelectFrom<CustomTreeView>.Where<CustomTreeView.parentUID.IsNull>.View.ReadOnly.Select(Base);
    }
 
    foreach (CustomTreeView childNode in customTrees)
    {
 
        yield return new CustomTreeView
        {
            PageID = childNode.NoteID,
            Title = childNode.Name,
            ParentUID = parentID,
        };
    }
}

 d. Add a field for a view to save the selected GUID in the database:

public abstract class getLinkTemplate : BqlType<IBqlGuid, Guid>.Field<getLinkTemplate>
{
}
 
[PXDBGuid(false)]
[PXUIField(DisplayName = "Template for External Links")]
public virtual Guid? GetLinkTemplate { get; set; }

 e. Add a control in your .aspx page:

or unformatted text:

<px:PXTreeSelector runat="server" ID="edCustomTreeView" TreeDataSourceID="ds" TreeDataMember="Articles" InitialExpandLevel="0" PopulateOnDemand="True" ShowRootNode="False" CommitChanges="True" DataField="GetLinkTemplate">

                                                                             <DataBindings>

                                                                                                <px:PXTreeItemBinding TextField="Title" ValueField="PageID" />

                                                                         </DataBindings>

                                          </px:PXTreeSelector>

And that’s all. After all these steps it should be visible on Acumatica UI:

As you can see, it is quite simple and can be useful in various business cases.

3. How to Add Additional Fields to the Existing One?

Suppose you added a custom tab for the PM304500 screen and need to add your custom DACs and fields to the existing TreeView:

How to do that?

You just need add [PXViewName ()] attribute to your view:

[PXViewName("Chemical Usage")]
public SelectFrom<ChemicalUsage>.Where<ChemicalUsage.contractCD.IsEqual<PMQuote.quoteProjectCD.FromCurrent>>.
    View ChemicalUsage;

An additional way to select data fields from any table and show them in a TreeView is to create a Generic Inquiry and add all tables that you need:

That’s all. Good luck with this experience.