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
tep!" #o to I$# %ath" &ustomer 'elationship $anagement ( Business 'oles (
)efine Business 'oles or to transaction &'$&*UI*%'+,IL-
tep." %ick a suitable role which /ou want to create a cop/ of and note the %,&#
'ole I)
tep01 #o to Transaction %,&# and create a 2 cop/ of the standard %,&# role
tep 3" +nce the %,&# 'ole is created go to I$# %ath" &ustomer 'elationship
$anagement ( Business 'oles ( )efine Business 'oles and create a new business
role with the above created %,&# 'ole1 4It is convenient to cop/ the standard role to
2 name space and change the %,&# role I)51 ave the changes1
tep 6" I$# %ath" &ustomer 'elationship $anagement ( Business 'oles ( )efine
+rganizational 7ssignment or transaction %%+$7*&'$
Users8Business partners are assigned within the +rganizational $odel to a
%osition
User 8 Business %artners can be assigned to multiple %ositions
-ach %osition can have e9actl/ one Business 'ole
)ouble click on the position, menu option #oto()etail +bject(-nhanced +bject
)escription
#o to Business role and click on create
$aintain the Business role
ave the changes and run UI1
2. Role Config Key
Purpose
:henever /ou do /our UI &onfiguration steps, /ou can choose to save /our changes
onl/ for a specific role configuration ke/1 +nl/ users with a Business 'ole assigned,
which has entered this 'ole &onfiguration ke/ will see /our changes
How to create and assign Role Config Key
tep !" #o to I$# %ath" &ustomer relationship management ( UI framework ( UI
framework )efinition ( )efine role configuration ke/
tep ." To assign the role config ke/ to the re;uired business role go to I$# %ath"
&ustomer relationship management ( Business roles ( )efine business roles1
tep 0" <ou can save /our configuration according to different parameters1 If different
configurations for one view have been saved /ou get an overview, if /ou press
=&hoose configuration>1 :ith =&op/ &onfiguration> /ou can cop/ an e9isting
configuration1 $ake the necessar/ changes to the config and save the same1 'un the
UI and notice the made changes1
3. Navigation Bar Customizing
The Navigation bar that is shown on the UI depends on the navigation bar profile
mentioned in the business role1
The path for customizing navigation bar is"
#o to I$# %ath" &ustomer relationship management ( UI framework ( Technical
'ole )efinition ( )efine navigation bar profile
The navigation bar is divided into . main categories"
!5 :ork &entres
.5 )irect Link groups
The navigation bar can have a two level menu1 -ach of the last level entr/ is known as
a Logical Link1
Logical Links can then be grouped as follows depending on whether /ou want to
include it as a work centre link or a direct Link
Part of work Centre
tep !1 &reate a relevant logical link
tep ." #roup different Logical Links as :ork &enter Link #roups
tep 0" #roup related :ork &enter Link #roups as work centres
tep 3" 7ssign the work centre to the navigation bar profile
Part of direct link group
tep !" &reate a relevant logical link
tep ." #roup different logical links as )irect Link groups
tep 0" 7ssign the direct link group to the navigation bar profile
+nce the above steps are done, we need to assign the navigation bar profile to the
business roles"
#o to I$# %ath" &ustomer 'elationship $anagement ( Business 'oles
7ssign /our navigation bar profile to the business role1
Note" <ou also need to go into options adjust work centers, adjust work centre groups
and adjust link groups and activate all the links that /ou need to see on the UI1
4.Transaction Launcher
Purpose
:ith Transaction Launcher /ou can integrate &alls of"
!5 -9ternal U'Ls which are defined in U'L repositor/
.5 :eb #ui Transaction of another 7% /stem with available IT
Pre-requisites
!5 The transaction Launcher can be used to launch U'Ls and B%s 8 B+'
transactions from other s/stems1
.5 To launch a #UI transaction a B+' object t/pe with a method -?-&UT-, that
supports s/nchronous calls is re;uired1
05 7 mapping of the logical s/stems is re;uired1 Transaction"
&'$*I&*&'+*<
35 To launch an U'L the U'L has to be defined in the U'L repositor/ first1
@iew" &'$@*I&*LT?*U'L
Launch GUI transaction
!5 To launch a #UI transaction a B+' object t/pe with a method -?-&UT-, that
supports s/nchronous calls is re;uired1
.5 Transaction" -AB ( :orkbench ( -dit object
05 &op/ B+' object t/pe TT& to 2TT&
05 In the method C-9ecuteD set the s/nchronous flag1
35 #enerate the object1
65 &heck that the s/stem is maintained in transaction &'$*I&*&'+*<
E5 #o to I$# path" &ustomer 'elationship $anagement ( UI ,ramework (
( Technical 'ole )efinition ( &onfigure Transaction Launcher or transaction"
&'$&*UI*7&TI+N:2
a5 -nter a launch transaction I)
b5 -nter a description, class name 42Fclass, don>t give names of e9isting classes
else the same gets overFwritten 5
If the T7T-,UL flag is set, the launch transaction will alwa/s be e9ecuted in a
new window and will remain open until the agent manuall/ closes it1
The '7I- @-T+ flag is used to raise a message to inform the agent that launch
transaction is open on a different window and is useful onl/ when the T7T-,UL
flag is set1
c5 &hoose Transaction T/pe G B+' Transaction
&hoose the B+' +bject t/pe /ou created
&hoose -?-&UT-
d5 &hoose %arameter" +bject He/
@alue" Itransaction code(
J5 I$#" &ustomer 'elationship $anagement ( UI ,ramework ( Technical 'ole
)efinition ( )efine Navigation Bar %rofile
&reate a new Logical Link
T/pe" & Launch Transaction
Target I)" -?-&LT?
%arameter class" &L*&'$*UI*LT?*N7@B7'*%7'7$
A5 I$#" &ustomer 'elationship $anagement ( UI ,ramework ( Technical 'ole
)efinition ( )efine Navigation Bar %rofile
&reate a new )irect Link #roup and assign the logical link to it
7ssign the )irect Link #roup to /our Navigation Bar %rofile
I$#" &ustomer 'elationship $anagement ( Business 'ole ( )efine Business
'ole ( et the link to visible
Launch URL
!5 Transaction" $0B @iew" &'$@*I&*LT?*U'L
$aintain the necessar/ U'L details
.5 #o to I$# path" &ustomer 'elationship $anagement ( UI ,ramework (
( Technical 'ole )efinition ( &onfigure Transaction Launcher or transaction"
&'$&*UI*7&TI+N:2
a5 -nter a new Transaction Launcher I)
b5 -nter a description, class name
c5 elect the transaction t/pe as a U'L transaction and enter the U'L I)
d5 &omplete and save the transaction launcher
05 I$#" &ustomer 'elationship $anagement ( UI ,ramework ( Technical 'ole
)efinition ( )efine Navigation Bar %rofile
&reate an new Logical Link
T/pe" & Launch Transaction
Target I)" -?-&LT?
%arameter class" &L*&'$*UI*LT?*N7@B7'*%7'7$
35 5 I$#" &ustomer 'elationship $anagement ( UI ,ramework ( Technical 'ole
)efinition ( )efine Navigation Bar %rofile
&reate a new )irect Link #roup and assign the logical link to it
7ssign the )irect Link #roup to /our Navigation Bar %rofile
I$#" &ustomer 'elationship $anagement ( Business 'ole ( )efine Business
'ole ( et the link to visible
Note" If /ou want to have a parameter accepted in the U'L maintain the same in
the U'L definition1 <ou can fill in the value while configuring the transaction
launcher 4if it>s a constant value51
If the value for the parameter is to be filled d/namicall/, go to the class mentioned
while configuring the transaction launcher and go to the method
I,*&'$*I&*7&TI+N*K7N)L-'L%'-%7'-*)7T7*,L+:1
$ake the necessar/ changes in this method1
. !"C Conce#t
Request
Response
Controller
user
inpu
t
data
outpu
t
View
Model
Presentation Layer (BSP)
Business Layer
(BOL & GenIL)
Tales
Business
!n"ine
CRM #eClient
set
"et
$ata %low
Control %low
(&PIs)
This is a nonF7% specific programming model1 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 data1
:ithin the application there is a strict separation of reading8changing data,
showing data and reacting on user inputs1
!" !odel# The model is a kind of blackbo9 entit/ which contains all necessar/
methods to get access to business data and functions11 $odel interacts with the
B+L and #enIL in order to get the re;uired data1
$" $iew# @iew forms the presentation la/er and that>s what is visible on the UI
C" Controller# &ontroller is responsible for accepting user inputs and interacting
with the model to fetch the re;uired results1
$. B%L & 'en(L
B%L Business %&'ect Layer"# The B+L structures hold the data while the UI
session runs1 <ou can treat them as work areas1
GenIL Generic Interaction Layer"#
Genil Co(ponents#
The #enil component is a class act as a link between e9isted business logic
Request
Response
user
input
data
output
Controller
View
Model
Presentation Layer (BSP)
Business
Layer
Business
!n"ine
(e'"' (y S&P CRM)
BOL) Business O*e+t
Layer
data stru+tures o% t,e BOL ,oldin" usiness
o*e+ts %or t,e -I session
GenIL) Generi+ Intera+tion
Layer
GenIL Model and I(ple(entation
Classes +onne+tin" BOL to CRM &PIs
&P
I
&P
I
&P
I
7nd UI frame work1
It communicates with #enil La/er )ia interfaces1
It defines hierarch/ data model to publishes in #enil La/er1 These so called
&'$ business objects1
The #enil &omponent does the mapping between data model and 7%Is 1
)ata structures are used in *PIs (ay not &e sa(e structures that are
e9posed to #enil as data model1
+he co(ponent class only does the data transfer between #enil data model
and the 7%Is
The #enIL la/er includes the classes that connect the B+L with the underl/ing
7%Is that fetch the relevant data from the data base tables1
Note" <ou can have a look at the underl/ing #enIL classes as follows"
#o To I$# path" &ustomer 'elationship $anagement ( &'$ crossFapplication
components ( #eneric interaction la/er8object la/er ( Basic ettings
These #enIL implementation classes connect the B+L to &'$ application logic
and database tables 7%Is
&omponents that do not have a entr/ in columns =object table>4definition of
business object with classification and ))I& structure5 and =model table>
4relation between business objects5 define their object model in methods like
#-T*$+)-L and #-T*+BM-&T*%'+% in the related implementing class1

BOL & Genil Tools
Controller
Model
Presentation
Layer
Business
Layer
Business
!n"ine
BOL
GenIL
View
BSP
$isplay BOL Model
Transa+tion)
BSP.#$.#OR/B!0C1 or
G!0IL.MO$!L.BRO#S!R
GenIL
IMG) Generi+ Intera+tion
Layer2O*e+t Layer
Basi+ Settin"s
test data retrie3al
%ro( dataase to
BOL t,rou", t,e
G!0IL
Transa+tion)
G!0IL.BOL.BRO#S!R
&P
I
&P
I
&P
I
<ou can view the entire model of a particular component at
G,-IL.!%D,L.BR%/0,R
Types Of Objects
Root o&'ects# )irectl/ accessible via a distinct ke/ 4like Keader #UI) for
BT+rder5 and can be independentl/ locked and maintained1
1uery 0er)ices 0earch %&'ects"# )efined object search b/ given set of
parameters1 'eturn a well defined root or access object t/pe1
Dependent o&'ect# 7ggregated b/ a distinct root objects1 Locked and maintained
onl/ via its root object1
1uery Result o&'ects 0earch Result %&'ects"# 7ggregated set of fields from
various root, access, or dependent objects for faster displa/ of result lists1 'eadF
+nl/ b/ definition1
*ccess o&'ects# )irectl/ accessible via a distict ke/ but locked and maintained
onl/ via its root object1
$iew o&'ects# 7lias for a hard coded set of objects1
GenL !odel" #elation Types
*ggregations# Binds child objects to a root object1 +nl/ 7ccess and )ependent
objects can be aggregated1
Co(positions# Like an 7ggregation, but composed child objects alwa/s e9ist1
*ssociations# Link between an/ kind of objects1 &an also be defined across
components with root or access object as target1
<ou can test the data retrieval from the database to the B+L through #enIL using
G,-IL.B%L.BR%/0,R
Using the pushbutton &KIL)'-N /ou can navigate to the relations as /ou see
them on #-NIL*$+)-L*B'+:-' and view the data1
). Com#onent *or+,ench-!"C
To work on UI &omponents 7% provides so called &omponent :orkbench in
&'$ s/stem1
Transaction B0P./D.C!P/B starts this Tool1
<ou can also launch UI directl/ from here1
:hen /ou>re on initial page /ou can enter component name &'$*UI*,'7$- in
input field CTest 7pplicationD and hit CTestD button to launch UI
#o to the application and pick up one of the views and note the following"
The Controller gets implemented within a single 7B7% class which follows the
naming convention alwa/s to end on suffi9 *I$%L1 It>s also called the
I(ple(entation Class2
The !odel is represented b/ a collection of 7B7% classes1
+ne management class administrates several different model accesses classes1
This management class also follows a certain naming convention to alwa/s end on
suffi9 *&T?T1 Therefore this class is also called the Conte3t class2 It is
responsible for creating and connecting the conte9t nodes1
The sub elements which are managed b/ the conte9t are the so called Conte3t
nodes2
-ach conte9t node refers to a single business object out of 7%>s Business +bject
La/er 4B+L51
&onte9t Nodes are also implemented as 7B7% classes1 -ach conte9t node
provides methods to get access to specific business data within 7% &'$
databases1
The $iew is implemented as so called business server page 4B%5, which is a 1htm
file1
&ertain la/out specific coding can be found in here1 The view takes over the data
coming from model and prepares the final html output which is sent back to user>s
browser for displa/1
%not&er pictorial representation
View) Layout
Controller
)
Class
Model)
Conte4t &
Conte4t
0odes
Controller)
!3ent 1andlin" & 0a3i"ation
..Controller
In this section, we shall have a look at the basic methods in the controller and the
general architecture1
-ach view has a controller which has the naming convention 1do1 The controller is
implemented through a global class which generall/ ends with *I$%L1
%ttributes
-ach implementation class has an attribute called T<%-)*&+NT-?T which
refers to the t/pe of the &onte9t &lass 4*&T?T51
!et&ods
ome of the important methods and for what purpose the/ are used are listed
below"
a5 )+*INIT*&+NT-?T
This method is used to initialize the conte9t reference1
b5 :)*&'-7T-*&+NT-?T
It instantiates the controller conte9t reference1 It calls the method
&'-7T-*&+NT-?T*N+)- of the conte9t class1
c5 :)*)-T'+<*&+NT-?T
This method releases the controller conte9t reference1
d5 )+*K7N)L-*)7T7
This is the ver/ first method that the runtime would come to after user has
made inputs on the view or a user action has been triggered1 This method has
an importing parameter called ,+'$*,I-L)1 <ou can check this to see
Request
Response
Controller
user
inpu
t
data
outpu
t
View
Model
5 '$O
5' 1TM
Conte4t
Conte4t
0odes
Met,od
5. CT6T
5.C078
G!T.9I!L$
Met,ods)
Be%ore Output
$O.I0IT.CO0T!6T
PR!P&R!.O-TP-T
&%ter Input
$O.1&0$L!.$&T&
$O.1&0$L!.!V!0T
Layout)
&B&P21TMLB:+ode
des+riin" t,e 3iew layout
e'"' Bus' Partner
e'"' &ddress
e'"' Street
$B Tales
BOL
Class .IMPL
which fields have been changed on the view1
e5 )+*K7N)L-*-@-NT
This is the event handler of the controller1 ,rom here the controller is routed to
the different event handler methods depending on the user action triggered1
f5 -T*$+)-L
This method is used to map the page attributes of the view with the conte9t
nodes or with the global attributes of the controller itself1 If this method is not
implemented then the data would not be visible on the view1
g5 )+*%'-%7'-*+UT%UT
This method is the method called just before the view is rendered to the user
and can be used for an/ last changes in the displa/ format1
h5 Inbound4I%*5 8 +utbound4*+%5 %lugs
The inbound and outbound plugs are used to navigate in and out of a view1
i5 I,*B%*:)*KIT+'<*T7T-*)-&'L#-T*T7T-*)-&'I%TI+N
This method can be used for setting the header te9ts for the views1
/. Conte0t an1 Conte0t No1es
The conte9t class 4*&T?T5 class acts as a wrapper class which creates and
connects all the conte9t nodes together1
%ttributes
The conte9t class has each of the conte9t nodes as its attributes1
There is also another attribute called +:N-' which refers to the controller
class reference at runtime1
!et&ods
a5 &'-7T-*&+NT-?T*N+)-
This method creates the conte9t nodes b/ referring to their respective t/pes1
This method also binds the conte9t nodes to the nodes of the custom or
component controller 4to be covered later5 if desired1 4 'efer chapter !65
b5 &+NN-&T*N+)-
This method can be used to link the conte9t nodes1
The conte9t nodes 4*&NB!N5 refer to a single business object1

