Skip to Content

I was asked to develop couple of reports for country specific tax forms, where the output was required in pdf format. I have been given some standard sap transactions for which I have to show the output of the transactions on the portal. I looked at SDN, came to know about the GRT/RFW frame work, but did not find the implementation details. I have developed couple of applications using this framework in ESS space. Came up with this article so that it can help others.  

This article describes how to develop custom Web Dynpro Java ESS applications using Generic Reporting Tool (GRT) / Reporting Framework (RFW).

 

1 Generic Reporting Tool (GRT)/ Reporting Framework (RFW)

We can use the GRT/RFW to create applications with a minimum of development involved. We can create our own applications (services) on the basis of predefined modules in Employee Self-Service. In particular, we can use it to represent SAP reporting from the back-end system in a portal environment.

 

With this framework we can easily bring basically any classic report which can expose its content as pdf, html or xml into the self service application framework. I have reused this framework several times already to expose the reports, mainly country-specific tax-related reports on to the Portal.

 

It has the following advantages for creating an application in the front-end:

  • We only have to define and implement the visual application component (Vc) for the application.
  • We can reuse particular predefined components such as an iFrame to display PDF or HTML documents.

 

It has the following advantages for creating an application in the back-end:

  • We only have to implement an ABAP class and define the application-specific part of the communication structure.

The framework provides the components required to create applications and exchange data between the SAP back-end and front-end.

 

It’s based on the floor plan manager (FPM).

 

Following link provides more information on the GRT 

http://help.sap.com/saphelp_erp60_sp/helpdata/en/43/8273990c4458bbe10000000a422035/frameset.htm 

 

Some the applications which use this framework are: Pay slip, Time statement, Total Compensation Statement (TCS), CN Tax forms, IR56B, IF56F, IR56G, IR21, IR8A, IR8E, IR8S, PKB1, PKB4 etc

 

2 Creating the front end Web Dynpro application

2.1 Create a new DC.

Let’s try to build the application to show the Certificate for LI/NHI Payment in portal. Here we are trying to show the output of standard SAP transaction PC00_M42_LHCE for Taiwan in portal.

Let’s use the existing ESS application for e.g. ess/cn/ytxd as template for the custom ESS application.

New DC

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

                                                                                                     

2.2 Adding used DC’s:

We have to add the following development components to the Used DC’s list:

  • ess/rep(EssWDRepFramework)
  • pcui_gp/xssutils(FPMUtils)
  • pcui_gp/xssfpm(FloorplanManager)

-Adding ess/rep(EssWDRepFramework) as used DC

Used DC EssWDRepFramework

 

-Adding pcui_gp/xssutils(FPMUtils) as used DC.

Used DC FPMUtils

 

-Adding pcui_gp/xssfpm(FloorplanManager) as used DC.

Used DC FloorplanManager

 

-Creating the visual application component: VcLhceSelection

Create Visual Component

VC Details

 

2.3 Add IVAC as the implemented interfaces:

Expand the Component Interface node of each VAC and select Implemented

Interfaces->Context Menu->Add

Add IVAC

 

In the dialog window select IVAC and push OK button.

Select IVAC

 

Push the Finish button on the next dialog window to confirm the window name.

IVAC Window

 


2.4 Add used Web Dynpro Components:

We need to create references to various BLCs to be able to trigger events and display data.

We need to create a reference to the BLC of the FPMUtils DC VcLhceSelection ->Used Web Dynpro Components->Add Used Component

– Enter FcEmployeeServices

– Press the BROWSE … button and select FcEmployeeServices in the dialog window

Add used component

 

– Press OK button and then select manual in lifecycle drop down field.

FcEmployeeServices

 

Add the FcRepFramework as used component

– VcLhceSelection >Used Web Dynpro Components->Add Used Component

– Enter FcRfw

– Press the BROWSE… button and select FcRepFramework in the dialog window

FcRepFramework

 

 – Press OK button and then select manual in lifecycle drop down field.

FcRfw


2.5 Message pool setup

Double-click on message pool and select add the following messages by clicking Add Message.

Message Key

Message Type

Message Text Type

Message Text

PrevButtonLabel

text

label

Previous Statement

PrevButtonTooltip

text

messagetext

Previous Statement

NextButtonLabel

text

label

Next Statement

NextButtonTooltip

text

messagetext

Next Statement

ExitButtonLabel

text

label

Exit

ExitButtonTooltip

text

messagetext

Exit

PrintButtonLabel

text

label

Print

