Oracle Visual Builder

Oracle Visual Builder is a hosted environment for your application development infrastructure. It provides an open-source standards-based solution to develop, collaborate on, and deploy applications within Oracle Cloud.

Initial Steps

Before you use Oracle Visual Builder, it must be enabled and configured. Your service administrator enables the feature for your service, including adding the host name for where the apps are created and stored. See Integrate with Oracle Visual Builder in Integrating and Extending Oracle Content Management. The integration between the two services requires SSO, so both services must be in the same identity domain.

In Oracle Visual Builder, the following must be done before this feature can be used with Oracle Content Management:

• Cross-Origin Resource Sharing (CORS) must be enabled on the Oracle Visual Cloud Service site.

• Apps must be created, made available for embedding, and must be configured for use with Oracle Content Management.

• Web applications must be created and made available for embedding in an iframe. The Sites SDK must be imported and referenced in the web applications. A page URL parameter called “id” must be added to the web applications.

Create Oracle Visual Builder Components

After the integration is enabled and apps and web applications are created and ready to use, you must create a new component for each app that you want to add to your site pages.

1. In Oracle Visual Builder, get the URL for the published web application. Click the live project that includes the web application, then click the web application. Copy the URL from the address bar.

2. In Oracle Content Management, click Developer and then click View All Components. Registered remote components and layouts are displayed.

3. Click Create and choose Create Visual Builder Component.

4. Enter a name for the component. You can’t use a name used by another component or layout.

   You can use letters, numbers, underscores (_), and hyphens (-). If you enter a space, it’s automatically replaced with an underscore.

   Don’t use the following names for site templates, themes, components, sites, or site pages: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice , _sitescloud, _sitesclouddelivery, _themes, _themesdelivery. Although you can use the following names for site pages, don’t use them for site templates, themes, components, or sites: documents, sites.

5. Optionally, enter a description for the component.

6. Paste the URL to the live web application or live classic application.

7. Click Create. After the component is created, the name appears in the list of components. You can explore the folders and files that make up the component or layout by clicking the component name in the list .

8. To select an icon other than the default icon assigned to the component:

   1. Select the component from the list.

   2. Click Properties

   3. Click the Component Logo tab.

   4. Click a logo from the gallery of logos and then click Done.

Adding the Component to a Site Page

Now you can add the component for the app to one of your site pages. You can add the component to either a public or a secure page.

1. Navigate to the page you want to edit and make sure that is set to Edit.

2. Add the component to the page. The component appears in the Custom section.

3. To edit the component and its appearance, click its menu icon , and choose Settings. You can adjust the label for the component, its appearance, size, and alignment. Use the Style tab to use the default style associated with the component from the Oracle Visual Builder host. For more advanced styling, edit or add style classes in the design.css files in the theme designs folder of current site template. The style class prefix is scs-component.

You can view the component in preview mode while editing your site. After your site is published, your site visitors see the Oracle Visual Builder app chosen for use with that component, running in an iFrame on the page.