Skip to Content

Upload download UI components are used most commonly in making UI.There are lot of blogs and articles based on them.Here i am demonstrating to use these UI elements in a quick and simple steps.

The file is first uploaded in the server where the application is deployed it is simultaneously visible in the table below.

On clicking on filename ,the file is downloaded and can be viewed.

Step 1

Make a new Web Dynpro Component and add a component and view in it.

 

Step 2:

Add the following nodes and Attributes in the context of the view .The Resource attribute in both the nodes is of dictionary type “com.sap.ide.webdynpro.Uidefinitions.resource”. All the other attributes are of Type String.

 

Step 3:

Add 2 UI Elements FileUpload and a button in the view as shown.

 

Step 4:

Add an action Upload in the view and add it in event of the button.

Step 5:

Bind the resource property of uielement File upload to

context->node Document upload->Attribute Resource.

 Step 6:

In the View Add a Table by using applies Template and taking Documentdownload node alternatively you can add table and add three columns in it.

The View should now contain these UI elements

Resource->file Download

URL-> Text View

Filename ->Text View

Step 7:

Bind the resource property of file Download to

Context->node DocumentDownload->Attribute->resource and

text property to node DocumentDownload ->Attribute->Filename

   

Step 8:

Open the implementation of the view and add the below Lines of code in “onActionUpload”

 

CODE FOR UPLOAD AND DONLOAD BOTH SHOULD BE WRITTEN IN “onActionUpload” Action

public void onActionUpload(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )
  {
    //@@begin onActionUpload(ServerEvent)
      //upload code
      try {
            File file = new File(“.\\TEST_DOCs\\”);
             if (!file.exists())
             {
              file.mkdirs();
             }

            String OriginalFileName = wdContext.currentDocumentsUploadElement().getResource().getResourceName();
            int length = OriginalFileName.lastIndexOf(“.”);
            String fileName = OriginalFileName.substring(0, length – 1);
            fileName += new Date().getTime();
            fileName += OriginalFileName.substring(length, OriginalFileName.length());

           
                FileOutputStream out = new FileOutputStream(“.\\TEST_DOCs\\”+ fileName);
                InputStream input = wdContext.currentDocumentsUploadElement().getResource().read(true);
                int c = -1;
                while ((c = input.read()) != -1)
                {
                    out.write(c);
                }
                out.close();
                input.close();
                wdComponentAPI.getMessageManager().reportSuccess(“Document Uploaded sucessfully”);
                wdContext.nodeDocumentsUpload().invalidate();
             
            //download code
           
            File file1 = new File(“.\\TEST_DOCs\\” + fileName);
            if (file1.exists())
            {
                String resourcePath = file1.getAbsolutePath();
                IDocumentsDownloadElement element = wdContext.createAndAddDocumentsDownloadElement();
                element.setFilename(OriginalFileName);
                element.setUrl(resourcePath);
                IWDResource resource = null;
                resource = WDResourceFactory.createResource(new FileInputStream(new File(resourcePath)),
                            OriginalFileName, WDWebResourceType.UNKNOWN, true);
                    element.setResource(resource);

            }
        } catch (Exception e) {
            //TODO Auto-generated catch block
            wdComponentAPI.getMessageManager().reportException(“FileNotFoundException”);
        }
     
    //@@end
  }

Step 9:

Rebuilt, build, deploy the project and run

The following result will be seen

When you click browse a window will open, select a file and click ok the file comes in the table

In the table when we click on file it gets open (First it will be downloaded)

 

Regards

Enjoy Web Dynpro

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Pradyut Sarma
    Hi,

    Pretty nice write-up. But having said that, I would like to add here that this looks more like a how-to-guide/step-by-step guide to achieve a particular use case. I would normally search for something like this within the Wiki/Articles area rather than within the blogs area.
    You could check out this link “Blog This” or “Wiki It” for more info on the same.

    Nonetheless, very useful article indeed 😉

    Thanks and Best Regards,
    Pradyut.

    (0) 

Leave a Reply