Creation of WEB UI Component and navigation with standard component

...Previous

Step 3:

Next step is to create a new field as per the business requirement.

For example, let us create a new field ‘Number’ for Sales Cycle->Campaigns->Products assignment block as a drop down field having values One, Two and Three. This field should be made available for Mobile Sales Application also.

General Procedure:

1.     Go to the desired transaction view in WEB UI.

2.     Click on the ‘Show Configurable Areas’ icon in the overview page of the transaction. This would enable all AET supported configurable views in the current WEB UI screen within dotted frames.

3.     Click on your corresponding dotted frame for the view where you want to add the new custom field.

4.     The AET tool would now open up the ‘View configuration’ (which has the integrated UI configuration tool) pop up window displaying all the configurations available for the selected view (both standard and custom).

5.     Now click on the ‘Create New Field’ button. By using this option, we can create new custom field first and then add it to all the configurations required.

6.     The AET tool would now display a pop-up with all supported Business Objects for the current selected view. Select the desired business object from the list as per the business requirement.

7.     Once the Business Object has been selected, the AET would now give the pop-up for supported Sub-objects (Part of BO) of the selected business object.

Note: - The main window would now display all existing extensions/enhancements, if any, for the business object that you have selected of the view.

8.     Select the Sub-object for the business object as per the requirement and click on ‘OK’ button.

9.     A new extension field is created with an automatically generated Enhancement Id starting with ‘ZAEXT’ and Field Id starting with ‘ZZAFLD’ and a new pop-up is displayed where in you can give your desired values for field properties like ‘Field Label’, ’Search-Relevant’, ’Data type’ etc. Once you have entered the data type for the field, the Length, Check Table and Search Help properties are enabled.

10. The ‘Status’ shows in which state is the generation currently in. Yellow triangle indicates incomplete/in process and green square indicates completed/generated status. Erroneous status is indicated using a red circle.

11. We also have option for enabling the supported functionalities for the created field like ‘Mobile’, ’R/3 Adapter’, ’BW Reporting’, Check Table, Search Help etc.

12. The tool also provides options to provide DropDown Listbox for the new field created as well as the Translation for all the text entered for the field.

13. Once all the field properties are entered as desired, you can click on ‘Back’ Button to save the extension field and its’ properties.

14. Now the enhancement has been saved for the field and it would be displayed in the Enhancement List in the main page ‘Custom Fields’ assignment block of the AET pop up window with status as incomplete/in process(yellow triangle).

15. Next step is to generate the created custom field. To save and generate the extension field, select the newly created enhancement id from the list displayed and click on ‘Save and Generate’ button.

16. Now a pop-up for Transport Request would be prompted where you need to give in your workbench TR and click on ‘Choose’ if you already have a TR for field creation. Otherwise you can create your own TR using the ‘Create’ button in the pop up.

17. Once you have selected the TR, the system would generate the AET field and status would be turned to green square indicating that the AET field has been generated successfully.

Note:-Sometimes a DYNPRO popup error happens and field generation fails from the UI tool indicated by a red circle as status. In this scenario, we need to re-generate the created field manually from the GUI. In order to re-generate the enhancement, go to transaction ‘se38’ in GUI, open the report ‘AXT_EXT_GENERATE’ and enter the Extension ID of the custom field created and check the option ‘Generate All Extensions’ and then click on ‘Execute’ and the enhancement would be generated successfully.

Note: - Before you can execute the report for generating the enhancement, close the AET tool in UI to release the lock on the object. Also, you need to have authorization (developer access key) for the report execution. The selection of which enhancements are to be generated happens automatically, if you create, delete, or change an enhancement.

18. Once the enhancement has been saved and generated, it gets added to the available fields list. You can create a new custom configuration if required, or else if the configuration already exists for your scenario you can select it from the displayed list in the web ui config tool (from GUI or AET). Then the newly created field would be displayed in the ‘Available Fields’ list, from where you can add it to the ‘Displayed field’ to be displayed in the WEB UI view .This process of adding the new field to the ui configuration can be done either from the WEB UI AET tool or from the GUI BSP component UI config tool.

For our example, let’s see how to proceed.

1.     Click on the ‘Show Configurable Areas’ icon.

2. Click the Products view in the UI screen.

3. The AET tool window would be displayed (UI config tool).

Click here to continue...