Integrating a Web Dynpro Application into the SAP NetWeaver Portal

The present chapter is mainly dedicated to the presentation of the modality to integrate the Web Dynpro applications in the portal,by using the SAP NetWeaver Portal.In the same time, we show how we can communicate between two applications by using the portal eventing (event sender and event receiver).

SAP NetWeaver Portal offers many possibilities to create its content,from Wizards and templates,to applications developed in Web Dynpro ABAP or Web Dynpro Java. Our scope is to integrate into the portal a created Web Dynpro ABAP application named y_ui_contextualpanel. After this, we create a Web Dynpro component that can send a portal event,a Web Dynpro component that can react to a portal event and,finally, we integrate the created applications in the Portal.

To access the portal,we have to navigate to the portal home page, and to use its initial screen to login.

After a successful log-in (with a portal user that has the proper authorizations), we have to connect to the back-end ABAP system, because our Web Dynpro applications are developed in the ABAP system. For the first example, we create an iView required to integrate our application, we create a portal Role and we assign it to the user that needs to access the Web Dynpro application. In order to process the portal events,after we develop the Web Dynpro components and integrate the applications into the two iViews, we create a portal Page, we assign the iViews to our page, the page to a role and the role to the user.

In order to communicate between two applications, even if these applications don’t use the same technologies or run on different systems,we can use the Portal Eventing (event sender and event receiver), with one condition: the applications to be integrated in two portal iViews.

To realize the actual applications,we used a portal user that owns all the required authorizations,including the authorization to create roles and to assign by the created roles.In practice, such authorizations combined for one single user are used only for the testing systems;in the real systems,
the attributions of the administrators(e.g. user administrator,content administrator, system administrator) are very well defined (separated).In the same time,a user that doesn’t own administrative roles can access only those functionalities that have been assigned to him by the administrator.

Creating a Folder

We begin our exercise with the creation of a folder to be used to hold all the subsequently created portal objects. Into the Portal Catalogue,we create a folder named Book.To perform this operation,we have to open the contextual menu (by right-clicking on the folder where we want to create our folder)and to choose  New --> Folder.A wizard is open and we can create it.

Creating a new folder

As we can see,we have to enter some information, as follows:

• Folder Name – the name of the new created folder
• Folder ID – unique identifier for the new created folder
• Master Language – the original language for all the portal objects sub sequently created in this folder
• Description – brief description of the newly created folder

After saving the information,the Framework generates the created book folder into the Portal Catalogue.In order to set other properties for it,we can use the available wizard.We have to mention that the book folder inherits the permissions from its parent folder.

Connecting to the Back-End ABAP System

In the next step,we connect to the back-end ABAP system. To do this,we create a new System: System Administration --> System Configuration --> System Landscape that opens the System Landscape Editor. Here, we navigate to our book folder and open the contextual menu,by right-clicking. By using New --> System (from template), a Wizard is open and offers the possibility to define a new system through some easy steps.

Creating a new system

In the first wizard step,we have to choose a template.
In the next step, we have to enter general properties, as follows: System Name, System ID, Master Language, Description.

Template selection

General properties

After this,we can open the object editor and configure our system.We start with the Property Category named Web Application Server(Web AS).

Web application server property category

For the next configuration,we navigate to the Connector Property Category required to realize the configuration:

In the next configuration,we go to User Management Property Category required to set the mode the users log-on to our ABAP backend system

User management property category

As Logon Methods,we have used the SAPLOGONTICKET. Each system must have at least one system alias, a name defined by the system administrator,required to refer the specified system.By using the System Aliases tool,we set an alias name for our ABAP backend system.

Creating an alias name for our ABAP system

Now,we are able to test our system configuration by using the Connection test tool.

Testing the connection to the ABAP system

In case a system configuration for the ABAP back-end already exists,we don’t need to create another one.

Creating an iView

An iView (integrated View) represents the smallest element we can create into the SAP NetWeaver Portal.In our case,we use an iView to integrate our Web Dynpro application.To create a new iView into our book folder,we have to navigate to the Content Administration --> Portal Content and,by right-clicking on the folder name, we open the contextual menu (Fig).The Portal Content Studio represents the central environment we can use to create the portal content.

Creating an iView into our book folder

Through a Wizard,we have the possibility to create a new iView, by using:

• iView template;
• Portal content;
• Web Dynpro Java application.

We choose the first option – iView template, because our scope is to integrate the Web Dynpro ABAP application into the portal

