Вы находитесь на странице: 1из 14

Web Dynpro: Upload the file from the PC And display it on Browser

Applies to:
ECC 6.0

Summary
The article aims to help the professionals who have only ABAP knowledge and passion to develop their Web Dynpro knowledge in ABAP. This article provides the knowledge on uploading a file in Web Dynpro and displaying the same on the Browser. Author(s): Company: Created on: Sudeesh Kumar Ravindran Applexus Technologies (P) LTD. 28 March 2012

Author Bio
Sudeesh Kumar Ravindran is working as SAP Technology Consultant with Applexus Technologies (P) LTD.

SAP COMMUNITY NETWORK 2012 SAP AG

scn.sap.com 1

Web Dynpro: Upload the file from the PC And display it on Browser

Table of Contents
Introduction ......................................................................................................................................................... 3 Step 1 Create a Web Dynpro Component ....................................................................................................... 3 Step 2 Create two nodes in the view ............................................................................................................... 4 Node Details .................................................................................................................................................... 4 Design the Layout ............................................................................................................................................... 5 Create File Upload Element ............................................................................................................................ 5 File Upload Element Details ............................................................................................................................ 6
Binding for Data ........................................................................................................................................................... 6 Binding for File Name .................................................................................................................................................. 6 Binding for MIME Type ................................................................................................................................................ 7

Create a TABLE Element to display the uploaded IMAGE file details ............................................................ 7
Binding is done to the Table with the NODE N_FILE_DOWNLOAD ......................................................................... 7 Properties of the Table Element ................................................................................................................................... 8

Create a Button Element ................................................................................................................................. 8


Create an Action for the same using the create button in BUTTON Properties ........................................................... 9

Coding Part for the Action................................................................................................................................... 9 Create Web Dynpro Application ....................................................................................................................... 11 Test the Web Application .................................................................................................................................. 11 Select the Image File and click Submit Button ............................................................................................. 12 Uploaded Image Details ................................................................................................................................ 12 Click the Link ................................................................................................................................................. 12 Related Content ................................................................................................................................................ 13 Copyright........................................................................................................................................................... 14

SAP COMMUNITY NETWORK 2012 SAP AG

scn.sap.com 2

Web Dynpro: Upload the file from the PC And display it on Browser

Introduction
In Web Dynpro ABAP, sap provides an inbuilt File upload feature in the View. Using this File upload feature, we can upload the file into our application and process the data available in the file. This article likes to describe the same using an image file. Uploaded image will be displayed in the browser using the Link provided by the application.

Step 1 Create a Web Dynpro Component


Go to the Transaction Object Navigator

SAP COMMUNITY NETWORK 2012 SAP AG

scn.sap.com 3

Web Dynpro: Upload the file from the PC And display it on Browser

Step 2 Create two nodes in the view

Node Details

FILE_NAME
Type String

FILE_TYPE
Type String

FILE_SIZE Type String FILE_CONTENT Type - Xstring

SAP COMMUNITY NETWORK 2012 SAP AG

scn.sap.com 4

Web Dynpro: Upload the file from the PC And display it on Browser

FILE_NAME
Type String

FILE_TYPE
Type String

FILE_SIZE Type String FILE_CONTENT Type Xstring

Design the Layout


Under the layout tab we need to create two elements to get the IMAGE file and to display the details of the IMAGE file with a link to display the image on the browser.

Create File Upload Element

SAP COMMUNITY NETWORK 2012 SAP AG

scn.sap.com 5

Web Dynpro: Upload the file from the PC And display it on Browser

File Upload Element Details

File Content

File Name

File Type

Binding for Data

Binding for File Name

SAP COMMUNITY NETWORK 2012 SAP AG

scn.sap.com 6

Web Dynpro: Upload the file from the PC And display it on Browser

Binding for MIME Type

Create a TABLE Element to display the uploaded IMAGE file details

Binding is done to the Table with the NODE N_FILE_DOWNLOAD

Data File Download

SAP COMMUNITY NETWORK 2012 SAP AG

scn.sap.com 7

Web Dynpro: Upload the file from the PC And display it on Browser

