Web Dynpro ABAP Page Builder: Create your own CHIP-Catalog

Applies to:
SAP Enhancement Package 1 for SAP NetWeaver 7.3 (NW 7.31)

Summary
This tutorials aims to explain how to use the Web Dynpro ABAP Page Builder, a new runtime authoring tool, to easily build Web Dynpro pages using CHIPs (Collaborative Human Interface Parts). In this example, we will show you how to create your own CHIP-Catalog. Author: Sandra Thimme

Company: SAP AG Created on:

Author Bio
Sandra Thimme works as a product specialist within Product Management, Technology & Innovation Platform Core. She focusses on UI Technology, in particular Web Dynpro ABAP.

SAP COMMUNITY NETWORK 2011 SAP AG

SDN - sdn.sap.com | BPX - bpx.sap.com | BA - boc.sap.com | UAC - uac.sap.com 1

Table of Contents
Introduction ......................................................................................................................................................... 3 Create an Application with your own Chip-Catalog ............................................................................................ 3 Overview ............................................................................................................................................................. 4 Creating your Provider Page ........................................................................................................................... 4 Defining the page as CHIP-Provider ............................................................................................................... 5 Creating your CHIP-Catalog Configuration ..................................................................................................... 5 Creating your Consumer Page ....................................................................................................................... 6 Assign your CHIP-Catalog to your Page ......................................................................................................... 6 Start your Application ...................................................................................................................................... 6 Delivered Sample Applications ........................................................................................................................... 7 Related Content .................................................................................................................................................. 8 Documentation .................................................................................................................................................... 8 Copyright............................................................................................................................................................. 9

Introduction
The Web Dynpro ABAP Page Builder is a runtime authoring environment to define reusable UI parts called CHIPs. Within a page you can easily layout CHIPs without writing a single line of code. Administrators can define pages for all users of the system or client. The end user can fine-tune the page to meet his needs.

Create an Application with your own Chip-Catalog

The standard CHIP catalog displays all the available CHIPs. In most cases you want a CHIP catalog that contains a selection of CHIPs relevant for you. You can influence the appearance of the catalog, the selection of CHIPs in the catalog and how they are arranged. The changes that you make take effect on both catalog views (side panel and popup).

An application with own CHIP-Catalog consists of a consumer page from where you open your CHIPCatalog, a component configuration of your CHIP-Catalog and a provider page where you insert the CHIPs you want to be made available in a folder of the Catalog.

Overview
The following Step-by-Step procedures will show you: 1. How to create a provider page where you insert all the CHIPs you want to be made available in a folder of the CHIP catalog (Provider Page). 2. How to create a CHIP catalog component configuration (based on component WDR_CHIP_CATALOG), and define this page as a folder of your CHIP catalog. 3. How to define this page as a CHIP Provider. 4. How to assign this CHIP catalog to your consumer page. Creating your Provider Page Procedure

1.

In the ABAP Workbench (transaction SE80), display the WDR_CHIP_PAGE Web Dynpro component. In the context menu of the WDR_CHIP_PAGE application choose Create/Change Configuration.

Figure 1: Creating an Application Configuration

2. 3. 4. 5. 6.

Specify a unique configuration ID, such as MY_CHIP_PROVIDER_APP_CONF. Choose New and specify the required transport package. The application configuration appears. Enter a description text and specify a package to which the configuration is to be assigned. Choose the OK pushbutton. Select the first line of the component (WDR_CHIP_PAGE) and choose the button Assign Configuration Name).

7. Enter the configuration name of the component configuration you want to create. Use the same name as for your application configuration (MY_CHIP_PROVIDER_APP_CONF. 8. Choose the Save pushbutton. 9. You receive the message Specified Configuration XX does not exist. 10. Click on the Configuration Name MY_CHIP_PROVIDER_APP_CONF and choose New.

The component configuration of your provider page will be created. Defining the page as CHIP-Provider

1. Set the CHIP Provider indicator in the Context (see following screenshot). 2. Save.

Figure 1: Set the flag for you page to be a CHIP-Provider-Page

Creating your CHIP-Catalog Configuration To define your own CHIP catalog, you need a component configuration of component WDR_CHIP_CATALOG. You can then assign this to your page. Procedure 1. In SE80 go to Web Dynpro component WDR_CHIP_CATALOG, open the context menu of node Component Configurations, and choose Create. If not already assigned, enter WDR_CHIP_CATALOG as the component name. 2. Enter a Configuration ID, for example: MY_CHIP_CAT and choose New. This takes you to the component configuration for your CHIP catalog. 3. Save. Using CHIP Provider Pages as CHIP Providers 1. In table Configuration Context select row Categorization and enter PAGE_CONFIG as the parameter name. Leave the Parameter Type unchanged as Standard. 2. Go to the Selection row.

Set the following indicator: Display Std CHIPs This indicator must be set for displaying folders based on CHIP provider pages. Display PFCG CHIPs Set the value here to FALSE. You can set the other indicators, if required. 3. Choose New Provider, and enter X-SAP-PAGE-CHIP-CACHE as the Provider Name. 4. Got back to Selection and choose New > parameterMultiVal. As the Parameter Name enter PAGE_CONFIG, and leave the Parameter Type unchanged as Standard. 5. Go to the Values row and enter name of your component configuration of your CHIP provider page as the Parameter Value, for example: MY_CHIP_PROVIDER_APP_CONF 6. Repeat the last step for each further CHIP provider page if you want to add their CHIPs to your CHIP catalog. Final flag will be set by the system.

Figure 2: Enter the component configuration name as parameter value

Creating your Consumer Page Create an application configuration and an component configuration as you did in the first procedure of this tutorial (see Creating your Provider Page and define it as CHIP-Provider) Procedure Assign your CHIP-Catalog to your Page 1. 2. 3. Open the page configuration of the page that you want to assign your CHIP catalog. You are on the Structure tab. Select line CHIP_CATALOG and in column Configuration enter the name of your catalog configuration, for example, MY_CHIP_CAT. After you have saved the configuration, the CHIP catalog is assigned to your page.

Start your Application Start your consumer application and open the CHIP-Catalog.

Delivered Sample Applications

SAP Enhancement Package 1 for SAP NetWeaver 7.3 (NW 7.31) The delivered sample application are the following: WDR_DEMO_CONSUME_PP_SAMPLE Thats the page from where you open your own CHIP-Catalog (Application Configuration of WDR_CHIP_PAGE) WDR_DEMO_CONSUME_PP_SAMPLE Component configuration of WDR_CHIP_PAGE SAP_TEST_PROVIDERPAGE_SAMPLE Page containing the CHIPs appearing as folders of your Catalog (Application Configuration of WDR_CHIP_PAGE SAP_TEST_PROVIDERPAGE_SAMPLE Component Configuration to make your page available as CHIP-Provider-Page (Component Configuration of WDR_CHIP_PAGE) WDR_DEMO_CAT_PROVIDERPAGE CHIP-Catalog-Configuration = Component-Configuration of WDR_CHIP_CATALOG WDR_CHIP_TEXT Text sample for the demo

Related Content
How to Integrate Google Maps into a Web Dynpro ABAP Application Using the Page Builder SAP User Interface Technology Web Dynpro ABAP

Documentation
Creating Mashups with the Page Builder

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.