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...

Today the Oracle OPN #PaaSSummerCamp is started. And I have the privilege to join @GeertjanW to kick-off the Application Development and containers track with an OracleJET training.

OracleJET is Oracle's JavaScript Extension Toolkit, that bundles popular JavaScript frameworks in a toolkit (not a framework) that allows you to QuickStart a JavaScript project.

One of the advantages is that you don't have to bother about which Frameworks you should use and how to setup your project. Geertjan cooked up a workshop with a series of labs that introduces you to OracleJET up to the point that you have a working CRUD (Create, Retrieve, Update and Delete enabled) application.

It's all on GitHub and the nice thing is: you can do the labs too, even if you weren't able to come to the Beautiful Lisbon area and attend the #PaaSSummerCamp. You even don't need to go to Oracle OpenWorld to do this workshop, because it all can be found here. You'll learn how to quickly build a OracleJET 5.2.0 based application.

What do you need? Well, not much. A laptop or desktop computer will help of course. The lab will support you in installing:

• npm 5.6.0
• a json-server REST/JSON Mock server
• ojet 5.2.0 command line interface

You can use any IDE or source editor you want, for instance Notepad or Notepad++, IntelliJ or JDeveloper if you like. But I found Netbeans 8.2 very convenient for OJET Development. Note that Oracle is handing over Netbeans to the Apache Foundation, where NetBeans 9.0 just have been released.