1.

Business Roles
Definition The Business role is the central object for controlling the Navigation Bar, the Logical Links and the authorizations for users Purpose The business role determines the different profiles of the UI and what is visible on the UI How to define and assign Business Roles Step1: Go to IMG Path: Customer Relationship Management > Business Roles > Define Business Roles or to transaction CRMC_UI_PROFILE Step2: Pick a suitable role which you want to create a copy of and note the PFCG Role ID

Step3. Go to Transaction PFCG and create a Z copy of the standard PFCG role

Step 4: Once the PFCG Role is created go to IMG Path: Customer Relationship Management > Business Roles > Define Business Roles and create a new business role with the above created PFCG Role. (It is convenient to copy the standard role to Z name space and change the PFCG role ID). Save the changes. Step 5: IMG Path: Customer Relationship Management > Business Roles > Define Organizational Assignment or transaction PPOMA_CRM Users/Business partners are assigned within the Organizational Model to a Position User / Business Partners can be assigned to multiple Positions Each Position can have exactly one Business Role

Double click on the position, menu option Goto>Detail Object>Enhanced Object Description

Go to Business role and click on create

Maintain the Business role

Save the changes and run UI.

2. Role Config Key
Purpose Whenever you do your UI Configuration steps, you can choose to save your changes only for a specific role configuration key. Only users with a Business Role assigned, which has entered this Role Configuration key will see your changes How to create and assign Role Config Key Step 1: Go to IMG Path: Customer relationship management > UI framework > UI framework Definition > Define role configuration key Step 2: To assign the role config key to the required business role go to IMG Path: Customer relationship management > Business roles > Define business roles.

Step 3: You can save your configuration according to different parameters. If different configurations for one view have been saved you get an overview, if you press ‘Choose configuration’. With ‘Copy Configuration’ you can copy an existing configuration. Make the necessary changes to the config and save the same. Run the UI and notice the made changes.

3. Navigation Bar Customizing
The Navigation bar that is shown on the UI depends on the navigation bar profile mentioned in the business role. The path for customizing navigation bar is: Go to IMG Path: Customer relationship management > UI framework > Technical Role Definition > Define navigation bar profile

The navigation bar is divided into 2 main categories: 1) Work Centres

2) Direct Link groups

The navigation bar can have a two level menu. Each of the last level entry is known as a Logical Link. Logical Links can then be grouped as follows depending on whether you want to include it as a work centre link or a direct Link Part of work Centre Step 1. Create a relevant logical link Step 2: Group different Logical Links as Work Center Link Groups Step 3: Group related Work Center Link Groups as work centres Step 4: Assign the work centre to the navigation bar profile Part of direct link group Step 1: Create a relevant logical link Step 2: Group different logical links as Direct Link groups Step 3: Assign the direct link group to the navigation bar profile

we need to assign the navigation bar profile to the business roles: Go to IMG Path: Customer Relationship Management > Business Roles Assign your navigation bar profile to the business role. . adjust work centre groups and adjust link groups and activate all the links that you need to see on the UI. Note: You also need to go into options adjust work centers.Once the above steps are done.

2) Transaction: SE80 > Workbench > Edit object 3) Copy BOR object type TSTC to ZTSTC 3) In the method “Execute” set the synchronous flag. Transaction: CRMS_IC_CROSS_SYS 4) To launch an URL the URL has to be defined in the URL repository first. View: CRMV_IC_LTX_URL Launch GUI transaction 1) To launch a GUI transaction a BOR object type with a method EXECUTE.Transaction Launcher Purpose With Transaction Launcher you can integrate Calls of: 1) External URLs which are defined in URL repository 2) Web Gui Transaction of another SAP System with available ITS Pre-requisites 1) The transaction Launcher can be used to launch URLs and BSPs / BOR transactions from other systems.4. . 3) A mapping of the logical systems is required. that supports synchronous calls is required. that supports synchronous calls is required. 2) To launch a GUI transaction a BOR object type with a method EXECUTE.

4) Generate the object. 5) Check that the system is maintained in transaction CRMS_IC_CROSS_SYS .

