Skip to content

Commit cee5a59

Browse files
hitesh-parmarhitesh-parmar
committed
updates to sapui5-adaptation-extend-variant
1 parent f7a1402 commit cee5a59

4 files changed

Lines changed: 18 additions & 22 deletions

File tree

‎tutorials/sapui5-adaptation-extend-variant/7_i18n properties.png‎

-99.9 KB
Binary file not shown.

‎tutorials/sapui5-adaptation-extend-variant/OPExtensionController.png‎

14.1 KB
Loading

‎tutorials/sapui5-adaptation-extend-variant/ObjectPageQuickActions.png‎

13.1 KB
Loading

‎tutorials/sapui5-adaptation-extend-variant/sapui5-adaptation-extend-variant.md‎

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
author_name: Markus Koenigstein
33
author_profile: https://github.com/d027132
4-
contributors: [Elisabeth Riemann>https://github.com/ElRiemann]
4+
contributors: [Elisabeth Riemann>https://github.com/ElRiemann, Hitesh Parmar>https://github.com/hitesh-parmar]
55
keywords: tutorial SAPUI5
66
auto_validation: true
77
time: 30
@@ -58,10 +58,10 @@ Object Page:
5858

5959
### Access your SAPUI5 Adaptation Project
6060

61-
1. Log onto SAP Business Application Studio (BAS) and access your SAP Fiori development space.
62-
2. Expand the *Projects* folder and right-click on the adaptation project you created in Tutorial 1 and select *Open Adaptation Editor* from the context menu.
61+
1. Log onto SAP Business Application Studio (BAS) and access your SAP Fiori development space.
62+
2. Expand the *Projects* folder and right-click on the adaptation project you created in Tutorial 1 and select *Open Adaptation Editor* from the context menu.
6363
3. The List Report of the Manage Credit Accounts application is displayed in *UI Adaptation* mode. Switch to *Navigation* mode.
64-
4. Choose the `Go` button to populate the table with data.
64+
4. Choose the `Go` button to populate the table with data.
6565
5. Select a business partner by choosing the chevron button to navigate to the Object Page.
6666

6767
![List Report: Select Business Partner](1_List Report Select Business Partner.png)
@@ -70,32 +70,27 @@ Object Page:
7070

7171
Working with Adaptation Editor:
7272

73-
1. On the Object Page, switch from *Navigation* to *UI Adaptation* mode and select the entire Object Page. After you’ve selected the Object Page in its entirety, choose the `Extend With Controller` button from the visual context menu.
73+
1. On the Object Page, switch from *Navigation* to *UI Adaptation* mode. Choose from the *Object Page Quick Actions* the action *Add Controller to Page*.
7474

75-
![Object Page: Extend with Controller](2_Object Page Extend with Controller.png)
75+
![Object Page Quick Actions](ObjectPageQuickActions.png)
7676

77+
2. In the *Extend With Controller* popup, enter a name in the *Controller Name* field (e.g. OPExtensionController) and choose *Create*.
7778

78-
2. In the *Extend Controller* popup, enter a name in the *Controller Name* field (e.g. OPExtensionController) and choose *Extend*.
79+
- A corresponding .js file is generated in your workspace in the webapp folder under changes –> coding –> *OPExtensionController.js*.
7980

80-
- A corresponding .js file is generated in your workspace in the webapp folder under changes --> coding --> *OPExtensionController.js*. This file opens automatically in the main window of SAP Business Application Studio.
81+
![Object Page Extension Controller](OPExtensionController.png)
8182

82-
3. Before you edit the .js file generated in step 2, add a coding fragment to the Object Page layout. Select the *ObjectPageLayout* area (outlined in blue) and choose the `Add: Fragment` button from the visual context menu. (Tip: Click the left-hand border to select the Object Page.)
83+
3. Before you edit the .js file generated in step 2, add a coding fragment to the Object Page layout. Choose from the *Object Page Quick Actions* the action *Add Custom Section*.
8384

84-
- You want to add a new section to the Object Page in which you can include a chart visualization of the Payment Trends. New sections are defined in the sections Aggregation of the ObjectPageLayout control, so you’re going to add a new XML coding fragment to this aggregation.
85+
- You want to add a new section to the Object Page in which you can include a chart visualization of the Payment Trends. New sections are defined in the *sections* aggregation of the ObjectPageLayout control, so you’re going to add a new XML coding fragment to this aggregation.
8586

86-
![Object Page: Add Fragment](3_Select Object Page Layout to Add Fragment.png)
87+
4. In the *Add Custom Section* popup, enter a name for the fragment (e.g. extension_chart) and choose Create.
8788

88-
4. In the *Add Fragment* popup, you will see *Control type: sap.uxap.ObjectPageLayout, Target Aggregation: sections.* (This is only visible provided you’ve correctly selected the *ObjectPageLayout* area in which to add the fragment.)
89+
5. Press *Save*.
8990

90-
5. Select `Create New`.
91+
6. A corresponding .xml file is generated in your workspace in the webapp folder under *changes –> fragments –> extension_chart.fragment.xml*.
9192

92-
6. In the *Add Fragment* popup, enter a name (e.g. extension_chart) and choose `Create`.
93-
94-
- A corresponding .xml file is generated in your workspace in the *webapp* folder under *changes --> fragments --> extension_chart.fragment.xml*. This file opens automatically in the main window of SAP Business Application Studio.
95-
96-
7. Press *Save*.
97-
98-
8. In the *extension_chart.fragment.xml* file generated in step 6, enter the following code:
93+
7. In the *extension_chart.fragment.xml* file generated in step 5, enter the following code:
9994

10095
```XML
10196
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:objectPage="sap.uxap"
@@ -133,8 +128,9 @@ Working with Adaptation Editor:
133128

134129
![Extension Chart Fragment](4_Extension Chart Fragment XML.png)
135130

136-
9. In the *OPExtensionController.js* file generated in step 2, enter the following code:
137-
- Hint: `<your initials>` needs to be replaced by the initials chosen for your project name. E.g., if the project name is creditaccounts.appvar.cl1 then you need to replace `<your initials>` with *cl1*.
131+
8. In the *OPExtensionController.js* file generated in step 2, enter the following code:
132+
133+
>`<your initials>` needs to be replaced by the initials chosen for your project name. E.g., if the project name is creditaccounts.appvar.cl1 then you need to replace `<your initials>` with *cl1*.
138134
139135
```JavaScript
140136
/***

0 commit comments

Comments
 (0)