Formatting with web template layouts format SAP BI

One of the most important things that you will need to do with your Web reports is to format them correctly so that you offer business users a view of the data that is consistent and easy to read. You should review the formatting on an ongoing basis during the development of the dashboards and Web reports. Take the time and have a group review of the different phases of the report development. This will help to ensure that you obtain signoff at the end of the project.

Business users must be able to read, understand, and assimilate the results of their queries. The normal rule of thumb when configuring a report is to make sure that the results can be understood in less than seven seconds. In other words, after a business user executes the report and the information is available, the user should be able to walk away from the report in less than seven seconds with a good understanding of the analysis and what was being communicated through the report. This means you must make sure that the display of the data has as few issues as possible.

Failing to format a report properly and make sure that all the objects are aligned correctly for display purposes renders the report ineffective. Creating Web applications in which the content is arranged incorrectly onscreen leads to user complaints, time-consuming analyses, and, ultimately, a lack of trust in the data and therefore a decision not to use the reporting tools. The WAD offers numerous objects and options that we can use to help us with the formatting process. Some of them were identified in the previous section, such as the Container, Container Layout, and Groups Web items. Investigating and understanding the functionality of these Web items is definitely worth your time. In this section, I’ll provide a few examples of working with the formatting functionality in certain areas of a Web template. Let’s start with my favorite option for fast, consistent formatting—inserting a table.

The HTML table serves as a grid into which you can place Web items. This provides an effective method for placing Web items side by side or in a vertical arrangement on the Web page. It’s very easy to get started, and for testing purposes, a table helps you to format the data so that basic testing results are easier to read. Open the Web Template page and use the Table icon or Table |Insert Table to access the table option. Identify the number of rows and columns that you need in your table and then click Apply to insert the table into the Web template.

The table will be inserted into your Web template at the current cursor location. At any time, you can use the context menu in the table to make changes, as shown next.

Formatting with web template layouts format

From the context menu of the table, you can

  • Insert or delete rows or columns or delete the table itself
  • Edit the table properties
  • Split and merge cells
  • Add a URL link to the information, add images, and add objects (DIV, SPAN) to help with the sizing of the spaces between objects

In some cases, the formatting provided by the Web items won’t quite suit your needs, so you may need to do some of the formatting manually. In such cases, options available on the WAD menu and toolbars can be useful to you. For example, you will often need to provide some basic text information to help the user put the data into context, or to provide additional direction regarding the Web application or the results being displayed. For these purposes, you can easily insert text directly into the Web template by just using the context menu off of the cell and choosing Insert | Language Dependent Text or you can just start to type in what you want in one of the table cells. For example, suppose you need to add some text to make sure that specific directions are followed after the user reads the report. Simply type them in and the XHTML will be automatically generated to support the text. The results are shown here.

Formatting with web template layouts format

By using some of the functionality in the Format toolbar, you can adjust quite a few items with very little effort. The next illustration shows the basic formatting that was done in the preceding example, with some background color added using the Format toolbar and going to Format | Text Background Color and choosing a color for the background of the text.

Formatting with web template layouts format

Formatting with web template layouts format

The Format toolbar lets you modify the font and font size; apply bold and italic; adjust the alignment of the selected text; and change the background color of the Web template, the text color, and the text background color. You can also use the <DIV> and <SPAN> HTML tags to specify properties of textual information. For example, you can use the <DIV> tag to specify a container within which you can put text and apply various properties such as font, color size, and alignment of the text. This is useful for formatting the different properties of the header of your Web application. The <SPAN> tag defines an inline text container and is often used to apply specific CSS styles to parts of a text block.For example, you could use the <SPAN> tag to insert a style to change the color and style of the text if the user hovers the cursor over the text.

An example of a very quick and easy fix to your Web reports is the use of these different functions. For example, suppose we want to realign the Web objects within one of our Web reports. We can use the context menu options to help, and we can access the report and tweak the results as we go. To do this, we access an existing Web template, right-click to open the context menu, and choose Table | Edit | Edit Row.

When this command is executed, the dialog box appears for the format of the table. In this dialog box, shown next, we can adjust the format of the report by rows and columns, adjust the sizing, alter the attributes, and add another CSS style sheet. (Remember, the CSS can only be used via some manual text that is included; the overall style of the Web report is controlled by the Themes style sheet.) In this case, all we do is change the setting for the vertical alignment to Top. This will move all the Web objects to the top level of the cells.