In the next Wizard step,we can choose a template from the available template list.Here, we find many templates,e.g.URL iView (used to integrate a Website into the portal),SAP Transaction (iView used to show a SAP transaction into the portal), SAP Web Dynpro iView (required to integrate a Web Dynpro ABAP or Java application)

Selecting a template from the existing template list

In the next step,we have the possibility to provide the iView General Properties,as follows:

• iView Name – the iView name displayed in Portal Catalogue, etc.;
• iView ID – unique identifier for the created iView;
• Master Language – the original language the properties are generated in;
• Description – optional description.

iView general properties

In the next Wizard step, we can choose between the integration of a Web Dynpro ABAP application or a Web Dynpro Java application.

Web Dynpro for ABAP iView

In the last step,we enter the parameters of our Web Dynpro ABAP application. When we press the Finish button,the Framework starts to process the provided information and generates the proper iView. We can test our Web Dynpro application by choosing Preview from the contextual menu.

Web Dynpro parameters

Testing the iView

Creating a Role and Role Assignment

By using a role,we can specify which services can be accessed by a user or a group of users,and we can define which content can be seen in the portal by the respective user or user group.In this example, we create a portal role. In the next chapter,we’ll see how we can create a role in the ABAP back-end system to grant delete capability for the database table YPERSON through a Web Dynpro application. In the book folder, we create the role by using the contextual menu New --> Role.

Creating a role

As a result,the Wizard generates a newly created role:

By using the Delta Link concept, we can assign the iView to our new role.

Assigning iView to role, by using the Delta Link concept

As a result, we can see the created assignment:

Then,we assign the created portal role to our test user Gellert.In order to realize this assignation, we access 

User Administration --> Identity Management and search for our test user.

Searching for a user

We select the user and, as a result, in the lower part of the screen we can see the details of the selected user.By using the Modify button, we can add the newly created role to the respective user.

Assigning a portal role to the Gellert user

By using the Add button,we attach the role(after selection)to the list of roles assigned to this user.

Running the Application into the Portal

In order to see the top-level navigation and the page defined in the assigned role,we save our changes,we logoff and then we login again.After logging-in,we can see it the upper part of the screen,on the main navigation bar,the new item named CONTEXTUALMENU UI element, corresponding to our newly attached role.

Web Dynpro running application into the portal

Triggering a Portal Event

Web Dynpro through the Portal – Manager offers some methods to be used to trigger events and to react to portal events. To do this, we can use the methods of the IF_WD_PORTAL_INTEGRATION interface,as follows:

• FIRE – Trigger portal event;
• SUBSCRIBE_EVENT – Register portal event;
• UNSUBSCRIBE_EVENT – Delete portal event registration.

For the scope of this example,we re-create our firstly created component; but,in this case, we enter the name in the Web Dynpro component that triggers the portal event and we display the greeting in the second Web Dynpro component that reacts to the portal event.

The Portal Eventing concept is appropriate for communication between applications created by using different technologies.But, through this example, we will create the application that triggers the portal eventing and the application that react to the portal event by using the same technology,

Web Dynpro ABAP.Our purpose is to present the both cases and, depending on the requirements, to choose one of the variants (trigger or receiver)in combination with an application developed into another technology(Web Dynpro Java, Visual Composer, etc.).

Processing portal events

We start with the creation of the Web Dynpro component able to trigger a portal event by using the FIRE method. The structure of this component and the view layout are presented.

Web Dynpro component structure and view layout

In the context view,we have created an attribute named “NAME”, of STRING type.When the user presses the “Event trigger” button, we use the FIRE method to trigger a portal event that will be subsequently passed by the portal to the second iView that has been registered for this event,respective to the second Web Dynpro ABAP application. In this way,the events can be transported between the iViews (Web Dynpro applications or applications that use other technologies).

Listing shows the coding of the onactionevent_trigger event handler method. As we can see,after passing the value of the context attribute into the local variable LV_NAME,we use the FIRE method of the IF_WD_PORTAL_INTEGRATI

onactionevent_trigger event handler method

  METHOD onactionevent_trigger .
  DATA lv_name TYPE string.
  wd_context->get_attribute(EXPORTING
  name = `NAME`
  IMPORTING
  value = lv_name).
  DATA: lr_api_component TYPE REF TO if_wd_component,
  lr_portal_manager TYPE REF TO if_wd_portal_integration.
  lr_api_component = wd_comp_controller->wd_get_api( ).
  lr_portal_manager = lr_api_component->get_portal_manager( ).
  lr_portal_manager->fire(portal_event_namespace = 'sap.example
  portal_event_name = 'person_name'
  portal_event_parameter = lv_name).
  ENDMETHOD.

