WebDynpro for Java

WebDynpro for Java

Consuming XI Web Service in Java WebDynpro application Enable/Disable & Show/Hide UI Elements in Web Dynpro for Java Creating a simple Web Dynpro application using Simple Graphics Creating Extended Value Selector (EVS) - Static and Dynamic in Web Dynpro for Java Dynamic Runtime Manipulation-Context & View layout Displaying a Smart form as PDF in Enterprise portal using WebDynpro for Java

Consuming XI Web Service in Java WebDynpro application

Steps to configure the scenario:

Step1: Create a Synchronous Scenario (SOAP to RFC) and Generate WSDL in PI7.0

Step2: Import the WSDL in NWDS and Create Views in NWDS

Step3: Deploy the Java Web Dynpro in J2EE Engine.

Step4: Test the Scenario.

Steps in detail:

Step1: Create a Scenario SOAP to RFC and Generate WSDL in PI7.0

When we send a Customer Number as Request to RFC it has to fetch the Customer Details as Response.

Configure SLD as per the requirement and Import the BAPI in IR: BAPI_CUSTOMER_GETDETAIL2

Create Data Types

Create Message Types:

Create Message Interface

Create Mappings for Request and Response

Create Interface Mapping

Save and Activate all the Objects in IR.

Now Log in to Integration Directory and Create a Configuration Scenario

Create Business Service and Create Communication Channels

Create a Communication Channel of type SOAP as Sender with QOS = BE

Create a Communication Channel of type RFC as Receiver

Create a Sender Agreement

Create a Receiver Agreement

Create a Receiver Determination

Create a Interface Determination

The below screenshot shows all the Objects under Configuration Scenario.

Now Define a Web service as shown in the Screenshot

Enter the below path by giving the host and port details

http://:/XISOAPAdapter/MessageServlet?channel=:BS_CDWS:CC_soap_sender

Now save the wsdl.

Step2: Import the WSDL in NWDS and Create Views in NWDS

Now got to the NWDS (Netweaver Developers Studio)

Create a new WebDynpro Project

Enter the Project Name for JavaWebDynpro and say Finish.

Now Create a Model

Select Import Web Service Model and Say Next

Enter the Model Name, Model Package and select the radio button of Local File System or URL and say Next.

Import the WSDL file (Which was created in PI(XI))

Check the path of the Target Address by clicking on Logical Ports.

Create two Views called StartView and ResultView

Create outbound plug and Inbound plug by right clicking on View

For StartView:

Outbound plug: ToResultView

Inbound plug: FromResultView

Actions for StartView:

Layout for StartView:

Create a Layout for Start View

Click on the root element and say Apply Template

Now select Form and say Next.

Select the Attributes to bind to bind them to form elements

In the Editor Column select InputField

At last my Layout for StartView looks like

For ResultView:

Outbound plug: ToStartView

Inbound plug: FromStartView

Actions for ResultView:

Create a Layout for ResultView

Select the Attributes to bind to bind them to form elements

In the Editor Column select TextView

At last my Layout for StartView looks like

Check the Diagram View

.

In the Diagram View for a Component, Choose Component Controller right click and say Apply Template

Now select Service Controller and say Next

Now select the Model class for the Model binding and a method called

executeRequest_CDWS_MI_CDWS_MI will be generated.

Check the Context Elements you want to bind.

Using Data link connect the StartView and Component Controller and also do Context Mapping.

Later Using Data link Connect ResultView and Component Controller and also do Context Mapping.

Using Data link Connect Component Controller and Model (FujitsuModel) and also do Context Mapping..

After doing above steps the total Diagram View looks like in below screenshot.

Add few coding lines for method executeRequest_CDWS_MI_CDWS_MI( ) as follows

This coding lines are mandatory to communicate with XI(PI).We should mention the userid and password for XI system.

