Alright managed to find it, not sure why it didn't work before.
Let me also make a short tutorial for it for other people!
Step 1
Make sure you are using the latest "record" default template.
You can tell by going to the Data Sources and check the form controller:
Old ID is called "gform", new ID is called "record"
Old:
New:
If you still have the old one, add a new page variant and select it from template (select the latest one).
*I know both standard record and CSM default record has the new controller
Step 2
Create your page collection
Goto your newly created record page, select the "Tab sidebar"
+ Add a new tab
Select "Add a page collection", and click "Next"
And click "Create collection"
This will send you to the backend specifically "sys_ux_extension_point" table.
Click "New"
Name: Up to you
Component: Tabs
App shell: UXR Base Experience Shell (Default)
Controller: Form
Go ahead and just click "Submit"
*Just leave the page open we will change the icon in a later state.
Step 3
Go back to the UI Builder, "Refresh list"
And go ahead select your create Page collection and press "Continue"
Step 4
Let's add a tab page to actually show up within the tab.
Click on your "Page collection", and select the button "Edit Content"
This will now open a new UI Builder Tab.
Within the "Page collection" add a new page. "Create new Page"
The name is also used for the "Tab" name itself.
Step 5
Access the form controller data
Within the Data resources you will now see the "Inherited data resource instances" > Form
It's called "controller", for my example I've simply just used a "stylized text" to show the parent sys_id.
Simply just call them by @Data.controller.sysId and @Data.controller.table
On the page collection the "Test values" are the parent values given as an example in the controller.
Click "Save"
Step 6
Add an icon to the tab!
First go back to the tab you left open, or open the sys_ux_extension_point table.
Click your page collection open, now in the bottom you have a related list called "UX App Routes"
There is a column called "Icon", fill in the icon you want for your tab.
These can easily be found by using the "icon" component, and simply doing everything lowercase with "-"
In my case it going to be "ai-sparkle-fill"
AND voilà
Bonus step
Setting up Context props
Usually what I'd like to do is actually setting this up with the @context.props
Goto the Body on your content tree, and select "config" on the configuration pane
Click "Edit"
Click "+ Add" next to properties
Fill in Property name: parentTable (or whatever you like to name it)
Click "Add"
Click once more on "+ Add"
Property name: parentSysId
Click "Add"
Then "Save"
Now within the properties fill in the @Data.controller, for me it didn't auto fill. But you can simply add them.
After this you can now simply call them with @context.props.parentSysId and @context.props.parentTable
Hope this helps anybody that came across this!
Alright managed to find it, not sure why it didn't work before.
Let me also make a short tutorial for it for other people!
Step 1
Make sure you are using the latest "record" default template.
You can tell by going to the Data Sources and check the form controller:
Old ID is called "gform", new ID is called "record"
Old:
New:
If you still have the old one, add a new page variant and select it from template (select the latest one).
*I know both standard record and CSM default record has the new controller
Step 2
Create your page collection
Goto your newly created record page, select the "Tab sidebar"
+ Add a new tab
Select "Add a page collection", and click "Next"
And click "Create collection"
This will send you to the backend specifically "sys_ux_extension_point" table.
Click "New"
Name: Up to you
Component: Tabs
App shell: UXR Base Experience Shell (Default)
Controller: Form
Go ahead and just click "Submit"
*Just leave the page open we will change the icon in a later state.
Step 3
Go back to the UI Builder, "Refresh list"
And go ahead select your create Page collection and press "Continue"
Step 4
Let's add a tab page to actually show up within the tab.
Click on your "Page collection", and select the button "Edit Content"
This will now open a new UI Builder Tab.
Within the "Page collection" add a new page. "Create new Page"
The name is also used for the "Tab" name itself.
Step 5
Access the form controller data
Within the Data resources you will now see the "Inherited data resource instances" > Form
It's called "controller", for my example I've simply just used a "stylized text" to show the parent sys_id.
Simply just call them by @Data.controller.sysId and @Data.controller.table
On the page collection the "Test values" are the parent values given as an example in the controller.
Click "Save"
Step 6
Add an icon to the tab!
First go back to the tab you left open, or open the sys_ux_extension_point table.
Click your page collection open, now in the bottom you have a related list called "UX App Routes"
There is a column called "Icon", fill in the icon you want for your tab.
These can easily be found by using the "icon" component, and simply doing everything lowercase with "-"
In my case it going to be "ai-sparkle-fill"
AND voilà
Bonus step
Setting up Context props
Usually what I'd like to do is actually setting this up with the @context.props
Goto the Body on your content tree, and select "config" on the configuration pane
Click "Edit"
Click "+ Add" next to properties
Fill in Property name: parentTable (or whatever you like to name it)
Click "Add"
Click once more on "+ Add"
Property name: parentSysId
Click "Add"
Then "Save"
Now within the properties fill in the @Data.controller, for me it didn't auto fill. But you can simply add them.
After this you can now simply call them with @context.props.parentSysId and @context.props.parentTable
Hope this helps anybody that came across this!
