Implicit Customizing / Personalization
Exercise 5: Configuration, customizing and personalization
Exercise Objectives
After completing this exercise, you will be able to:
• Create a configuration controller.
• Enable the personalization of the configuration controller context attributes (external personalization).
Business Example
Your application is built in a way that different components implementing the same component interface may be used at runtime. However, the name of the sub component is defined by the default value of a context attribute, so replacing the sub component requires overwriting the default value.
You have to change your application so everyone can choose his preferred detail component at runtime without having to change the repository objects. This can be achieved by external configuration and external personalization.
Template Component: NET311_COMP_OPT_S
Template Sub Components: NET311_COMP_C1_OPT_S, NET311_COMP_C2_OPT_S
Solution Main Component: NET311_P13N_S
Solution Sub Components: NET311_P13N_C1_S, NET311_P13N_C2_S
Task 1:
If you have finished the previous exercise, you can skip this task. Then, all changes can be implemented in the components you have created in your last exercise.
If you have not finished your last exercise, you can start with a copy of the template components. In this case, copy the template components listed above and name the copies ZNET311_P13N_##, ZNET311_P13N_##_C1, and
ZNET311_P13N_##_C2, respectively. Assign these components to your package ZNET311_##. Create an application for component ZNET311_P13N_## having the same name as this component and assign the application to your package, too.
Adapt the value of the property Default Value for the context attribute
SUB_COMP_INFO.NAME. This attribute is defined in the component controller
3. Adapt the value of the property Default Value for the context attribute SUB_COMP_INFO.NAME defined in the component controller of the main component.
Task 2:
Create a configuration controller in your main component. Copy the node SUB_COMP_INFO from the component controller context to the configuration controller context. Map the component controller node to the configuration controller node (the configuration controller node has to be the mapping origin).
1. Create a configuration controller (name: CONFIG_CTLR) in your main component.
2. Copy the node SUB_COMP_INFO from the component controller context to the configuration controller context.
3. Map the component controller node SUB_COMP_INFO to the configuration controller node SUB_COMP_INFO (origin).
Task 3:
Create a component configuration for the main component of your application.
Change some UI element properties. In addition, change the name of the sub component that is used by default for the main component (external configuration).
Create an application configuration for your application. Start your application with and without assigning the application configuration.
1. Create a component configuration for the main component of your application. Change some UI element properties. In addition, change the name of the sub component that is used by default for the main component (external configuration).
2. After having created a component configuration for the main component, create an application configuration for your application.
3. Start your application with and without assigning the application configuration.
Task 4:
The name of the sub component used at runtime should also be adaptable via customizing and personalization. Thus you have to create a dialog that allows to choose the name of the sub component to be used at runtime.
1. Create a new window (name: PERS_WINDOW) in the main component.
This window will be send as a modal dialog box if external customizing or external personalization is started.
Continued on next page
2. Create a new view (name: PERS_VIEW). Embed this view in the window PERS_WINDOW.
3. Copy and map the context node SUB_COMP_INFO from the component controller context to the context of view PERS_VIEW.
4. Define the layout of view PERS_VIEW. Create a DropDownByKey UI element and bind the property selectedKey to the context attribute SUB_COMP_INFO.NAME. Create a label for the DropDownByKey UI element. Give the property text of the label UI element a meaningful value.
5. Create a method (name: SET_VALUE_SET( )) in the controller of view PERS_VIEW. This method will encapsulate the code used to build up the value list displayed by the DropDownByKey UI element. Call this method from the method WDDOINIT( ) of this view.
6. Implement the method SET_VALUE_SET( ). Create an internal table with line type WDR_CONTEXT_ATTR_VALUE. This line type has two fields: TEXT and VALUE. Add two lines to this internal table: The field VALUE has to contain the name of a sub component that can be used to display the details (in upper case letters), while TEXT can contain any text describing this sub component. Define the attribute value set related to the context attribute SUB_COMP_INFO.NAME: Call the method SET_ATTRIBUTE_VALUE_SET( ) for the meta data description of the attribute NAME and pass the internal table to this method via the parameter VALUE_SET.
7. Define a link in the view MAIN_VIEW. This link (ToolBarLinkToAction UI element - that will be used to open the personalization dialog) should be located in a toolbar that has to be defined as a sub element of the flight table.
8. Define a new action in view MAIN_VIEW (name: PERSONALIZE). Assign this action to the ToolBarLinkToAction UI element.
9. Implement the handler method for the action PERSONALIZE. Create and open a modal dialog box for the window PERS_WINDOW.
- The text displayed as the window title can be read from the assistance class.
- The window should not be closed in any case.
- Messages created by the popup should be displayed in the popup.
- The Close button of the window should not be displayed.
- The OK button should be displayed. This button should be the default button.
- Store the reference to the dialog box in the component controller attribute GR_WINDOW.
Task 5:
The OK button can be used to close the personalization dialog. However, the personalization data is not stored yet. Thus, the following changes have to be implemented:
The OK button should be renamed (preferred name: Save). After closing the dialog via Save, the personalization data should be stored.
1. The references to the view controller API of view PERS_VIEW is accessed multiple times. Thus create a controller attribute in the view PERS_VIEW (type IF_WD_VIEW_CONTROLLER) to store this reference. The value of this attribute should be determined in the method WDDOINIT( ) of the view controller.
2. Create the action OK_BUTTON_ACTION in the view PERS_VIEW.
3. Create the method REGISTER_BUTTONS( ) in the view PERS_VIEW. Call this method from the hook method WDDOINIT( ).
4. Implement the method REGISTER_BUTTONS( ):
Register the action OK_BUTTON_ACTION for the event “pressing the OK button”. Rename the button by providing the new text (Save) via parameter BUTTON_TEXT.
5. Implement the handler method of action OK_BUTTON_ACTION:
- Check if the name of the user event (WDEVENT->NAME) equals the value expected for the Save button (value: ON_OK).
- If this is true, try to save the personalization data set. Here the method SAVE( ) of the personalization manager has to be called.
Hint: For convenience, the reference to the personalization manager should be obtained in the method WDDOINIT( ) of the component controller and stored in a globally visible component controller attribute (name: GR_P13N_MAN).
- If the personalization data set could not be saved (exception), report the exception. Use method REPORT_EXCEPTION( ).
- Finally, close the modal dialog box.
Continued on next page
Task 6:
Test the functionality of your application.
1. Start your application having assigned the application configuration.
2. Append the query string sap-config-mode=X to the URL created in step 1.
Restart the application. This will start external customizing for the configured version of your application. Click the link to open the customizing dialog.
Change the sub component used to display the details and press Save. Start your application again having assigned the application configuration but now in normal mode. You should see the customized version.
3. Restart your application again in normal mode (having assigned the application configuration but without having added the query string sap-config-mode=X). Start the external personalization dialog by clicking the related link. Change the sub component used to display the details and press Save. Restart your application again in normal mode (having assigned the application configuration but without having added the query string sap-config-mode=X). You should now see the personalized version.
4. Customizing and Personalization is bound to the underlying configuration.
Thus, if you start the application without assigning the application configuration, you will see the original version of the main component.
Solution 5: Configuration, customizing and personalization
Task 1:
If you have finished the previous exercise, you can skip this task. Then, all changes can be implemented in the components you have created in your last exercise.
If you have not finished your last exercise, you can start with a copy of the template components. In this case, copy the template components listed above and name the copies ZNET311_P13N_##, ZNET311_P13N_##_C1, and
ZNET311_P13N_##_C2, respectively. Assign these components to your package ZNET311_##. Create an application for component ZNET311_P13N_## having the same name as this component and assign the application to your package, too.
Adapt the value of the property Default Value for the context attribute
SUB_COMP_INFO.NAME. This attribute is defined in the component controller of your main component.
1. Copy the template components.
a) Display the template components in the object tree. Clicking on any component with the right mouse button will open the component's context menu. Choose Copy.... Enter the name of the component to be created. Press Continue.
b) Adapt the descriptions of the new components.
2. Create an application to access your main component.
a) An application having the same name as the component can be created from the context menu of the main component.
Choose MAIN_WINDOW as the interface view and DEFAULT as the name of the startup plug.
3. Adapt the value of the property Default Value for the context attribute SUB_COMP_INFO.NAME defined in the component controller of the main component.
a) Edit the component controller context of the main component. Open node SUB_COMP_INFO and mark the attribute NAME. Change the value of the property Default Value to the name of one of your sub components you have copied in this task. The name has to be written in upper case letters.
Continued on next page
Task 2:
Create a configuration controller in your main component. Copy the node SUB_COMP_INFO from the component controller context to the configuration controller context. Map the component controller node to the configuration controller node (the configuration controller node has to be the mapping origin).
1. Create a configuration controller (name: CONFIG_CTLR) in your main component.
a) From the context menu of your main component, choose Create → Custom Controller. Enter the controller's name and a description. Save.
b) Right mouse-click on the custom controller CONFIG_CTLR to open the context menu. Choose (Re)Set as Config. Controller to make it the component's configuration controller.
2. Copy the node SUB_COMP_INFO from the component controller context to the configuration controller context.
a) Right mouse-click on the root node of the configuration controller context. From the context menu choose Create Using the Wizard → Copy Nodes of Different Context. A popup appears.
b) Make sure that the name of your main component is entered in the field with the label Component Name. Enter COMPONENTCONTROLLER in the field with the label View/Controller Names. Press Enter.
c) The complete context of the component controller is displayed in a popup. Mark the node SUB_COMP_INFO and press Enter.
3. Map the component controller node SUB_COMP_INFO to the configuration controller node SUB_COMP_INFO (origin).
a) Edit the component controller. Add the configuration controller to the list of used controllers/components for the component controller.
b) Select the tab Context. On the left side the context of the component controller is displayed. On the right side a button is displayed for each used controller. Press the button for the configuration controller.
c) Drag the node SUB_COMP_INFO from the component controller context and drop it on the node having the same name in the configuration controller context.
Task 3:
Create a component configuration for the main component of your application.
Change some UI element properties. In addition, change the name of the sub component that is used by default for the main component (external configuration).
Create an application configuration for your application. Start your application with and without assigning the application configuration.
1. Create a component configuration for the main component of your application. Change some UI element properties. In addition, change the name of the sub component that is used by default for the main component (external configuration).
a) In order to create a component configuration, right mouse-click on the component and choose the menu entry Create/Change Configuration.
The configuration editor is opened in the browser.
b) Enter a name in the field Configuration (customer name space). Click on the link Create.
c) Select the tab Implicit and change some settings for each view.
d) Because the main component contains a configuration controller, the tab Explicit can also be selected. Here the context nodes are displayed on the left side. Select the node SUB_COMP_INFO. On the right side, the attributes NAME with its default value is displayed. Change this value to use the other sub component of your main component at runtime.
e) Before you save the component configuration, add a description (field with label description) and assign the component configuration to your package and a transport request (button Details). Then press button Save.
Continued on next page
2. After having created a component configuration for the main component, create an application configuration for your application.
a) In order to create an application configuration, right mouse-click on the application and choose the menu entry Create/Change Configuration.
The configuration editor is opened in the browser.
b) Enter a name in the field Configuration (customer name space). Click on the link Create.
c) Mark the main component in the group wit the header Assignment of Component Configurations.
d) Assign the component configuration you have created before to the main component. This is done in the group with the header Configuration of Root Component by entering the component configuration name in the field with label Configuration.
e) Before you save the application configuration, add a description (field with label description) and assign the application configuration to your package and a transport request (button Details). Then press button Save.
3. Start your application with and without assigning the application configuration.
a) To test your application without assigning the application configuration, right mouse-click on the application name in the object tree. Choose Test from the context menu. The application looks as designed by the developer.
Note, which sub component is used to display the details of the selected flight.
b) To test your application having assigned the application configuration, open the element list for your application in the object tree. Right mouse-click on the name of the application configuration. Choose Test from the context menu. You will now see the configured version of your application.
Note, which sub component is used now to display the details of the selected flight.
Task 4:
The name of the sub component used at runtime should also be adaptable via customizing and personalization. Thus you have to create a dialog that allows to choose the name of the sub component to be used at runtime.
1. Create a new window (name: PERS_WINDOW) in the main component.
This window will be send as a modal dialog box if external customizing or external personalization is started.
a) Proceed as described in exercises you have solved before.
2. Create a new view (name: PERS_VIEW). Embed this view in the window PERS_WINDOW.
a) Proceed as described in exercises you have solved before.
3. Copy and map the context node SUB_COMP_INFO from the component controller context to the context of view PERS_VIEW.
a) Proceed as described in exercises you have solved before.
4. Define the layout of view PERS_VIEW. Create a DropDownByKey UI element and bind the property selectedKey to the context attribute SUB_COMP_INFO.NAME. Create a label for the DropDownByKey UI element. Give the property text of the label UI element a meaningful value.
a) Proceed as described in exercises you have solved before. Best way to create both elements in one step is to create a container form from the context menu of the ROOTUIELEMENTCONTAINER.
5. Create a method (name: SET_VALUE_SET( )) in the controller of view PERS_VIEW. This method will encapsulate the code used to build up the value list displayed by the DropDownByKey UI element. Call this method from the method WDDOINIT( ) of this view.
a) Proceed as described in exercises you have solved before.
b) Source code see below.
6. Implement the method SET_VALUE_SET( ). Create an internal table with line type WDR_CONTEXT_ATTR_VALUE. This line type has two fields: TEXT and VALUE. Add two lines to this internal table: The field VALUE has to contain the name of a sub component that can be used to display the details (in upper case letters), while TEXT can contain any text describing this sub component. Define the attribute value set related to the context attribute SUB_COMP_INFO.NAME: Call the method SET_ATTRIBUTE_VALUE_SET( ) for the meta data description of the attribute NAME and pass the internal table to this method via the parameter VALUE_SET.
a) Source code see below.
Continued on next page
7. Define a link in the view MAIN_VIEW. This link (ToolBarLinkToAction UI element - that will be used to open the personalization dialog) should be located in a toolbar that has to be defined as a sub element of the flight table.
a) From the context menu for the flight table, create a ToolBar UI element.
b) From the context menu of the ToolBar UI element create a right-aligned ToolBarLinkToAction UI element.
c) Set the property text of the ToolBarLinkToAction UI element.
8. Define a new action in view MAIN_VIEW (name: PERSONALIZE). Assign this action to the ToolBarLinkToAction UI element.
a) Proceed as described in exercises you have solved before.
9. Implement the handler method for the action PERSONALIZE. Create and open a modal dialog box for the window PERS_WINDOW.
- The text displayed as the window title can be read from the assistance class.
- The window should not be closed in any case.
- Messages created by the popup should be displayed in the popup.
- The Close button of the window should not be displayed.
- The OK button should be displayed. This button should be the default button.
- An extra image indicating the severity of the information displayed by the popup is not desired.
- Store the reference to the dialog box in the component controller attribute GR_WINDOW.
a) Source code see below.
Task 5:
The OK button can be used to close the personalization dialog. However, the personalization data is not stored yet. Thus, the following changes have to be implemented:
The OK button should be renamed (preferred name: Save). After closing the dialog via Save, the personalization data should be stored.
1. The references to the view controller API of view PERS_VIEW is accessed multiple times. Thus create a controller attribute in the view PERS_VIEW
1. The references to the view controller API of view PERS_VIEW is accessed multiple times. Thus create a controller attribute in the view PERS_VIEW