Properties of the Table Element

Binded Details!!

Create a Button Element

SAP COMMUNITY NETWORK 2012 SAP AG

scn.sap.com 8

Web Dynpro: Upload the file from the PC And display it on Browser

Create an Action for the same using the create button in BUTTON Properties

Create the Action!!

Coding Part for the Action

SAP COMMUNITY NETWORK 2012 SAP AG

scn.sap.com 9

Web Dynpro: Upload the file from the PC And display it on Browser

DATA lo_nd_n_upload TYPE REF TO if_wd_context_node. DATA lo_el_n_upload TYPE REF TO if_wd_context_element. DATA ls_n_upload TYPE wd_this->element_n_upload. DATA lo_nd_n_file_download TYPE REF TO if_wd_context_node. DATA lo_el_n_file_download TYPE REF TO if_wd_context_element. DATA ls_n_file_download TYPE wd_this->element_n_file_download. DATA lt_table TYPE TABLE OF wd_this->element_n_file_download. * navigate from <CONTEXT> to <N_UPLOAD> via lead selection lo_nd_n_upload = wd_context->get_child_node( name = wd_this->wdctx_n_upload ). * get element via lead selection lo_el_n_upload = lo_nd_n_upload->get_element( ). * get all declared attributes lo_el_n_upload->get_static_attributes( IMPORTING static_attributes = ls_n_upload ). ls_n_upload-file_size = XSTRLEN( ls_n_upload-file_content ). * navigate from <CONTEXT> to <N_FILE_DOWNLOAD> via lead selection lo_nd_n_file_download = wd_context->get_child_node( name = wd_this->wdctx_n_file_download ). * @TODO handle not set lead selection IF lo_nd_n_file_download IS INITIAL. ENDIF. * get element via lead selection lo_el_n_file_download = lo_nd_n_file_download->get_element( ). * @TODO handle not set lead selection IF lo_el_n_file_download IS INITIAL. ENDIF. MOVE-CORRESPONDING ls_n_upload TO ls_n_file_download. APPEND ls_n_file_download TO lt_table. CALL METHOD lo_nd_n_file_download->bind_table EXPORTING new_items = lt_table.

SAP COMMUNITY NETWORK 2012 SAP AG

scn.sap.com 10

Web Dynpro: Upload the file from the PC And display it on Browser

Create Web Dynpro Application

Save & Activate the Web Dynpro Component.

Test the Web Application

SAP COMMUNITY NETWORK 2012 SAP AG

scn.sap.com 11

Web Dynpro: Upload the file from the PC And display it on Browser

Select the Image File and click Submit Button

Uploaded Image Details

Link of the Uploaded Image File

Click the Link


Uploaded image will be displayed in a separate browser window.

SAP COMMUNITY NETWORK 2012 SAP AG

scn.sap.com 12

Web Dynpro: Upload the file from the PC And display it on Browser

Related Content
http://help.sap.com/saphelp_nw70/helpdata/en/77/3545415ea6f523e10000000a155106/content.htm http://help.sap.com/saphelp_nw04s/helpdata/en/43/1f6442a3d9e72ce10000000a1550b0/content.htm http://help.sap.com/saphelp_nw04s/helpdata/en/43/1f6442a3d9e72ce10000000a1550b0/frameset.htm

SAP COMMUNITY NETWORK 2012 SAP AG

scn.sap.com 13

Web Dynpro: Upload the file from the PC And display it on Browser

Copyright
Copyright 2012 SAP AG. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation. IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer, z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation. Linux is the registered trademark of Linus Torvalds in the U.S. and other countries. Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries. Oracle is a registered trademark of Oracle Corporation. UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group. Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc. HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C, World Wide Web Consortium, Massachusetts Institute of Technology. Java is a registered trademark of Oracle Corporation. JavaScript is a registered trademark of Oracle Corporation, used under license for technology invented and implemented by Netscape. SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries. Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects S.A. in the United States and in other countries. Business Objects is an SAP company. All other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary. These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.

SAP COMMUNITY NETWORK 2012 SAP AG

scn.sap.com 14