UI Creation - CSM - Collaborative Supplier Management - Wiki@SAP

Page 1 of 6

Access: Internal

Address Book

Any Questions? Help

Search SAP-wide

UI Creation
Added by Schwarze, Peter, last edited by Schwarze, Peter on Jun 30, 2009

This collection is a very simple example, which shows the creation of an FBI based UI for the BOPF object Supplier. Configure FBI Views on a BOPF BO Creating a FBI UI Integrating a generic UIBB (GUIBB) into an FBI based application Adding an additional BO node/FBI View: Integrating a freestyle/custom UIBB (CUIBB) into an FBI based application Creating the WD Component Create the WD View Layout Create the WD View Context Enabling the Integration to FBI Create the WD View Context Basic Context Definition Create the WD View Layout Interaction between UIBBs interaction in between 2 GUIBBs interaction in between 2 CUIBBs interaction in between a GUIBB and a CUIBB Integrating Flash/Flex and Silverlight Islands Flash Islands Business Objcts XCelsius Silverlight Islands Mashups and Web Service consumption Menu Definition Overview Concept Known Limitations/Restrictions Request a new entry in the menu Navigation to another Application Overview Links Concept Known Limitations/Restrictions Object based navigation Navigate to an OBN Target General aspects to consider Configuration in GUIBB/POWL Configuration in FPM IDR Related Links You can also Other links Development in a CUIBB Using an OBN Target Available OBN Targets Request a new OBN Target

Configure FBI Views on a BOPF BO

To set up the FBI configuration for a BOPF BO, enter /NSM34 and enter the Viewcluster /BOFU/VC_FBI_V more tbd For the following it is assumed that this has already been done.

Creating a FBI UI
Integrating a generic UIBB (GUIBB) into an FBI based application
1. Identify the BOPF object you want to create an UI for. In this case, the Supplier is used. 2. in CSM we have only one WD Application per floorplan, so we only create so called Application Configurations: 3. In SE80, create a WD Application configuration in the desired Package (e.g. a subpackage of BSCSM_UI_OIF) open the package BSCSM_UI_CMN and select the desired floorplan you want to build e.g. WDA_BSCSM_I_FPM_OIF Right-click the 'Application Cofigurations' folder and create your configuration (Browser pops up for that) and press 'Create' enter the correct package (e.g. a subpackage of BSCSM_UI_OIF) Save the application configuration. 4. Now you can navigate to the configuration from you package. to open it double click and press 'Start configurator' 5. Create configurations for OIF (Object Instance Floorplan) and if needed IDR (Identification Region) 6. Go into the configuration for the OIF 7. Drill down the main View into the UIBB 8. Insert FPM_FORM_UIBB in the field 'component' 9. Insert FORM_WINDOW in the field "View" 10. Insert a configuration name for the UIBB 11. Click on 'Configure UIBB'

https://wiki.wdf.sap.corp/wiki/display/CSM/UI+Creation

7/31/2013

UI Creation - CSM - Collaborative Supplier Management - Wiki@SAP

Page 2 of 6

12. 13. 14. 15. 16. 17. 18. 19.

Insert /BOFU/CL_FBI_GUIBB_FEEDER as feeder class Edit Parameters Fill in either the view (eg. BSCSM_SMD_ROOT) which has been configured previously or enter the BO Name and the node name. Select the 'Top level View' checkbox. Click on form and insert Group Configure group and add the fields you need Click on 'Change->Global Settings' and enter '/BOFU/WDC_FBI_CONTROLLER' in the field 'Web Dynpro Component'. If you have already created an IDR configuration enter the name in the field 'Configuration name' Save, done!

to create a link to your application you have to copy the URL from your web dynpro application in the se80 and add the following parameter list: ?sap-client=600&sap-language=EN&sapwd-configId=<Your config ID here>&key=801CC4A687A81DEDBFD5439472E551E9&change_mode=U

Adding an additional BO node/FBI View:

Enter the configuration of your application, enter the component configuration and click on 'Add a Main View'. In this View you add a Form Based GUIBB like described 6 and following, but the Parameters of the Feeder Class have to be set up like this:

Integrating a freestyle/custom UIBB (CUIBB) into an FBI based application

Creating the WD Component
# Create the component for the custom UIBB you want to integrate, including window, view, configuration, etc.

Create the WD View Layout Create the WD View Context Enabling the Integration to FBI
1. Enter ZCL_CUIBB_ASSIST into the field 'Assistance Class' of the UIBB component. The Class ZCL_CUIBB_ASSIST will probably be replaced by an FBI class later on. 2. implement the method WDDOMODIFYVIEW in your View and add the following coding: method WDDOMODIFYVIEW . if first_time = abap_true. wd_assist->dispatch_pbo( ). endif. endmethod. 3. implement the method WDDOINIT of the View e.g.(may be a matter of change) METHOD wddoinit . DATA lo_api_componentcontroller TYPE REF TO if_wd_component. DATA lo_nd_form_parameters TYPE REF TO if_wd_context_node. DATA lo_el_form_parameters TYPE REF TO if_wd_context_element. DATA ls_form_parameters TYPE wd_this->element_form_parameters. DATA : lt_form_parameters TYPE zt_fbi_guibb_params_dt. DATA lo_nd_root TYPE REF TO if_wd_context_node. DATA lo_el_root TYPE REF TO if_wd_context_element. DATA lo_componentcontroller TYPE REF TO ig_componentcontroller . lo_componentcontroller = wd_this->get_componentcontroller_ctr( ). lo_api_componentcontroller = lo_componentcontroller->wd_get_api( ). * navigate from <CONTEXT> to <ROOT> via lead selection lo_nd_root = wd_context->get_child_node( name = wd_this->wdctx_root ). * navigate from <CONTEXT> to <FORM_PARAMETERS> via lead selection lo_nd_form_parameters = wd_context->get_child_node( name = wd_this->wdctx_form_parameters ). CALL METHOD lo_nd_form_parameters->get_static_attributes_table IMPORTING table = lt_form_parameters. CALL METHOD wd_assist->set_wd_instance EXPORTING i_comp = lo_api_componentcontroller it_form_parameters = lt_form_parameters i_context = lo_nd_root. CALL METHOD wd_assist->init_feeder EXPORTING iv_cardinality = '02'. CALL METHOD wd_assist->register_view EXPORTING iv_cardinality = '02'. ENDMETHOD. 4. change the following methods in your component controller: Method FLUSH Change delegate call to: wd_assist->dispatch_flush( ).

PROCESS_BEFORE_OUTPUT delegate call to: CALL METHOD WD_ASSIST->DISPATCH_PBO EXPORTING

https://wiki.wdf.sap.corp/wiki/display/CSM/UI+Creation

7/31/2013

UI Creation - CSM - Collaborative Supplier Management - Wiki@SAP

Page 3 of 6

IO_EVENT = io_event. PROCESS_EVENT delegate call to: CALL METHOD WD_ASSIST->DISPATCH_PROCESS_EVENT EXPORTING IO_EVENT = io_event. * IMPORTING * EV_RESULT = 5. Decide if you want the UIBB form or list based. 6. Add a custom Controller named 'CONFIG' and add a node FORM_PARAMETRS resp. LIST_PARAMETERS and provide the structure name /BOFU/S_FBI_GUIBB_PARAMS_DT as DDIC Structure 7. Right click on the custom controller and select '(Re)Set as Config controller', this is necessary to make the fields of FORM_PARAMETRS appear in the configuration of the component. 8. Now go to the component controller and add a controller usage where you pick the custom controller you just have created. 9. Afterwards you can drag the node FORM_PARAMETRS to the context of the component controller. 10. Open the context of the view and also add the node FORM_PARAMETRS via drag and drop. Add also a node called ROOT with the DDIC Structure BSCSM_S_SUP_ROOT and add the fields as attributes. 11. Go to the layout Tab and right click on the ROOTUIELEMENTCONTAINER, there you select 'create container Form' and press the 'context' button. Now you can select the desired fields. Make sure that also the binding for the text attribute of each field is set. 12. Add the view name of the component (use the Valuehelp). 13. Add the configuration Name of the component (also use the Valuehelp). 14. Configure the UIBB, click on the tab 'Component Defined', select 'formParameters' and enter the desired FBI View or BO and Node. 15. If you want, you can choose another layout type like 'Two Column Layout (50:50)' and change the column attribute of the UIBB accordingly. 16. Save.

