1. How do I create an application extension for custom objects in Oracle Visual Builder Studio?
  2. Create a New Application Using the CX Extension Generator

Create a New Application Using the CX Extension Generator

The CX Extension Generator is your shortcut to creating applications that extend the functionality of Oracle Sales in the Redwood user experience. With just a few quick selections, the CX Extension Generator can create an application extension that you can download as a single .zip file and then upload to Oracle Visual Builder Studio. Once you upload the files to Visual Builder Studio, you can continue to build out the extension and then publish it to your users.

You can create both the UIs and smart actions for top-level objects. The CX Extension Generator supports objects with 1:M (one-to-many) and M:M (many-to-many) relationships.

Important: After your upload your files from the CX Extension Generator to Visual Builder Studio (VBS), you can no longer use CX Extension generator to add panels or generate additional smart actions for the custom objects. You must do so manually in VBS. You can, however, come back and use the CX Extension Generator to add additional top level custom objects and create panels and smart actions for them. To add the additional top-level objects, you must export a zip file from VBS and import it back into CX Extension Generator to make your changes.

Prerequisites

  • See Prerequisites for Using the CX Extension Generator.

  • If you're following along with the examples in this chapter, then create these objects and relationships, as well:

    • Objects

      • Payment (top-level object)

      • Shipment (top-level object)

    • Relationships

      • PaymentLead1M (one-to-many relationship)

      • PaymentShipment1M (one-to-many relationship)

      • PaymentContactMM (many-to-many relationship)

Create a New Application

To create an application:

  1. In a sandbox, navigate to Application Composer > CX Extension Generator.

  2. Click Create New Extension.

    This screenshot illustrates the CX Extension Generator.

  3. In the Add objects drawer, select the objects you're using to create the application, and then click Add.

    In this example, select Payment and Shipment.

    This screenshot illustrates how to add objects.

    The selected objects display on the list page.

    This screenshot illustrates the list page of the CX Extension Generator.

  4. Drill down on each object to configure the detail page.

    Note: In the runtime application, the detail page is called the Overview page.

    The page displays automatically-generated panels for attachments and notes. You can optionally delete them.

    This screenshot illustrates where you can configure the panels in the foldout.

    Use the default Configure Panel, which always displays as the first panel, to add new panels.

    Important: When you add a panel for an object with a M:M relationship, the generator creates the panel for the intersection object you created as part of the M:M relationship rather than the object itself.

  5. To add a panel:

    1. On the default Configure Panel, click Add.

      This screenshot illustrates how to add a new panel.

    2. In the Add Panels drawer, select the custom related objects that you want to create the panels for. These can be objects with either a 1:M or M:M relationship.

      For example, select Shipments.

      This screenshot illustrates how to select the objects that you want to create panels for.

    3. Select the Create subview for each panel check box to automatically create a subview along with each panel.

      Note: If you don't select this check box, then you can add subviews later. See the next step.

    4. Click Add.

  6. Optionally, click Configure > Subviews to add and remove subviews for each panel.

    This screenshot illustrates how to configure subviews.

  7. Click Configure > Smart Actions to review the smart actions that the Extension Generator will automatically create for the objects that you selected.

    Tip: You can optionally enhance a smart action's configuration after the Extension Generator creates them. You do this by editing the smart action in Application Composer (Common Setup > Smart Actions). See Overview of Smart Actions.

  8. If your application includes more than one object, then use the Object drop-down field to switch between objects to configure multiple detail pages.

    This screenshot illustrates how to switch between objects.

  9. After you've completed your changes, you can generate and download the .zip file.

Note: At any time, you can delete your configuration choices from the tool by clicking Actions > Start Over.

This screenshot illustrates how to start over.

Generate and Download Files

When you're done with your application extension changes, navigate back to the CX Extension Generator list page and click Generate Files.

This screenshot illustrates the list page of the CX Extension Generator.

The CX Extension Generator generates and downloads a .zip file that includes the pages and layouts for your selected objects.