Edit HTML Element

Finally, execute the WAD report and see the results, shown next. Notice how much more consistent this looks versus the basic WAD query that you would have by just including individual Web items in a Web application. This improves the overall format and appeal of the report with just one minor change in a setting. Therefore, work with all the options available and see what they can do for your WAD reports.

Edit HTML Element

If a Web application needs to accommodate multiple languages, you can use language dependent text in your Web application. Since the Web application is executed in the NetWeaver portal, it is the logon language of the NetWeaver portal user ID that determines which text language is displayed.

To use language-dependent text, right-click anywhere in the Web template and choose Insert | Language-Dependent Text. This opens the Text Edition dialog box, shown here, which offers the choices for text input described next.

text input described next.

  • Language-Independent Text This text will always show in the Web application regardless of the logon language of the user.
  • Language-Dependent Text Stored in Object (Web Template or Reusable Web Item) The text can only be entered in the current logon language of the Web template developer. Therefore, if the text was required in two languages, the developer would have to log on twice, once in each language, and enter the text in each language.
  • Language-Dependent Text Stored in Table This option allows the Web template developer to enter the text in as many languages as needed in the same session. Each text has a language key to identify it. The text is stored in separate tables (technical name of the table that stores the multiple Text languages is RSBEXTEXTS) and needs to be transported separately from the Web template. This option supports the ability for all text that is to be used to be managed centrally via one screen. This would be very helpful if your project has many developers and you want all of the text being used to be consistent.
  • Language-Dependent Report Text (Obsolete) If you need to access another object, such as an ABAP report program, you would use this option.

By choosing the option Language-Dependent Text Stored in Table, we can use text that has been stored in different languages, as shown in the following illustration.

Language-Dependent Text Stored

Another easy option to use from this context menu is the ability to insert images into the Web template. If you need to add a company logo or divisional logos or even just some background color that is specific to the customer, you can accomplish this using the option Insert | Image. Graphic files with the extensions .BMP, .JPG, and .GIF can be used. The initial step is to access the MIME Repository (transaction code SE80) and go to the location in which to store customer images—SAP | BW | Customer | Images. Here, you can insert or upload your images. After you do so, you can use the context menu again to access the Insert | Image option. You will then be able to insert your image in the appropriate location in the WAD template via the Edit HTML Element dialog box, shown here.

HTML Element dialog box

The use of themes is another option that will make a big impact on your WAD templates with little effort. Because all BI Web applications are displayed in the NetWeaver portal, the portal themes are used to apply HTML-like styles to the objects in the Web application. Prior to NetWeaver 7.0 (2004S) BI, a cascading style sheet was assigned to each Web template. Therefore, the portal themes are replacing the cascading style sheets. These portal themes serve the same purpose, but are created and maintained with the Theme Editor in the NetWeaver portal. These themes are, in turn, assigned to a portal desktop, a collection of parameters that defines the look and feel of the specific portal environment.

All of the configuration functionality covered in this section is directly available from the context menu. The ability to adjust the look and feel of the report can be accomplished quickly and easily from these parameters. Definitely keep the context menu in mind when you are configuring and implementing a WAD component.

1.Command Wizard
As you reviewed the parameters for the Button Group, Link, Menu Bar, and Tab Pages Web items, you likely noticed that you can assign commands to some of these parameters by using the command wizard to create Web-based activities for users. This gives you more flexibility when using the different functions within the WAD, enabling you not only to develop and display some existing components in a different manner, but also to develop new functionality. This capability is especially useful now that BI enables you to create planning activities in addition to reporting activities, because the commands available include quite a few planning processes. The command wizard functionality offers so many possibilities for creating different looks and feels for the Web-based reports.

The command wizard enables you to set up reports that offer business users the ability to do what-if analysis on the fly. Whereas before you had to do a significant amount of work to set up a dashboard with a sliding indicator to do what-if scenarios, with the command wizard, you can configure and make available this type of component in about the same amount of time as it takes to set up some of the other basic Web items.

Now, we’ve seen the command setup and process used in a number of Web items up to this point and now we can work our way through an example of what this can do for us.

