Bookmark functionality and Tips in WAD 3.x

Use/Purpose:

This document will provide better understanding on Bookmark functionality using single sign on and also some tips that can be used in WAD.

Bookmark functionality

Requirement:

Business requires Bookmark functionality with Single Sign on(SSO).

What is SSO?

It is the property where user logs in once and gains access to all systems without being prompted to log in again at each of them.

Below is a sample screenshot of the web report:

/wp-content/uploads/2014/04/1_423821.jpg

Pre-requisites

  • We require installation of SAP Business Explorer WAD 3.x
  • Browser Internet explorer version 9 & above

Proposed Solution:

Scenario 1:

If 2separate buttons are used for generate and Save Bookmark.

Generate Bookmark: When clicked on it generates bookmark ID in the address bar.

Save bookmark: When clicked on, it calls the function which checks for the bookmark ID and when identified gives pop up to bookmark the link to the favorites bar.

Below is the code for these buttons:

<!—Generate Bookmark—>

                <TD class=”SAPBEXBtnStdIe4″ noWrap><A class=”SAPBEXBtnStd”

                  title=”To Generate Bookmark ID”

                href=”<SAP_BW_URL CMD=’BOOKMARK’>&amp;dummy=#bookmark” name=Bookmark ><NOBR> <TEXT>Generate

Bookmark</TEXT></NOBR></A></TD>

<!–Save Bookmark–>

                <TD class=”SAPBEXBtnStdIe4″ noWrap><A class=”SAPBEXBtnStd” title=”Click after Generate Bookmark” onclick=chk_bookmark() name=”Bookmark–<!–href” 

                  =”<SAP_BW_URL CMD=’SAVE BOOKMARK’>&amp;dummy=#bookmark”>

<NOBR> <TEXT>Save Bookmark</TEXT></NOBR></A></TD>

/wp-content/uploads/2014/04/2_423822.jpg

Scenario2:

Instead of using 2separate buttons for generating and saving the bookmark, one single button is created to serve both the purposes.

Bookmark: When clicked upon for the first time, it generates the bookmark ID in the address bar and when clicked on again it calls the function, which checks for the bookmark ID and if present, pops up to save the link to the favorites bar

    

Below is the code to achieve this functionality:

<!—Bookmark—>

                <TD class=”SAPBEXBtnStdIe4″ noWrap><A class=”SAPBEXBtnStd”

                  title=”Generates & Saves Bookmark” onclick=chk_bookmark()

                href=”<SAP_BW_URL CMD=’BOOKMARK’>&amp;dummy=#bookmark”

name=Bookmark ><NOBR> <TEXT>Bookmark</TEXT></NOBR></A></TD>


/wp-content/uploads/2014/04/3_423823.jpg

Note: In the above codes, I have given help text as Generates &, Save bookmark & button name as Bookmark; this can be modified as per the requirement. Also, we can modify the code to save the link in the favorites folder.

Detailed Info:

When we click on Generate bookmark or the Bookmark button, first the Bookmark ID gets generated in the address bar, when we click on save bookmark or the bookmark button for the second time, it calls the bookmark function, this function checks the address bar for the bookmark ID, if the bookmark ID is present, it pops up to save this link to the favorites bar of the browser and the current navigation status of the report gets bookmarked.

When this bookmarked link is reopened it will request for credentials, to avoid this, the code is customized by prefixing the SSO wrapper to the generated link. Now, when the user re-opens this bookmarked link it will not request for credentials.

Below is the code to achieve the Single sign on Bookmark functionality:

<SCRIPT type=text/javascript>

function bookmark() {

  1. top.document.location.href=”<SAP_BW_URL CMD=’BOOKMARK’>”

}

function chk_bookmark() {

var holdhref;

var pos_bm;

var pos_rd; var sso_url;

var server_name

holdhref = top.document.location.href;

pos_bm=holdhref.indexOf(“BOOKMARK”)

pos_rd=holdhref.indexOf(“SAP-LANGUAGE=ENK”);//temporary fix to identify if the URL is being bookmarked

if ((pos_bm==-1) && (pos_rd==-1 )) {} //when report comes up first time, url has no bookmark or EN in it.

else if ((pos_bm>=0) && (pos_rd ==-1 )) { //when report comes back after generating the Bookmark it has  bookmark in it.

server_name=holdhref.substr(7,3);

if (server_name == “system id “) {

    sso_url=”http://ssodev.mysap.***.com/erpsso/getsso.html?redirectURL=“;

}

else if (server_name == “system id”) {

sso_url=”http://ssoqa.mysap.***.com/erpsso/getsso.html?redirectURL=“;

}

else if (server_name == ” system id”) {

    sso_url=”http://ssoprod.mysap***.com/erpsso/getsso.html?redirectURL=“;

}

else {

    sso_url=”http://ssoprod.mysap.***.com/erpsso/getsso.html?redirectURL=“;

}

holdhref = holdhref.replace(“SAP-LANGUAGE=EN”,”SAP-LANGUAGE=ENK”); //temporary fix to identify if the URL is being bookmarked

holdhref = holdhref.replace(“:”,”%3A”);

holdhref = holdhref.replace(“:”,”%3A”);

holdhref = holdhref.replace(“?”,”%3F”);

holdhref = holdhref.replace(“=”,”%3D”);

holdhref = holdhref.replace(“=”,”%3D”);

holdhref = holdhref.replace(“&”,”%26″);

holdhref = sso_url + holdhref;

  1. window.external.AddToFavoritesBar(holdhref,”REPORT”)

}

else if ((pos_bm>=0) && (pos_rd>=0 )) {} //when report is generated using the actual bookmark it has both bookmark and redirect in it.

}

