Have you built any parent-child relationships yet in Onit? If so, great! This tutorial will expand your skill set in this area. If not, however, this tutorial might not make a lot of sense -- in that case, check out Creating a Parent-Child Relationship first.
After setting up a parent-child relationship, you may want to create a special tab on the parent transaction’s View Page that lists its child transactions. Users tend to love these tabs, as they grant quick and easy access to view and work with related data.
For example, let’s say you have a parent Legal Matters app that has a child app named Tasks. In this situation, creating a tab on the Legal Matters app that lists all related child transactions in the Tasks app will probably be helpful. Here’s an example:
To add this type of tab to a parent’s View Page, you’ll create a Related Atoms Dashboard. (Note that "Atoms" is used as another word for "Records" in Onit.) In this tutorial, we’ll show you how to do precisely that.
You can also create a Related Atoms Dashboard for a ManyToMany Relationship. However, the panel will only work if the ManyToMany Field has the same name in both Apps (the App with the panel and the target App for the ManyToMany Field).
Before We Start ...
This tutorial will assume you understand the following concepts:
Let's Get Started!
In this tutorial, we’ll create a Related Atoms Dashboard that will appear on the parent Legal Matters app and list all related transactions in the child Tasks app.
1. Create a Related Atoms Dashboard
Browse to your parent App’s Advanced Designer page and select the App Panels node.
Select Related Atoms Dashboard from the Add dropdown.
2. Configure the Related Atoms Dashboard
Enter a Name for the panel, which will be used as the tab’s display name.
Provide the panel with a Height in pixels. This will set the height of the tab when it is selected. We recommend a height of 500.
In the Relation Field dropdown, select the HasMany Field that points to the appropriate child app.
From here, there are a few optional configuration properties to consider:
-
Hidden If: This property allows you to enter Liquid, which controls if the tab will be hidden. This can be very helpful if there are certain conditions under which you don’t want users to see the tab at all. The most common reason to hide the tab is if there are no child transactions. To accomplish this, use the following Liquid:
{% if tasks.size == 0 %}true{% endif %}
Note: In this example, tasks is the name of the relevant HasMany field. You’ll want to change tasks to whatever field name is pertinent to your situation.
Tip: New to Liquid? Check out our Crash Course on Liquid.
-
Data View: This property allows you to precisely control how the child transaction grid appears within the tab. You can specify the columns displayed for each child transaction and their sorting order and even apply filtering (only to show child transactions that meet specific criteria). From the Data View dropdown, you’ll see a list of Data Views pre-created within the child app.
To create a new Data View, go to the App’s advanced designer page, then navigate to the better-advanced designer page (/better_advanced_designer). Under the Components node, choose Data Views.
Click the “plus” button to create a new Data View. Configure the Dashboard to look exactly how you want the tab's grid to appear (with the correct columns, sorting, and filtering applied), then click Save. Now that you’ve created a new Data View, it will appear in the Related Atoms Dashboard’s Data View dropdown list (you may have to refresh the page to see it).
You’re done configuring the Related Atoms Dashboard. Save your work by clicking OK.
3. Set General Tab to Display First
At this point, your Related Atoms Dashboard is ready to use. However, if you browse one of your parent transaction’s View Pages, you’ll see that your new tab displays first and your General tab now displays second.
The General tab is usually preferred for display first, so let’s fix that. Select Settings from the left-hand pane of your parent app’s Advanced Designer page, then select Show Details Panel First.
Select OK to save your changes.
Visit Your New App Panel
Congrats! You’ve just configured a Related Atoms Dashboard. Users will surely appreciate viewing their related transactions in an easily accessible tab.