class name (Z-class. . The RAISE VETO flag is used to raise a message to inform the agent that launch transaction is open on a different window and is useful only when the STATEFUL flag is set. don’t give names of existing classes else the same gets over-written ) If the STATEFUL flag is set.6) Go to IMG path: Customer Relationship Management > UI Framework > > Technical Role Definition > Configure Transaction Launcher or transaction: CRMC_UI_ACTIONWZ a) Enter a launch transaction ID b) Enter a description. the launch transaction will always be executed in a new window and will remain open until the agent manually closes it.

c) Choose Transaction Type = BOR Transaction Choose the BOR Object type you created Choose EXECUTE d) Choose Parameter: Object Key Value: <transaction code> .

7) IMG: Customer Relationship Management > UI Framework > Technical Role Definition > Define Navigation Bar Profile Create a new Logical Link Type: C Launch Transaction Target ID: EXECLTX Parameter class: CL_CRM_UI_LTX_NAVBAR_PARAM 8) IMG: Customer Relationship Management > UI Framework > Technical Role Definition > Define Navigation Bar Profile Create a new Direct Link Group and assign the logical link to it Assign the Direct Link Group to your Navigation Bar Profile IMG: Customer Relationship Management > Business Role > Define Business Role > Set the link to visible .

Launch URL 1) Transaction: SM30 View: CRMV_IC_LTX_URL Maintain the necessary URL details .

class name .2) Go to IMG path: Customer Relationship Management > UI Framework > > Technical Role Definition > Configure Transaction Launcher or transaction: CRMC_UI_ACTIONWZ a) Enter a new Transaction Launcher ID b) Enter a description.

c) Select the transaction type as a URL transaction and enter the URL ID d) Complete and save the transaction launcher 3) IMG: Customer Relationship Management > UI Framework > Technical Role Definition > Define Navigation Bar Profile Create an new Logical Link Type: C Launch Transaction Target ID: EXECLTX Parameter class: CL_CRM_UI_LTX_NAVBAR_PARAM .

go to the class mentioned while configuring the transaction launcher and go to the method IF_CRM_IC_ACTION_HANDLER~PREPARE_DATA_FLOW. 5. You can fill in the value while configuring the transaction launcher (if it’s a constant value).4) ) IMG: Customer Relationship Management > UI Framework > Technical Role Definition > Define Navigation Bar Profile Create a new Direct Link Group and assign the logical link to it Assign the Direct Link Group to your Navigation Bar Profile IMG: Customer Relationship Management > Business Role > Define Business Role > Set the link to visible Note: If you want to have a parameter accepted in the URL maintain the same in the URL definition. If the value for the parameter is to be filled dynamically. MVC Concept Presentation Layer (BSP) user inpu Request Controller set Model CRM WebClient data outpu Response View get Business Layer Data flow Control flow (BOL & GenIL) Business Engine (APIs) Tables . Make the necessary changes in this method.

Within the application there is a strict separation of reading/changing data.g. 6. . You can treat them as work areas. BOL & GenIL Presentation Layer (BSP) user input Request Controller Model View data output Response Business Layer BOL: Business Object Layer data structures of the BOL holding business objects for the UI session GenIL: Generic Interaction Layer GenIL Model and Implementation Classes connecting BOL to CRM APIs Business Engine (e. my SAP CRM) API API API BOL (Business Object Layer): The BOL structures hold the data while the UI session runs. (M) Model: The model is a kind of blackbox entity which contains all necessary methods to get access to business data and functions.This is a non-SAP specific programming model.. (V) View: View forms the presentation layer and that’s what is visible on the UI (C) Controller: Controller is responsible for accepting user inputs and interacting with the model to fetch the required results. showing data and reacting on user inputs. It is a general description of how to develop software with a clear separation of business logic and data model and the specific visual presentation of this data. Model interacts with the BOL and GenIL in order to get the required data. GenIL (Generic Interaction Layer): The GenIL layer includes the classes that connect the BOL with the underlying APIs that fetch the relevant data from the data base tables.

Note: You can have a look at the underlying GenIL classes as follows: Go To IMG path: Customer Relationship Management > CRM cross-application components > Generic interaction layer/object layer > Basic Settings These GenIL implementation classes connect the BOL to CRM application logic and database tables APIs BOL & Genil Tools Presentation Controller Layer View BSP Model BOL Display BOL Model Business Layer GenIL Transaction: BSP_WD_WORKBENCH or GENIL_MODEL_BROWSER GenIL IMG: Generic Interaction Layer/Object Layer Basic Settings test data retrieval from database to BOL through the GENIL Transaction: GENIL_BOL_BROWSER Business Engine AP I AP I AP I .

