Let’s Web Dynpro. Part II

To some degree I, we provided you with an exceptionally essential outline of Web Dynpro. Part II. In this part we will make one Web Dynpro Application. 

Before we foster our most memorable Web Dynpro. Part II application, let me ask, what steps do you follow while composing an ordinary ABAP program/report in SE38/SE80, which has a choice screen; a result screen and a custom exchange code?

Let me note down that steps:
ABAP Editor or Object navigator
1. Go to SE38 or SE80 and create a program. Give the description and attributes and save it in transport or as local object.
AT SELECTION SCREEN and SCREEN EVENTS
2. Declare the selection screen parameters and select options thereby creating a selection screen.
3. Declare global data which would be used throughout the program.
START OF SELECTION
4. Fetch data from database tables.
5. Try to modularize (using subroutines) your data fetches if from numerous tables.
6. Declare local data which would be used in subroutines.
END OF SELECTION
7. Massage the data and prepare the final data for output (modularize here as well).
8. Display the output.
9. Activate your program.
Create Custom T-Code for the program using SE93.
10. Create transaction for your report.

Congrats!!! You just made your most memorable Web Dynpro. Part II Application. Without a doubt. We will make a cool WD report in comparable strides as referenced previously.

We should expect the prerequisite of your utilitarian particular says: Make an Entryway screen which would show the SAP client’s most memorable name and last name. Utilize table view USER_ADDR to recover information.

Glad to get your most memorable Web Dynpro. Part II Utilitarian Detail. How about we bounce into the framework.

Please scroll up and walk through the steps.
Step 1: Go to SE80 Article Pilot. Select Web Dynpro Comp./Intf from the dropdown. Give a name to the WD part which you need to make and hit enter. You will receive a message as displayed in picture beneath.

1

Give a significance portrayal and name (as displayed in next picture) for your default/principal Window and View. Name it according to your task standard. Generally we have WI_ or W_ for windows and VI_ or V_ for sees. Then save it. Give fitting bundle and transport number else save it as nearby article to move to next climate. Presently you have made your most memorable WD part which is unfilled.

2

Step 2: Proclaim choice screen boundaries. Since it would be utilized worldwide, let us characterize the variable (setting) in the part regulator (worldwide/top). Double tap on COMPONENTCONTROLLER in the left board and snap the Setting Tab in the right board.

3

Right snap the Specific circumstance – >Create-> Hub. This is the name of your construction utilized in choice screen boundary. We by and large use CN_ for setting hub and CA_ for setting property. Give a significant name and hit enter.

4
5

You made a design, yet it is unfilled. You want fields in the construction to make it complete. Right snap on the setting name CN_SELECTION_SCR – >Create->Attribute; give a name and information kind of the field and save and initiate every one of the objects of the parts. This is the worldwide variable for the choice screen.

7

Tip: Attempt to actuate your part after each significant change/improvement so that assuming any mistake, you can find and determine it without any problem. On the off chance that you initiate toward the end, in the wake of making everything, it very well may be minimal more tedious to determine the issue.

As I referenced To some degree I, the worldwide variable are not straightforwardly accessible to the perspectives. We want to make the view know that the worldwide variable (CN_SELECTION_SCR) would be utilized in that view. This should be possible by hauling the Part Regulator Setting quality to View Setting. Extend the View in the left board. Double tap on the view name. Click the Setting Tab on the right Board. On the right board there is a parted. Left for View and Right side for Part Regulator Setting. Left click on the Setting CN_SELECTION_SCR hold and drag and put it on top of V_MAIN Setting on the left. This is like Utilizing/CHANGE Boundaries of SUB ROUTINE (Acts) in ordinary program.

8
9

Presently we are great to plan the screen. View->Layout. Right snap on ROOTUIELEMENTCONTAINER and embed one Straightforward Holder. Straightforward compartments are only holder of UI components. Typically, related UI components are gathered in a Straightforward Compartment.

10
11

Presently let us characterize an information boundary for the screen (very much as we do in SE38). Right snap on Straightforward Holder and make Information field.

12
13

This is only a variable, yet what information could it hold? We will connect this info field to the USERID field characterized in the setting CN_SELECTION_SCR. Click on the yellow symbol on the right half of significant worth property and tie it with USERID. It is very much like our Boundaries: P_INPUT TYPE XUBNAME. Any worth entered in this boundary in choice screen is passed to P_INPUT and it tends to be utilized in the entire program.

14
15

Allow us to give a significant mark to the choice screen boundary. Very much like in SE38, we make Determination Screen text, in the comparable way, a Mark UI component labeled to Info Field would go about as its text, which would be shown in the choice screen. Right snap on Straightforward Holder and make the Name. Populate the Name For field.