interface to fire the portal event with the name “person_name”. This method has three importing parameters of STRING type:

• PORTAL_EVENT_NAMESPACE – namespace in which the event is stored;
• PORTAL_EVENT_NAME – name of the event;
• PORTAL_EVENT_PARAMETER – parameter.

These values have to match with the event receiver application. Web Dynpro Wizard offers the required support to work with portal events.

Web Dynpro Wizard and portal manager

Reacting to a Portal Event

Now, we are creating the Web Dynpro application able to react to the event triggered in the first iView in the portal.The structure of this component,the view layout and the context view are presented.

Web Dynpro component structure,view layout and context view

In the context view,we need only the attribute “NAME”, where we pass the parameter value concatenate with a WELCOME string. To be capable to register our Web Dynpro application for a portal event, we have to use the SUBSCRIBE_EVENT method of the same IF_WD_PORTAL_INTEGRATION interface. This method shall be used into the wdDoInit Hook Method.

The wdDoInit Hook method

  METHOD wddoinit .
  DATA lr_api_component TYPE REF TO if_wd_component.
  DATA lr_portal_manager TYPE REF TO if_wd_portal_integration.
  lr_api_component = wd_comp_controller->wd_get_api( ).
  lr_portal_manager = lr_api_component->get_portal_manager( ).
  DATA lr_api_controller TYPE REF TO if_wd_view_controller.
  lr_api_controller ?= wd_this->wd_get_api( ).
  lr_portal_manager->subscribe_event(
  portal_event_namespace = 'sap.example'
  portal_event_name = 'person_name'
  view = lr_api_controller
  action = ‘EVENT_RECEIVER’
  ).
  ENDMETHOD.

The SUBSCRIBE_EVENT method has three parameters of STRING type and one parameter type ref to IF_WD_VIEW_CONTROLLER. As we can see, this method needs to specify not only the namespace,the name of the event and the view, but also the name of the action to be called when the event occurs. We have created an action named “EVENT_RECEIVER”. The event handler method is presented.

The onactionevent_receiver event handler method

  METHOD onactionevent_receiver .
  DATA lv_event_name TYPE string.
  DATA lv_event_parameter TYPE string.
  lv_event_name = wdevent->get_string(name = 'PORTAL_EVENT_NAME').
  IF lv_event_name = 'person_name'.
  lv_event_parameter = wdevent-
  >get_string(name = 'PORTAL_EVENT_PARAMETER').
  CONCATENATE 'WELCOME' lv_event_parameter INTO lv_event_parameter
  SEPARATED BY space.
  wd_context->set_attribute(name = 'NAME'
  value = lv_event_parameter).
  ENDIF.
  ENDMETHOD.

By using the method GET_STRING (parameter: PORTAL_EVENT_NAME), we pass the value of the portal event name into the local variable lv_event_name.Then, in case this local variable has the value “person_name”(our defined even tname),we have to obtain the value of the parameter.

By using the method GET_STRING (parameter: PORTAL_EVENT_PARAMETER), we can pass the parameter of the portal event to the action parameter WDEVENT and to our local variable lv_event_parameter In the last step, we create the greeting and we pass this value in the context attribute.

Creating a Page

In this case,we need the two iViews to appear in the same screen.This is the reason why we use a Page.Into a portal Page,we can insert iViews or other portal Pages and we can set a proper layout.

To create a Page into our book folder, we right-click on the folder name and, from the contextual menu, we choose New --> Page. A Wizard guides us through the required steps to create our first portal Page.In the first step,we have to enter the Page properties .

Page properties Wizard step

In the next step,we have to choose the page template on which to ground the new portal page (here we have chosen “Default Page Template”)and in the last step, before OVERVIEW and SAVE,we choose the layout to be assigned to the page.This layout shows how the content will be arranged.

Page layouts Wizard step

In our book folder,we create two iViews required to integrate our two created Web Dynpro applications.The structure of the book folder.

Book folder structure

After creating iViews Page, all we have to do is to assign the two iViews: Event sender and Event receiver to our portal Page named “Portal event”.To perform this operation,we use the delta link concept firstly applied when we have assigned the iView to the Role. Now we are able to see the Page Content.

Page content

Running the Application that Processes Portal Events

All we have to do is to assign the portal Page to our role (through the delta link concept) and to perform a logoff and a new login into the portal.Figure shows the runtime result.

Runtime

In case we want to differently arrange the display of the two iViews into the Page,we can use the Page Layout.We can also change the layouts by dragging &dropping and rearrange the iViews that define the content.

Page Layout