In addition, the process to create the smart actions is launched.

Note: The process of creating smart actions might take some time to complete. After smart actions are created, you can optionally manage them further in Application Composer, if required. Depending on the objects in your extension, you might need to manually create additional smart actions. See Create Smart Actions.

Import the Files into Visual Builder Studio

The CX Extension Generator generates a .zip file that you can import into Visual Builder Studio.

  1. Use the Navigator to navigate to Visual Builder Studio: Configuration > Visual Builder.

  2. In Visual Builder Studio, create a new workspace if you haven't already.

    Important: The workspace Extension ID must be site_cxsales_Extension. For information on how to change the extension, see How can I change my project's Extension ID?.

    To create a workspace, see Before You Create an Application Extension. Be sure to follow the instructions for updating the extension ID for your workspace.

  3. Click the Menu icon at the top of the page, then click Import.

    This screenshot illustrates how to import the .zip file.

  4. In the Import Resources dialog, add your .zip file and click Import.

  5. Click the Preview button to see your newly created application.

    This is a screenshot of the Preview button in Visual Builder Studio.

  6. The resulting preview link will be:

    https://<servername>/fscmUI/redwood/cx-custom/<object_name>_c

  7. Change the preview link as follows:

    https://<servername>/fscmUI/redwood/cx-custom/application/container/<object_name>_c

    Note: You must add /application/container to the preview link.

  8. You can now continue to make changes to your application extension in Visual Builder Studio.

    For example, you can modify the fields that display in the detail page's header region, or on a subview or create page. The Extension Generator adds some default fields, but you will most likely want to add and remove fields depending on your business needs.

  9. If you need additional smart actions, you can create them in Application Composer. For example, if you keep the Notes panel, then you must create a Create Note smart action.

Modify the Gruntfile.js File

Once your extension is available in Visual Builder Studio, review the Gruntfile.js and make the following change if it doesn't match the below sample. You must make this change before publishing your extension.

  1. On the Source tab, edit the Gruntfile.js.

    This screenshot illustrates where to find the Gruntfile.js to modify.

  2. Replace the existing JavaScript with the following:

    'use strict';
 
/**
 * Visual Builder application build script.
 * For details about the application build and Visual Builder-specific grunt tasks
 * provided by the grunt-vb-build npm dependency, please refer to
 * https://www.oracle.com/pls/topic/lookup?ctx=en/cloud/paas/app-builder-cloud&id=visual-application-build
 */
module.exports = (grunt) => {
    require('load-grunt-tasks')(grunt);
    grunt.initConfig({
        // disable images minification
        "vb-image-minify": {
            options: {
                skip: true,
            },
        },
        // configure requirejs modules bundling
        "vb-require-bundle": {
            options: {
                transpile: false,
                minify: true,
                emptyPaths: [
                    "vx/oracle_cx_fragmentsUI/ui/self/resources/js/utils/contextHelper",
                    "vx/oracle_cx_fragmentsUI/ui/self/resources/js/utils/actionsHelper",
                    "vx/oracle_cx_fragmentsUI/ui/self/resources/js/utils/callbackHelper",
                ],
            },
        },
    });
};

Create the Row Variable

Create a variable for the detail page. For example:

  1. In Visual Builder Studio, click the App UIs tab.

  2. Expand cx-custom > payment_c, then click the payment_c-detail node.

  3. On the payment_c-detail tab, click the Variables subtab.

  4. Click + Variable.

  5. In the Create Variable dialog, make sure the Variable option is selected and, in the ID field, enter row.

  6. In the Type field, select Object.

  7. Click Create.

Add the Row Variable to the Detail Page

  1. On the payment_c-detail tab, click the Page Designer subtab.

  2. Click the Code button.

    This screenshot illustrates the Code button.

  3. Add the following parameter to the cx-detail code.

    <oj-vb-fragment-param name="row" value="{{ $page.variables.row }}"></oj-vb-fragment-param>