. access. Query Result objects (Search Result Objects): Aggregated set of fields from various root. View objects: Alias for a hard coded set of objects. GenIL Model: Relation Types Aggregations: Binds child objects to a root object. or dependent objects for faster display of result lists. Only Access and Dependent objects can be aggregated. Return a well defined root or access object type. ReadOnly by definition.You can view the entire model of a particular component at GENIL_MODEL_BROWSER Types Of Objects Root objects: Directly accessible via a distinct key (like Header GUID for BTOrder) and can be independently locked and maintained. Locked and maintained only via its root object. Query Services (Search Objects): Defined object search by given set of parameters. Dependent object: Aggregated by a distinct root objects. Access objects: Directly accessible via a distict key but locked and maintained only via its root object.

Can also be defined across components with root or access object as target.Compositions: Like an Aggregation. but composed child objects always exist. Associations: Link between any kind of objects. Component Workbench:MVC To work on UI Components SAP provides so called Component Workbench in CRM system. Transaction BSP_WD_CMPWB starts this Tool. You can also launch UI directly from here. You can test the data retrieval from the database to the BOL through GenIL using GENIL_BOL_BROWSER Using the pushbutton CHILDREN you can navigate to the relations as you see them on GENIL_MODEL_BROWSER and view the data. 7. When you’re on initial page you can enter component name CRM_UI_FRAME in input field “Test Application” and hit “Test” button to launch UI Go to the application and pick up one of the views and note the following: .

It is responsible for creating and connecting the context nodes. The sub elements which are managed by the context are the so called Context nodes. Each context node provides methods to get access to specific business data within SAP CRM databases. The View is implemented as so called business server page (BSP). The view takes over the data coming from model and prepares the final html output which is sent back to user’s browser for display. It’s also called the Implementation Class. Each context node refers to a single business object out of SAP’s Business Object Layer (BOL). The Model is represented by a collection of ABAP classes.htm file. This management class also follows a certain naming convention to always end on suffix _CTXT. One management class administrates several different model accesses classes. Certain layout specific coding can be found in here. Therefore this class is also called the Context class. Context Nodes are also implemented as ABAP classes.Controller : Model: Context & Context Nodes Controller: Event Handling & Navigation View: Layout The Controller gets implemented within a single ABAP class which follows the naming convention always to end on suffix _IMPL. Another pictorial representation . which is a .

DO _IMPL Before Output DO_INIT_CONTEXT PREPARE_OUTPUT After Input DO_HANDLE_DATA DO_HANDLE_EVENT Model Context *_ CTXT e. we shall have a look at the basic methods in the controller and the general architecture.g. Methods Some of the important methods and for what purpose they are used are listed below: a) DO_INIT_CONTEXT This method is used to initialize the context reference.do. You can check this to see . d) DO_HANDLE_DATA This is the very first method that the runtime would come to after user has made inputs on the view or a user action has been triggered. This method has an importing parameter called FORM_FIELDS. Partner View Layout: data outpu t *.Controller In this section. It calls the method CREATE_CONTEXT_NODES of the context class.g. Address ABAP/HTMLB-code describing the view layout Method GET_FIELD e. Attributes Each implementation class has an attribute called TYPED_CONTEXT which refers to the type of the Context Class (_CTXT).g. b) WD_CREATE_CONTEXT It instantiates the controller context reference. Each view has a controller which has the naming convention . Bus. HTM Context Nodes *_CN01 e. Street Response BOL DB Tables 8. c) WD_DESTROY_CONTEXT This method releases the controller context reference. The controller is implemented through a global class which generally ends with _IMPL.user inpu t Request Controller Class Methods: * .

