Setting up the initial web template for use in the WAD SAP BI

We can specify the structure of a Web application with a Web template. Using the WAD rather than something like a Notepad approach makes development of the Web items and Web application much easier. If you have been using SAP since the BI 1.2 or 2.1 version (in those days it was known as the BW1.2 or 2.1 version), you probably remember having to use either another third-party Web tool or Notepad to set up the formatting of the Web page (back then it was a Web page rather than a Web application), then reinsert the finished Web page into BI for use on the Web. This was extremely time consuming and labor intensive in the BI environment because for every change that you made, you had to export and then import your changed objects. Now, in the BI 7.0 version, you can insert placeholders for Web items, data providers, and commands into an XHTML document directly within BI. This approach has been available since version 3.0, but now many more standard objects are available to use during the configuration process, and we have very little dependency upon any third-party components.

The XHTML document with the BI-specific placeholders is called a Web template and can be edited in the WAD. The HTML page that is displayed in the Internet browser is called a Web application. Depending on which Web items you have inserted into the Web template and the parameter settings within the Web application, you can have a Web application that contains one or more tables, charts, maps, dropdown boxes, and so on.

A Web template is the mainstay of a Web application and contains placeholders for Web items, data providers, commands, and basically any other Web objects that require links to sources of data. For the Web application, the placeholder is filled during run time, and Web items, data providers, and commands are generated. In the Web template, you specify from which data provider and in what way (Web items) the BI data is displayed, which additional operations are possible (commands), and numerous other parameters that you will read about in the “Web Items” section later in the chapter. To process this activity, a request is sent from the Web application to the application server for ABAP, this in turn generates a Template object from which the structure of the requested XHTML page is derived. So, you create a Web template on the application server for ABAP. Once this is executed, the Web applications are started and displayed in the portal, which in turn runs in a Web browser sourced from the Java server.

1.Web Template Properties
The Web template properties are the parameters that control activities for the Web application for the entire object. So, these settings are critical to the overall mechanics of the Web application; they aren’t focused on a specific Web item, but rather are “global” settings for the Web template. You can specify the properties for your Web application in each Web template. This is where you start to get into all the parameter settings assigned to each of the Web applications. You’ll discover in this chapter just how many different parameters you have to work with. You’ll also see that if one of these parameters is not set correctly, functions available from the Web application will not work correctly. A good example of this is the functionality of the variables screen, which is part of the Web application parameters (see below table).If your data provider has variables, you will want them to work a certain way, and this is where you can set the parameters to control the format and functionality. Another component that you can control from this properties panel at right is whether or not messages are displayed in the Web application. The properties are set, as with all Web items, using the associated parameters.

Web Template Properties

The Web template properties are defined in Table presented in the order in which they appear on the Web Template Parameters tab, shown in this illustration at right. The comment in upper case shows what, in most cases, will appear in the description text if you click on the parameter in the properties box.

Parameters Available for the Web Template Properties

Parameters Available for the Web Template PropertiesParameters Available for the Web Template PropertiesParameters Available for the Web Template Properties

From a technical standpoint, Web template parameters that we talked about in above Tables are Web items. The Web item is not included in the list of Web items in the WAD, but is available in the Properties screen area in the WAD. From the dropdown box in the header of the Properties screen area, choose the Web template for which you want to make the settings.

2.Web Template Formatting Components
Before you start using the Web items, there are additional activities that you can perform to help with the formatting process within the Web template. One approach that you can use is to arrange Web items on the page. You can perform numerous activities, such as:

  • Change the size of the placeholders. You can see what effect resizing a Web item in a Web application has by looking at the values, shown in the XHTML view by the parameters Height and Width for the corresponding Web item.
  • Align the Web items horizontally by setting up the Web template in WAD, as follows:
    • Choose Format | Align Left to left-justify the Web item.
    • Choose Format | Align Right to right-justify the Web item.
    • Choose Format | Align Center to center the Web item.
  • Change the position of a Web item in the Web template by dragging and dropping it into the required position. Place several Web items next to each other. To do so, you have to take the width of the Web template into account. If the Web template is wide enough for a second Web item, this is positioned to the right of the first Web item because the Web browser breaks up pages according to standard HTML.

