Today at the #PaaSSummercamp, VBCS is on the agenda. We did a few labs from the VBCS learning path. Nice thing is that you can do it yourself as well.

One of the main goals of the OracleJET labs yesterday was to introduce you to CCA components. Since VBCS is mostly based on OracleJET (For the UI that is) it should not be too hard to add a CCA component from our OracleJET application into our VBCS application. So actually, I wanted to try just that.

If you go to your OracleJET application project, the CCA components are in the ${OJETProjectFolder}\src\js\jet-composites\:
First create a zipfile out of the component, just zip the folder:
(I like TotalCommander for this).
Then in the VBCS Designer tab, browse to the very bottom to find the Custom Heading:
And click the plus icon.
This will bring up a dialog in which you can drag and drop your zip file:
Click import and then the component should appear in the list:
Now it's ready for use.

Since it's a form-component itself, you can't add it to an existing Form-component.

To navigate properly I opened the Structure pane and add the component just before my Form component in the Edit Expense Report page, as a new GridRow:

I want to have it as a new GridRow, just before the current Expense Report Form. Now, after releasing the compnent, it is added to the screen, and it turns out to be visible too:

You now just have to link the fields to variable elements.
So select the component, and the fields will be shown as properties, that can be linked to data-object-elements:

Click on the (x) icon to link the CCA-property to a page-variable-element. Now, since the only variable I have is the ExpenseReport row variable, I use that to populate my fields. They don't make sense functionally, but that is what I have to work with at the moment.
I link first-name to ExpenseReport.name:

Then hire-salary to amount and hire-date to startDate. And that's it. The fields are populated directly in design and live mode. But running the page will show:
As easy as that...