( Refer chapter 15) b) CONNECT_NODES This method can be used to link the context nodes. This method also binds the context nodes to the nodes of the custom or component controller (to be covered later) if desired. There is also another attribute called OWNER which refers to the controller class reference at runtime. Context and Context Nodes The context class (_CTXT) class acts as a wrapper class which creates and connects all the context nodes together. h) Inbound(IP_) / Outbound(_OP) Plugs The inbound and outbound plugs are used to navigate in and out of a view.which fields have been changed on the view. Methods . e) DO_HANDLE_EVENT This is the event handler of the controller. Methods a) CREATE_CONTEXT_NODES This method creates the context nodes by referring to their respective types. Attributes The attribute BASE_ENTITY_NAME generally refers to the BOL relation that the context node refers to. 9. g) DO_PREPARE_OUTPUT This method is the method called just before the view is rendered to the user and can be used for any last changes in the display format. The context nodes (_CN01…) refer to a single business object. f) SET_MODELS This method is used to map the page attributes of the view with the context nodes or with the global attributes of the controller itself. From here the controller is routed to the different event handler methods depending on the user action triggered. If this method is not implemented then the data would not be visible on the view. Attributes The context class has each of the context nodes as its attributes. i) IF_BSP_WD_HISTORY_STATE_DESCR~GET_STATE_DESCRIPTION This method can be used for setting the header texts for the views.

e) GET_V_<attr_name> This method is used to give any value help to the fields on the view. Some of the extensions commonly used are HTMLB. Each of the BSP extensions provides certain tags. g) ON_NEW_FOCUS This method defines how the collection for the context node shall be created. The implementation of this method will be taken up later f) GET_P_<attr_name> This is used to describe the property of the attribute. c) GET_M_<attr_name> This method is used to get the metadata of the attribute (basically the data type that the attribute refers to) d) GET_I_<attr_name> This method is used to get the input readiness for the attribute.Config Tool CRM 2007 provides a very strong config tool in order to define the configuration of each view without writing much of html code. Various BSP extensions are available for us to code the view layout. If this method returns a FALSE then the attribute is displayed as a read-only field on the view. CHTMLB. It is usually called in the method CREATE_CONTEXT_NODES of the context class to initialize the collection. Each view has a set of page attributes which are used to display the data on the view.The context node class has the methods called getters and setters for each attribute in that BOL relation. 10. For example: you want a link to appear under one of the attributes then you can use this method.HTM file of the view. XHTMLB etc. . You can have a look at them in SE80 by selecting the option BSP Extensions.View Layout The view is the . 11. a) GET_<attr_name> This method fetches the value of the required attribute from the BOL structure which is then used to be displayed on the view b) SET_<attr_name> This method sets the value entered by the user on the view into the BOL structure.

This config would be visible when you launch your UI as the role config key is saved against your Business role. %> <chtmlb:config xml = "<%= lv_xml %>" mode = "RUNTIME" /> The code to be written at the view level for using this tool is as follows: Once this has been done the runtime understands that the view layout as to be picked up as defined in the configuration and you would be able to see a configuration tab in your component workbench. lv_xml = controller->configuration_descr->get_config_data( ). copy existing configuration and save the changed configuration against your Role Config key. <%@page language="abap" %> <%@extension name="chtmlb" prefix="chtmlb" %> <% DATA: lv_xml TYPE string. . Note: If you are defining a new configuration for a standard view. (Process defined in chapter 2) If you click on the Button Show Available Fields it would list down all the context nodes with the attributes in them.In order to use the config tool you need to use a Role Config key(described in Chapter 2).

Click on the button Show Field Properties after selecting a field .You can then select the required attribute and click the + or – buttons to add or remove fields from the view .

changing the row column positions. A viewset or view can only be part of exactly one window (still no direct reuse of views) The window is not only responsible for managing navigation between own views of the component but it is also mediating between the embedded and embedding component during runtime. changing labels.Window Concept Each component must have one or more windows which are hosting the views. Save your config and run UI. It acts as the interface between two single components which are reusing each other. Navigation is only possible between views or viewsets which are assigned to the same single window. It defines a root for a hierarchy of viewsets and views in the runtime repository. 12. making the field mandatory or read-only.You will be able to make changes like. .

.

View Areas and View Within a Window. Each of them appears as one Assignment Block (AB) in the configuration. As for a loading. A viewset consists of several fixed View areas and the views are attached to these view areas.13. we have 3 options: 1) Direct Load The entire view appears as soon as the UI is started 2) Lazy load The header text of the view appears as a link and you have to click on it to see the entire view 3) Hidden Such views are not displayed on the UI. You need to select the assignment blocks that you want to display. View Sets. we generally include an Over View Page (OVP) or View Sets. For Eg. . Views put into these areas will be displayed and processed in parallel when running in UI. ViewSet ViewArea View ViewArea View ViewSet In case of over view pages the views are attached to the OVP in the runtime repository. Below we can see a viewset with three different viewareas. UI Elements: OVP. Views can also be directly attached to a window.