%ttributes
The attribute B7-*-NTIT<*N7$- generall/ refers to the B+L relation
that the conte9t node refers to1
!et&ods
The conte9t node class has the methods called getters and setters for each
attribute in that B+L relation1
a5 #-T*Iattr*name(
This method fetches the value of the re;uired attribute from the B+L structure
which is then used to be displa/ed on the view
b5 -T*Iattr*name(
This method sets the value entered b/ the user on the view into the B+L
structure1
c5 #-T*$*Iattr*name(
This method is used to get the metadata of the attribute 4basicall/ the data t/pe
that the attribute refers to5
d5 #-T*I*Iattr*name(
This method is used to get the input readiness for the attribute1 If this method
returns a ,7L- then the attribute is displa/ed as a readFonl/ field on the
view1
e5 #-T*@*Iattr*name(
This method is used to give an/ value help to the fields on the view1 The
implementation of this method will be taken up later
f5 #-T*%*Iattr*name(
This is used to describe the propert/ of the attribute1 ,or e9ample" /ou want a
link to appear under one of the attributes then /ou can use this method1
g5 +N*N-:*,+&U
This method defines how the collection for the conte9t node shall be created1
It is usuall/ called in the method &'-7T-*&+NT-?T*N+)- of the
conte9t class to initialize the collection1
12."ie3 Layout
The view is the 1KT$ file of the view1
-ach view has a set of page attributes which are used to displa/ the data on the
view1
@arious B% e9tensions are available for us to code the view la/out1
<ou can have a look at them in -AB b/ selecting the option B% -9tensions1
-ach of the B% e9tensions provides certain tags1
ome of the e9tensions commonl/ used are KT$LB, &KT$LB, ?KT$LB etc1
11.Config Tool
&'$ .BBJ provides a ver/ strong config tool in order to define the configuration
of each view without writing much of html code1
In order to use the config tool /ou need to use a 'ole &onfig ke/4described in
&hapter .51
The code to be written at the view level for using this tool is as follows"
<%@page language="abap" %>
<%@extension name="chtmlb" prefx="chtmlb" %>
<%
DATA:
lv_xml T!" string#
lv_xml = controller$>confguration_%escr$>get_confg_%ata& '#
%>
<chtmlb:confg xml = "<%= lv_xml %>"
mo%e = "()*T+,"" ->
+nce this has been done the runtime understands that the view la/out as to be
picked up as defined in the configuration and /ou would be able to see a
configuration tab in /our component workbench1

Note" If /ou are defining a new configuration for a standard view, cop/ e9isting
configuration and save the changed configuration against /our 'ole &onfig ke/1 This
config would be visible when /ou launch /our UI as the role config ke/ is saved
against /our Business role1 4%rocess defined in chapter .5
If /ou click on the Button '&ow %(ailable )ields it would list down all the conte9t
nodes with the attributes in them1
<ou can then select the re;uired attribute and click the O or P buttons to add or
remove fields from the view
1
&lick on the button '&ow )ield Properties after selecting a field
<ou will be able to make changes like, changing the row column positions, changing
labels, making the field mandator/ or readFonl/1
ave /our config and run UI1
12.*in1o3 Conce#t
-ach component must have one or more windows which are hosting
the views1
It defines a root for a hierarch/ of viewsets and views in the runtime repositor/1
Navigation is onl/ possible between views or viewsets which are assigned to the same
single window1
7 viewset or view can onl/ be part of e9actl/ one window 4still no direct reuse of
views5
The window is not onl/ responsible for managing navigation between own views of
the component but it is also mediating between the embedded and embedding
component during runtime1
It acts as the interface between two single components which are reusing each other1
13. 4( 5lements- %"67 "ie3 8ets7 "ie3 9reas an1 "ie3
:ithin a :indow, we generall/ include an +ver @iew %age 4+@%5 or @iew ets1
@iews can also be directl/ attached to a window1
7 viewset consists of several fi9ed $iew areas and the views are attached to these
view areas1 ,or -g1 Below we can see a viewset with three different viewareas1
@iews put into these areas will be displa/ed and processed in parallel when running in
UI1
In case of over view pages the views are attached to the +@% in the runtime
repositor/1 -ach of them appears as one 7ssignment Block 47B5 in the
configuration1 <ou need to select the assignment blocks that /ou want to displa/1
7s for a loading, we have 0 options"
!5 )irect Load
The entire view appears as soon as the UI is started
.5 Laz/ load
The header te9t of the view appears as a link and /ou have to click on it to see the
entire view
05 Kidden
uch views are not displa/ed on the UI1
ViewSet
ViewArea
View
View&rea
ViewSet
View
14. Com#onent Conce#ts
&omponents are usuall/ bundled together within a $7IN &omponent for a
specific field of functionalit/1
If /ou notice the naming convention that would tell /ou if the component is a
$ain 4$5, earch 45, Keader 4K5 or Item 4I5 component1
'%P na*ing con(entions
,or e1g1" +ne orderQ BTIobject(It/pe(*Ispeaking string(
:here It/pe( is , K, I or $
Note" ,irst seven characters must be uni;ue
$ includes , K, I N &omponents
The figure displa/ed above is a $ain &omponent1
Main Component M
IP
IP
OP
OP
0a3Bar (Pro%ile)
Lo"i+al Lin;
Te+,ni+al
I$ <
(Tar"et:I$)
Su +o(ponent
Sear+,
ViewSet
View
#indow
IP
Sear+,
$isplay
OP
#indow
ViewSet
View
IP
Su +o(ponent
1eader
OP
-ach $ain &omponent consists of all available ub &omponents related to one
certain Business +bject like +ne +rder etc1
-ach ub &omponent keeps certain @iews1 7 @iew represents one UI screen with
a certain collection of fields and data of a Business +bject1
ub &omponents communicate via Inbound and +utbound %lugs1
These %lugs enable data transfer between components as well as cross component
navigation on UI1
To call such a C$ain &omponentD from /our Navigation Bar a target I) has to be
defined1
This target I) points to a specific soFcalled work area co(ponent together with
a specific in&ound plug to use1
)efinition of target I)s can be found in &ustomizing under C#! -+ ,
)ra*ework -+ Tec&nical #ole -efinition -+ -efine .orkarea Co*ponent
#epository
*portant ele*ents of a co*ponent
#unti*e repository of a Co*ponent
Contains all Views= w,i+,
s,ould e displayed'
!le(ent %or Cross:View data
trans%er
Main pro"ra((in" and -I
Con%i"uration o*e+ts
&ssi"n(ent o% Views to #indows
Co(ination o% sin"le Views into
one S+reen
0a3i"ation $es+ription
!4position o% Co(ponent
!le(ents to t,e Outside
$e%inition o% Reusa"e o% ot,er
Co(ponents
!5 In the runtime repositor/ we can find all necessar/ definitions how runtime
objects work together during processing of UI &omponent1
To be able to show a view finall/ to the end user it has to be assigned to a
.indow/ This assignment will be done in 'untime 'epositor/ editor1
.5 )ifferent single views can be combined together in a soFcalled $iewset to
displa/ them together on a single screen1
Kow and which views form a viewset can be defined in viewset section of runtime
repositor/ editor1
05 )efinition of Navigation between views can be found in description of so
called 0a(igational Links1
7 navigational link contains concrete information about on which source view a
navigation starts and on which target view it ends1 It>s a kind of a dericted route
description for a single navigation step1
35 To enable an UI component to be reusable a so called Co*ponent nterface has
to be defined1
In the &omponent Interface /ou define which views of the component can be
reused and which data should be available to the outside1
65 7 Co*ponent ,sage defines which parts of an outside component are reused
within the reusing component1
It gives a detailed description of which parts of an outside &omponent Interface
are getting used and are available then to the reusing component1
&omponent Usages are handled like inside views, and can be also used as parts of
a viewset or a Navigational Link1
To displa/ parts of reused components, &omponent Usage also has to be assigned
to a :indow1
E5 The !odels section is used to add the component set of the #enIL structure1 It
is the same component set that /ou enter in the transaction
#-NIL*$+)-L*B'+:-'1
1. Com#onent & Custom Controllers
Co*ponent 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 &onte9t Node from custom controller to component controller
The component controller has a method :)*U7#-*INITI7LI2- which is used
to instantiate the conte9t nodes in case of component usages1 Based on the usage
name the code is written as follows"
:here iv*name is the name of the controller of the present component
iv*target*node*name is the name of the conte9t node in that controller
iv*node*.*bind is the name of the conte9t node of the used component
Custo* Controller
erves as a data container
enables holding information past the lifetime of a view
is loaded at the time the conte9t of the controller is used the first time
Used to transfer data between views of the same component
The binding of the custom controller nodes with the nodes of the view happens in
the method &'-7T-*&+NT-?T*N+)- of the conte9t class of the view1
Presentation Layer (BSP)
Controller
View 8
Model
Conte4t 0ode
Model
Conte4t 0ode
Controller
View >
Custo(
Controller
Model
Conte4t 0ode
Li%espan
Business Layer (BOL= GenIL)
$ataase
Li%espan
Li%espan
The code is as follows"
:here iv*name is the name of the controller
iv*target*node*name is the name of the conte9t node in that controller
iv*node*.*bind is the name of the conte9t node of the view
7s a component the architecture would look something like follows"
1$. 'lo,al :ata Conte0t;':C<
&ustom controllers can be used to share data between the views of a component and
to e9tend the lifespan of data so that the/ survive the lifespan of a single view1
In .BBJ this concept is enhanced b/ the so called global data conte9t1 The global data
conte9t is used to transfer data between components and to e9tend the lifespan of the
data so that the/ survive the lifespan of a single component1
In the I& :eb &lient, global data conte9ts are used a lot as some data need to be
available during the whole session 4communication process5 like, business partner
confirmed etc1
View
View
View
View
Co(ponent I
View
View
View
View
Co(ponent 1
View
View
View
View
Co(ponent S
Co(ponent M
Technicall/ a global data conte9t is a public custom controller of a component1
To access the #lobal )ata &onte9t the following code might be used"
1). 5nhancement 8et
,or an/ customer modifications to the standard components, we need an
-nhancement et1
:hen doing enhancement for standard component a new B% application will be
created and standard components runtime repositor/ gets copied in there1
Creation of 1n&ance*ent 'et
#o to Transaction $03 and cluster view B%:)@&*&$%*-?T
&reate a new enhancement set1 <ou need to enter onl/ a name and description1
%ssign*ent of 1n&ance*ent 'et to a client
#o to Transaction $0B and open maintain B%:)@*-K-T*7#
7ssign the created enhancement set to the client /ou re;uire
1.. 5nhancing 8tan1ar1 Com#onents
In order to enhance a standard component follow the steps"
!5 In the component workbench, choose the component /ou need to enhance and
the enhancement set that /ou created
.5 &lick on the button -nhance &omponent
05 :hen /ou do that /ou get an option to enter a new B% application name
4 This should be a new name5
35 +nce /ou have done that in $03 view B%:)@&*&$%*-?T /ou will be
able to see the enhancement definition
65 'ight click on the view that /ou want to make changes to and sa/ enhance
47ll objects in #re/ have not been enhanced and the ones in Black have been
enhanced5 7ll the classes would be generated in the 2Fnamespace, so /ou can
go ahead and redefine methods or create new methods1
E5 7ll the methods are marked b/ colored icons
<ellow" Inherited
#reen" 'edefined
'ed" )oes not e9ist
J5 +nce /ou have done this /ou shall be able to see the same in $03 view
B%:)@&*&$%*-?T under controller replacements against -nhancement
definitions
1/. Creation of a ne3 com#onent 3ith vie3s an1
vie3sets
,ollow the steps listed below"
#o to component workbench and enter the name of the component and sa/
create1 It would ask /ou to create a $ain:indow which is usuall/ the default
window available in an/ component1 7ssign a package to the same1
Creation of (iew sets
'ight click on @iews and sa/ create viewset
4#ive a name to the view set and the number of rows and columns that /ou re;uire5
4<ou need to create view areas and enter the column and row positions and the spans5
Creation of O(er(iew pages
'ight click on views and sa/ create +verview page1 <ou will need to enter onl/ the
over view page name
Creation of $iews
'ight click on views and sa/ create
$odel nodes are the ones which are picked up from B+L structures1 The model nodes
can be created as to be dependent on the higher model nodes as shown in the screen
shot above1 The code for creating the collection of the lower end nodes will be
generated b/ the wizard1
@alue nodes are generall/ used for those data which are not a part of the B+L instead
the/ could be referring to a ))I& table, etc1
In this step /ou select the various attributes that /ou want in /our conte9t nodes1 The
setters and getters for the same would be generated b/ the wizard1
&lick on the add button and give the ))I& table name and then /ou can select all the
attributes that /ou re;uire in /our value node1
This step is used link the conte9t nodes of the view with the conte9t nodes of the
custom controller1 7s covered in chapter !6 the code for binding the conte9t nodes
would be generated1
:e shall take up an e9ample of custom controllers later1 Let us skip this step for now1
elect the view t/pe that /ou want to create1 <ou can select an empt/ view and write
the configuration code or else select the table view in case /ou want to have the
displa/ in the table format1 In case of the table view /ou shall need to select the
conte9t node which /ou want to appear in the table format1 ,orm view contains form
for data entr/1
7ll the controller, conte9t and conte9t nodes classes would be generated1 ave the
classes1
Ne9t add the configuration code for the view in the 1htm as covered in chapter !! and
create a configuration for the same1
#o to the runtime repositor/ editor of the component and make the following changes
ave the changes
ave the changes
4,inall/ the repositor/ looks like this5
Test the application1
imilarl/ /ou can create other views and attach to the different view areas1
In case /ou want to attach the same to an +@% instead follow the steps shown below"
7fter this in configuration select the assignment block and make it available1
22. Creation of Buttons
There are man/ wa/s of creating buttons on views1 7 few wa/s are listed below"
!5 &reate an attribute #T*BUTT+N in the implementation class of the view1
This attribute is of the t/pe &'$T*TKT$LB*BUTT+N*T1 This table needs
to be filled in the method )+*%'-%7'-*+UT%UT of the implementation
class as follows"
7t the view1htm level, the following code needs to be maintained for displa/ing
the buttons"
This view has to be a part of an overview page and the button would be available
besides the view header te9t1
.5 In order to create the buttons in the toolbar, /ou shall need to implement the
interface I,*B%*:)*T++LB7'*&7LLB7&H1 The list of the buttons will
be provided in the method
I,*B%*:)*T++LB7'*&7LLB7&HL#-T*BUTT+N
and the number of buttons is defined in the method
I,*B%*:)*T++LB7'*&7LLB7&HL#-T*NU$B-'*+,*@IIBL-*B
UTT+N1
If the buttons are in a view which is a part of the view set /ou shall have to
implement the interface in the view set as well1
The buttons in this case would appear in the tool bar1
05 The last method is to directl/ create the button using the e9tensions
In this case the buttons would appear depending on their placement in the 1htm
page1
21. 5vent =an1ling
+nce /ou have created the buttons, links etc1 on the view /ou need event handlers
to handle the user commands1 This section describes how it is done in UI1
The implementation class for each view has a method )+*K7N)L-*-@-NT
which is where the runtime comes to when a user action is triggered1 ,rom here it
is routed to various event handlers depending on the event triggered1
This code is generated b/ the wizard as follows1 #o to the controller class of the
view, then in the event handler right click and sa/ &reate
#ive the event name1 Please note t&at it is (ery i*portant to &a(e t&is user
co**and entered in t&e rig&t case else t&e e(ent &andler cannot be deter*ined
correctly/
The wizard generates the event handler with a naming convention
-K*+NIevent*name( as follows"
<ou can code what /ou desire in this method1
22. Navigation Conce#ts
In order to navigate from one view to another on a user action we need
navigational links, outbound plugs and inbound plugs1 These concepts are covered
here1
nbound Plug 2 Outbound Plug
I% and +% are methods of regarding view 4or windows5 controller classes1 I%
belongs to navigation source1 +% belongs to navigation target and contains coding
to start Navigation1
Creation of P and OP
'ight click on Inbound8+utbound plugs in the implementation class and sa/
create1 The inbound plugs are named I%*I%lug name( and outbound plugs are
named +%*I%lug name(
0a(igational Link
Navigational links define the mapping between a specific source with +% and
target with I%1 The navigational link name has to be uni;ue1
If navigation target is an independent work area component, navigation is
mediated b/ mapping tables that are part of Navigation Bar &ustomizing and the
:ork area &omponent 'epositor/1
Creation of a na(igational link
#o to the runtime repositor/ of the view and right click on the Navigational links
and sa/ add navigational link
&reate the navigational link with a uni;ue name and provide the I%8+% and the
view details1
0a(igation Procedure
The event handler for the event would call the relevant outbound plug1
The outbound plug would then call the Navigational link which would then
navigate to the relevant view1
The steps are illustrated below"
The highlighted name would be the name of the navigational link1
0a(igation scenarios
There are two main navigation scenarios in :eb client UI
!5 Navigation within a &omponent1 This is what is depicted in the picture above1
.5 Navigation between a &omponent and a :ork area &omponent through
Navigation Bar
-1g1 Navigation from ales Ticket @iew to %roduct )etail @iew in &omponent
I&&$%*BT*LT
Navigation is not onl/ handled within &omponent I&&$%*BT*LT but
responsibilit/ of navigation is dispatched to be handled b/ the framework on the
outside of the component1
!5 The first step within this navigation scenario is similar to what we>ve seen
before1 ,or the view, where navigation is triggered b/ clicking a link, the
appropriate event handler and the outbound plugs are called1
Kowever, in the outbound plug method no call of view*manager is done1 Instead
of that the outbound plug of a window in the component is called1
0a3i"ation Request
!3ent 1andlin" o% Request
Callin" o% OutoundPlu"
Startin" 0a3i"ation
.5 In the ne9t step window controllers> outbound plug method gives responsibilit/
for navigation to the outside, b/ soFcalled firing an outbound plug to the
framework1 Name of fired outbound plug and name of outbound plug method
have to be the same1
05 Now ,ramework gets the information that for &omponent I&&$%*BT*LT
outbound plug C%'+)U&T)-T7ILD has been called1
:ith this information ,ramework gets to :ork area &omponent 'epositor/ 4I$#
%ath" &ustomer 'elationship $anagementF(UI ,rameworkF(Technical 'ole
)efinitionF()efine :ork 7rea &omponent 'epositor/ 5 to check resulting object
t/pe and object action combination to find target for this navigation step1
In this case outbound plug %'+)U&T)-T7IL of &omponent I&&$%*BT*LT
is mapped to +bject T/pe" %')*$7T'@ with 7ction )I%L7<1
35 These object t/pe R object action combination can be mapped to their target
within the C#eneric +% 4+utbound %lug5 mappingD within navigation bar
customizing1 4I$# %ath" &ustomer 'elationship $anagementF( UI ,rameworkF(
Technical 'ole )efinitionF()efine navigation bar profile5
In this customizing table there is defined which so called CTarget I)D should be
Used for an object t/pe R object method combination1
This e9ample maps object t/pe %')*$7T'@ with object action )I%L7< to
target I) T+)-T7IL1
65 The Target I) itself is also mapped to a specific component R inbound plug
combination in :ork area component repositor/1
Thus the navigation process is completed1
%11 7ll navigation scenarios fall into onl/ these . categories1 If component usages
are defined the navigation happens as if it is an inside component navigation1