One of my favorite approaches to formatting before we start to use the Web items is to create an HTML table and arrange the Web items using this component. You can use an HTML table to arrange Web items optimally next to and below one another. You can apply this grid as required. To accomplish this in the WAD:

  1. Choose Table | Insert Table.
  2. Set up the table according to your settings and requirements.
  3. Click OK. The table is inserted into the Web template.
  4. You can drag different Web items into the individual table cells, depending on whether you want to arrange your Web items horizontally or vertically.

You would also adjust the number of rows and columns that you need to use, as shown in the next illustration.

Edit HTML Element

Click OK, and you will see the table format within the Web template, as the following illustration shows.

Edit HTML Element

Don’t be concerned with the sizing of the table cells. They will expand as needed to accommodate the different Web items.

Along with the ability to adjust and rearrange the Web items, you also have options to enhance the Web templates with simple text that you can insert. This is one of the great enhancements about the WAD from the 3.5 version onward. You can type in information and/or titles, and the WAD will take that information and insert it into the appropriate coding with background color, font changes, and other tweaks to the lettering, and present this in your Web report. Just position the cursor in the Web template where you want to enter the text, and type in the information. Initially, you will need to work with this feature to get comfortable with the outcome, but it’s well worth the time and effort. If you use this approach, you don’t really have to worry about the use of any Web items for this purpose. This does not mean that the Web items for Text can be replaced with basic text that you type in, but it does offer you a quick and easy approach to entering in some static text for your report headings. The options to adjust the look and feel of the information might include changing Font, Font Size, Bold, Italic, Align Left, Right, and Center, Text Color, an Background Color of the text.

In addition to inserting and arranging Web items and texts, you can insert images, such as corporate logos, into your Web templates. These images are stored in the MIME Repository of the BI server. The system supports GIF, JPG, and BMP formats. To execute this option:

  1. Position the cursor where you want to insert an image into the Web template.
  2. Right-click and choose Insert | Image, as shown in figure a.
  3. In the Edit HTML Element dialog box for the IMG tag, shown next, click the button with the ellipses, located to the right of the Source field, to access the images in the MIME Repository.
  4. Edit HTML Element dialog box

  5. In the BEx MIME Browser, shown, pick the image that you want to show in the Web report and click Insert. (Of course, the image you want to use must already be stored in the BW SAP MIME Repository.)

The right-click context menu of the Web template

The right-click context menu of the Web template

Additional settings on the Custom tab of the Edit HTML Element dialog box include Alternate Text, which enables you to enter additional text for titles; Layout Alignment, which enables you to adjust the positioning of the image on the report; Layout Border Thickness, which helps you adjust the overall outline of the image; and finally the Spacing settings, which enable you to adjust the horizontal and vertical spacing between the image and other objects.

The BEx Mime Browser

The BEx Mime Browser

As we mentioned the image insert is found on the context menu from a right-click anywhere in the Web template work area. The different options can help with the overall look and feel of the Web items and as we discussed before, the look and feel of the reports is all important to the business user. Web items and HTML elements (for example, tables, texts, and images) that you insert into a Web template, as well as the Web template itself, all have a context menu. Each context menu has context-sensitive menu entries that you can use to call various WAD functions. You can, for example, use the context menu to save a Web item (for which you have specified properties by using the parameters) as a reusable Web item, call the Properties dialog box for this Web item, copy the Web item and paste it into another Web template, or delete the Web item from the Web template. The options available on the standard context menu, found in most sections of the Web template.

Options Available in the Context Menu for Web Items

Options Available in the Context Menu for Web Items

Insert | Any Tag warrants further comment. This option offers some very useful tags that you can insert into your report. There are over 40 different tags that you can insert, from a simple button to additional components such as an applet. There is some documentation available on each of the tags but I would look to find detailed information about each of the options and what they do from a more Web-based documentation site such as a professional Web design site. For example, the ability to use some applets is still available in the BI 7.0 version, but you need to be careful with the coding required to make them work with XHTML versus HTML. There can be differences in the different object tags being used between the two languages.