H. I or M Note: First seven characters must be unique M includes S. .14. H. SAP naming conventions For e. BT<object><type>_<speaking string> Where <type> is S. Header (H) or Item (I) component. Component Concepts Components are usually bundled together within a MAIN Component for a specific field of functionality. If you notice the naming convention that would tell you if the component is a Main (M).g. I … Components NavBar (Profile) Logical Link Main Component M Technical ID = (Target-ID) Display IP IP IP Sub component Search Sub component Header OP IP Window Search ViewSet Window ViewSet View OP View OP OP The figure displayed above is a Main Component. Search (S).: One order.

Sub Components communicate via Inbound and Outbound Plugs. These Plugs enable data transfer between components as well as cross component navigation on UI. A View represents one UI screen with a certain collection of fields and data of a Business Object. Each Sub Component keeps certain Views.Each Main Component consists of all available Sub Components related to one certain Business Object like One Order etc. This target ID points to a specific so-called work area component together with a specific inbound plug to use. Definition of target IDs can be found in Customizing under CRM -> UI Framework -> Technical Role Definition -> Define Workarea Component Repository Important elements of a component Contains all Views. which should be displayed. To call such a “Main Component” from your Navigation Bar a target ID has to be defined. Element for Cross-View data transfer Main programming and UI Configuration objects Runtime repository of a Component Assignment of Views to Windows Combination of single Views into one Screen Navigation Description Exposition of Component Elements to the Outside Definition of Reusage of other Components .

To display parts of reused components. 15. This assignment will be done in Runtime Repository editor. 4) To enable an UI component to be reusable a so called Component Interface has to be defined. 5) A Component Usage defines which parts of an outside component are reused within the reusing component. To be able to show a view finally to the end user it has to be assigned to a Window. It gives a detailed description of which parts of an outside Component Interface are getting used and are available then to the reusing component. How and which views form a viewset can be defined in viewset section of runtime repository editor. In the Component Interface you define which views of the component can be reused and which data should be available to the outside. 2) Different single views can be combined together in a so-called Viewset to display them together on a single screen. It’s a kind of a dericted route description for a single navigation step. It is the same component set that you enter in the transaction GENIL_MODEL_BROWSER. A navigational link contains concrete information about on which source view a navigation starts and on which target view it ends. and can be also used as parts of a viewset or a Navigational Link. Component & Custom Controllers Component Controller highest level of all controllers is loaded at initial load of component can serve as data container manages binding of usages manages data transfer between components Binding of Context Node from custom controller to component controller . 3) Definition of Navigation between views can be found in description of so called Navigational Links.1) In the runtime repository we can find all necessary definitions how runtime objects work together during processing of UI Component. Component Usages are handled like inside views. Component Usage also has to be assigned to a Window. 6) The Models section is used to add the component set of the GenIL structure.

The component controller has a method WD_USAGE_INITIALIZE which is used to instantiate the context nodes in case of component usages. Based on the usage name the code is written as follows: Where iv_name is the name of the controller of the present component iv_target_node_name is the name of the context node in that controller iv_node_2_bind is the name of the context node of the used component Custom Controller Serves as a data container enables holding information past the lifetime of a view is loaded at the time the context of the controller is used the first time Used to transfer data between views of the same component Presentation Layer (BSP) Lifespan Lifespan Controller View 1 Model Context Node Custom Controller Model Context Node Lifespan Controller View 2 Model Context Node Business Layer (BOL. GenIL) Database The binding of the custom controller nodes with the nodes of the view happens in the method CREATE_CONTEXT_NODES of the context class of the view. .

business partner confirmed etc. The global data context is used to transfer data between components and to extend the lifespan of the data so that they survive the lifespan of a single component. . Global Data Context(GDC) Custom controllers can be used to share data between the views of a component and to extend the lifespan of data so that they survive the lifespan of a single view. In 2007 this concept is enhanced by the so called global data context. In the IC Web Client.The code is as follows: Where iv_name is the name of the controller iv_target_node_name is the name of the context node in that controller iv_node_2_bind is the name of the context node of the view As a component the architecture would look something like follows: Component M Component I Component H Component S View View View View View View View View View View View View 16. global data contexts are used a lot as some data need to be available during the whole session (communication process) like.