NOTE: We can use a similar approach to this in the development of the functionality within the BEx Analyzer and the BEx Analyzer Workbook and commands. This functionality is not unique to the Web but there are more options available in the Web versus the BEx Analyzer.

As you go through the process of using the command wizard, notice some of the overlap of the Web items that we can create commands for and the fact that the commands already are in the context menu of a particular Web API or available in the BEx Web Analyzer. Because some of the functionality overlaps, the choice comes down to what the business user is more comfortable using—the context menu or a button on the screen. The additional flexibility of the command process allows developers to extend the navigational and processing power of the Web items without having to go immediately to developing JavaScript programs. This offers much more flexibility for the developers and the business users. The combination of the Web Design API functionality and embedding the command option into it offers the ability to enhance Web templates, Web items, data providers, and planning application commands. These commands extend the interaction and capabilities of objects to enhance the integration of Web-based analysis objects.

The command wizard is the main tool for creating commands from the Web Design API. You can use it to create commands easily by following a step-by-step procedure and include them in your Web template, enabling you to create highly individual Web applications with BI content. In the command wizard, all of the parameters available for each command are listed so that they can also be set directly there. You also see a description for each command and each parameter directly in the command wizard. The command wizard is part of the WAD and does not require any additional installation. You usually call the command wizard in the WAD from the Web item parameter Action (Command Triggered ACTION). If you insert a hyperlink into the Web template, you can also call the command wizard in the dialog box that follows by clicking the button next to the text-entry field.

This functionality is embedded into numerous Web items, including Button Group, Dropdown Box, Menu Bar, and Group, to name a few. One of the most popular areas for this functionality is the Button Group, which offers individual buttons for each command assigned. The Web Design API enables you to create commands for any data providers, planning applications, Web items, and Web templates. Any context menu navigation can be replaced with a command that offers the ability to develop a step-by-step view of querying on different reports. So, rather than having the business user work through a context menu– driven drilldown, you can enable them to use a series of buttons from the Button Group, with commands executing in the system.

Commands can also help with the parameterization of different Web items. The Web Design API tool, which is accessible from anywhere that a command is relevant, guides the user through the necessary parameters without the need to master HTML syntax or XHTML syntax.

NOTE: Although you will be introduced to many of the commands in this chapter, we will not go into details of all the different commands available, such as those for Integrated Planning (BI-IP) activities.

This is definitely one area in which we cannot possibly cover all the bells and whistles in detail. As you read through this section, you’ll understand why. Each command has a list of additional parameters that can be used to enhance the functionality of the command. In some cases, the list is extremely long, and it would be impractical to attempt to define each parameter. Therefore, I will show you through an example the basic procedural steps to set up a command. As you read through the list of commands, follow these steps to try out some of the other commands, to get comfortable with their functionality.

If you use one of the Web items the command wizard is called from the Properties tab option of that particular Web item. When you access the initial screen, you see two tabs:Favorite Commands and All Commands. If you select the Button Group Web item and then access the command wizard, the initial screen is the Favorite Commands tab, shown next. You can assign any number of commands to this Favorite Commands tab by choosing them in the list.

Favorite Commands tab

The All Commands tab provides full access to all the available commands. It includes a series of folders, listed next, that hold all of the commands:

  • Commands for Data Provider
  • Commands for Planning Applications
  • Commands for Web Items
  • Commands for Web Templates

The Commands for Data Provider folder supports all functionality that is available within the standard 0ANALYSIS_PATTERN Web template. These will be the primary commands that you will want to assign to your reports or dashboards. The Commands for Planning Applications are very good and you might use some of them for a report but 95 percent of the time these will be used for the purpose of planning and consolidation using BI-IP. As for the Commands for Web Items and Web Templates, we have worked with these in the earlier portions of this chapter. These incorporate all of the functionality of the context menus for both of the areas and are very similar. So we will focus on an example from the Data Provider and the Web Template Commands in this section.

In the Commands for Data Provider folder, you can find a summary of all commands you can use to change the status of a data provider. You can use these commands to set filter values, for example, or to change the navigational state of a data provider. When you select a command, the parameters for that specific command are displayed. You choose parameters either by direct entry or by selecting them from dropdown lists. Many command parameters have additional subscreens for entering additional parameters. With the help of the command wizard, you can step through each of these items and confirm the values of the parameters without having to program JavaScript as you go.