PrintButtonTooltip

text

messagetext

Print

OpenOverviewLabel

text

label

Show Overview

OpenOverviewTooltip

text

messagetext

Show Overview

CloseOverviewLabel

text

label

Hide Overview

CloseOverviewTooltip

text

messagetext

Hide Overview

 

Message editor

 

 

2.6 Delete the VcLhceSelection Window

We would be using the IVACWindow, so we need to delete the VcLhceSelection window.

Delete window

 

2.7 Add the VcLhceSelctionView to the IVACWindow

VcLhceSelction->Windows->IVACWindow->Context menu->Embed

View

Embed view

 

– Select Embed existing view

– Select VcLhceSelctionView and push Finish button

Embed existing view

 

 

2.8 Add the required controllers to the component controller

Add the required controllers to the component controller of the VAC

– FcFrw

– FcEmployeServices

Add controllers

 

2.9 Copy the methods from the Standard DC

Copy the methods from the Standard DC’s ess/cn/ytxd VcCTXDSelection’s component controller.

Add the following methods and parameters

  • assignTable

            -applView

            -viewTable

            -contentTable

            -firstTime

  • execAction

            -actionType

  • onInit

           -fpm

Copy/Paste all methods to our component controller.

Copy methods

 

Ignore warning message that source code could not be located!. We will add source code later to the methods.

Ignore warning messages

 


2.10 Creating the Contexts

Node RfwIfrm: Drag the context node from the FcRfw to the component controller. Bind all the fields.

RfwIfrm context mapping

Copy the CTXD and CtxdLocal nodes from the Standard DC’s ess/cn/ytxd VcCTXDSelection’s component controller. Rename the Node CTXM to LHCE

and rename the CtxmLocal to the LhceLocal

Context nodes

 


2.11 Add the component controller to the interface controller

Go to the properties tab of interface controller (VcLhceSelection->Component Interface->Interface Controller). Click Add button and select our component controller VcLhceSelection for adding it to the interface controller.

Add component controller to interface controller

 


2.12 Adding the context nodes to the view

To pass the data between component controller and view (and also to trigger

events) we need to create context nodes.

Create the data link between the component controller and the VcLhceSelectionView in the diagram view. Then drag and drop all the nodes (LHCE, LhceLocal and RfwIfrm) from VcLhceSelection to the VcLhceSelectionView.

View context mapping

 


2.13 Adding actions to the VcLhceSelectionView

Let’s add the flowing required actions to the view from the Actions tab of the view.

  • OverViewRowSelection
  • Sel_ListSelection
  • ToggleVisibility

view actions

 


2.14 Define the view elements

Select Layout tab in VcLhceSelectionView  and make sure that you have the Outline

& properties view visible in NWDS

Set layout attribute of RootUIElementContainer to GridLayout and width attribute to 100%

Remove the DefaultTextView element.

Add a transparent container for Link fields with flow layout to the RootUIElementContainer

  • LinkContainer

 

Add the following elements to LinkContainer

– Perspectives_Link                LinkToAction

 

Set the following properties to the Perspectives_Link:

enabled            : LHCE.VCDATA.LINK_ENABLED

text                  : LhceLocal.LinkOverviewLabel

tooltip              : LhceLocal.LinkOverviewTooltip

onAction         : ToggleVisibility

 

Add a transparent container for Overview fields with grid layout to the RootUIElementContainer

  • OverViewContainer

 

Set the following properties to the OverViewContainer:

            layout              : Grid layout

            visible              : LHCE.VCDATA.OVERVIEW_VISIBLE

            width               : 100%

 

Add a transparent container Sel_Container with flow layout to the OverViewContainer

layout              : flow layout

            visible              : LHCE.VCDATA.OVERVIEW_VISIBLE

            paddingBottom: large

 

Add the table OverViewTab to the OverViewContainer

 

Set the following properties to the OverViewTab:

Datasource      : LHCE.VCTABLE.TABLE0.CONTENT_TABLE0

onLeadSelect : OverViewRowSelection

paddingTop     : medium

 

Add the header Header_1 to the table OverViewTab

View layout

 

3 Add the code

3.1 Code that has to be added to the Component Controller

Add the fpm as private variable as shown in the image in the coding area between //@@begin others and //@@end.

private IFPM fpm;

Import statements: Organize your imports to include the necessary import statements

– Context menu->Source->Organize Imports

– Ctrl-Shift-O

comp controller private variables

 

 