Create the WD View Context

Basic Context Definition
UNDER CONSTRUCTION With that you should be able to define your first WD View Layout and Define under the root WD Context Node ('CONTEXT') the WD context node which will correspond to your FBI outputstructure. Call it 'HOME'. Enter the FBI Outputstructure as DDIC structure. The cardinality depends on your usage (recommendation: 0..n for tables; 1..1 for forms; be careful with 1..n: this wil mean that can't display an empty table!)

Create the WD View Layout

Interaction between UIBBs

interaction in between 2 GUIBBs interaction in between 2 CUIBBs interaction in between a GUIBB and a CUIBB

Integrating Flash/Flex and Silverlight Islands

As integrating islands is not supported by the FBI, it has to be completely handeled via CUIBBs

Flash Islands
Business Objcts XCelsius

Silverlight Islands

Mashups and Web Service consumption Menu Definition

Contacts: Marcel Schreier, Manuel Friedmacher

Overview

https://wiki.wdf.sap.corp/wiki/display/CSM/UI+Creation

7/31/2013

UI Creation - CSM - Collaborative Supplier Management - Wiki@SAP

Page 4 of 6

Concept
ACD: chapter 3.9 Navigation Frame

Known Limitations/Restrictions
n/a

Request a new entry in the menu

In case you want to add a new entry in the menu you have to specify: Target Application with static parameters (e.g. WD Application 'POWL' with parameter 'APPLID' = csm_supplier; or you just send us a working link to the application) Which Role? Which type: Homepage or Service Link? Exact location where it should be inserted (ATTENTION: This must be signed-off by UID Markus Heilig! => Best it you send us the mockup where the entry is visible)

Navigation to another Application

Contact persons: Marcel Schreier, TBD

Overview
For Navigation to another application Object based navigation(OBN) is used. This means that within the source application of the navigation not directly the WD Application is defined but an OBN target. At starting point the NWBC for HTML is used as navigation frame. As alternative the enterprice portal can be used.

Links
CSM Using NWBC for HTML as Navigation Frame: http://uxcise5.wdf.sap.corp:50015/sap/bc/nwbc/csm?sap-client=600&sap-user=stratpurch&sap-password=INIT69

Concept
ACD: chapter 3.9 Navigation Frame

Known Limitations/Restrictions
Navigation from a UIBB (CUIBB&GUIBB) Cross System Navigation (to SRM/ERP) Generate an Access URL (example Use case: User wants to have a add a direct link to a supplier to his browser favourites)

Object based navigation

The OBN Target contains: System: is normally 'SAP_CSM' Business Object(BO) (e.g. RFI) Method (e.g. EDIT) Business Parameters which has to be supplied (e.g. KEY) Normally the BO refers to a BO modelled in BOPF. But as technically it is possible to navigate to an application which is not based on BOPF there must not be a similiar BOPF BO. The methods relates to a use case (e.g. 'Edit RFI), so it might be that there is a semantically relationship to a BOPF action.

Navigate to an OBN Target

The prerequisite for navigation to an OBN target is that it already exists. See below for a list of existing OBN targets. Please note that an OBN target must be enabled for each role. So please check in which role your navigation target could be feasible. In case it does not exist a dump occurs: "Parameter "source" has an invalid value <OBN target>."

General aspects to consider

Within your (G)UIBB/IDR/POWL from where you want to offer a navigation link you have to refer to a Launchpad entry. The values are the following: Role: BSCSM Instance: OBN_NAVIGATION Application Alias: <OBN System>/<OBN BO>/<OBN Method>; Example: SAP_CSM/RFI/EDIT ATTENTION: You are not allowed to create OBN Targets on your own. This includes the maintenance of the Report Launchpad BSCSM, OBN_NAVIGATION !

https://wiki.wdf.sap.corp/wiki/display/CSM/UI+Creation

7/31/2013

UI Creation - CSM - Collaborative Supplier Management - Wiki@SAP

Page 5 of 6

Configuration in GUIBB/POWL
Within GUIBB/POWL you have the option to maintain the Launchpad entry keys (application alias) in a configuration step. 1. Start View Cluster Maintenance: SM54: /BOFU/VC_PBI_P / /BOFU/VC_FBI_V 2. Create new actionEnter the application alias of the target application e.g. SAP_CSM/SUPPLIER/DISPLAY 3. OPTIONAL: Supply Business Parameters Business Parameters are parameters which the target application requires to execute the business process, e.g. the key of an object. NEVER supply technical parameters e.g. the WD Configuration ID 3.1 Create new Parameter

3.2 Define Parameter

Fields: Parameter: Key of the OBN Parameter Value: Value of the OBN Parameter; please notice that we differentiate betweeen static and dynamic parameters: 3.2.1 Static Parameters If there are business parameters which are always the same in this use case just enter the "hard coded" value into the field 'value'. 3.2.2 Dynamic Parameters But normally you don't know at design time the concrete value of a business parameter. In this case specify the component name within brackets in the field 'value'.

Configuration in FPM IDR

There are three areas where a navigation link can be added: Part of the standard link groups "Related Links", "You can also"

Related Links
The Related Links are grouped in one Report Launchpad specific to your application. So you need to create a launchpad in transaction LPD_CUST with Role = REL_LINKS ...UNDER CONSTRUCTION

You can also Other links

Any other link has to be configured in the Application Configuration which refers to a OBN Target. See related documentation about Configure IDR in CSM.

Development in a CUIBB
TBD

Using an OBN Target

Please check in the excel whether a sufficient OBN Target is already created. If you need help please get in touch with the contact persons. As the OBN Target will be enabled per role, please check in addition whether the enabled roles are sufficient for your use case.

https://wiki.wdf.sap.corp/wiki/display/CSM/UI+Creation

7/31/2013

UI Creation - CSM - Collaborative Supplier Management - Wiki@SAP

Page 6 of 6

ATTENTION: Available Roles Main Roles: Strategic Purchaser Administrator Additional Roles Stakeholder Business Key User

Available OBN Targets

https://portal.wdf.sap.corp/irj/go/km/docs/room_project2/cm_stores/documents/workspaces/202443c1-42d0-2b10-a294-9f2051468af3/40_Workstreams/10_Evaluation_%26_Productization/50_NavigationFrame

Request a new OBN Target

As the creation process of a OBN target is very special and complex, there will be a group of colleagues(located in WDF&BLR) which will take over that. Contacts: Marcel Schreier, Peter Schwarze, Arun Singh(I045552) Following information about the target Application are required: Application Description (e.g. "Supplier OIF"; which main BOPF BO is used if available; what kind of use case?) Technical Application information (WD Application) Required Parameter; Seperate between static parameters which are not provided by the (G)UIBB/POWL like WD Configuration dynamic parameters which has to be provided by the (G)UIBB/POWL the instance key Possible Parameter Values are: Parameter Key KEY Parameter Description Possible Values

Key of the root identifier of the Floorplan Application <GUID> U; D

CHANGE_MODE Mode of the BOPF BO

Child Pages (2)

IDR-Configuration Navigation Frame Cookbook

https://wiki.wdf.sap.corp/wiki/display/CSM/UI+Creation

7/31/2013