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, it will probably be helpful to create a tab on the Legal Matters app that lists all related child transactions in the Tasks app. Here’s an example:
To add this type of tab to a parent’s View Page, you’ll create something called 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 exactly that.
You can also create a Related Atoms Dashboard for a ManyToMany Relationship, however, the panel will only work if you have a ManyToMany Field with 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 a parent Legal Matters app and list all related transaction in a 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 that 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 relevant to your situation.
Tip: New to Liquid? Check out our Crash Course on Liquid.
-
Data View: This property allows you to very specifically control how the grid of child transactions appear within the tab. You can specify the columns that will be displayed for each child transaction, their sorting order, and you can even apply filtering (to only show child transactions that meet certain criteria). From the Data View dropdown, you’ll see a list of Data Views that have been 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 the way you want the tab's grid to appear (with the correct columns, sorting, and filtering applied), and 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 to one of your parent transaction’s View Pages, you’ll see that your new tab displays first and that your General tab now displays second.
More often than not, it’s preferable to have the General tab always display first, so let’s fix that. Select Settings from the left-hand pane of your parent app’s Advanced Designer page, 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. Your users will surely appreciate being able to see their related transactions from an easy to access tab.
