Show TOC

Procedure documentationUsing Web Dynpro Components in Visual Composer Locate this document in the navigation structure

 

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

    Note Note

    If you intend to implement a Web Dynpro component, rather than use an existing component, you must have knowledge in Web Dynpro development.

    End of the note.

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

    Note Note

    • Visual Composer supports Context Nodes that are specified as Input Elements as well as nodes that are non-input elements. For Visual Composer to use non-input element nodes, the nodes must be initialized correctly in the embedded component.

    • You must create child nodes under the root Context Node.

    • Attributes under the root Context Node are ignored.

    • Nested Context Nodes are supported.

    • Only Context Attributes that have the built-in dictionary types (string, integer, etc.) are supported.

    End of the note.

    More information: Creating Context Trees Manually

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

    Note Note

    To consume the Web Dynpro component in design time, you must first build the component.

    For the model to run in runtime, the Web Dynpro development component must also be deployed before running the Visual Composer model.

    End of the note.

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

    More information: Opening Perspectives under   Workbench User Guide   Tasks   Working with Perspectives.  

  • 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 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 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

Note Note

The following instructions must be performed in NetWeaver Developer Studio.

End of the note.

  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.

    Note Note

    A method on the component interface appears as an In Port. The method parameters appear as the data of that port.

    An event on the component interface appears as an Out Port. The event parameters appear as the data of that port.

    The context on the component interface appears as an In/Out Port. Note that each independent node (a node directly under the root context) appears as a separate In/Out Port.

    End of the note.

  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

    Note Note

    The Web Dynpro context node cardinalities translate in Visual Composer as follows:

    When the original context nodes cardinality is 0…n or 1…n, the port type is a record set (Table View).

    When the original context nodes cardinality is 0…1 or 1…1, the port type is a record (Form View).

    More information: Defining Data

    End of the note.

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

Caution Caution

The Web Dynpro component must be deployed to the Application Server before the Visual Composer model is run.

End of the caution.

Result

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

More Information