Enhancing your Visual Composer applications with Web Dynpro coded components

[Former Member]

Visual Composer is a modeling tool for rapid creation of application UIs, that provides a set of UI elements and logic controls for defining the application flow and UI. 

In cases where UI functionality or logic is missing, Visual Composer now supports integration of additional UI technologies into the Visual Composer model, to enrich the application and meet specific modeler requirements.

Now, with Visual Composer for CE, you can integrate your own Web Dynpro components into your Visual Composer models. To better explain you how to use the Web Dynpro component and integrate them into your Visual Composer model, we have created three Web Dynpro sample components that you can download and use.

Note that all the methods of the Web Dynpro components appear as input ports in Visual Composer and all the events appear as output ports. The parameters appear as fields of the ports . You can also extend these components to fit your requirements (the source code is included). You can download the SCA with the three components here and follow this step by step guide that explains how to import the components into the NWDS.

Here's the list of the components and how to use them:

1. Calendar Component

  The Calendar component provides a daily view of your tasks and meetings.
You can add this Web Dynpro component UI to your Visual Composer applications and define its properties and data from Visual Composer. 

This component has only two input ports:

• addEntry (Input): This port is used to add an entry to the calendar sheet. Its fields are startDate, startTime, endDate, endTime, timeZone, isDaylightSavingsTime, subject, and additionalText. You should predefine the timeZone and isDaylightSavingsTime in the data mapping if you want to simplify the usage.
• initCalendar (Input): This port is used to set the date that the calendar sheet and the first visible time shows. Its fields are firstDayVisible and firstTimeVisible.

2. File Upload Component

The File Upload component can be added to Visual Composer applications and enables uploading of files to the server's file system.

This component has two input ports and one output port:

• uploadFile (Input): This port is used to trigger the file upload procedure. This port has no fields.
• createUploadDirectory (Input): This port is used to set the directory path where the uploaded files will be saved. If the directory does not exist, it is created.
  Its field is dirName, which should be set to the path of the directory in which you want the uploaded files to be saved.
• UploadStatus (Output): This port is used to get the status of the upload process. Its field is code, which is set by the component to true or false according to the upload process' success state.
• Note: There is an option to add external virus scanners in order to check files for viruses while uploading. This is done by using the Virus Scan Interface. To connect the
  FileUpload service contained in the Web Dynpro runtime environment to a virus  scanner, you need to activate the predefined virus scan profile webdynpro_FileUpload. This profile is delivered as of SAP NetWeaver '04 SP Stack 13, and must be activated/deactivated by the SAP J2EE Engine administrator. When the profile is activated and all the settings are set properly, virus scan is activated and no additional actions are needed. The Virus Scan Interface cannot be used for the Web Dynpro FileDownload service.  For more details, open SAP Netweaver Help and refer to the section Setting up the Virus Scan Provider.

3. File Download Component

The File Download component provides the option to add links to the Visual Composer application to file which are located on the server's file system.

The File Download component has one input port and one output port:

• setFileForDownloading (Input): This port is used to set the name and path of the file to be downloaded and its download link properties . Its fields are path (to set the path of the file to be downloaded), tooltip (to set the tooltip of the download link), and linkText (to set the download link text).
• DownloadStatus (Output): This port is used to get the status of the download process. Its field is code, which is set by the component to true or false according to the download process' success state.

For understanding how to integrate these components into your Visual Composer models, read this article.

So, what are you waiting for?

Download enhancement package 1 for SAP NetWeaver CE 7.1 today (http://www.sdn.sap.com/irj/scn/downloads?rid=/library/uuid/00846edd-355b-2b10-f38c-df94ec96eb74) - and use this article to run the Web Dynpro components and integrate them into your Visual Composer model.

I look forward to getting your feedback and additional ideas and samples of Web Dynpro components that you created and used in Visual Composer.

Good luck,

Netanel

**Original article of Netanel is available here