Taking an example and working through this process will give you a good idea of the steps involved and some of the functionality that is available. You will work with a series of Web items, so set up a Web template with Navigation Pane, Button Group, Dropdown Box, and Analysis Web items. Looking at the Button Group, you can see in the Properties screen area of the following illustration that it has two buttons assigned to it—Save View and Print to PDF. As you can see, the Button Group has direct access to the command process; by clicking on the icon directly to the right of the field, you are able to directly access the Commands screen.

Commands screen.

Stepping into the Edit Parameter screen that supports the Commands, we can start to review the configuration of each of the Command buttons. The following illustration shows the initial view of the configuration for the Save View command button. These configuration settings are standard for most command options. You start by confirming the Caption, confirming whether or not you would like to have Quick Info, enabling the command, and selecting what the format would be—in this case we will accept the Standard format.

Edit parameter

Clicking the box next to the line with Command: SAVE_AS (right side), we get to the configuration screen. The following illustration shows this result. This view of the command wizard is the result once the Web API has been chosen.

Edit command

If we look at the details of the configuration, we see the complete set of parameters available to work with, and this is where the Save option was assigned. Notice that because the commands are already configured, the only activity completed by the developer was to check off the box for Save Query View (SAVE_VIEW). These results are shown next.

Edit command

Finally, reviewing the additional setting for the Printing and drilldown into the details screen, we see the additional indicators that were necessary to accomplish the assignment of the Print option. Notice that on the dropdown there are a series of options to choose from including Print to Excel 2000. The next illustration shows the results of this process.

Edit command

As shown in the following illustration, the final result of this process is that instead of having to drilldown by using the context menu to save the view or print to PDF, the user now can simply click one of the two buttons at the top of the WAD report, Save View and Print To PDF, to execute the respective option.

Edit command

Below table lists all the current commands for data providers.

List of Current Commands for Data Providers

List of Current Commands for Data Providers

The commands found in the Commands for Web Items folder and Commands for Web Templates folder of the command wizard are basically all the commands found using a right-click and accessing the context menu on a standard report. Additional detailed documentation and descriptions for each of these commands can be found within the Web template by clicking on the command and viewing the help field at the bottom of the dialog box. Again, we will run into these commands in the process of configuring some of our dashboards .

2.XHTML Features
In some cases, you may find that the WAD functionality is not quite sufficient for what you require in your Web application. In such cases, if you are comfortable enough with XHTML, you may decide to manually configure some coding in the XHTML tab. In the WAD, the tab formerly known as the HTML tab has been replaced by the XHTML tab. This new view to the components of the Web template provides many new enhancements for those designers who want to extend the functionality of the Web template beyond the standard functions provided by the Web items. SAP has incorporated into this XHTML tab the functionality of an XHTML Editor and therefore you will be able to insert, create, and change the XHTML directly in the WAD environment. This capability was available in 3.x and early versions but in the 7.0 this is a fully functional Web editor just as you would find if you used a thirdparty component from Microsoft or other companies supporting Web-based development.

HTML code that is entered into the template can be locally verified to catch syntax or tab usage mistakes. As you enter HTML code, the Auto Complete function assists you by suggesting available and appropriate tags based on the context of the entry. This can speed up the configuration of complex HTML code strings and help ensure accuracy.

For example, if you enter a URL in HTML, the Editor will correct the URL and add the necessary tags to have it conform with the XHTML that is already included. As you enter code for a Web template, the Editor dynamically checks the syntax of the code, displays the appropriate error messages in the window below the code, and, in many cases, makes suggestions as to the correct formatting of the code. Highlighting the icon at the end of the message will provide a longer explanation of the error, and clicking the link within the error message will position the cursor at that location within the code. The following illustration shows an example of the errors and the prompts that are offered as a person is coding. A full list of BI tags is available in each section that you are coding, whether it be the Body, Header, or actual BI portion of the Editor.

XHTML Features

Additionally, you can identify exactly where a particular object’s coding starts. Click the dropdown arrow at the top of the XHTML tab and you will see a listing of all the Web objects that are used in the Web template, as shown next. Select the one that you are interested in and you will be directed to the initial tag for that Web object.

