Creating the Coded Component

Create a Coded Component control in Visual Composer.

Prerequisites

You have created a model in Visual Composer using the SAPUI5 runtime.

Note

When you are creating a new model using the SAPUI5 runtime, in the Create New Model dialog box you can select Coded Component as the model type. This creates a standalone Coded Component for later use. In the steps below, you will create the Coded Component by dragging and dropping it from the Compose Model task panel.
You have created an HTML file that contains the custom UI components and the API so that it will be able to communicate with the Visual Composer model you created.
You have packed the HTML file together with all the required resources, such as images, into a file such as an .EAR or .WAR file and deployed it to the server.

From the Compose Model task panel, from the Components area, drag the Coded Component control to the Design board.
In the Create New Model dialog box enter a name.
The Coded Component control appears in the Storyboard.
Right-click the Coded Component control and select Drill Down.
A new tab opens with the name of the Coded Component control.
In the Configure Coded Component task panel on the left, enter the source URL of your application.
From the Compose Model pane, drag the Signal In and Signal Out connectors that you require.
Define data for the Signal In and Signal Out connectors.
On the Model tab, right-click the Coded Component control and select Redefine Ports.
In the Redefine Ports dialog box, select the ports you require and choose the OK button.
Define the source URL of the Coded Component control.

Now the Coded Component control is ready to be connected to other Visual Composer elements.