3.1.1 Method onInit(…)

    //@@begin onInit()

      String pernr;

 

      this.fpm = fpm;

      fpm.attachComponentToUsage(wdComponentAPI.getComponent(),

                                                                         wdThis.wdGetFcRfwComponentUsage());

      fpm.attachComponentToUsage(wdComponentAPI.getComponent(),        

                                                                               wdThis.wdGetFcEmployeeServicesComponentUsage());

      fpm.registerContext(wdContext.nodeLHCE());

      fpm.registerContext(wdContext.nodeLhceLocal());

      fpm.registerContext(wdContext.nodeRfwIfrm());

 

      wdContext.currentRfwIfrmElement().setBprev_Label(wdThis.wdGetAPI().getTextAccessor().getText(“PrevButtonLabel”));

      wdContext.currentRfwIfrmElement().setBprev_Tooltip(wdThis.wdGetAPI().getTextAccessor().getText(“PrevButtonTooltip”));

      wdContext.currentRfwIfrmElement().setBnext_Label(wdThis.wdGetAPI().getTextAccessor().getText(“NextButtonLabel”));

      wdContext.currentRfwIfrmElement().setBnext_Tooltip(wdThis.wdGetAPI().getTextAccessor().getText(“NextButtonTooltip”));

      wdContext.currentRfwIfrmElement().setBexit_Label(wdThis.wdGetAPI().getTextAccessor().getText(“ExitButtonLabel”));

      wdContext.currentRfwIfrmElement().setBexit_Tooltip(wdThis.wdGetAPI().getTextAccessor().getText(“ExitButtonTooltip”));

      wdContext.currentRfwIfrmElement().setBothers_Label(wdThis.wdGetAPI().getTextAccessor().getText(“PrintButtonLabel”));

      wdContext.currentRfwIfrmElement().setBothers_Tooltip(wdThis.wdGetAPI().getTextAccessor().getText(“PrintButtonTooltip”));

 

      pernr = wdThis.wdGetFcEmployeeServicesInterface().getEmployeenumber();          

      wdThis.wdGetFcRfwInterface().initModel(pernr, “ZXSS_HR_TW_LHCE“, wdContext.nodeLHCE());

 

    //@@end

 

onInit Method

Note: ZXSS_HR_TW_LHCE is the Application ID which we are assigning to this application. This application id would be added to the backend table T7XSS_SER_RFW.

 


3.1.2 Method assignTable(…) and execAction(…)

  public void assignTable( com.sap.tc.webdynpro.progmodel.api.IWDView applView, com.sap.tc.webdynpro.clientserver.uielib.standard.api.IWDTable viewTable, com.sap.tc.webdynpro.progmodel.api.IWDNode contentTable, boolean firstTime )

  {

    //@@begin assignTable()

      wdThis.wdGetFcRfwInterface().assignTable(applView, viewTable, contentTable, firstTime);

    //@@end

  }

 

  public void execAction( java.lang.String actionType )

  {

    //@@begin execAction()

      wdThis.wdGetFcRfwInterface().execAction(actionType);

    //@@end

  }

 

 

3.2 Code that has to be added to the Interface Controller

Go to the Implementation tab of interface controller (VcLhceSelection->Component Interface->Interface Controller) and update the following methods onInit, onEvent, isDirty and isConsistent with the below code.

  public void onInit( com.sap.pcuigp.xssfpm.java.IFPM fpm )

  {

    //@@begin onInit()

    wdThis.wdGetVcLhceSelectionController().onInit(fpm);

    //@@end

  }

 

  public boolean onEvent( )

  {

    //@@begin onEvent()

    return true;

    //@@end

  }

 

  public boolean isDirty( )

  {

    //@@begin isDirty()

    return false;

    //@@end

  }

 

  public boolean isConsistent( )

  {

    //@@begin isConsistent()

    return true;

    //@@end

  }

 

 

3.3 Code that has to be added to the view

Go to the Implementation tab of view VcLhceSelectionView. And add the following code.

 

