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