Other options that are available from the context menu of the Web item you have previously inserted into your Web template. We will discuss and review the Edit option later in this since this is actually the Properties dialog box for each of the Web items.

  • Properties You use this function to call the Properties dialog box for the Web item in the Properties screen area.
  • Save as Reusable Web Item You use this function to save the Web item as areusable Web item.
  • Cut, Copy, Paste or Delete You use this function to cut, copy, paste, or delete all the elements that you have inserted into your Web template (such as Web items, hyperlinks, texts, images, and HTML tables).

You can also merge cells in a table to help arrange Web items horizontally and vertically in the optimum way, without line breaks, using an HTML table. You can apply this grid as required. You can also merge cells that are situated next to each other in the table. To do this you have included an HTML table to your Web template, and then add some text to both cells in the table.

NOTE SAP recommends that you merge cells in tables only if you have not already inserted Web items.

Then select the text from both cells and select Table | Merge Cells (the Merge Cells menu entry is now active); you now see one cell instead of two.

If you are good at coding using XHTML, you can then go into the XHTML tab on the WAD and edit the source code directly from this location. You can edit the XHTML source code of a Web template directly in the WAD or with an external XHTML editor (as done in the BI 3.0 version and earlier). You can also make changes to the XHTML source in the Layout view of the WAD. Once you have made your adjustments, the system will validate the XHTML against the server when you choose Web Template | Validate on Server in the WAD menu bar. The system checks, where possible, whether the XHTML is syntactically correct. Changes in the XHTML are not added to the Web template during the validation. If errors are found, the correction assistant is displayed. The correction assistant suggests corrections for the errors found. The system automatically starts validating the Web template if:

  • You switch from the XHTML view in which you edited the XHTML to another view of the WAD.
  • You save the Web template.

If you are a really hard-core XHTML expert, you can export the XHTML from the WAD editor into another third-party toolset and adjust it there. Once you finish, you can import it back into the WAD for use and validation. To process a Web template further using an external XHTML editor, choose Web Template | Export to File in the WAD menu bar. Your Web template—that is, the XHTML file—is stored on a file system of your choice. You can call it from there with your XHTML editor. To call a Web template that you have edited in the XHTML editor (that is, the edited XHTML file) in the WAD again and edit it further, store the file on your file system again. In the WAD, choose Web Template | Import from File and specify the name and location of the saved file.

If you are more comfortable with ABAP programs than with getting into the XHTML process, another great option is that you can use an ABAP program that is available in the BI system. To use this ABAP program to make changes to the Web template, proceed as follows:

  1. In the menu bar of the SAP Easy Access screen in the BI system, choose System |Services | Reporting (transaction SA38).
  2. In the Program field, enter report RS_TEMPLATE_MAINTAIN_70.
  3. Enter the name of the Web template that you want to edit.
  4. Edit the Web template.

Now that you have reviewed all of these possible functions available in the WAD, you are ready to focus on the actual creation of a Web application. We start with the Web template, which is the key item in the development of the Web application.

3.Creating a Web Template
As stated previously, 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. As we have seen 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 WAD menu, 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 WAD view.
  • In the WAD toolbar, click the New icon (or press CTRL-N) as you can see in the following illustration.

Creating a Web Template

Your next step could be to set the data binding or select the data providers that you will be using. The data for your Web items is provided by data providers that you create in the WAD. 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. By means of navigation (by changing the drilldown), the Web item always displays the current drilldown data. Another very important concept to remember here is that if you change the data provider—change the query or InfoProvider—these changes are displayed via the Web items that you’ve attached this data provider to. So, any changes made will be reflected in the Web template.

There are several ways to create data providers:

Use the Data Provider button in the Web Items screen area:
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 Provider dialog box appears. Assign a name to the data provider and make the remaining settings. Alternatively, you can use the New Data Provider icon in the lower data provider section of the Web Template screen area to assign a data provider to this object. If you need to create additional data providers, double-click the New Data Provider icon to open the New Data Provider dialog box, shown in the following illustration. The small icon with “??” under it that appears in the lower data provider section is a result of dragging and dropping the Data Provider Type from the Web items to the Web template layout screen.

Use the Data Provider button in the Web Items screen area:

b.Use the General tab in the Properties screen area:
You can only use this option ifyou have already inserted a Web item into your Web template. To use this option, you first need to select a Web item from the list, so in the header of the Properties screen area, select the Web item for which you want to create a data provider. Then, on the General tab, choose New Data Provider. The New Data Provider dialog box appears. Assign a name to the data provider and make the remaining settings. The standard name that is assigned is DP-X (X = 1, 2, 3, etc) and this is normally accepted as the technical naming convention. The data provider is assigned to the selected Web item. You can also create more than one data provider, as described in the previous bullet. The data providers 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 New 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.

When 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. This can be seen in the following illustration. For this example, here used the Chart Web item. Clicking the New icon to the right of the DP_1 field opens the New Data Provider dialog box, and from there we can assign the data provider.

Use the General tab in the Properties screen area

If you want to rename the inserted Web item, proceed as follows:

1. In the Properties screen area, click the Rename Web Item button to the right of the dropdown box in which the added Web items are listed.

Use the General tab in the Properties screen area

2. 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. This illustration shows the dialog box that pops up to change the Web item’s name.

Use the General tab in the Properties screen area

Once you have added the appropriate Web items and formatted them as needed, you then can move into the properties of the Web items and make the necessary adjustments in this area also. When you insert 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. When you insert Web items using drag and drop, the position of the cursor is irrelevant. Make sure that you set the data binding and any Webitem- 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. Once you’ve completed these activities, you can save your Web application.

