upload the file from the pc
TRANSCRIPT
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 1
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): Sudeesh Kumar Ravindran
Company: Applexus Technologies (P) LTD.
Created on: 28 March 2012
Author Bio
Sudeesh Kumar Ravindran is working as SAP Technology Consultant with Applexus Technologies (P) LTD.
Web Dynpro: Upload the file from the PC And display it on Browser
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 2
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
Web Dynpro: Upload the file from the PC And display it on Browser
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 3
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
Web Dynpro: Upload the file from the PC And display it on Browser
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 4
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
Web Dynpro: Upload the file from the PC And display it on Browser
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 5
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
Web Dynpro: Upload the file from the PC And display it on Browser
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 6
File Upload Element Details
Binding for Data
Binding for File Name
File Content
File Name
File Type
Web Dynpro: Upload the file from the PC And display it on Browser
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 7
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”
File Download Data
Web Dynpro: Upload the file from the PC And display it on Browser
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 8
Properties of the Table Element
Create a Button Element
Binded Details!!
Web Dynpro: Upload the file from the PC And display it on Browser
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 9
Create an Action for the same using the create button in BUTTON Properties
Coding Part for the Action
Create the Action!!
Web Dynpro: Upload the file from the PC And display it on Browser
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 10
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.
Web Dynpro: Upload the file from the PC And display it on Browser
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 11
Create Web Dynpro Application
Save & Activate the Web Dynpro Component.
Test the Web Application
Web Dynpro: Upload the file from the PC And display it on Browser
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 12
Select the Image File and click Submit Button
Uploaded Image Details
Click the Link
Uploaded image will be displayed in a separate browser window.
Link of the Uploaded Image File
Web Dynpro: Upload the file from the PC And display it on Browser
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 13
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
Web Dynpro: Upload the file from the PC And display it on Browser
SAP COMMUNITY NETWORK scn.sap.com
© 2012 SAP AG 14
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.