User Experience Boost to Web Dynpro ABAP Apps with SAP Fiori Principles
Remarks – important:
- Create only Z* objects in your local namespace!
- Always use prefixes such as Z<xx> where <xx> has to be replaced by a 2-digit number representing your group number.
- If you are stuck or in doubt, you will find Hints and Tricks below!
Copy the existing application configuration UX606_PURCHASE_ORDER to your own local application configuration by means of the Deep Copy functionality and test your copied application configuration. – From now on in this document, your application configuration is called “your application”.
Set the theme of your application to the Fiori theme sap_bluecrystal.
Set the guideline switch of your application to ‘Guideline Fiori’.
Add the ‘Maximize Mode’ functionality to the Result List.
Set the scroll mode of the Purchase Order Items List to ‘Scrolling’.
Add the ‘Search as Find’ functionality to the Purchase Order Items List Panel.
Add a geographical map to your application illustrating the address of the Business Partner:
- Put the map besides the Business Partner Address UIBB within a new 50:50 section in the OVP Main Page.
- Use a configuration name Z<xx>_UX606_MAP; set a title (‘Map’) and select ‘Without Padding’.
- Use feeder class CL_FPM_SADL_CRUD_VISBIZ with Entity Source ‘EPM’ and Business Entity ‘IF_EPM_ADDRESS~IF_EPM_ADDRESS_HEADER’. Use LONGITUDE for ‘X Field’ and LATITUDE for ‘Y Field’.
- Use a height of ‘300px’.
- Use the Graphical Wire editor in OVP to connect the new UIBB to the Business Partner Address UIBB.
Substitute the Search GUIBB by means of the new Attribute Filter GUIBB:
- Create a new UIBB of type ‘Attribute Filter’ to the OVP Search Page before the Result List.
- Use configuration name Z<xx>_ UX606_ATTRIBUTE_FILTER.
- Use feeder class CL_FPM_SADL_ATTRIBUTE_FILTER (as suggested) with Entity Source ‘EPM’ and Business Entity ‘IF_EPM_PO~IF_EPM_PO_HEADER’. Join ‘NAVIGATE_TO_BUSINESS_PARTNER’ with suffix ‘_BP’.
- Delete the Search GUIBB from the OVP Search Page (‘Search Purchase Order’).
- Then you have to correct the Wiring: Select FPM_ATTRIBUTE_FILTER_UIBB instead of the erroneous FPM_SEARCH_UIBB.
- Prepare the Result List UIBB: In the Feeder Class Parameters Dialog select ‘Retrieve without request’ for ‘Retrieval’.
- Now you can test the application.
- Beautify the Attribute Filter: Set ‘Row Count’ to 7 and ‘Package Size’ to 6.
- Rework the Filter Attributes – ideally you delete all Filter Attributes and select only meaningful ones.
2 HINTS AND TRICKS
- You can check and compare your findings with the application which contains the entire solution: UX606_SOLUTION_PURCHASE_ORDER.
- You reach the Deep Copy functionality when you start the Application Hierarchy Browser from the running original application. – Use Z<xx>_ as prefix and don’t make use of a suffix. You do not need to copy FPM_SADL_CRUD_CONFIRM_FORM (this is the standard confirmation window).
- To test your copied application, you can navigate to the application configuration and test the application from there.
- To set the application theme, go to the application configuration and look for parameter ‘Stylesheet URI (WDTHEMEROOT)’” and set it to ‘sap_bluecrystal’.
- To set the application guideline switch, go to the application configuration and look for parameter ‘UI Guideline (WDUIGUIDELINE)’ and set it to ‘Guideline Fiori’.
- The Maximize Mode can be switched on in the General Settings of a List UIBB.
- The Scroll Mode can be set in the General Settings of a List GUIBB.
- The Search Mode for a List GUIBB can be set in the General Settings of the List GUIBB. Ensure that you select ‘Search as Find (Panel header)’. Then you need to configure the List Panel Toolbar in the OVP configuration: ‘Add Toolbar Element’ and you will find the Search icon under ‘Standard Functions’.
- You can add a new Section in the OVP Schema and move the Address UIBB into this section. Ensure that you do this on the OVP Main Page.
- In the Graphical Wire Editor which you find within the ‘Wire Schema’, you need to draw a Wire from Z<xx>_UX606_BP_HEADER to Z<xx>_UX606_MAP. There is only one Connector Class (CL_FPM_SADL_CRUD_CONNECTOR) and only one association (NAVIGATE_TO_COMPANY_ADDRESS) available. – Don’t forget to save!
- When you restart the application, you will need to click on ‘Reset to Default’ in the OVP Personalization to eliminate any previous Personalization settings.
- To join a structure in the Feeder Class Parameters dialog, click on ‘Insert Child’ and add the Association Name.
- Row Count and Package Size can be found in the General Settings of the Attribute Filter GUIBB.
- We propose to use the following meaningful filter attributes: LIFECYCLE_STATUS, ORDERING_STATUS, CONFIRM_STATUS, INVOICING_STATUS, COMPANY_NAME_BP, LEGAL_FORM_BP.