Creating Web Applications with BEx Web Application Designer

Use

BEx Web Application Designer enables you to create a BEx Web application (an HTML page with BI contents) quickly and easily.

Procedure

Create a Web template
The Web template is the starting point for creating a Web application. The Web template is an XHTML document that is used to define the structure of a Web application. It contains placeholders for Web items, data providers, and commands. A Web template becomes a Web application when the data is displayed in the Web browser.

During the design process, you change the Web template by embedding placeholders for Web items and data providers. You can keep track of these changes in the XHTML view.

To create a new Web template , you have the following options:
- In the menu in Web Application Designer, choose Web Template → New. A dialog box appears. Choose Blank Web Template.
- Choose Create New Blank Web Template in the upper area to the right in the initial Web Application Designer view.
- In the Web Application Designer tool bar, choose with the quick info text New.
Set the data binding/selection for the data provider
The data for your Web items is provided by data providers that you create in Web Application Designer. You can assign a data provider to multiple Web items. The data provider concept makes it possible to change the data source of a Web item easily. If a particular data provider is assigned to more than one Web item, any changes made affect all the assigned Web items. Due to navigation (changing the drilldown), the Web item always displays the current drilldown data.

Note
A data provider is a dynamic object that returns current data for one or more Web items at runtime. You define the start view of the data provider by selecting a query or a query view. For more information about data providers, see Working with Data Providers .

There are several ways to create data providers:
1. Using the Data Provider pushbutton in the Web Items screen area
  1. Select whether you want to create a data provider of type Filter or type Query View, and drag the corresponding line into the lower data provider section of the Web template screen area. The New Data Providerdialog box appears.
  2. Assign a name to the data provider and make the remaining settings.
    Note
    In the dropdown box beneath the name field, you can also select or change the data provider type.
2. Using the New Data Provider icon in the lower data provider section of the Web Template screen area
  1. Double-click to choose New Data Provider. The New Data Providerdialog box appears.
  2. Proceed as described under a. ii.
3. Using the General tab page in the Properties screen area
  You can only use this option if you have already inserted a Web item into your Web template.
  1. In the header of the Properties screen area, select the Web item that you want to create a data provider for.
  2. On the General tab page, choose New Data Provider. The New Data Providerdialog box appears. Proceed as described under a. ii.
    The data provider is assigned to the selected Web item. You can also create more than one data provider, as described under c. They are listed in the dropdown box under Assigning Data Providers. This enables you to assign a different data provider to the selected Web item.
    
    The Data Provider dialog box appears under data provider <name of assigned data provider>. You can modify or change the settings for the data provider here.
Once you have created a data provider, it is assigned to the inserted Web item. Assigning depends on the order of the data providers in the inner structure of the Web template. See 4.a.
Add a Web item
The Web items in the Web Items screen area are used as templates. By dragging a Web item into your Web template, you create an actual version of the Web item; this is called an object. The Web item has a name and certain other default parameters that you can change as required (see also 4.).

You see the changes in the XHTML view. A Web item tag for the Web item and a data provider tag for the data provider (assuming you have created a data provider) were integrated into the XHTML as placeholders. Change the name of the Web item and assign a data provider to it. In the XHTML view, you can see that your settings have been written to the Web item tag. The layout you choose is also applied in the XHTML.
1. Drag a Web item from one of the Web item groupings Standard, Advanced, or Miscellaneous in the Web Items screen area to the Web template by using drag and drop. The Web item appears in the Web template.
  Tip
  Underneath the selection area for Web items and data provider maintenance, you see the help area, which provides explanations for the Web items and data providers. To display the texts for a Web item, select the Web item by double-clicking with the secondary mouse button. To hide the texts, proceed in the same way. When you hide the display of texts and select a Web item by clicking it, a quick info is displayed for the Web item.
2. If you want to rename the inserted Web item, proceed as follows:
  In the Settings area of the screen, choose the Rename Web Item button to the right of the dropdown box in which the added Web items are listed. Name the Web item by overwriting the predefined text for Name in the Properties screen area next to the dropdown box where the added Web items are listed.
Specifying the properties of the Web item
1. In the Properties screen area, choose the General tab page to make or change the assignment of a data provider for the corresponding Web item. See 2.
2. Choose the Web Item Parameters tab page to set the parameters for the selected Web item.
  Tip
  You can also set the parameters for the Chart Web item using the Edit Chart dialog box. Choose Edit in the context menu for the Chart Web item or Edit Chart in the Internal Display parameter grouping of the Chart Web item. More information: Editing Charts .
Adding additional Web items
To insert additional Web items, repeat steps 3 and 4.
Caution
- When inserting additional Web items using Insert → Web Item, pay attention to where you position the cursor in your Web template. The cursor position determines where the new Web item is inserted. See Designing the Layout of Web Templates . When inserting Web items using drag and drop, the position of the cursor is irrelevant.
- Make sure that you set the data binding and any Web-item-specific parameter settings for the correct Web item. To make settings for a Web item, select the Web item in the layout view. In the header of the Properties window, the system displays the Web item for which you can change the settings. As an alternative to selecting the individual Web items, you can use the dropdown box to toggle between the attributes of individual Web items.
Designing a Web template layout
In Web Application Designer, you create your Web template like you would in an XHTML editor. See Designing the Layout of Web Templates .
Changing the Web template properties
1. To change the default properties of the Web template, select the Web template from the dropdown box in the Properties screen area.
2. Choose the Web Template Parameters tab page, where you can change the parameter settings for the Web template.
More information: Web Template Properties .
Saving and executing the Web template
You execute the Web template in the Web browser (portal). The Web template becomes a Web application, which means the template is saved on the Application Server for ABAP and a URL is generated for this Web application.

At runtime (triggered by calling the URL), the BI tags are replaced by corresponding HTML with the information determined by the Web item and data provider settings. When this is done, the Web template on the Application Server for ABAP is accessed. You therefore need to save your Web template before executing it.
1. To save your Web template, choose Web Template → Save in the Web Application Designer menu bar.
2. Choose Web Template → Execute to view your Web application in the browser (portal).
You have to save the Web template before executing it in the Web browser. Therefore, when you execute the template, you are asked to save it if you have not already done so.
Note
- To assign a Web template to a role, choose Web Template → Publish → In Role. More information: Role Maintenance .
- To copy a Web template's URL to the clipboard, choose Web Template → Publish → Copy URL to Clipboard. You can only do this is the Web template has already been saved.
- To broadcast a Web template, choose Web Template → Publish → BEx Broadcaster. More information: Precalculating and Broadcasting Queries, Query Views, Web Templates and Reports .

Result

Your Web application is started and displayed in the portal, which in turn runs in a Web browser.

Note

If you want to print your Web application, choose Print in the context menu for the executed Web application.

More Information:

Editing Web Templates