You can use the Custom Extension Web item to display information related to the current navigational state of a data provider or the results set, or to integrate your own HTML or JavaScript into a Web template. You do this by creating an ABAP class that you then integrate in the Web template using a parameter from the Web item.
You have created an ABAP class that makes it possible to display HTML, JavaScript or PDF. More information: Creating an ABAP Class for the Custom Extension Web Item
...
1. Create a new Web template in BEx Web Application Designer or open an existing one.
2. Drag the Custom Extension Web item from Miscellaneous Web item group to the Web template.
3. Set the Web Item parameters in the Properties screen area in Web Application Designer.
a. Under the Customer Exit (CUSTOMER_EXIT) parameter, select ABAP_CLASS_NAME as the exit type and enter the name of your ABAP class here.
b. Under the Properties List (NAMED_PROPERTS_LIST) parameter enter the name/value pairs (NAME/VALUE ) that you want to pass to ABAP method INITIALIZE (in import parameter I_T_PROPERTIES).
c. Under the Access Data Provider List (DATA_PROVIDER_ACCESS_LIST)parameter, specify the required data provider.
4. Save your entries and/or changes.
5. Execute the Web template in the Web browser.
You have inserted the Custom Extension Web item into a Web template of your choosing. If you call the Web template in the Web browser, your own HTML or JavaScript is inserted.
More information:
Creating Web Applications with BEx Web Application Designer
The following examples of how to use the Custom Extension Web item are available:
Simple Example: Displaying a Simple Text and Parameter
Complex Example: Displaying the XML of Two Data Providers