public void executeRequest_CDWS_MI_CDWS_MI( ) { //@@begin executeRequest_CDWS_MI_CDWS_MI()

wdContext.currentRequest_CDWS_MI_CDWS_MIElement().modelObject()._setUser("PISUPER"); wdContext.currentRequest_CDWS_MI_CDWS_MIElement().modelObject()._setPassword("xxxxxxxx"); //$$begin Service Controller(-1540004708) IWDMessageManager manager = wdComponentAPI.getMessageManager(); try { wdContext.currentRequest_CDWS_MI_CDWS_MIElement().modelObject().execute(); // wdContext.nodeResponse().invalidate(); wdContext.nodeResult().invalidate(); }

Step3: Deploy the Java Web Dynpro in J2EE Engine.

Create an Application

After creating the Application Save the objects and say

Deploy New Archive and Run

Enter the SDM Password to deploy JavaWebDynpro in to J2EE Engine.

Step 4: Test the Scenario

After Successful Deployment Enter the Customer Number and say GetDetails now the response from RFC via XI (PI) will be found in next view.

Response from RFC via XI (PI)

Now check the Message Processing in SXMB_MONI of XI (PI).

Enable/Disable & Show/Hide UI Elements in Web Dynpro Java

Scenario: Enabling/Disabling and Showing/Hiding the UI elements during runtime (as shown below).

Step 1. Creating a Web dynpro project.

Navigation:

Open NWDS Open Web Dynpro explorer. File->New->Web Dynpro project Give the name of the project as Enable_Disable_Show_Hide_UI_Elements.

Step 2. Creating a Web Dynpro Component.

Create a Web Dynpro component in a package.

Confirm by choosing finish.

Save the changes by clicking on save all metadata on the application tool bar.

Step 3. Creating Context Elements.

Edit the context of the view MainView.

Create the following attributes in the context of the view MainView:

First Name Last Name Date of Birth Date of Joining Enablekey Showkey Booleankey Visibilitykey

Booleankey should be of Data Type Boolean, Visibilitykey of type UI Element data type Visible.


Select the context attribute and switch to the properties tab of it.

Choose Visibility property for visibility attribute as shown above.

Press OK to continue.


Step 4. Data Binding on the Main view

Choose the layout tab of the view MainView.

By right Clicking on RootUIElementContainer select Insert Child and Create two groups one for the Enable/disable UIelements and the other for Show/Hide the UI Elements.

Create two Radio Buttons by Inserting Child in Each Group.

Each of The Group is separated by Bread Crumb.

Right Click on Group and click Apply template.

Choose form.

Choose DateofBirth, DateofJoining, FirstName, LastName and Click next.


Finally the View Will be as shown below:

...

Step 5. Assigning Properties for the Input Fields of Main view in Property Tab

For Enable or Disable Fields group select the Input Fields and Make the following changes in the Property tab.

For Input Fields in the enabled make it as Booleankey of the context attribute.

For Radio Buttons Enable and Disable in Property tab give keyToSelect as E & D Respectively and Selected key as Enablekey of the Context Attribute.

For Enable Radio button, create an Event Enable on Select in Property tab.

For Disable Radio button, create an Event Disable on Select in Property tab.

For Show or Hide Group also make changes in the Property tab for all Input Fields make the Visible as VisibilityKey of The context Tab.

For Show or Hide Radio Buttons Disable in Property tab give keyToSelect as S & H Respectively and Selected key as Show of the Context Attribute.

For Show Radio button, create an Event Show on Select in Property tab.

For Hide Radio Button Create an Event Hide on Select in Property tab.

Step 6. Code for the onAction Methods like Enable, Disable, Show, and Hide.

In Implementation tab, write the following Code for both the Events Enable and Disable which are created as methods.

In Implementation tab Write a Piece of Code for both the Events Show and Hide which are created as methods.


Step 7. Creating an application for the web dynpro project

Web dynpro explorer->Enable_Disable_Show_Hide_UI_Elements->web dynpro-> Applications.

Right click on application and create a new application.

Step 8. Rebuild the project

Web dynpro explorer-> Enable_Disable_Show_Hide_UI_Elements

Right click on Enable_Disable_Show_Hide_UI_Elements .

Choose rebuild project.

Step 9. Deploy and run the application

Web dynpro explorer-> Enable_Disable_Show_Hide_UI_Elements -->web dynpro->Applications --> EDSH_Application.

Right click on Application and choose Deploy new archive and run.

You can see the output in the browser as shown below.

Default View of the Webpage, and when enable is clicked.

When Disabled and Hide is Clicked

When Enabled and Shown

Using Simple Graphics in a Web Dynpro application

Description:

Add a Simple Business Graphic to your Web Dynpro application

Go to NWDSCreate Web Dynpro Project (SimpleGraphics)

Right click on componentsCreate a Component (SimpleGraphicsV)

Open the SimpleGraphicsV. Right click on the RootUIElementContainer in the Outline pane and select Insert Child. Select the element Type of BusinessGraphics. Give your Element the name Simple Graphic

You can see it both in the Outline pane, and the Layout pane, both shown here.

Highlight SimpleGraphic element in your view. Then go to the Property view in the bottom right hand pane. Ensure that the property chartType is set to columns.

Change the height property to 300

Change the width property to 500

You will see that Business graphic in your Views layout has been resized.

Right Click on the SimpleGraphic element in the Outline pane. In the menu select Insert

Category. Right Click on theSimpleGraphic element in the Outline pane. In the menu select Insert Series .Add 2 other simple series to the BusinessGraphics.

Set the Label properties of your Simple Series as follows

Go to the Context view of your View. Right Click on the Context node and in the menu select New Value Node .In the popup give it the name SimpleGraphic .Click Finish.

Add 4 Value Attributes to the node SimpleGraphic in your context with the names:

Category, ValueOne,ValueTwo and ValueThree. Category should be of type stringValueOne, ValueTwo, and ValueThree should be of type double

Select the Layout of the SimpleGraphicsView.

- In the Outline pane of the SimpleGraphicsView, highlight the SimpleGraphic node.

- In the Property view in the bottom right hand pane, set the seriesSource property.

- Click the button shown in the seriesSource This will show a popup window of your

Views context.

- In the context popup select the node SimpleGraphic, then click OK.

- The seriesSource property will then be set as shown.

Set the Category view elements description property to the context SimpleGraphic.Category

Set the SimpleSeries1 view elements value property to the contextSimpleGraphic.ValueOne.

Set the SimpleSeries2 view elements value property to the contextSimpleGraphic.ValueTwo.

Set the SimpleSeries3 view elements value property to contextSimpleGraphic.ValueThree.

Add the code to fill the data to view context

Go to implementation tab of SimplegraphicVAdd the code in wdDoinit() method

Right click on Application Select create application (simpleGraphicAppl) NextNextFinish.

Rightclick on SimpleGraphicsApplDeploy Archive and Run

The output as follows

Introduction to chart Designer to Business Graphics(Extension to first application)

Open the view SimpleGraphicsV.Go to the Layout of the view.In the Outline pane, right click on your Business Graphic SimpleGraphic and in the menu select Start Chart Designer .

The Chart Designer will show up in the upper right hand pane for your Business Grahphic. It is shown in the image below.

Edit the properties of your business graphics in chart designer.

Set the Title of your businessgraphic. Just highlight theTitle element in the Overview pain. Then enter your title in the Caption property. Set the Legend caption. Same process you did for the Title, but for Legend.

Set the Border properties of the legend to have a solid black border. Set the Title and Unit caption property under the Categoryaxis element. (Open up the node, you will see a Title element).

Set the Unit caption as Months. Do the same as above but for the first Value Axis node.

- Set the Value Axis Title Caption

- Set the Value Axis Unit Caption

Change the Background Color. Highlight the Background element in the Overview pane.

Under Area Properties you can set the color. Do not forget to save your Metadata.

Right click on SimplegrahicsApplDeploy Archive and Run.

The output as follows:

Creating Extended Value Selector (EVS) - Static and Dynamic in Web Dynpro for Java

Description:

Extended value selector (EVS) is a type of value-help where a dictionary simple type is bound to an input filed.

During the runtime a table pops up which allows its entries to be sorted and filtered. Extended value selector is used when the values exceed 30. The following example explains about the steps to be followed in order to use the extended value

selector in web dynpro java.

Step 1. Creating a web dynpro project.

Navigation:

Open NWDS Open web Dynpro explorer. File->New->Web Dynpro project Give the name of the project as Extended_Value_Selector

Step 2. Creating a simple type Object.

Navigation:

Web dynpro explorer->Extended_Value_Selector->Dictionaries->local dictionary->data types->simple types.

Confirm by choosing finish. Let the data type be string. Choose the tab Enumeration.

Add value and text for the new element. Confirm by choosing finish. Populate the enumeration with some elements.


Step 3. Creating a web dynpro component.

Create a webdynpro component in the same package as that of the simple type.


Step 4. Creating context elements

Edit the context of the view EVS_ComponentView. Create a value attribute Object in the context of the view EVS_ComponentView

Confirm by choosing finish. Select the context attribute and switch to the properties tab of it. Assign the dictionary simple type Object as type the attribute.

Press ok to continue.


Step 5. Applying template for the view

Choose the tab layout of the view EVS_ComponentView. Create two groups one for the static approach and the other for the dynamic approach. Apply template to the view. Choose form.

Check the attribute Object.

Choose next. Change the Editor property of the attribute to input field.

Confirm by choosing finish. Create a new value attribute Object _Dynamic of type string for Dynamic approach in the context

of the view EVS_ComponentView

Confirm by choosing finish. Apply template to group dynamic by selecting the context attribute Object_Dynamic.

... Save the changes by clicking on save all metadata on the application tool bar.

Choose next. Change the Editor property of the attribute to input field.


Step 6. Code for populating the values dynamically

Select the implementation tab of the EVS_ComponentView. Write the following code under the method wdDoInit();

Step 7. Creating an application for the web dynpro project

Navigation.

Web dynpro explorer->Extended_Value_Selector->web dynpro->Application. Right click on application and create a new application.

Step 8. Rebuild the project

Navigation.

Web dynpro explorer->Extended_Value_Selector

Right click on Extended_Value_Selector. Choose rebuild project.

Step 9. Deploy and run the application

Navigation

Web dynpro explorer->Extended_Value_Selector->web dynpro->application->EVSApplication.

Right click on EVS Application and choose Deploy new archive and run. You can see the output in the browser as shown below.

A table pops up with the key and display texts once you click on the icon beside the input field.

We can Filter the values according to the starting letter.

We can also sort the key and texts using selected column as key.

Dynamic Runtime Manipulation-Context & View layout using Web Dynpro for Java

Customer-Business Case

There might be some scenarios where in we need to dynamically add nodes, their attributes to the view controller context. In this case the View Layout needs to be defined dynamically using the above context nodes and the attributes.

Following is the solution for the same:

Project name: DynamicUIManip

Package com.sap.training

Window name: MainWindow

View Name: Dynamic View

Click on Finish:

Path-> NWDS->File->New-> WebDynPro Project

Since everything in this component will be created dynamically at runtime, both the view context and the view layout will remain empty.

View Context :

We can find here the context is empty. The context will be creating dynamically at runtime.

Part 1: Creating View Context Dynamically

Implementation In View Controller public void wdDoInit() { //@@begin wdDoInit() IWDNodeInfo rootNodeInfo = wdContext.getNodeInfo(); IWDNodeInfo soNodeInfo = rootNodeInfo.addChild( "SalesOrders",null,true,false,true,false,true,true,null,null,null); soNodeInfo.addAttribute("OrderNo","ddic:com.sap.dictionary.integer"); soNodeInfo.addAttribute("SalesDate","ddic:com.sap.dictionary.date"); soNodeInfo.addAttribute("SalesRep","ddic:com.sap.dictionary.string"); soNodeInfo.addAttribute("LongText","ddic:com.sap.dictionary.string"); IWDNode soNode = wdContext.getChildNode("SalesOrders",0); IWDNodeElement soElement = soNode.createElement(); soElement.setAttributeValue("OrderNo",new Integer(10)); soElement.setAttributeValue("SalesDate",new Date(System.currentTimeMillis())); soElement.setAttributeValue("SalesRep","Simpson"); soElement.setAttributeValue("LongText","Printer Supplies"); soNode.addElement(soElement); //@@end } Now the Node SalesOrder IS created with the following Attributes: SalesOrder (node) OrderNo :ddic:com.sap.dictionary.integer SalesDate: ddic:com.sap.dictionary.date SalesRep: ddic:com.sap.dictionary.string LongText: ddic:com.sap.dictionary.string Part 2: Creating View Layout Dynamically For the above Created Dynamic Context we ar going to create View layout. Locate The method WDDOModfify view public static void wdDoModifyView(IPrivateMainView wdThis, IPrivateMainView.IContextNode wdContext,com.sap.tc.webdynpro.progmodel.api.IWDView view, boolean firstTime) { //@@begin wdDoModifyView if (firstTime) { IWDTransparentContainer rootElement = (IWDTransparentContainer) view.getRootElement(); rootElement.createLayout(IWDMatrixLayout.class); IWDNodeInfo soNodeInfo = wdContext.getChildNode("SalesOrders", 0).getNodeInfo(); for (Iterator iter = soNodeInfo.iterateAttributes(); iter.hasNext();) { IWDAttributeInfo soAttrInfo = (IWDAttributeInfo) iter.next();

IWDLabel label =(IWDLabel) view.createElement( IWDLabel.class, soAttrInfo.getName() + "Label"); label.setText(soAttrInfo.getName()); label.createLayoutData(IWDMatrixHeadData.class); label.setDesign(WDLabelDesign.LIGHT); label.setLabelFor(soAttrInfo.getName() + "Input"); rootElement.addChild(label); IWDInputField ioField = (IWDInputField) view.createElement( IWDInputField.class, soAttrInfo.getName() + "Input"); ioField.createLayoutData(IWDMatrixData.class); ioField.bindValue(soAttrInfo); rootElement.addChild(ioField); } // @@end }

Part3- Creating Application and Testing

Create web Dynpro Application: DynamicManipAppl

Enter The name Of Application

Click on Next

Click on Next

Click on Finish

Build The Project

Create Archive

Deploy New Archive And Run

Output :

DisplayingaSmartformasPDFinEnterpriseportalusingWebDynproforJava

I have seen many questions on how a smart form should be displayed in portal. To answer this question a person should have both Portal and ABAP knowledge. By giving this basic information I want to make sure that displaying a smart form as PDF is a simple task.

Let me start from R/3 side

Create a smart form. Here I have created a simple smart form which displays Welcome to SAP Smart forms.

Now create a function module with the following export parameter:

Place the following code in the function module

data :

lv_fnam type RS38L_FNAM,

gs_control TYPE ssfctrlop,

gs_output_options TYPE ssfcompop,

gs_otfdata TYPE itcoo,

gs_job_output_info TYPE ssfcrescl,

gt_otfdata TYPE STANDARD TABLE OF itcoo INITIAL SIZE 0.

CALL FUNCTION 'SSF_FUNCTION_MODULE_NAME'

EXPORTING

formname = 'YNAG_TEST_PDF'

IMPORTING

FM_NAME = lv_fnam

EXCEPTIONS

NO_FORM = 1

NO_FUNCTION_MODULE = 2

OTHERS = 3 .

IF sy-subrc 0.

MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO

WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.

ENDIF.

CLEAR gs_job_output_info.

CLEAR gs_job_output_info-otfdata.

MOVE :

'X' TO gs_control-no_dialog,

'X' TO gs_control-getotf,

'LOCL'(047) TO GS_OUTPUT_OPTIONS-TDDEST.

CALL FUNCTION lv_fnam

EXPORTING

CONTROL_PARAMETERS = gs_control

OUTPUT_OPTIONS = gs_output_options

USER_SETTINGS = space

IMPORTING

JOB_OUTPUT_INFO = gs_job_output_info

EXCEPTIONS

FORMATTING_ERROR = 1

INTERNAL_ERROR = 2

SEND_ERROR = 3

USER_CANCELED = 4

OTHERS = 5 .

IF sy-subrc 0.

MESSAGE ID SY-MSGID TYPE SY-MSGTY NUMBER SY-MSGNO

WITH SY-MSGV1 SY-MSGV2 SY-MSGV3 SY-MSGV4.

ENDIF.

*Populate OTF data table

LOOP AT gs_job_output_info-otfdata INTO gs_otfdata.

APPEND gs_otfdata TO gt_otfdata.

CLEAR gs_otfdata.

ENDLOOP. " LOOP AT t_outtab-otfdata

DATA: lv_bytes TYPE p,

lv_bin_file type xstring,

gt_pdfdata TYPE STANDARD TABLE

OF tline

INITIAL SIZE 0.

* Convert OTF into PDF

CALL FUNCTION 'CONVERT_OTF'

EXPORTING

format = 'PDF'

max_linewidth = 255

IMPORTING

bin_filesize = lv_bytes

BIN_FILE = bin_file

TABLES

otf = gt_otfdata

lines = gt_pdfdata

EXCEPTIONS

err_max_linewidth = 1

err_format = 2

err_conv_not_possible = 3

OTHERS = 4.

Make sure that the function module is marked remote enabled.

With this we are done on the R/3 side.

In NWDS (Net Weaver Developer Studio) create an Adaptive RFC model which points to the FM created in R/3.

Give model name

Now create an application to display the PDF

Insert a frame inside the view

Internal is a value node and url is value attribute of type string.

Place the following code in Init method

public void wdDoInit()

{

//@@begin wdDoInit()

Ynag_Test_Pdf_1_Input input = new Ynag_Test_Pdf_Input();

wdContext.nodeYnag_Test_Pdf_Input().bind(input);

try {

wdContext.currentYnag_Test_Pdf_InputElement().modelObject().execute();

} catch (WDDynamicRFCExecuteException e) {

e.printStackTrace();

wdContext.currentContextElement().setSdfgdsfsd(e.getMessage());

} wdContext.currentInternalElement().setUrl(convertXStringToUrl(wdContext.currentOutputElement().getBin_File()));

//@@end

}

//@@begin others

public String convertXStringToUrl(byte[] doc_content){

String url = "";

WDWebResourceType webResType = WDWebResourceType.PDF;

IWDWebResource webResource = WDWebResource.getWebResource(doc_content, webResType);

try {

url = webResource.getURL();

} catch (WDURLException e) {

e.printStackTrace();

}

return url;

}

//@@end

If you are using single sign on make sure to enable User authentication in the application parameters.

User details are required for this as it is using Single sign on to connect to R/3.

In this case we have hard coded the Smart form to be used.

If you want it in dynamic way FM interfaces need to be changed accordingly.

Documents

WebDynpro for Java