In this situation, 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 run time (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. Therefore, you must save your Web template before you execute it. Your Web application is started and displayed in the portal, which in turn runs in a Web browser. This information is some additional technical background of what really happens once you start the process of executing this Web template via a Web browser or portal.

Some of the detailed configuration of the parameters that we’ve talked about in terms of images and formatting could be assigned to you for development. With this in mind it is important that we get more background detail of what we need to do to use these images or formatting components.

Storing and Accessing Images
You’ve already seen how you can assign an image or picture to your Web template. This section explains how you store those images and pictures and then access them to use in your Web template.

You store all of these objects in the BEx MIME Repository. MIME objects are stored in the MIME Repository on the Web Application Server. On the SAP Easy Access screen in the BI system, choose SAP Menu | Business Explorer | MIME Repository (transaction SE80). MIME objects are stored only in the Web browser cache (client cache). The retention period for MIME objects in the Web browser cache is specified using the back-end profile parameter icm/HTTP/server_cache_0/expiration; the retention period is specified in seconds. The default value for this parameter is 86400, though you can change this value as required. If you want the changes to the MIME objects to take effect before the end of the retention period, you can manually delete the original MIME objects from the Web browser cache. To do this, in your Web browser, choose Tools | Internet Options | General tab | Delete Files.

To include your own images and icons in your Web application, you first have to store them in the MIME Repository. The procedure is fairly straightforward. You can store your MIME objects anywhere in the MIME Repository under SAP | BW. To store MIME objects, right-click a folder and choose Import MIME Objects from the context menu. If you want to set up your own folder, you can just choose Create | Folder and provide the information for the new folder such as name, technical name, etc. You can then add images and icons to that folder and they will be available in the BEx MIME browser.

To include your images and icons in Web templates, you use the BEx MIME Browser. There are two ways in which you can include images and icons in your Web templates:

  • Use the Insert menu In the WAD, choose Insert | Image in the context menu in the Layout view or in the menu bar. The Edit HTML Element dialog box appears. Under Image Source, click the button to the far right with the ellipses (the path to the MIME Repository is entered under Source). The BEx MIME Browser appears. Select one of the images listed and choose Insert. The Edit HTML Element dialog box appears again. Click OK. The selected image is inserted into the Web template.
  • Use Web items Some Web items also allow you to use the BEx MIME Browser to include images and icons. For example, for the Tab Pages Web item, click the Tab Panel parameter icon to open the Edit Parameter dialog box, shown here.

Use Web items

Then choose the Icon (ICON) parameter for the Tab Panel List (TABPANEL_LIST) parameter. The dialog box for selecting the URI (Uniform Resource Identifier) appears.

Uniform resource identifier

Select the Mime Repository Resource radio button. You can either enter the path to the MIME Repository or click the ellipses button. The BEx MIME Browser appears, as shown. Select one of the images listed and click Insert. The URI Selector dialog box appears again. Click OK. The selected image is inserted into the tab page.

Use of Themes in the WAD Reports
The process of using themes in WAD reports has changed dramatically in the latest BI version, 7.0. In BI 3.5 and previous versions, the use of themes was controlled by BI itself using cascading style sheets (CSS), but in BI 7.0, this process is managed by the portal rather than BI. In the 3.5 version of BI formatted reports, the Web applications were formatted using CSS. Each of the HTML elements in the Web application has a specific BW style class, which is defined in the style sheet. Style classes contain information about background color, font, font size, font color, borders, spacing, and so on.

In 7.0, the Theme Editor of the portal is used to adjust the formatting of Web applications within the Unified Rendering Framework. The Theme Editor enables you to create themes. These themes determine the visual appearance of the user interface elements of a portal desktop with respect to control elements, font sizes, colors, and contrasts. Style sheets are also created within the Unified Rendering Framework; however, they are generated by the Theme Editor and cannot be changed manually. In the Unified Rendering Framework, it is therefore not possible to use style sheets to adjust the formatting for Web applications. However, you can use the Theme Editor to change style classes. Formatting information for background color, font type, and so on is stored in separate style classes; these style classes can each be changed individually in different areas of the Theme Editor.In BI 7.0, the appearance of an HTML element is no longer defined using just one style class, but using multiple style classes, such as:

<td class="urText, urBackground, urBorder">

In this example, multiple style classes define the appearance of a table cell in a Web application. Text, background, and border are distributed across different classes and merged in one tag. You cannot change the style classes directly; you change them using the Theme Editor. In versions of BI prior to 7.0, the HTML elements use only one style class, such as:

<td class="SAPBExStdItem">

The style class SAPBExStdItem defines the appearance of a table cell in a Web application. The semantic information is therefore merged in one style class.

Because this process is controlled primarily by the portal team. At a high level, using the Theme Editor, you can easily create and introduce a corporate design across various applications. The Theme Editor is a cross-application tool that can be used for all portal applications, and you are no longer required to use external tools or text editors. The Theme Editor contains a preview function that allows you to display the effects of changes instantly. If you move the cursor over the format names, the corresponding area in the preview is highlighted. The Theme Editor generates style sheets automatically. Style sheets cannot be changed because manual changes that are made can potentially be overwritten by the next change in the Theme Editor. Using the Theme Editor, you can define individual formats such as font, color, or background color, but you cannot directly define individual style classes. The Theme Editor uses one or more of these formats to generate a style class. One or more style classes are then used to specify the appearance of an HTML element.

At a more specific, BEx WAD level, themes determine the colors and appearance of the portal desktop. In the portal, content from BI and BEx Web applications is always displayed with the current user’s theme. Web applications are created using Web items that use elements from the Unified Rendering Framework. The formatting for these elements, which are also used in the portal, is specified using the Theme Editor. This enables you to format the Button Group, Link, and Analysis Web items by selecting the relevant Button, Link, or Table elements in the left area of the Theme Editor. To change the portal themes, you go to iView System Administration | Portal Display | Portal Theme. Then, using the Theme Editor, you change the formats for the elements. Before you can use a modified portal theme, you must first assign it to the user. Once the portal theme has been assigned, all BEx Web applications for this user are displayed with this changed portal theme.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

SAP BI Topics