</SCRIPT>

<META content=”text/html; charset=unicode” http-equiv=Content-Type>

<META name=GENERATOR content=”MSHTML 8.00.6001.23543″>   

            <link href=”/sap/bw/Mime/BEx/StyleSheets/Project Style Sheet.css” type=”text/css” rel=”stylesheet”/>

                  </HEAD>

<BODY style=”BACKGROUND-COLOR: white” onload=chk_bookmark() scroll=yes>

  <TBODY>

  <TR>

    <TD>

In above code, the SSO wrappers for Development, Quality & Production has been hardcoded. Hence during transportation of the code to other system there is no need to make any changes to the SSO wrappers manually.

  

Execution:

The WAD template name and the query name is embedded in the SSO link and executed in IE browser. Please remember that the bookmark functionality works only in IE version 9 & above. 


Below is the screenshots showing the functionalities:

Usage of two separate buttons for Generate and Save bookmark:

/wp-content/uploads/2014/04/4_423830.jpg

/wp-content/uploads/2014/04/5_423831.jpg

/wp-content/uploads/2014/04/6_423832.jpg

/wp-content/uploads/2014/04/7_423833.jpg

/wp-content/uploads/2014/04/8_423834.jpg

Usage of  Single Bookmark button:

/wp-content/uploads/2014/04/9_423835.jpg

/wp-content/uploads/2014/04/10_423839.jpg

/wp-content/uploads/2014/04/11_423840.jpg

/wp-content/uploads/2014/04/12_423841.jpg

/wp-content/uploads/2014/04/13_423842.jpg

Final output is that whenever the bookmarked link is reopened, the bookmarked navigation status

opens up without requesting for system credentials.

Below is the screenshot of the Final output:

/wp-content/uploads/2014/04/14_423843.jpg


Tips in WAD 3.x:

Business requirement is to create a button and when we click on it, it launches the image. This image is provided by business and it contains useful information.

Proposed Solution:

Create a button and link it to the image. 

The image can be linked to the button in 2ways:

  • We can save the image in the common share site and provide the link directly. Whenever that button is clicked, it fetches the image from the common share site and displays the image.
  • We can save the image in the MIME repository and provide the path of the file. Whenever the button is clicked it launches the image from the MIME repository. 

To save the image in the MIME repository:

  • Goto Tcode SE80->MIME repository-> SAP-> BW-> Customer->Images

Below is the code to create the button and link it with the image in the MIME repository

<!– Helpl—>

    <TD class=”SAPBEXBtnStdIe4″ noWrap><A class=”SAPBEXBtnStd”

      title=”Help” href=”/sap/bw/Mime/Customer/Images/help.jpg”

      name=Help><NOBR> <TEXT>Help</TEXT></NOBR></A></TD>

Note: If the image is saved in the MIME repository it should be transported to other systems along with the web template else the image would not be available, but if the image is saved in the common share site whether it is development or quality or production the image will be available.

Below is the screenshots showing the functionality:

/wp-content/uploads/2014/04/15_423844.jpg

When we click on the Help button:

/wp-content/uploads/2014/04/16_423851.jpg

This Sample Image from the MIME repository is displayed:

/wp-content/uploads/2014/04/images_423852.jpg


To choose the right click options to be displayed, follow the below path:

  • Towards right side, Properties->Web item ->Entries in the context menu

Here, we have all the right click options available, we can select No Display, Always Display or Enhanced Menu and choose whether we wanted to display the object or not.

We can change the no. of rows and columns to be displayed:

  • Goto Web item properties of table->Specific->No. of rows to be displayed at once/No. of columns to be displayed at once (mention the number of records to be displayed)

Usage of Customized Cascaded Style Sheet (CSS):

The main reason we prefer WAD is to improve the look of the report. This can easily be achieved by using CSS. Normally we use standard style sheets for the web reports, we can also use customized style sheets and improve the look of the report.

  • Using style sheet we can modify the color of the rows/columns/font, font type, font size, font alignment, borders, etc. of the report. We can take any standard style sheet from the MIME repository save it in our desktop, modify it and save it as a customized CSS in MIME repository and apply it to our web template. If, we are using single web template then only one CSS can be used. To Preview of the style sheet: Towards right side->Style Sheet->we can choose the corresponding style sheet and the preview appears towards the left side. Here we will be able to see the look of the report, instead of running the report every time.

For example: We can modify the column headers, the font color, prompt screen background, button colors, etc. this gives a better look for the report. 

In CSS, the colors are mentioned in hexadecimal format and each of the web items are mentioned as CSS classes. We can modify the look of the items by modifying the corresponding class.

The CSS can be stored in common share site or MIME repository; usually style sheets are saved in the below mentioned path:

  • Goto Tcode SE80->MIME repository-> SAP->BW-> BEx->Style Sheet

We can modify existing or add new style sheet in the MIME repository. But every time we modify or add new CSS, the cache has to be cleared for the change to get reflected in the web template or WAD has to be closed and reopened. The Style sheet has to be transported to other systems along with the web template.

To clear the cache when modifying the same style sheet:

  • Start the Transaction ICM monitor (transaction code SMICM) and delete the cache using the menu command Goto ->HTTP Server Cache -> Invalidate ->Globally in the System

Below is the screenshot of report using customized CSS:


Prompt Screen:

/wp-content/uploads/2014/04/17_423853.jpg

Final Output:


/wp-content/uploads/2014/04/18_423855.jpg


In the above report, I have given different shades for each level of hierarchy up to level 4 and the button colors are also changed.

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply