Using Web Dynpro Components in Visual Composer

Use

You can extend Visual Composer functionality by embedding components implemented in Web Dynpro. In this manner, you can add to your model UI elements that are not available in Visual Composer, or embed a complex implementation that requires coding in Java, and cannot be modeled in Visual Composer.

You can generate a default implementation of a Web Dynpro component from Visual Composer, and then, after the coded implementation is complete, consume the component back into Visual Composer:

  • Generating a Web Dynpro component

    In your Visual Composer model, you can create a composite view that serves as a placeholder for a Web Dynpro component. The interface defined by the composite view is used to create a default (empty) implementation of a Web Dynpro component, with a matching interface definition. The developer uses the default Web Dynpro component to develop the necessary implementation, while the modeler can continue working on the model. After the coded implementation is ready, it can be integrated back into the model.

  • Consuming a Web Dynpro component

    In Visual Composer, you can consume any Web Dynpro component. You search for the component using the Visual Composer Search task panel, and then add the component to your model either as a new component, or to replace an existing composite view.

Prerequisites

  • There is a Web Dynpro component that you want to use.

    More information: Components

  • Make sure that each element defined in the component interface is implemented in the component controller.

    More information: Creating Context Trees Manually

  • You have added the Web Dynpro component to the public part of the Web Dynpro development component.

  • You have opened the Visual Composer perspective in the SAP NetWeaver Developer Studio.

    More information: Opening Perspectives under Start of the navigation pathWorkbench User Guide Next navigation step Tasks Next navigation step Working with Perspectives.End of the navigation path

  • You have created a model in Visual Composer.

Procedure

Generating a Web Dynpro UI Component

The following instructions describe how to create in your model a placeholder for the Web Dynpro component. These instructions can be performed in Visual Composer either in the browser or in SAP NetWeaver Developer Studio:

  1. Drag a new Composite View from the Compose task panel.

  2. To create the interface for the placeholder of the Web Dynpro component:

    1. Drill down into the composite view

    2. Add connectors as required by the planned interface of the UI component to be generated:

      • Signal In for In Ports

      • Signal Out for Out Ports

      • Public Data Share for In/Out Ports

    3. Save the new model.

  3. In the original model, redefine the ports on the composite view to add the newly defined ports.

The following instructions describe how to generate the Web Dynpro component, and they must be performed in SAP NetWeaver Developer Studio:

  1. Right-click the composite view, and choose Generate WD Component .

  2. Choose an existing Web Dynpro development component to hold the new component.

    A new component is created, in the chosen development component, with the interface as defined by the ports of the composite view placeholder.

  3. You can now open the generated Web Dynpro component and extend the default implementation as necessary.

Consuming a Web Dynpro UI Component

  1. In the task-panel toolbar, choose Search .

  2. From the Search in dropdown list box, choose Web Dynpro Components .

  3. In the Search for field, enter the name of the component or development component that you want to locate or enter a wildcard character ( * ).

  4. From the Type dropdown list, choose the type of search, for example, Component or DC . The available types depend on the component or development component you specified in the previous step.

  5. Choose Search .

  6. From the Results list, locate the Web Dynpro component.

    If you performed a search in a development component, you need to expand the result nodes to select the desired component.

  7. Drag the Web Dynpro component onto the Design board, either as a new component, or to replace an existing placeholder.

    A new Nested View, representing the Web Dynpro component, is created in the model, with an interface that corresponds to the interface of the component.

  8. In the Define Ports dialog box, select the component ports that you want to use and choose OK .

  9. Connect the relevant In or Out ports to other elements, to create the logic and flow of the application.

    More information: Connecting Model Elements

You can view the Web Dynpro component in the Web Dynpro perspective, by choosing the Web Dynpro perspective in SAP NetWeaver Developer Studio and choosing Drill Down from the context menu.

Result

The result is a nested component inside the Visual Composer model, which embeds an existing Web Dynpro component.

More Information