Friday 24 June 2022

Add Custom Date-Time Field in FPM Screen for SAP TM

Often the standard FPM fields provided by SAP is not enough to satisfy all the business requirements. You need additional fields on the screen. This is where enhancements and customizations come in.

In this blogpost, I am going to show you just that. This is a step-by-step guide for adding custom Date/Time fields on FPM screen for Freight Order General Data tab.

Requirement: Add Vehicle Placement Date/Time/Time zone field in the General Tab of Freight Order Screen. During Save, the data will get saved in TOR structure as Timestamp.

Step 1: Identify the position of Custom Field(s)

In this blogpost, we are adding fields in General Data Tab for Freight Order Screen. The below highlighted position shows the position.

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

Step 2: Enhance Node Structure in UI and BO


The process of enhancing node structure is twofold. You need to enhance the UI field structure as well as the BO node structure.

1. Right click on the desired field position and choose Technical Help from the Popup.

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

2. Click on the Current Component Configuration from the Technical Help Popup Window.

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

3. A second window opens like below where you should do your screen changes.

Note: Don’t do the screen changes now. First enhance the Node structure and the corresponding UI structure. Only after that do the screen changes.

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

4. Identify the Node UI Structure, Mapper Class and BO Node structure.

5. Open the Attributes & General Settings Panel on the right and look for Feeder Class Dropdown.

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

6. Click on the dropdown and choose Feeder Class parameter.

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

7. On clicking it, a popup appears. From the popup window, get the FBI view name.

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

8. In the backend, go to TCode SE84 and follow the following path: Repository Information System → Web Dynpro → Component Configurations.

In the Selection Screen, enter the FBI View name you obtained in the previous step and press F8.

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

9. Double click on the result to view the Component Configuration.

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

10. Now click on Display configuration. A window in browser opens.

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

11. In the browser, go to Related Views tab and click on the highlighted button.

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

12. Clicking the button highlighted above will take you to a different browser window. There click on Display to get the Node UI structure and Mapper Class.

Node UI Structure: /SCMTMS/S_UI_TOR_STOP

Mapper Class: /SCMTMS/CL_UI_CONVERSION_TOR 

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

13. The impacted node here is Get the TOR structure for the STOP node.

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

14. Since we want these fields to be persistent fields, so we add them in the persistent extension structure.

Structure: /SCMTMS/S_TOR_STOP_K

Extension Include: /SCMTMS/INCL_EEW_TOR_STOP

15. Enhance the TOR Node structure with the custom field ZZVEH_PLACE.

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

16. Enhance the UI Node Structure.

Here, you should add the field names in a specific format. Our goal is to have three separate fields on UI which will hold Date, Time, and Time zone data separately. We need to add three field in an append structure with specific naming conventions. The BO Node field will have suffix of _D, _T, and _TZ of Data Type /SCMTMS/UI_DATE, /SCMTMS/UI_TIME, and /SCMTMS/UI_TZONE respectively.

Therefore, the fieldnames will be ZZVEH_PLACE_D, ZZVEH_PLACE_T, and ZZVEH_PLACE_TZ.

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

Step 3: Enhance the FPM Screen of Freight Order


As mentioned above in the third point of Step 2, we need to enhance the FPM screen and add our custom fields for Vehicle Placement Date, Time, and Time zone.

1. Click on Other Functions and choose Enhance from the Dropdown menu.

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

2. A Popup window will appear. Enter a custom Enhancement Implementation name and maintain some description.

3. Click on OK and Enter a package name or save in a Local Object. Now you can start editing.

4. Click on Element button from the Toolbar and choose Element from the Dropdown.

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

6. You will see a Popup where there will be a list of fields to choose from. Go down till the very end and you will see something like this.

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

7. Notice that there are 2 fields for each of Date, Time, and Time zone. This splitting is done by SAP Standard process. Refer the other Date/Time fields in the screen. Create 3 elements with fields same as the other Date/Time fields. Keep the element attributes of the custom fields same as the standard ones.

8. After enhancement, the screen will look like this.

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

Step 4: Build Mapping between the Node UI structure and TOR Node Structure


We have the Mapper Class /SCMTMS/CL_UI_CONVERSION_TOR from the previous step. Enhance and add mapping logic to the BUILD_MAP_TABLE Method for the custom fields.

SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

Result


SAP ABAP Development, SAP ABAP Exam Prep, SAP ABAP Career, SAP ABAP Skills, SAP ABAP Certification, SAP ABAP Preparation, SAP ABAP Preparation Exam, SAP ABAP News, SAP ABAP Process

No comments:

Post a Comment