Demonstrating caf.doc

Composite Toolbox
NPI Demo & Innovation Team
2006
Demonstrating
CAF
Version 2.0

TABLE OF CONTENTS
1 Demo Scenario Overview .............................................................................................................. 1
1.1. Story Outline ................................................................................................................................. 1
1.2. Roles............................................................................................................................................. 1
1.3. Users ............................................................................................................................................ 1
1.4. Duration (of movie) ....................................................................................................................... 1
2 Detailed Storyboard ....................................................................................................................... 2
2.1. Demo Part 1 - Guided Procedure “My First Day” ......................................................................... 2
2.1.1 Overview................................................................................................................................ 2
2.1.2 Detailed navigation................................................................................................................ 2
2.2. Demo Part 2 – Service enabling the CAF application .................................................................. 5
2.2.1 Overview................................................................................................................................ 5
2.2.2 Detailed navigation................................................................................................................ 5
2.3. Demo Part 3 – Creating a Visual Composer application............................................................ 13
2.3.1 Overview.............................................................................................................................. 13
2.3.2 Detailed navigation.............................................................................................................. 13
2.4. Demo Part 4 – Extending the Guided Procedure ....................................................................... 23
2.4.1 Overview.............................................................................................................................. 23
2.4.2 Detailed navigation.............................................................................................................. 23

1
1 DEMO SCENARIO OVERVIEW
1.1. STORY OUTLINE
The business case of this story is to add a new step for the new employee’s manager in order to let
him get an overview of the items the employee registered in his self-assessment. This requires an
service-enabling of the registration application (Part 2), the creation of a new UI (Part 3) and the
extention of the existing Guided Procedure (Part 4).
The demo starts with the existing Guided Procedure for a new employee’s first day.
1.2. ROLES
DESIGNATION NAME COMMENTS
End user Miller, Jamie A new employee at IteLO
Manager CTB_ADMIN The adminstrator is also used
as manager of Jamie Miller (in
Part 4)
1.3. USERS
Predefined users Password Comments
CTB_ADMIN sap123 Administrator for WebAS, Enterprise
Portal and Visual Composer – used for
design time and development purposes
<NW Developer Studio> sapides123 SDM deployment from the IDE
14132 sap123 User (Jamie Miller) for different
scenarios
1.4. DURATION (OF MOVIE)
DESCRIPTION
Demo Part 1: (3 min) – Guided Procedure “My First Day”
Demo Part 2: (5 min) – Service enabling the CAF Core application
Demo Part 3: (8 min) – Creating a Visual Composer application based on the CAF Core service
Demo Part 4: (8 min) – Extend the Guided Procuedure with the new Visual Composer UI

2
2 DETAILED STORYBOARD
2.1. DEMO PART 1 - GUIDED PROCEDURE “MY FIRST DAY”
2.1.1 Overview
This demo serves as an entry point for the subsequent 3 demo parts. It demonstrates how a
employee’s first day in a company is made easier with the usage of Guided Procedures as a user
interface based process. Instead of navigation through different worksets within the portal (as with
Employee Self Service), the new employee is guided through all steps required to get up-to-speed
quickly.
2.1.2 Detailed navigation
Steps
Log on to the portal as an administrator
(CTB_ADMIN).
Start a new Guided Procedure process
by clicking on the link „Start My First
Day“.
Notice: In a productive system, this
process would be automatically triggered
by a HR-system, e.g. at the day the
employee joins the company.
The new employee opens the portal and
in the inbox sees all task waiting for him.
One of the is the „First Day“ Guided
Procedure.
Log on to the portal as an employee
(14132).
Navigate to the workset „Runtime“ and
then click on the link „Task that require
my action…“.
Notice: In this scenario the Guided
Procedure Work Center is used, but the
Universal Work List (UWL) could be used
as well as an inbox for processes, mails
etc.

3
To open the process, click on the link
“Welcome to ITeLO”.
The employee is welcomed by a screen
telling him the next steps and giving him
background information on the company.
All the personalized information (name
etc) are based on the user information
retrieved from the portal context. This
means, when Jamie runs the process,
the name of Jamie will be displayed.
Click on the button ”Start my first day
procedure” to continue.
Jamie gets the information already stored
in the HR system (which is based on the
data from his job application). Necessary
changes to the data can be done before
confirming.
Click on the button „Confirm“
Similar to the address data screen, the
bank data is retrieved from the HR
system and displayed. Again, changes
can be made and confirmed.

4
The Hardware Registration screen is
different from the other screen – this is
an entirely custom made application
since these information cannot be stored
elsewhere (e.g. ERP). To Jamie this is
just another step in the process, though.
The business case for the application is
to make a self-assesment of all devices
and hardware handed out on the first
day. These data are stored in the CAF
application itself.
Jamie can add some new equipments,
save and continue with the button
“Complete”.
Notice: The development scenario for
this application can be found in the “How-
To-Guide” for CAF Core
As part of the policy at ITeLO, Jamie has
to agree on the confidentiality
obilgations. The agreement document is
automatically produced and filled with the
user’s name and displayed as an Adobe
Interactive Form. Jamie can print out the
formular, sign it and send it to the HR
department.
One of the benefits of having this screen
as part of the Guided Procedure is that
the responsible manager now knows that
all new employees must have seen the
agreement upon running the process.
There is no way around by saying “I’ve
never seen that document, so I couldn’t
agree to it”…
Proceed with the button “Complete”
The process has now been completed.
In a productive environment, other
screens and information would perhaps
be added to the process making it even
more comprehensive. How to do so is
the focus of the subsequent sessions.
Log off the portal

5
2.2. DEMO PART 2 – SERVICE ENABLING THE CAF APPLICATION
2.2.1 Overview
This part of the demo covers how to make an existing CAF application ready to be used in other
environments. This is accomplished by creating Web Services from the application. The application is
a custom made application which handles all aspects around administrating objects – in this case
hardware and devices registered on an employee. Amongst others, the persistency of the objects and
the life-cycle methods (create, read, update, delete) as well as integration to other systems are topics
covered by the application.
For more information on the development of the CAF core application, see the document
“HowTo_CAF_Core”
Steps
Before you start: Notice that you have to
run through this session at least once in
order to run the next two sessions.
The CAF application “Hardware
registration” is implemented with the SAP
Developer Studio. It contains all entity
models, service integration and access
methods required to make it a full-blown
application with own business logic and
persistency. So far, only the internal Web
Dynpro project has been used as an UI.
The goal of this demo session is to make
the application also available to other (UI)
technologies by creating Web Service
interfaces from the methods.
On the operating system’s desktop,
double-click on the icon „SAP
NetWeaver Developer Studio“

6
Open the perspective “Composite
Applications” from the window menu in
case it isn’t open already.
The project used in this demo is called
“basis.core.register (sap.com)”.
Expand the root node.
Notice: In case the project is closed (by
somebody else), go the tab page
“Navigator”. A CAF core project consists
of 6 subprojects (identified by name
“basis.core.register…”) – select them all
and open them from the context menu.
Then go back to the tab page “Service
Explorer”.
To recapture the entity models and their
relationship, open the Entity “Employee”.
The core of the application is an entity
called “Employee”. This employee object
has a 0..n relationship to “Equipments”
(hardware). In words, this means an
employee can have 0 or more equipment
items registered.

7
On the tab page “Operations” you will find
the automatically created life-cycle
operations as well as the custom made
operation “findByPersonalID”.
These operations are used by the
business logic (the “application services”)
of the CAF application.
Now, back to the service enabling of this
application. The logic is implemented in
the application service “RegisterApp” in
different operations. Some of this will now
be service enabled.
Double-click on the application service
“RegisterApp” to open it.
On the tab page “Operations” you can find
all implemented service operations of the
application. These are all potential
candidates to be exposed as web
services, but in our case we will need only
two of them:
“FindEmployeeOnlyByPersonalID”
and
“FindEquipmentOnlyByPersonalID”
These operations will later be used in a
manager’s UI (created with Visual
Composer) to retrieve the information
stored by the employee.

8
To actually enable the application to
create Web Services, the application must
be marked accordingly.
Go back to the tab page “General” and
check-mark the option “Remote Enabled
Service”.
Notice: This is a one-time effort – the next
time you run the demo, both options will
have the checkmark and be disabled.
Save the metadata before you continue
.
To create the interfaces, select the
application service „RegisterApp“ and
open the context menu.
Select „Web Service“ and then „New“

9
Select the inputfield „Web Service
Name“ and type in the name
„RegisterAppBasisWS“.
Continue with „Next“
Notice: The next time you run this demo
you will have to choose another name –
e.g. „RegisterAppBasisWS1“. Remember
this when you select the Web Service in
the next demo session.
All available service operations are listed.
From this list, first “Deselect All” and then
select the two operations
“FindEmployeeOnlyByPersonalID”
and
“FindEquipmentOnlyByPersonalID”
Continue with “Next”

10
The specification of the interfaces are
created automatically.
Leave the defaults and press „Finish“
All interfaces and descriptions will now be
created.
The result can be found in the “WS
Deployment Description Editor” which is
opened automatically after creation.
Notice: In case you already created Web
Services, these will also be listed here.
The project is now ready to be build and
deployed.
From the project root, open the context
menu, select ”Development Component”
and then ”Build”
Confirm any popups and wait until the
project has been build.

11
To deploy the application, again select the
project root, open the context menu and
select “Deploy to J2EE engine”.
Eventually, you will be asked for the SDM
password (which is found in chapter 1.3
Users).
The deployment is ready when all 5
projects have been deployed.

12
To test the newly created web services,
open a browser and from the startpage
select the link ”Web Services Navigator”.
Notice: The startpage is
<servername:port>/index.html
From the Web Services Navigator page,
scroll down to Web Service you just
defined – e.g. RegisterAppBasisWS –
and open it.
The overview page gives you information
about the service like the WSDL (needed
in the next demo session).
To test the service, click on the link „Test“

13
The two operations can now be tested
directly.
Click on the link
“FindEmployeeOnlyByPersonalID_R”
Enter the personalID “14132” and click on
“Send” and watch the response.
The Web Service is now ready for use.
2.3. DEMO PART 3 – CREATING A VISUAL COMPOSER APPLICATION
2.3.1 Overview
This demo session shows how to create a new user interface for the manager’s overview page based
on existing web services.
The session covers the steps of creating a new application (“model”) in Visual Composer, integrating
the Web Service and create a user interface based on these web service operations. Finally, the
application will be made ready for use in a Guided Procedure.
Steps
Before you start: Notice that this session
requires that Web Services have already
been created (see Demo Part 2).

14
Optional step: As an introduction to the
session you can recapture the last step of
Demo Part 2 to show the Web Service
being tested.
To test the newly created web services,
open a browser and from the startpage
select the link ”Web Services Navigator”.
Notice: The startpage is
<servername:port>/index.html
Optional step:
From the Web Services Navigator page,
scroll down to Web Service you just
defined – e.g. RegisterAppBasisWS –
and open it.
Optional step:
The overview page gives you information
about the service like the WSDL (needed
in the next demo session).
To test the service, click on the link „Test“

15
Optional step:
The two operations can now be tested
directly.
Click on the link
“FindEmployeeOnlyByPersonalID_R”
Optional step:
Enter the personalID “14132” and click on
“Send” and watch the response.
Log on to the Visual Composer
application as an administrator
(CTB_ADMIN).
Notice: Link <servername:port>/VC
From the Menu “Model” select “New
Model”

16
Use “HardwareOverview” as name of the
model.
Confirm with “OK”
Notice: Select another name in case this
has already been used, but remember this
name for the next session.
From the Components overview, select
“iView” and drag-and-drop this onto the
Visual Composer canvas.
Rename the iView to “iViewOverview”
Double-click the iView-component to
access the next level (inside the iView)
Start with integrating the Web Service
created in the previous session.
From the Menu “Tools”, select “Define
Web service system”
Name the system and the the system
alias “CAF_BasisWS2”.
Notice: If already used, select another
name and alias, but remember to use this
when selecting a data service later in this
session.

17
Shift back to the browser and from the
WS Navigator you used before, select
the WSDL link.
Shift back again to the Visual Composer
application and paste the WSDL link into
the field “Web Service URL”.
Be aware of any spaces after the “..wsdl”!
Check-mark the option “URL requires
user and Password” and enter the
administrator (CTB_ADMIN) as user.
Confirm with “Create”.
Notice: This system is now defined in the
system landscape of the portal and can
be administrated from there.
Now click the button “Find Data” and
select the system you defined from the
list of Data Services.
Press “Search” to get a list of all available
operations.

18
Select the first operation and Drag-and-
Drop it onto the canvas.
Repeat it for the next operation.
The operations are now available as
“Data Services”.
All metainformation around the operations
like input/output-parameters are retrieved
automatically.
You can test the service directly from the
canvas to check if everything is ok.
Select the Data Service and from the
context menu, select “Test Data Service”.
In the field “PersonalID”, enter “14132”.
Press “Execute” and watch the response.
Press “Close” when finished.
You can now repeat this for the other
Data Service.

19
Now that the Data Services have been
identified and tested, the UI development
can start.
Select the node “Input” from the first Data
Service and Drag-and-Drop a line from
this node.
When you release the left mouse, you
will find a context menu, from where you
select “Start Point”.
Notice: This start point is where the
information of a Guided Procedure step
will be passed in to this application – e.g.
a user’s ID. In case a user interaction is
required, an “Input Form” could be used
as an additional input source.
Check-mark the field “personalID” and
confirm with “OK”.
The information is retrieved from the
metadata of the Data Service and shows
all available parameters as options for the
start point. The input parameter of the
start point are created automatically
based on this selection. The same would
count for an Input Form in case this type
would have been selected.
From the other Data Service, select the
node “Input” and Drag-and-Drop a line to
the same Start Point.
Later, when this application is called from
a Guided Procedure step, the start point
will automatically call both Data Services
and pass it’s parameter (the
“personalID”).

20
To display the result of a Data Service
call, select the “Response” node form the
first Data Service and Drag-and-Drop a
line from this node.
Select “Add Form View” from the context
menu.
Rename the view to “Employee”
From the second Data Service, select the
“Response Equipment R” node and
Drag-and-Drop a line from this node.
Select “Add Table View” from the context
menu.
Rename the view to “Equipments”
To optimize the layout of the iView, select
th tab page “Layout” and redesign the
two components as appropriate.
The layout could look similar to the
screenshot to the right.
To enable the Guided Procedure to use
the start point of this application as a
target for mapping, this application has to
provide some Guided Procedure specific
information.
Form the “Tools” Menu, select “Options”.

21
On the tab page “Compiler”, check-mark
the option “Add Guided Procedure
Information”.
Confirm with “OK”.
The final step is to deploy the application
to the Web Application Server.
Select the button “Deploy”.
If the deployed succeeds, you have the
option to run the iView directly. But
remember that the application doesn’t
have any input parameter at this time, so
the response will be empty.
You can change this by either make a
default entry for the start point parameter
or add an input form in parallel to the start
point to manually enter the personalID.
The Visual Composer application is now
ready, but there is one more step to do
before the application can be used in a
Guided Procedure. And this is to add the
iView to a specific portal user role.

22
Log on to the Enterprise Portal as an
administrator (CTB_ADMIN) and select
the Workset “Content Administration”.
In the folder “Portal Content”, select
“SAP Discovery System”, then
“Composite Toolbox” and finally “Roles”.
Open the role “ToolboxManagerRole”.
Now, navigate to the folder
“Visual Composer/ Models/
HardwareOverview/iViews”
and select the iView “iViewOverview”.
From the context menu, select “Add
iView to Role” and “Delta Link”
The Visual Composer iView is now
assigned to the ToolboxManagerRole.
You will see why in the next session.

23
2.4. DEMO PART 4 – EXTENDING THE GUIDED PROCEDURE
2.4.1 Overview
At this time, all components have been created and enabled an can be used in the existing Guided
Procedure.
The focus of this session is to show how to create an extension to an existing Guided Procedure with
the usage of existing building blocks and development of new Guided Procedure objects.
Steps
Before you start: It is recommended to
have a clean working folder, so in case
you didn’t do so after a previous session
– do it now…
The folder is „CompositeToolbox/Basis/
xDemo“
Log on to the Enterprise Portal as an
administrator (CTB_ADMIN).
Open the Workset „Guided Procedure“
and the „Design Time“
In the Guided Procedure „Gallery“, select
the folder
„CompositeToolbox/Basis/xDemo“.
All new GP-objects will be created in this
folder.
Notice: All other components needed for
the demo in part 1 are spread around the
other folders „Actions“, „Blocks“ and so
on. These components will be reused
here.

24
From the Gallery, select the link „Create
Process“.
Press „Create“ on the popup-screen
Notice: A new process is created for two
reasons: 1. To not interfere with the
existing one (the basis) and 2. two be
able to show both at the same time
Change the name of the process to
„MyFirstDay_after“.
Save the changes.
Add the existing block from the basis
process.
Press the button
From the folder
„CompositeToolbox/Basis/Blocks“, select
the block „Welcome“.

