NET312 UI Development with Web Dynpro for ABAP. COURSE OUTLINE Course Version: 10 Course Duration: 4 Day(s)
SAP Copyrights and Trademarks 2015 SAP SE. 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 SE. The information contained herein may be changed without prior notice. Some software products marketed by SAP SE 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 Sun Microsystems, Inc. JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape. SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer, StreamWork, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE 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 Software Ltd. Business Objects is an SAP company. Sybase and Adaptive Server, ianywhere, Sybase 365, SQL Anywhere, and other Sybase products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Sybase, Inc. Sybase 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 SE 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. Copyright. All rights reserved. iii
iv Copyright. All rights reserved.
Typographic Conventions American English is the standard used in this handbook. The following typographic conventions are also used. This information is displayed in the instructor s presentation Demonstration Procedure Warning or Caution Hint Related or Additional Information Facilitated Discussion User interface control Example text Window title Example text Copyright. All rights reserved. v
vi Copyright. All rights reserved.
Contents ix Course Overview 1 Unit 1: Introduction to UI Creation with WebDynpro for ABAP 1 Lesson: Creating a Simple Web Dynpro Application 3 Unit 2: Layout Formation 3 Lesson: Using UI Elements to Define the Navigation Options 3 Lesson: Using UI Elements to Display Content 3 Lesson: Using UI Elements to Group Content 3 Lesson: Displaying Content in Collapsible Panels 5 Unit 3: Complex UI Elements 5 Lesson: Displaying Data Using the Table UI Element 5 Lesson: Implementing Additional Table Functionality 5 Lesson: Sorting and Filtering Data 5 Lesson: Implementing TablePopins 5 Lesson: Adding Color to Cells 5 Lesson: Using Editable and Hierarchical Tables 6 Lesson: Displaying Totals and Subtotals 6 Lesson: Using the Web Dynpro Client Table (CTable) 6 Lesson: Using the Tree UI Element 6 Lesson: Using Additional Complex UI Elements 7 Unit 4: Graphics Definition 7 Lesson: Using the BusinessGraphics UI Element 7 Lesson: Defining Presentation Graphics Using Additional UI Elements 9 Unit 5: Advanced UI Functionality in Web Dynpro for ABAP 9 Lesson: Providing UI Element-Specific Functionality 9 Lesson: Incorporating Drag and Drop Operations in Web Dynpro for ABAP 9 Lesson: Building Pages with the Web Dynpro Page Builder 9 Lesson: Using Panels in Web Dynpro Applications 11 Unit 6: Integration Technologies 11 Lesson: Embedding Interactive Forms and Adobe PDF Files 11 Lesson: Embedding Microsoft Office Files 11 Lesson: Integrating HTML Elements Copyright. All rights reserved. vii
viii Copyright. All rights reserved.
Course Overview TARGET AUDIENCE This course is intended for the following audiences: Developer Development Consultant Copyright. All rights reserved. ix
x Copyright. All rights reserved.
UNIT 1 Introduction to UI Creation with WebDynpro for ABAP Lesson 1: Creating a Simple Web Dynpro Application Define the UI element hierarchy Set UI element properties Bind UI element properties to context attributes Handle UI element events Change UI element properties dynamically Delete existing UI elements Add new UI elements Copyright. All rights reserved. 1
Unit 1: Introduction to UI Creation with WebDynpro for ABAP 2 Copyright. All rights reserved.
UNIT 2 Layout Formation Lesson 1: Using UI Elements to Define the Navigation Options Create a navigation area using the NavigationList UI element Create a two-level navigation hierarchy with the HorizontalContextualPanel UI element Embed navigation elements using the ContextualPanel UI element Lesson 2: Using UI Elements to Display Content Display the content of a context node using the MultiPane UI element Display the content of a context node using the RowRepeater UI element Split the content of a context node across multiple tab pages using the TabStrip UI element Lesson 3: Using UI Elements to Group Content Group content using the Tray UI element Group content using the Panel UI element Lesson 4: Displaying Content in Collapsible Panels Display content in collapsible panels using the Accordion UI element Copyright. All rights reserved. 3
Unit 2: Layout Formation 4 Copyright. All rights reserved.
UNIT 3 Complex UI Elements Lesson 1: Displaying Data Using the Table UI Element Describe the basics of using the Table UI element Select table rows and columns Lesson 2: Implementing Additional Table Functionality Implement additional table functionality Lesson 3: Sorting and Filtering Data Sort and filter data Lesson 4: Implementing TablePopins Implement TablePopins Lesson 5: Adding Color to Cells Add color to cells Lesson 6: Using Editable and Hierarchical Tables Copyright. All rights reserved. 5
Unit 3: Complex UI Elements Use editable and hierarchical tables Lesson 7: Displaying Totals and Subtotals Display totals and subtotals in the Table UI element Lesson 8: Using the Web Dynpro Client Table (CTable) Use the Web Dynpro Client Table (CTable) Lesson 9: Using the Tree UI Element Display hierarchical content with a Tree UI element Lesson 10: Using Additional Complex UI Elements Add calendar functionality with the DateNavigator UI element Add step by step workflows with the Roadmap UI element Differentiate the phases of a process with the PhaseIndicator UI element Implement collect and move options for the end user using the Shuttle UI element 6 Copyright. All rights reserved.
UNIT 4 Graphics Definition Lesson 1: Using the BusinessGraphics UI Element Define the context nodes and context attributes to store the data displayed by the BusinessGraphics UI element Lesson 2: Defining Presentation Graphics Using Additional UI Elements Display maps with the GeoMap UI element Illustrate program progress with the ProgressIndicator UI element Display data graphically with the ValueComparison UI element Display threshold values graphically with the ThresholdSlider UI element Copyright. All rights reserved. 7
Unit 4: Graphics Definition 8 Copyright. All rights reserved.
UNIT 5 Advanced UI Functionality in Web Dynpro for ABAP Lesson 1: Providing UI Element-Specific Functionality Define context menus statically and dynamically Assign context menus to UI elements at runtime Change the items of statically defined context menus at runtime Lesson 2: Incorporating Drag and Drop Operations in Web Dynpro for ABAP Define UI elements to be drag sources Define UI elements to be drop targets Define the drag source information that is available to the drop target Lesson 3: Building Pages with the Web Dynpro Page Builder Define Collaborative Human Interface Parts (CHIPs) based on IFrames and Web Dynpro components Define Web Dynpro pages with configuration or customizing Lesson 4: Using Panels in Web Dynpro Applications Define Web Dynpro panels via configuration or customizing Assign a panel to an existing Web Dynpro application via customizing Copyright. All rights reserved. 9
Unit 5: Advanced UI Functionality in Web Dynpro for ABAP 10 Copyright. All rights reserved.
UNIT 6 Integration Technologies Lesson 1: Embedding Interactive Forms and Adobe PDF Files Embed forms and static PDF documents Lesson 2: Embedding Microsoft Office Files Embed Microsoft Office files Lesson 3: Integrating HTML Elements Integrate HTML elements Copyright. All rights reserved. 11