3.3.1 Method wdDoModifyView(…)

 

  public static void wdDoModifyView(IPrivateVcLhceSelectionView wdThis, IPrivateVcLhceSelectionView.IContextNode wdContext, com.sap.tc.webdynpro.progmodel.api.IWDView view, boolean firstTime)

  {

    //@@begin wdDoModifyView

      //wdContext.nodeVCTABLE().getNodeInfo().addAttributesFromDataNode();

      IWDTable viewTab = (IWDTable) view.getElement(“OverViewTab”);

      wdThis.wdGetVcLhceSelectionController().assignTable(view, viewTab, wdContext.nodeTABLE0(), firstTime);

      if (wdContext.currentVCDATAElement().getOVERVIEW_VISIBLE() == WDVisibility.VISIBLE) {

            // overview is already shown – enable close

                  wdContext.nodeCONTENT_TABLE0().setLeadSelection(wdContext.currentVCDATAElement().getSELECTED_TABROW());

                  wdContext.currentLhceLocalElement().setLinkOverviewLabel(wdThis.wdGetAPI().getComponent().getTextAccessor().getText(“CloseOverviewLabel”));

                  wdContext.currentLhceLocalElement().setLinkOverviewTooltip(wdThis.wdGetAPI().getComponent().getTextAccessor().getText(“CloseOverviewLabel”));

            } else {

                  wdContext.nodeCONTENT_TABLE0().setLeadSelection(-1);

                  wdContext.currentLhceLocalElement().setLinkOverviewLabel(wdThis.wdGetAPI().getComponent().getTextAccessor().getText(“OpenOverviewLabel”));

                  wdContext.currentLhceLocalElement().setLinkOverviewTooltip(wdThis.wdGetAPI().getComponent().getTextAccessor().getText(“OpenOverviewLabel”));

            }

    //@@end

  }

 

3.3.2 Method onActionOverViewRowSelection(…)

  public void onActionOverViewRowSelection(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )

  {

    //@@begin onActionOverViewRowSelection(ServerEvent)

      wdContext.currentVCDATAElement().setSELECTED_TABROW(wdContext.nodeCONTENT_TABLE0().getLeadSelection());

      wdThis.wdGetVcLhceSelectionController().execAction(wdContext.currentVCDATAElement().getACTIONID_TABSEL());

    //@@end

  }

 

3.3.3 Method onActionSel_ListSelection(…)

  public void onActionSel_ListSelection(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )

  {

    //@@begin onActionSel_ListSelection(ServerEvent)

      wdThis.wdGetVcLhceSelectionController().execAction(wdContext.currentVCDATAElement().getACTIONID_DDSEL());

    //@@end

  }

 

3.3.4 Method onActionToggleVisibility(…)

  public void onActionToggleVisibility(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )

  {

    //@@begin onActionToggleVisibility(ServerEvent)

      wdThis.wdGetVcLhceSelectionController().execAction(wdContext.currentVCDATAElement().getACTIONID_LINK());

    //@@end

  }

 

4 Creating the back end application

The business logic is realized in the back end.

In the back end system, we only have to create one ABAP class that implements the IF_HRXSS_SER_RFW interface and define the application specific part of the communication structure.

 

4.1 Creating the ABAP class

We need to create the ABAP class by implementing the IF_HRXSS_SER_RFW interface. IF_HRXSS_SER_RFW is for the ESS Reporting Framework Interface.

 

Create the class ZCL_HRXSS_TW_LHCE by copying the existing class CL_HRXSS_CN_CTXD. Also copy over the data types, structures, tables defined in the class attributes.

 

Let’s see the methods in the class and try to understand them.

 

Method

Description

PROCESS_ACTION

Process action which is sent by front end

L_FILL_OVERVIEW_TAB

Fill overview table

L_NAVIGATION

Processing of Event “Next/Previous Pushbutton”

L_PRODUCE_FORM

Generate the PDF form

L_INIT

Process when init

L_SET_CURRENT_TAXYR

Initialize to Current Tax year

L_SET_NAVIGATION

Set ‘Prev’ and ‘Next’

L_TOGGLE_OVERVIEW_VISIBILITY

Show/Hide Overview Table

L_PROVIDE_OVERVIEWTAB_FIELDCAT

Provide overview table filed catalog

L_STOP_NAVIGATION

Switch off navigation due to an error that has occurred

L_PROCESS_TABROW_SELECTED

Processing of Event “Row in Table Selected”

L_PROCESS_DDBYKEY_SELECTED

Processing of Event “Entry Selected in Dropdown”

L_FILL_MESSAGE

Fill Message using SY Variables

L_PROVIDE_OVERVIEW_CONTENT

Fill IT A_IT_FILTERED_TAXYR

RET_RESULT

Return result

 

 

4.1.1 Method L_PRODUCE_FORM(…)

Here we have to write the custom code/function module to generate the PDF form based on our requirements. Here we need to write the function module for getting the output as xstring. The xstring would be passed to the portal from the framework. In the portal the xstring is converted to url by the used DC ess/rep and gets displayed as PDF in the iFrame. We need to only modify this method.

 

