1. How do I create an application extension for custom objects?
  2. Modify an Existing Custom Application Using the CX Extension Generator

Modify an Existing Custom Application Using the CX Extension Generator

Once you have a working application extension in Oracle Visual Builder Studio (VBS), you can use the CX Extension Generator to add additional custom objects and custom panels to custom objects. The CX Extension Generator automatically generates their custom subviews and required smart actions. To use the tool, download your workspace as a .zip file from Visual Builder Studio and then import it into the CX Extension Generator.

The process of adding objects and panels is the same as when you're created the application after you import from Visual Builder Studio. Here's an overview of the steps detailed in this topic:

  1. Export the files from Visual Builder Studio.
  2. Import the files into CX Extension Generator.
  3. Add objects, panels, and subviews.
  4. Generate the modified files for export.
  5. Import the files back into Visual Builder Studio.
  6. Add the panels and subviews to the panel and subview layouts.
  7. Preview the updated application.

Prerequisites

In Application Composer:

  • Create the new custom objects and child objects that you want to add to your existing application.

Export Files from Visual Builder Studio

To update an existing custom application, you must first download the application from your Visual Builder Studio workspace.

In Visual Builder Studio, click the Menu icon at the top of the page, then click Export.

This screenshot illustrates how to export the .zip file.

Import the .Zip File into CX Extension Generator

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

  2. Click Import Extension.

    This screenshot illustrates the CX Extension Generator.

  3. In the Import Application drawer, select your .zip file and click Import.

    The existing objects in your application are now visible in the CX Extension Generator.

Add Objects, Panels, and Subviews

Using CX Extension Generator, you can add additional objects, panels, and subviews. And you can generate smart actions for them. To delete existing panels, change their order, and configure them, you must use Visual Builder Studio.

  1. To add objects, click Actions > Add Objects and add any of the objects you want to configure.
  2. Drill down on each object to configure the detail page. In the runtime application, the detail page is called the Overview page.
    Note: The CX Extension Generator displays only the Configure Panel and the panels you add during your configuration. It doesn't display any of the panels you've added previously.
  3. 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 child objects and 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 checkbox 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.
      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. Optionally, click Configure > Subviews to add and remove subviews for each panel.

      This screenshot illustrates how to configure subviews.

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

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

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

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

Import the Files Back 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, navigate to the workspace that contains your existing application.

  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.

    Your workspace is updated with the newly added objects and related artifacts, without disturbing the existing objects in the application.

For Custom Objects You Imported, Add the Panels and Subviews to the Layout

If you imported custom objects, then you must add the imported panels and subviews to the custom Panel Container and Subview Container layouts. This step isn't required for new customer objects you create.

  1. Click the Design button.

    This is a screenshot of the Design button.

  2. Confirm that you're viewing the page in Page Designer.

    This screenshot illustrates how to use the dropdown to view the page.

  3. Remove the comment tags for the dynamic container components that contains the panels and any subviews.

    This screenshot illustrates how to comment out the dynamic container component.

  4. Highlight the <oj-dynamic-container> tags for the panels.

    This screenshot illustrates the component to highlight.

  5. Add the panels you imported to the Panel Container Layout:

    1. On the Structure panel, click the Panel Container Layout node.

      This is a screenshot of the Panel Container Layout node.

    2. On the Properties pane, add the imported panels to the custom layout by clicking Add Panel (the plus icon next to the Sections heading highlighted in the screenshot).This screenshot illustrates how to add a panel to the panel layout copy

  6. Now repeat the same process for the Subview Container Layout.

    Screenshot showing the location of the Subview Container Layout

    1. On the Structure panel, click the Subview Container Layout node.

    2. On the Properties pane, add the subview layouts to the custom subview layout, by clicking Add Panel (the plus icon next to the Sections heading).

Preview

  1. Click the Preview button to see the newly added objects in the application.

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

  2. The resulting preview link will be:

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

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

  4. You can now continue to make changes to your application extension, if needed.