Reusing Components 

Use

Visual Composer enables you to create components that can be reused within different models. When reusing components, you create a reference to the reusable component, rather than creating a copy of it. This means that any changes made to a component can affect all models that reuse (reference) that component.

Be aware that other modelers can modify components that you use, and you may discover that the inputs and outputs that you require are not available.

You use the Search task panel to locate existing components to use them in your model. When you reuse a component, you can either display it in the same window as the parent component (known as a nested component) or open it in a new window (using the Navigate connector).

To reuse a component in your model, the reused component must reside in any development component in the shared repository or source control system, or reside in the same development component in the local repository as the current model.

Prerequisites

The model in which you want to reuse a component is open in Storyboard and is editable (either opened from the local repository or checked out by you from the shared repository).

Procedure

...

       1.      Click the Search button in the task-panel toolbar.

       2.      In the Search in dropdown list, choose Visual Composer Models.

       3.      In the Search for field, enter the name of the component that you want to reuse. You can use an asterisk (*) in the string as a wildcard to search for a partial match.

       4.      In the Type dropdown list, choose DC to search for a specific named development component or choose Model to find a specific named component.

       5.      Click Search. All components or development components matching the search are displayed. If you chose DC in the Type dropdown list, you can expand the development components that match the search criteria to see the models located in each development component.

       6.      From the Results list, locate the component that you require and drag it onto the Design board.

       7.      From the context menu that is displayed when you drop the component onto the Design board, choose how you want to reuse the component:

¡        Nested View: Inserts a reference to the selected component from the current component, as a nested view. A nested view is displayed at runtime within the current component, in the same window. You can double-click a nested view icon to open it in a new model tab, so that you can define its input and output parameters or modify its contents if required.

¡        Navigate: Inserts a reference to the selected component from within the current component, using a Navigate connector. A Navigate connector displays the reused component in the main window at runtime (replacing the previous contents of the window). A component that is reused using the Navigate option cannot output parameters to other components.

       8.      Define connections to or from the component:

○       If you chose Nested View:

                                                  i.       Open the nested view component (by double-clicking its icon on the Design board).

                                                ii.       Add Signal In and Signal Out connectors so that you can transfer input and output parameters to the nested view. For more information, see Connectors.

                                               iii.       After you define the connectors, right-click the nested view icon in the parent component, and choose Redefine Ports from the context menu. In the displayed dialog box, select the newly added ports and click OK to display the ports on the nested component icon.

                                               iv.       Connect the required input and output elements to the nested view icon ports. For more information, see Connecting Model Elements.

○       If you chose Navigate, connect the required input elements to the Navigate icon port. For more information, see Connecting Model Elements.

       9.      To reuse additional components, repeat this procedure for each component.

To remove a reference to a component, right-click the nested view icon or navigate icon and from the context menu choose Delete. Note that only the reference is deleted; the actual component is not deleted.

Result

The selected components are added to the Design board according to your selections and you are now ready to model the component logic and flow, by defining the view elements and their connections. For more information, see Composing the Composite View.