XHTML Features

As you know, all the different objects within the WAD and some outside the WAD generate XHTML; therefore, for example, selecting Insert | Table generates XHTML, as does including any text or inserting other objects. With all the different approaches to assign CSSs and overwrite formatting, a hierarchical depiction of what works at what level is useful. Figure identifies the prioritization of each of the Web objects and what formatting will be used; therefore, if you set up the parameters to be confirmed via a URL parameterization, this will be the overriding control.

As below figure confirms, URL parameterization has the highest priority when changing Web template parameters and Web item settings. To use this functionality to embed commands and parameters, follow this process:

  1. Insert a Web item into your Web application that can be used to execute a command (for example, a Button Group Web item).
  2. Use the command wizard to create the required command. This enables you to identify the required parameters.
  3. In the XHTML view of the WAD, find the command that was just created.
  4. Use the parameters of this command for your URL parameterization.

There are a number of different activities that you can do with these options, such as dynamically parameterize a command at run time of the query. An example of this would be to fill in the appropriate values of a variable at run time based on the user. This would be similar to having an authorization variable but without the security and authorization set up and to have this identified using a table search. Another option would be to use objects that identify system activities to parameterize a command at run time (for example, using the system date object to fill a date field, and so forth).

Priority of Web template and Web item parameters

Priority of Web template and Web item parameters

3.JavaScript Features
Another approach to getting additional functionality into the Web application is to use JavaScript to integrate objects directly into the WAD template. To enhance Web applications, a JavaScript API is now available, with which you can also execute commands within JavaScript functions to achieve a more flexible design for your Web application.

JavaScript can be incorporated into Web applications in two ways:

  • Using a JavaScript include file from the MIME Repository
  • By incorporating JavaScript in a Web template using the Script Web item

NOTE: Dueto the XHTML format, writing JavaScript directly in the Web template is not supported.

Using a JavaScript Include File from the MIME Repository
As we have seen there are a number of different approaches to help the Web templates and objects we will generate from these present the information. An approach that you can use is to reference JavaScript from the MIME Repository and use this in the Web templates. To do so, first load the JavaScript include file to the MIME Repository of the BI system. On the SAP Easy Access screen, choose Business Explorer | MIME Repository. You can store customer-specific scripts in the MIME Repository under SAP | BW | Customer | JavaScripts. You can reference the JavaScript include file as follows in the XHTML view for the Web template:

Incorporating JavaScript Using the Script Web Item
Now that you have inserted your JavaScript into the MIME Repository, you can use it in the Script Web item. In the WAD, drag the Script Web item from the Miscellaneous Web item grouping to your Web template and choose the Web Item Parameters tab page in the Properties screen area. Then from the Properties tab choose the icon to the right of the Script field; this will open up the editing dialog box for the parameter Script. You can insert your JavaScript in this dialog box. The command wizard helps you to generate the JavaScript code for executing the command.

In addition to the direct use of commands using the command wizard, some Web items also provide the option of using JavaScript functions. This can be useful, for example, if you want to assemble commands dynamically, or if you use portal eventing and want to link this action to a Web item. JavaScript functions linked to a Web item always have the same signature:

The parameters currentState and defaultCommandSequence are used for Web items that already execute standard commands themselves. This applies, for example, to the data binding type CHARACTERISTIC_SELECTION for the Web item Dropdown Box. The command for setting the filter values is generally run here. You can insert this standard command sequence before or after your command, or you can choose to ignore it and not execute the standard command. You can also execute commands or command sequences using JavaScript. To execute a command, you must first generate the command and its parameters. The command object sapbi_Command and the parameter object sapbi_Parameter are available for this purpose. In the Script Web item, the command wizard provides help generating the JavaScript. Once you select the command and set the parameters, the JavaScript code is generated.

As a final note to this section of the WAD, I suggest that before you decide to create XHTML manually or use the Script Web item, you make sure that no other option is available in all the different Web items and formatting activities that will satisfy the business requirements. Only after you have exhausted all other alternatives should you manually create XHTML or use the Script Web item. When we discuss the development of dashboards and Web reports in subsequent chapters, we will try to stick to standard processes and objects to accomplish our desired display of the information, but if necessary we will access ABAP, JavaScript, and other supported objects.

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

SAP BI Topics