When doing enhancement for standard component a new BSP application will be created and standard components runtime repository gets copied in there. To access the Global Data Context the following code might be used: 17. we need an Enhancement Set.Technically a global data context is a public custom controller of a component. Enhancement Set For any customer modifications to the standard components. Creation of Enhancement Set Go to Transaction SM34 and cluster view BSPWDVC_CMP_EXT Create a new enhancement set. You need to enter only a name and description. Assignment of Enhancement Set to a client Go to Transaction SM30 and open maintain BSPWDV_EHSET_ASG .

choose the component you need to enhance and the enhancement set that you created 2) Click on the button Enhance Component . Enhancing Standard Components In order to enhance a standard component follow the steps: 1) In the component workbench.Assign the created enhancement set to the client you require 18.

6) All the methods are marked by colored icons Yellow: Inherited Green: Redefined Red: Does not exist . so you can go ahead and redefine methods or create new methods.3) When you do that you get an option to enter a new BSP application name ( This should be a new name) 4) Once you have done that in SM34 view BSPWDVC_CMP_EXT you will be able to see the enhancement definition 5) Right click on the view that you want to make changes to and say enhance (All objects in Grey have not been enhanced and the ones in Black have been enhanced) All the classes would be generated in the Z-namespace.

Creation of view sets Right click on Views and say create viewset . It would ask you to create a MainWindow which is usually the default window available in any component.7) Once you have done this you shall be able to see the same in SM34 view BSPWDVC_CMP_EXT under controller replacements against Enhancement definitions 19. Assign a package to the same. Creation of a new component with views and viewsets Follow the steps listed below: Go to component workbench and enter the name of the component and say create.

.

(Give a name to the view set and the number of rows and columns that you require) (You need to create view areas and enter the column and row positions and the spans) .

You will need to enter only the over view page name Creation of Views Right click on views and say create .Creation of Overview pages Right click on views and say create Overview page.

.

. etc. The code for creating the collection of the lower end nodes will be generated by the wizard.Model nodes are the ones which are picked up from BOL structures. The model nodes can be created as to be dependent on the higher model nodes as shown in the screen shot above. Value nodes are generally used for those data which are not a part of the BOL instead they could be referring to a DDIC table.

In this step you select the various attributes that you want in your context nodes. . Click on the add button and give the DDIC table name and then you can select all the attributes that you require in your value node. The setters and getters for the same would be generated by the wizard.

.

Form view contains form for data entry. Select the view type that you want to create.This step is used link the context nodes of the view with the context nodes of the custom controller. You can select an empty view and write the configuration code or else select the table view in case you want to have the display in the table format. In case of the table view you shall need to select the context node which you want to appear in the table format. . As covered in chapter 15 the code for binding the context nodes would be generated. Let us skip this step for now. We shall take up an example of custom controllers later.

Save the classes. . Next add the configuration code for the view in the . context and context nodes classes would be generated.All the controller.htm as covered in chapter 11 and create a configuration for the same.

Go to the runtime repository editor of the component and make the following changes Save the changes .

Save the changes .

In case you want to attach the same to an OVP instead follow the steps shown below: .(Finally the repository looks like this) Test the application. Similarly you can create other views and attach to the different view areas.

.After this in configuration select the assignment block and make it available.

20. This table needs to be filled in the method DO_PREPARE_OUTPUT of the implementation class as follows: At the view. This attribute is of the type CRMT_THTMLB_BUTTON_T. The list of the buttons will be provided in the method IF_BSP_WD_TOOLBAR_CALLBACK~GET_BUTTONS and the number of buttons is defined in the method IF_BSP_WD_TOOLBAR_CALLBACK~GET_NUMBER_OF_VISIBLE_B UTTONS. .htm level. A few ways are listed below: 1) Create an attribute GT_BUTTONS in the implementation class of the view. 2) In order to create the buttons in the toolbar. the following code needs to be maintained for displaying the buttons: This view has to be a part of an overview page and the button would be available besides the view header text. you shall need to implement the interface IF_BSP_WD_TOOLBAR_CALLBACK. Creation of Buttons There are many ways of creating buttons on views.

