In NetWeaver 7.0 there is no straight way available for uploading a file in Visual Composer. In this blog I'll show how to overcome this limitation by using an HTML component with URL pointing to a JspDynPage using an HTMLB file upload tag, and generating an EPCF portal event to communicate the information about the uploaded file back to the iView controlled by VC.
Some information for this blog was taken from these useful links.
- How To... Integrate Visual Composer Applications and BEx Web Templates
- HTMLB, File Upload
- EPCF, Event API
Here how the proof-of-concept iView may look like. On the left we have an HTML component with the URL to the JspDynPage. After the file is uploaded to some temporary folder on the AS. The information is sent via an EPCF client event to a simple table in the iView.
To implement this solution start by creating a simple PAR project with a JspDynPage. Here is the portalapp.xml file for this project. Notice the appropriate component-profile entry needed for the setup of the HTMLB tag library in your JSPs.
<application>
<application-config>
<property name="PrivateSharingReference" value="com.sap.portal.htmlb"/>
</application-config>
<components>
<component name="TmpFileUploadJspDynPage">
<component-config>
<property name="ClassName" value="ch.unil.vc.upload.TmpFileUploadJspDynPage"/>
</component-config>
<component-profile>
<!--
Add this component profile property to be able to use htmlb taglib in the JSP
-->
<property name="tagLib" value="/SERVICE/htmlb/taglib/htmlb.tld"/>
</component-profile>
</component>
</components>
<services/>
</application>Here is the code for the file_upload.jsp.
<%@ taglib uri="tagLib" prefix="hbj" %>
<hbj:content id="uploadContent" >
<hbj:page title="File Upload">
<hbj:form id="uploadForm" encodingType="multipart/form-data">
<hbj:fileUpload id="fileUpload" maxLength="100000" size="30"/>
<br/>
<hbj:button id="submitButton" text="Upload" onClick="UploadFile" design="STANDARD"/>
</hbj:form>
</hbj:page>
</hbj:content>And here is the corresponding Java class, TmpFileUploadJspDynPage.java.
public class TmpFileUploadJspDynPage extends PageProcessorComponent {
private static final Location logger =
Location.getLocation(TmpFileUploadJspDynPage.class);
public DynPage getPage() {
return new TmpFileUploadJspDynPageDynPage();
}
public static class TmpFileUploadJspDynPageDynPage extends JSPDynPage {
public void doInitialization() {
}
public void doProcessAfterInput() throws PageException {
}
public void doProcessBeforeOutput() throws PageException {
this.setJspName("file_upload.jsp");
}
public void onUploadFile(Event event) {
logger.debugT("Processing UploadFile event");
IPortalComponentRequest request =
(IPortalComponentRequest) this.getRequest();
IPortalComponentResponse response =
(IPortalComponentResponse) this.getResponse();
//get the file upload HTMLB component
FileUpload fileUpload =
(FileUpload) this.getPageContext().getComponentForId("fileUpload");
logger.debugT("Got fileUpload component " + fileUpload);
//check if there were a file uploaded
if (fileUpload.getFile() != null) {
String fileName = fileUpload.getFile().getFileName();
String fileMimeType = fileUpload.getFile().getContentType();
File tempFile = null;
try {
tempFile = File.createTempFile("_upload_htmlb_", ".tmp");
fileUpload.getFile().getFile().renameTo(tempFile);
} catch (IOException e) {
logger.errorT(e.getMessage());
}
String filePath = tempFile.getAbsolutePath();
logger.debugT("File name: " + fileName);
logger.debugT("File mimetype: " + fileMimeType);
logger.debugT("Temporary file location: " + filePath);
//create a EPCF event with file info
String jsCall =
"<script language='JavaScript'>"
+ "alert('Raising {urn:com.sap.vc:epcm}evt1 event: fileName "
+ fileName
+ ", fileMimeType "
+ fileMimeType
+ ", filePath "
+ filePath
+ "');"
+ "EPCM.raiseEvent('urn:com.sap.vc:epcm',"
+ "'evt1',"
+ "'<Params version=\"2\">"
+ "<Row fileName=\""
+ fileName
+ "\" fileMimeType=\""
+ fileMimeType
+ "\" filePath=\""
+ filePath
+ "\"/>"
+ "</Params>',"
+ "'/irj/servlet/prt/portal/prteventname/HtmlbEvent/prtroot/TmpFileUploadPar.TmpFileUploadJspDynPage');"
+ "</script>";
logger.debugT("JavaScript call: " + jsCall);
response.write(jsCall);
}
}
}
}We recuperate the uploaded file information from the fileUpload HTMLB component and use EPCM.raiseEvent() JavaScript call to fire a portal event with a specific namespace (urn:com.sap.vc:epcm), name (evt1, arbitrary but needs to be the same as configured in iView in VC, see below), and the event's parameters in XML. Below is a template for EPCM event with parameters param1 and param2 and corresponding values val1 and val2. You can have more than one Row element.
<Params version="2">
<Row param1="val1" param2="val2"/>
</Params>Below is the model for the proof-of-concept iView in the VC. The iView registers an even handler for the portal {event com.sap.vc:epcm}evt1 raised through the EPCF client API on the JspDynPage and transfers the event's parameters' values in to a table component.
- SAP Managed Tags:
