If you are a Visual Builder developer you may have encountered the sample components that we provide as extras in Visual Builder which you can access via the Get Components button displayed at the bottom of the component palette or via the Component Browser tab of the navigator:

Once installed, you can use these from within your Visual Builder applications, however, what about viewing the source code for these? We they are samples after all and that’s what they are the for, so let’s take a quick look at how you can see the complete source for the components. 

To do this you will need to carry out these steps: 

  1. First you need to have the Oracle JET command line tooling installed. If you don’t have it already you can install it with the command npm install -g @oracle/ojet-cli (if you are on a Linux or OS/X machine you’ll need to sudo that command). For more information about the JET command line tooling head over to oraclejet.org
  2. Next from a scratch directory create a new JET project using the ojet tool. For example: ojet create oj-sample-source --template=basic
  3. Change to the folder you have just created for the project: cd oj-sample-source
  4. Now we need to do the one-off task of configuring the Component Exchange that you will be getting the components from. You can get this information from the “Manage Your Component Exchange” chapter of the Visual Builder Administration guide.
    Run this command:
    ojet configure --exchange-url=https://devinstance4wd8us2-wd4devcs8us2.uscom-central-1.oraclecloud.com/profile/devinstance4wd8us2-wd4devcs8us2/s/devinstance4wd8us2-wd4devcs8us2_compcatalog_3461/compcatalog/0.2.0
  5. With that done you can pull down the source code for the oj-sample components using the following command:
    ojet add pack oj-sample --username=comp.catalog
    When prompted for a password use the one from the Administration guide

And that’s it.  If you now look in the /jet_components subfolder that would have been created, you can find the source for the samples.  If you want to make changes or update the components for your own use, move the whole oj-sample folder from under jet_components into the src/js/jet-composites folder (you will need to create this empty folder first).