Some of the possible options for generating the PDF for are:

  1. Calling the adobe form and converting the output to xstring.
  2. We can call the SAP Smart forms.
  3. Call the SAP Scripts.
  4. Submit the report directly and by importing the pdf data using the memory ids.
  5. Read and display the PE51 HR forms.
  6. We can send the output to spool, then reading and converting the spool data to xstring etc.

4.2 Configuring the back end table T7XSS_SER_RFW

The back-end table T7XSS_SER_RFW is used for the assignment between the application ID and the class that implements the interface.

Assign the front-end application id ZXSS_HR_TW_LHCE assigned in the onInit(…) method of the component controller to the ABAP class which we created ZCL_HRXSS_TW_LHCE.

Call up the maintenance view of the T7XSS_SER_RFW table.

Create a new entry for the application. Enter the application ID ZXSS_HR_TW_LHCE and the name of the ABAP class ZCL_HRXSS_TW_LHCE.

T7XSS_SER_RFW

 

 

4.3 Configuring the view V_T7XSS_GRT_IFR

Go to the SM30 and make an entry in this view to set the dimensions for the iFrame in which we show the PDF. Here we need to specify the application id, height and width for controlling the size of iFrame.

            If we don’t add the entry, the frame work will show the iFrame with default height and width which is 1200 x 800.

V_T7XSS_GRT_IFR

 

5 Creating the FPM Configuration

5.1 Creating the Application

Go to the context menu of the Web Dynpro->Applications and select Create Application for creating the application for the project.

WD create application

WD Application

Select the existing component and hit Next button.

Use existing content

 

 

Select the following FPM options and click the Finish button for the creation of the application.

WD FPM Component

 


5.2 Set the application properties

Add the following name value application properties to the newly created Application from the Application Properties tab.

  • sap.authentication : true
  • sap.expirationTime : 5000
  • sap.xss.BaseConfigurationID :
  • sap.xss.configurationComponentDC : sap.com/pcui_gp~xssutils
  • sap.xss.configurationComponentName: com.sap.pcuigp.xssutils.ccpcd.CcXssPcd

Note: Let’s leave the sap.xss.BaseConfigurationID as blank for now and lets provide the value after creating the FPM application.

WD app properties without baseconfigid

 

5.3 Build and Deploy the DC

Build and deploy the newly created DC by selecting the Development Component->Build… and Development Component->Deploy from the context menu of the DC as shown.

Note: Let’s build and deploy the code for creating the FPM config required. We cannot run the app as we have not created the backend config and the classes/functionality required form the backend.

Build and deploy

 


5.4 Creating the FPM view

From the Self-Service Administrator role create the LHCESelectionView FPM view.

In the Development Component, select the newly created lhce DC.

For Web Dynpro Component, select our visual component i.e. VcLhceSelection as sown below.

FPM view

 

5.5 Creating the FPM Application

From the Self-Service Administrator role create the LHCE_TW FPM application.

 

5.5.1 Define Road Map step:

As this application has only one visual component, so we don’t need any road map here, so we can leave the Define Road Map step blank.

FPM Appl Define Road Map

 


5.5.2 Define Perspectives step:

Go to the define perspectives by hitting the Next Step button on the Define Road Map step.

 

Click the Create button and add the perspective as shown.

Right click on the LHCESelectionView FPM View and add the FPM View to the Perspective, provide the ID and description.

 

Right click on the VcRfwIFrameView FPM View which is present in the folder Content Provided by SAP->srvconfig->com.sap.pct.erp.srvconfig.ess.employee_self_serivce->Rep->FPM Views and add the FPM View to the Perspective, provide the ID and description as shown.

FPM Appl Define Prespective

 

 

5.5.3 Define Events Links step:

As we don’t have any events, we can leave this blank. And click finish to create the FPM application.

FPM Define Event links

 


5.6 Set the Base Configuration ID

Copy the pcd location (ID) of the LHCE_TW FPM Application. The pcd location is the Base Configuration ID which we have to set in the Web Dynpro application properties for the property sap.xss.BaseConfigurtaionID.

Build and deploy the DC after setting the base configuration id.

FPM Base Configuration ID

 

 

6 Results/Screenshots

After completing all the above steps, let’s run the application to see the output.

 

6.1 Web Dynpro Output

GRT PDF Output

 

6.2 The Overview table screen shot

Show overview table of GRT

To report this post you need to login first.

2 Comments

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

Leave a Reply