25
Press the button „Select“
Now, create a new block which later will
contain the new UI.
Press the button
Press „Select“ on the popup-screen.
Rename the block to „Information“.
Save the changes.

26
While keeping the block „Information“
selected, press the button to add a
new „action“ to the block.
Select the line „Action 1“
Rename the action to „HardwareInfos“.
Save the changes.
While keeping the action „HardwareInfos“
selected, press the button to add a
new „callable object“ to the action.

27
From the folder ”User Interface”, select
the callable object type ”Portal iView or
Page”.
Name and description of the callable
object should be ”CO_HardwareInfo”.
Continue with ”Next”
In the list of available roles, scroll down
to the role „ToolboxManagerRole“ and
select it.
All assigned iViews and pages are
shown under the role.
Select the (only) iView „iViewOverview“
Based on the information from this iView
– and in particular from the application
underneath the iView – all available
parameters are shown. Remember the
parameter „personalID“ which was
provided by the Data Service in the
session 3.

28
In the configuration step, add a Result
State Button „Complete“.
Notice: This button is rendered on the
callable object to enable the user to
continue in case the object behind the
callable object doesn’t trigger it itself.
This is the case for the Visual Composer
screen created earlier.
Press „Finish“ to complete the definition
of the callable object.
Save all changes again.
At this point, all existing and new
components are added to the Guided
Procedure. The next thing to do is to map
the parameter between the blocks.
Select the process „MyFirstDay_after“
and select the tab page „Parameters“

29
From the liste of parameters, select the
„User/userID“ from „Welcome“ and
„Input_Parameters/personalID“ from
„Information“.
Press the button „Map“.
Name it „Map_Welcome_Information“
Save the changes
We now have a mapping between the
information retrieved in the first block –
the portal-ID of the user – and the input
of the Visual Composer UI created in the
last session.
To clean up some information, the roles
of the different actions can be
consolidated into a single role.
Keep the process „MyFirstDay_after“
selected and select the tab page „Roles“.
Check-mark all roles except for the last
one – the „Processor of HardwareInfos“.
Type in „Processor of Actions“ and
press „Go“ to consolidate into one single
action (which later will be assigned to the
employee user).
Save all changes
To keep the demo as simple as possible,
we can assign default users to all of the
actions. In real life, some of them would
have to be assigned at runtime and other
would be assigned to portal roles.
Select the tab page ”Default Roles”
Select the ”Processor of Actions” and
press ”Add Default”

30
From the „Add Users“ view, search for
„14132“ and „Add“ this user to the
default role.
Add the user „CTB_ADMIN“ to the rest of
the default roles including the role
„Processor of HardwareInfos“.
In this demo, „CTB_ADMIN“ is both
acting as an administrator and as the
employee’s manager“
Save all changes
The process is now ready for use and
can be activated.
Press the button to do so.
To test the new process, it can be started
directly from the Design Time of the
Guided Procedure.
Open the last tab page – „Instantiation“

31
Check-mark the option „Start Process
Automatically“
Press the button „Generate Instantiate
URL“
And press the the button „Open
Instantiate Application“ to actually run
the process.
A popup screen tells you that the process
has been started and is ready for
processing.
At this point we are back to where we
started the demo, but the process is a
new one.
Log on to the portal as an employee
(14132).
Navigate to the workset „Runtime“ and
then click on the link „Task that require
my action…“.

32
To open the process, click on the link
“Welcome to ITeLO”.
Click on the button ”Start my first day
procedure” to continue.

33
This step becomes now more relevant to
the process. All equipments now
registered by Jamie will be shown later
Add some equipments, save and
continue with the button “Complete”.
Proceed with the button “Complete”
The process has now been completed -
at least for Jamie.
Let’s log on as a administrator again, but
this time CTB_ADMIN will act as the
manager of Jamie.

34
There will be a task waiting for the
manager when opening the inbox.
Click on the link
The task is the new step created in this
session – the Hardware info screen.
Click on the item
The application created in session 2 is
now called and the parameter from the
employee’s step is passed on to the
application and subsequently to the CAF
application.

35
And the result is exactly those items
Jamie added a few seconds ago –
displayed in another UI and added to an
existing process with an additional role.

Demonstrating caf.doc

Recommended

More Related Content

What's hot (13)

Similar to Demonstrating caf.doc (20)

Recently uploaded (7)

Demonstrating caf.doc