htm page. This section describes how it is done in UI. The implementation class for each view has a method DO_HANDLE_EVENT which is where the runtime comes to when a user action is triggered. From here it is routed to various event handlers depending on the event triggered. 3) The last method is to directly create the button using the extensions In this case the buttons would appear depending on their placement in the . The buttons in this case would appear in the tool bar. Event Handling Once you have created the buttons. 21. links etc. on the view you need event handlers to handle the user commands. .If the buttons are in a view which is a part of the view set you shall have to implement the interface in the view set as well.

then in the event handler right click and say Create Give the event name. Please note that it is very important to have this user command entered in the right case else the event handler cannot be determined correctly. Go to the controller class of the view.This code is generated by the wizard as follows. The wizard generates the event handler with a naming convention EH_ON<event_name> as follows: .

. Creation of IP and OP Right click on Inbound/Outbound plugs in the implementation class and say create. OP belongs to navigation target and contains coding to start Navigation.You can code what you desire in this method. These concepts are covered here. The inbound plugs are named IP_<Plug name> and outbound plugs are named OP_<Plug name> Navigational Link Navigational links define the mapping between a specific source with OP and target with IP. Inbound Plug / Outbound Plug IP and OP are methods of regarding view (or windows) controller classes. outbound plugs and inbound plugs. Navigation Concepts In order to navigate from one view to another on a user action we need navigational links. 22. IP belongs to navigation source. The navigational link name has to be unique.

navigation is mediated by mapping tables that are part of Navigation Bar Customizing and the Work area Component Repository. Creation of a navigational link Go to the runtime repository of the view and right click on the Navigational links and say add navigational link Create the navigational link with a unique name and provide the IP/OP and the view details. The steps are illustrated below: . The outbound plug would then call the Navigational link which would then navigate to the relevant view.If navigation target is an independent work area component. Navigation Procedure The event handler for the event would call the relevant outbound plug.

2) Navigation between a Component and a Work area Component through Navigation Bar E. However.g. the appropriate event handler and the outbound plugs are called.Navigation Request Event Handling of Request Calling of OutboundPlug Starting Navigation The highlighted name would be the name of the navigational link. Instead of that the outbound plug of a window in the component is called. Navigation from Sales Ticket View to Product Detail View in Component ICCMP_BT_SLT Navigation is not only handled within Component ICCMP_BT_SLT but responsibility of navigation is dispatched to be handled by the framework on the outside of the component. Navigation scenarios There are two main navigation scenarios in Web client UI 1) Navigation within a Component. where navigation is triggered by clicking a link. 1) The first step within this navigation scenario is similar to what we’ve seen before. in the outbound plug method no call of view_manager is done. This is what is depicted in the picture above. For the view. .

2) In the next step window controllers’ outbound plug method gives responsibility for navigation to the outside. . Name of fired outbound plug and name of outbound plug method have to be the same. by so-called firing an outbound plug to the framework.

Thus the navigation process is completed. This example maps object type PRD_MATSRV with object action DISPLAY to target ID TODETAIL. 4) These object type & object action combination can be mapped to their target within the “Generic OP (Outbound Plug) mapping” within navigation bar customizing. All navigation scenarios fall into only these 2 categories. (IMG Path: Customer Relationship Management-> UI Framework-> Technical Role Definition->Define navigation bar profile) In this customizing table there is defined which so called “Target ID” should be Used for an object type & object method combination. If component usages are defined the navigation happens as if it is an inside component navigation. P.3) Now Framework gets the information that for Component ICCMP_BT_SLT outbound plug “PRODUCTDETAIL” has been called.S. 5) The Target ID itself is also mapped to a specific component & inbound plug combination in Work area component repository. With this information Framework gets to Work area Component Repository (IMG Path: Customer Relationship Management->UI Framework->Technical Role Definition->Define Work Area Component Repository ) to check resulting object type and object action combination to find target for this navigation step. In this case outbound plug PRODUCTDETAIL of Component ICCMP_BT_SLT is mapped to Object Type: PRD_MATSRV with Action DISPLAY. .

Sign up to vote on this title
UsefulNot useful