16
17

Of course it would be on the right half of the field. Move it up with the goal that it is on the left side.

18
19

Allow us to look how the window looks. In the fundamental window, the default principal view is relegated. In this way, anything that we have planned till presently is accessible to be shown in the window.

20

Step 3: WD Application like our familier Exchange Code made in SE93:
At this point, you would be enticed to perceive how your choice screen seems to be. For that we really want to make the application (like you want an exchange code for a program). Right snap on your Part and make the application and save it.

21
22

Presently you can execute it by F8 or by right tapping the application and Test.

23

Congrats!! Your screen look perfect.. 

Step 4: Interactive Buttons:
Screen is prepared, however client would require something to cooperate. In this way, button is required. Allow us to make a button, which would tell the framework that some activity is finished and it needs to carry out some role.

Make another Straightforward Holder. Right snap on straightforward holder and make a Button UI component.

24

Interface an activity to the button. Click on the make symbol on the right of onAction Occasions property. Give a significant name and portrayal to the activity. A technique is made for this activity behind the scenes as displayed.

25
26

Step 5: Preparation to display the output:
Presently, we have the info field and button. In any case, still we don’t have the spot holder for conclusive result. Thus, let us make another Unique situation (CN_USER_DETAIL) which would be nearby to the view (accepting this setting wouldn’t be utilized in some other spot). In the setting characterize three ascribes, USERID, NAME_FIRST and NAME_LAST (alluding to table view USER_ADDR).

27
28

So yield type is characterized yet it isn’t yet connected to any factor. Allow us to make three information fields in a straightforward holder and connection the qualities to comparing fields in the Setting CN_USER_DETAIL. Beneath it is displayed for just USERID. We want to accomplish for every one of the three.

29

Since these three credits would be utilized for show just, let us really take a look at the displayOnly property for every one of the three.

30

You might want to see the three property in one line, not in one segment. For this we really want to change the design type to Lattice Format. We would talk more about Stream, Lattice information and Framework Head information design in resulting meetings.

31 2
31

Let us see the screen again.

32

It has the info field and the execute button. However, how will the button respond, we have still not characterized the information extraction and show rationale.

Step 6: Start of Selection:
Peruse the worth entered by client in the Information Field USERID in the entrance screen. This can be effectively finished by perusing the Setting which is connected to USERID field. Client the Enchanted WAND (featured with number 1) give by SAP. The greater part of your Internet Dynpro code or possibly the skeletal code piece can be created by utilizing this Enchanted Wand (wizzard). You really want to go to the Strategies tab of the View or double tap the Execute activity of button BT_EXECUTE.

33
34

Really look at the READ radio button and afterward hit the Specific circumstance and pick the Setting field which is bound/connected to the Information field. Hit enter. Everything the code is produced for you. Eliminate the remarked code and some check codes which are not required for our situation. Anything client enters in IP_USERID field in choice screen is accessible in factor lv_userid.

99

Presently, anything information you need to show in the three property of the result setting, we want to SET them, for example we can utilize a similar enchantment wand to SET the CN_USER_DETAIL setting as displayed.

35
36

The LS_CN_USER_DETAIL construction would show the client subtleties. In any case, the construction is as yet vacant. We want to choose the information and populate the construction. We will compose a basic select assertion and populate the design as displayed.

PS: This is the main piece of code we compose for this application.. Isn’t it magnificent.. 

37

Uffff !!! We have done all means. Gotten information in light of information field and populated the result structure. Furthermore, connected all the UI components to the fundamental setting.

Allow us to test our most memorable child.. Allow me to enter a SAP client id present in our framework and raise a ruckus around town Information button. Abracadabra… Subtleties are shown..

38 2

This was one of the straightforward legitimate venture prerequisites. Kindly don’t grin, this was one of the necessity in one of our undertaking.. We would add on the intricacy and investigate the various highlights of Web Dynpro in ensuing parts. Till then, at that point, if it’s not too much trouble, mess about this part and remain tuned.

To some extent III, we would make more than one information fields, a button and a table with different lines as result.

Assuming you really want any clarification in any means shown, if it’s not too much trouble, leave your remark or email us your question. We would be glad to expound.

Thank you kindly for your time!!

 

YOU MAY BE INTERESTED IN

ABAP Applications for the Cloud: Modernizing for the Future

Bridging the Gap: Integrating ABAP with Other Cloud Services

Future of ABAP on Cloud

 

 

X
WhatsApp WhatsApp us