Hello Experts,

I have created a BOPF Application with one ROOT and ITEM.

If i create a ROOT Entity data , then i need to lock it before creating ITEM. Optimistic Lock and Exclusive lock are two options coming while locking the ROOT.  . When i checked from two different sessions here is what i observed.

1st session :  I opened Root data in one session, put a Optimistic Lock . Entity came in editable mode :

2nd session : I opened the same root data and put a Exclusive lock. Again the data came in Editable mode.

Now the same data is opened by 2 users, editing it and Lock concept is not happening here.

How to lock the Root via Coding in BOPF. While consuming BOPF, How to Lock a Root data to ensure that no other can lock it. ? ?

Please provide your inputs with some code snippets.

BR,

Nikhil Kulkarni

Hello!

I get the following dump as soon as i click on the test button. What could be the reason?

---------------------

An exception occurred that is explained in detail below.

The exception, which is assigned to class 'CX_SY_REF_IS_INITIAL', was not

  caught in

procedure "ADD_BO_INSTANCE_DATA" "(METHOD)", nor was it propagated by a RAISING

  clause.

Since the caller of the procedure could not have anticipated that the

exception would occur, the current program is terminated.

The reason for the exception is:

You attempted to use a 'NULL' object reference (points to 'nothing')

access a component.

An object reference must point to an object (an instance of a class)

before it can be used to access components.

Either the reference was never set or it was set to 'NULL' using the

CLEAR statement.

-----------------------

Hi all,

          i am created 2 nodes . They are root node and item as subnode.

Initially i entered root data then i went to item data ,here i want to read the root data .

How i can read the root data in item node.  ???

ex: root node and item node i am having emp_id field.. here once i enter the root data emp id ,then i go to item node here emp_id filled by default with  emp id entered in root node.

through determination i am trying to read the root data. in item level..

can anyone give me the code to read the root data in item node..?

what is the exact of business object representation node and how to create it

Hi Experts!

I'm trying to implement a search and result list in a FBI application in order to add elements to a subnode "ITEMS" of my BO. The idea is that users get to select multiple lines of the search result and add them to the "ITEMS" node with one click.

So I need a search uibb, a search result list and a list for selected items. And I also need a Master Data Object (wrapper BO) with a query to feed the search uibb. (This is not a problem)

The biggest challenge is however that one or more properties from the "ITEMS" parent node must be propagated to the selection criteria of the query. For example, if the parent node is of node category car and the fixed property from the parent node is "make = BMW", then the query of the search uibb must have this criteria in its selection parameters.

> Any ideas how I can make this fixed property of my BO available to the query located in the Master Data Object? (The fixed property of the parent node is unfortunatelly also transient at the time of query execution).

> Would it in this case be an option to create a query on my "ITEMS" subnode? (instead of using the Master Data Object approach)?

Last, the parent node also has node categories: when car, the result list would have different fields then when bike. And of course, the query would need to be different too ( on a different db table / md object ).

> For this I thought to use CBA (FPM context based adaptation) since there would not be too many node categories. Any thoughts / other recommendations?

EDIT: I noticed the FBI exit class can also be useful for the last question..

Many thanks in advance!!

Kind regards,

Bjorn

Hi,

I want to enhance a component configuration (form UIBB) by adding a new input field. This configuration has assigned an FBI View so it also has a business object. The problem is that the new field is always  read-only. I've tried all the things from in this forum for this topic– to modify in get_data and get_definition from feeder class but nothing is working, I think somewhere these attributes are overwritten, because I've tried to make another field that was on the screen mandatory and didn't work.

I've discovered that it’s working for fields with a search help assigned, but for my particular field  it’s still not working.

In order to add the field on the screen I enhanced the Node UI structure . And If I check in BOPF objectin Node Category in the tab Attribute Properties the read-only property is checked for my field. I think because of this reason that field is always read-only. Do you know if I can change it? Can I enhance somehow the BOPF in order to change that tick in the Attributes Properties ?

Or do you have another idea for how to solve this problem?

Thank you,

Ramona

Hi,

I have created Actions to a Node 'MNR_SEARCH_RESULT',

when I Configure LIST GUIBB with this node I made 3 tool bar Buttons for these actions, but when Test the Application tool Bar Buttons are disabled .

(No data present in the list).

below are the screen shots :

How to make these Tool Bar Buttons Enable ?

How to Create One Click Action in the List ?

Thanks In Adv.

Thanks,

Kranthi.

Hello,

I try to evaluate whether FPM-FBI-BOPF is a suitable framework for a customer implementation.
Since I encountered issues with getting default values to work using determinations (see forum), I decided to follow another
approach by using the node class and implement the interface /BOBF/IF_FRW_NODE method RETRIEVE_DEFAULT_VALUES.

I have a root node and a subnode. The fields of the subnode should get some default values assigned when a root/subnode
instance is created. The method /BOBF/IF_FRW_NODE~RETRIEVE_DEFAULT_VALUES is called correctly and the default values appear on the screen.
However, when pressing the SAVE button the values of the fields of the subnode disappear, the fields become disabled/inactive (that's OK because the framework switches to display-mode) and the labels of the subnode fields becoming greyed-out.

When I switch back to edit mode the default values appear again. This happend only for the subnode, the root node default settings work fine.

Any idea what might be wrong here?

Thx and regards,
Ulli

In bopf what is the use of node categories. give me some real scenarios.

Hello,

I created a BO with a root node. In order to assign some default values after a root instance is created, I've implemented a determination. Everything is working as expected. When the instance is created (and only then) the init method is processed and the default values get assigned.

As a next step, I added a subnode. I need to assign some default values to a new instance as well. So, I've created a determination for this subnode, in the same way as I did it for the root node.

Now, when a new instance is created, the init method of the root is processed, but not the init method of the subnode. Only when I change a value of a subnode attribute and do a save, the init method of the subnode is processed and the init method of the root node as well (overwriting any changes with the default values, which is wrong).

How can I achieve that after instance creation (and only at this point), the init method of the root and then the init method of the subnode are processed?

Thanks for any advice.

regards,
Ulli

in which scenario we can use dependent business object in BOPF?. What is are the differences between local business object and dependent business object?

how to create it?

hi all,

        i am just searching is there any certification is there for BOPF only, as i found TZTM31 but it is not purely BOPF it is of FPM, BOPF, BRF+.

Hi all,

does BOPF provide any built-in functionality for versioning of entries ( e.g. in order to display a log of the different states that a particular node has had throughout the time )?

Or is this something that would need to be handled on the application-level ? ( Or perhaps by implementing a custom data access layer )

Best regards

Victor

Hi experts,

Need to Default a few additional data into the resource object in TM /SCMTMS/VEHICLE_RESOURCE. Thus, I want to create a new determination attached to this object. I am using Transaction /BOBF/CONF_UI and go to the correct object and right click on the determination or on the node. I can see the menu Point "create Determination" but it is greyed out. Do I do something wrong or am I missing authorization?

Thanks in advance

Petra

hi experts,

    now i want to delete a bo data,include the subnode data, but i dont want to use  /SCMTMS/CL_MOD_HELPER=>MOD_DELETE_SINGLE  to delete every data under this bo data, because i have many bo(eg,mar,and many customize bo) to delete, so the code will be bothering, so is there any other method to delete a complete bo data?

Hello Experts,

I want to know what is the sequence of triggering validation, action, determination if am changing something on FO portal??

If have created customized  determination and action then how those will trigger??

What a nasty title! Welcome the happy few keeping at it.

This series is about the creation of the ABAP backend based on Business Object Processing Framework (BOPF), Service Adaptation Description Language (SADL) and SAP Gateway (GW) for an UI application. As it describes also the creation of a SAPUI5 application it is an end to end (E2E) scenario. The latter one targets ABAP developers who are curious to see how their service is used in an UI. Experienced UI developers will rather be bored by this part and should just skip it.

Jens showed in his blog series ** TEAM FPM ** - How to Create Beautiful Apps on BOPF Objects: Simple, without Code and Deploying Latest Features (I) how easy it is to create FPM Applications if you are using the service adaptation engine with a BOPF model. Jens' sample is more or less the application we are targeting for but using SAPUI5.

Tired of all those frameworks and buzz words, why should you read this blog about just another end to end example? This blog describes a construction area in 7.40 - a productive one. In the next release you will see a tighter integration of CDS and BOPF and the stack then must read BOPF/CDS-SADL-GW-SAPUI5. So it is not only interesting for the confirmed fans of BOPF but for all who are planning a new ABAP based project. ABAP and the Suite are going this way.

Agenda

1. Introduction - describing which application I want to build
2. Mapping an Entity Set - describing how to create an entity set based on a CDS view related to the BOPF model
3. Implicit View Building - describing how to create an entity set based on a BOPF node taking advantage of the BOPF 0...1 associations
4. Mapping Associations - describing how to use BOPF associations to link entity sets
5. Modifying associated data - describing how to create and update data related via associations
6. Enhancing Entity Types - describing how to add new properties to an entity type
7. Back and Forth - resuming the most important topics and looking ahead

Prerequisites and Limitations

To follow this series it is advantageous to have a basic understanding of BOPF and Gateway. In addition some knowledge about Java Script and SAPUI5 is not an obstacle. This is not an introduction to none of them.

I'm also not going to discuss service modelling issues. You may question the granularity of the service or the entity sets I'm going to use. There is certainly a lot to argue. But I want to show the advantages of the BOPF - GW integration using the Service Adaptation Engine. A reasonable understandable example answers my purpose.

I'm using features available in NetWeaver 7.40 SP10 and the related Business Suite EHP support package. The example requires the SAPUI5 libraries 1.26.2 minimum.

Introduction

OData services should be built with an application in mind. The application I'm targeting for is the maintenance of products. The UI should be alike the sketch below:

We start with a list of categories. Selecting a category searches all products assigned to the selected category. Selecting a product displays the product details including information about the supplier of the product. On the detail page you can edit product or supplier details. So more or less the same application, Jens has built in his blog.

The video shows our target application.

The BOPF - EPM data model

The UI application requires the Product and Business Partner business objects. I will use the demo business objects  /BOBF/EPM_PRODUCT and /BOPF/EPM_BP. Let's just have look on what they are offering.

The following video introduces the BOPF data model as well.

We have two business objects: the product and business partner. The product has two nodes, the ROOT and the PRODUCT_NAME nodes. The product root node consists of attributes like ID, category, supplier ID, price and so on. The product name and description is language dependent, so we find a language composition. This is a special kind of composition: it is a 1:0..n relationship, but during runtime it is filtered by the logon language per default. So it appears to be a 1: 0 ..1 relationship.

The business partner ROOT node consists of attributes like ID, company name, legal form. As a company may have several addresses we have a composition to addresses. In the ADDRESS node we find attributes like country, city, e-mail address and so on.

In the UI application we do not want to display all addresses of a supplier, but only one. Fortunately the model offers a foreign key association to the main address: exactly what we are looking for.

Both BOs are linked via a foreign key association from the product ROOT to the business partner ROOT

So overall this is the cutaway from the BOPF EPM data model we are going to use in this blog.

Want to learn more about BOPF? Go to the BOPF SCN Sitemap. To create the BOPF objects see the tutorials Getting Started with Business Object Processing Framework and Defining Associations with Business Object Builder eXpert.

The Gateway Entity Sets

Knowing the target UI and having an idea to which objects the request can be mapped, we deduce following entity sets for the OData service:

The category list will be provisioned by an entity set Categories. The product list and product details work with an entity set Products and last but not least the supplier details are using the BusinesPartner entity set.

Now we have to bring these models together with the BOPF one. This is the target of the next step: Mapping an Entity Set.

Need for some background, visit the spacesBOPF Application Framework,SAP Gateway or UI Development Toolkit for HTML5 Developer Center.

This is the second step of the series.You'll find an overview in the document Introduction.

In this step we are going to create the first entity set; the one for the categories page of the application. It will be tested in the Gateway client and used to build the first page of the application. So let's start.

Entity Sets, CDS Views and BOPF Nodes

The video visualizes the tasks.

To create the Gateway service we need to know how the targeted service data model relates to the BOPF data model. For the first entity set we cannot directly use BOPF because of the categories being attributes of the product root node. There is no BOPF_EPM category business object which could be used. So we need a query which selects all different categories out of the product root database table. That is why we need a Core Data Service (CDS) view. So the model mapping looks like this:

The CDS view is a SELECT DISTINCT query on the product root node of the product category.

You need some background informations about Core Data Services (CDS) - go here.

The Gateway Project

Now we can define the OData service in the transaction SEGW - the Gateway Service Builder. Creating an OData service consists of two steps. First you have to define the data model either manually or by importing it from a file, an ABAP data structure or a RFC interface. Then you have to implement the service, normally in implementing the gateway extension classes.

Start with creating the Gateway project: press the new button and follow the wizard.

Definition of the Data Model

The data model consists of four definition types: the entity type which is comparable to a flat ABAP structure and the related entity set which is comparable to the related ABAP table type. You can link entity types by associations, comparable to BOPF or CDS associations. For associations, you have also to define the related association set - which is a table of associations. Associations will only be used in part 4.

In this example I need an entity type and the related set. The elements of an entity type are called properties. This is somehow confusing in the BOPF context, where properties are attributes of structure elements. The entity type for the categories consists of one property - the category name. The category name should be read only, filter- and sortable. Mark the corresponding check boxes.

You do not have to define the related entity set manually. Creating an entity type, you can just flag a checkbox and the related entity set is created. But you should go through the attributes of the set.

The data model definition is not BOPF specific it is needed for any kind of implementation.

Service Implementation

Now to the more interesting part in the BOPF context: the service implementation. Gateway provides generic services in two classes: one for the provisioning of the data model - the class with the suffix MPC (Model Provider Class) - and one for the operations on the data - the class with the suffix DPC Data Provider Class). Normally you have to redefine the methods in the extension classes - classes with the additional suffix EXT.

Using the service adaptation engine, you do not have to implement the two extension classes. You just have to define a mapping between the entity set and the CDS view.

Note that you could make use of the extension classes for special purposes in addition to the service adaptation mapping. But here it is not necessary.

In the Service Implementation Folder we find the new entity set. The right mouse menu offers the function 'Map to Data Source'. Selecting it will open the mapping editor.

Before it opens there are some popups requesting source node specific details. First we have to define which mapping engine to use. Currently only the service adaption engine is supported mapping Business Entities like CDS views, vanilla ABAP views and tables or BOPF nodes.

The name is composed by the source type (CDS, ABAP view or BOPF node) and the source name. Use the value help - it composes the name.

Finally the tool opens the mapping editor. On the left hand side we see the OData data model, hence the entity set for the categories, on the right hand side, the source model, hence the CDS view.

Drag and drop the properties from right to left - and we are done for the service implementation.

Just save and activate the definition. The activation creates the provider classes for the model and the data. The service is ready to use, including the capabilities according to the OData specification, like paging for example.

Testing the Service

Back to a Gateway standard feature: You can test the activated service in the Gateway Client. If you want to test a new service for the first time, you have to register it. The function is in the right mouse menu of the Service Maintenance folder.

After the registration (a configuration step) you can switch to the Gateway Client also using the right mouse menu in the Service Maintenance folder.

If you are not used to the Gateway Client you may be overwhelmed. But it is a very powerful tool. You can test the complete service, requests and responses, data selection and update functions. Right hand side contains the response data, left hand side you can specify the request data. For data selection it is sufficient to use the URI, which you can compose in the upper part. In the tool you can execute Gateway services using the OData specification for the URL.

For your convenience there are buttons to assist you composing the URI. The root URI is already proposed. To get the category list, just use the menu button Entity Sets and select the only one which we created. The GET request (data selection request) is already marked by default, so you just have to execute the request to get the list.

Learn more about SAP NetWeaver Gateway here.

Authorizations

It is possible to assign authorizations to CDS views. If this is the case, the service adaptation engine uses the definition to enrich the select on the database. This means, that it provides only records which the user is authorized to see. This is not only interesting from a security point of view but also form an implementation one: first authority checks cannot be forgotten, they are modeled and the engine executes them in any circumstances. Second as they are integrated into the select statement, the checks are extremely fast and it is very easy for example to provide the list of the top ten selling products the user is authorized to see.

Executing the URI shows that the service provides the expected list and we are ready to use it in an UI application.

Creating the SAPUI5 application

The video illustrates the creation of the first page of our target UI.

When I first tried to create my own SAPUI5 application beyond the tutorials, it drove me round the bend. First of all it is nothing for people like me with slight signs of dyslexia. A typo can make the whole application not working. And if you do not have the sharp eyes of a proofreader, you can get mad. Without the support of my dear colleague Pascal I do not know where I would have ended.

Having said this and if you are a hard core ABAP developer curious to see how the service is used in an SAPUI5 application the following paragraphs my be of interest for you. It's more or less a step by step description. If you want to learn more go to the SAPUI5 space UI Development Toolkit for HTML5 Developer Center or visit the training page  UI5's Cool Version 2. Experienced UI programmers should rather skip this section.

Creating the project

I suppose that you have already installed the SAPUI5 plugin for Eclipse. If not, you can find it here.

Then you can start creating your project. Select Project in the New menu button and SAPUI5 application Development Project to launch the creation wizard.

Enter a project name and select the sap.m library. This is the SAP standard. For your convenience mark the flag Create an Initial View. This creates not only the project but the files for the first page: the index.html file, the first view XML and controller file. And the best is that they are already correctly linked.

Enter the view name on the following screen and select XML view. This is the SAP standard view type

Finish the wizard and you will see the created files in the Project Explorer.

The interesting files are in the folder WebContent. You can see the file containing the XML view, the one for the related controller and the file for the index.html containing the bootstrap information.

Implementing the Categories page

Our UI design requires a split application with 2 master pages, on the left hand side and a detail page on the right hand side. We start with the first master page containing the categories.

The index.html File of the Application

First we create a variable for the data model and bind it to our gateway service. For ABAP developers used to a more procedural programming language, this may be puzzling. The binding of the data model to a service URI does not mean, that the http request is executed immediately. It is just a registration. The call is executed, when the view requires the data.

Second we need variables for the splitter application and the categories page. We attach the page to the application as master page and configure the splitter application (transition mode, etc.). This is currently not so exiting as we have only one page, but later on, we want to be sure that we always start the application with the categories page. Finally we register the application in the content division of the HTML body.

This is the frame of the UI application.

The Categories View Definition

Now we care for the details of the page. The view contains a simple list which is bound to the CategoryHeaderSet object of the data model of the view - which has to be defined in the controller. The list items are bound to the Category attribute.

Later on we want to select a category and use this selected item for the navigation to the product page. We prepare this step in registering a callback function for the selection event: listItemTriggered.

That's it for the view definition.

The Categories Controller Object

We continue defining the data model of the view. This is done in the categories controller. In the index.html we have already created a data model and bound it to our gateway service. We just need to use this data model in our view.

The onInit function is called when a controller is instantiated and its view controls are already created. It can be used to do one time initializations, for example to bind event handlers or the model. Every function has a context object called this. From this object you can get references to further objects like e.g. to the view. sap.ui.get.Core is a very helpful function providing access to the Core.

In this controller we have later on to implement the callback function listItemTriggerd which we registered in the view. We will do this in the next blog.

So far for the implementation.

Testing the Categories Page

To run a first test, select the index file

and select Web App Preview in the Run menu button. You will see the page working but without displaying any data.

The reason is that up to now we have been working only with local files. There is no connection to a backend and the application runs on localhost. To work with data we have to deploy the project on a Web server. I want to keep it simple and will use the ABAP server. Therefore we must share the project.

Sharing the Project

Select the project and open the right mouse menu. Go to Team/Share Project... to launch the wizard connecting the project to an ABAP system and a BSP application.

Select SAPUI5 ABAP Repository.

On the following pages you have to enter the ABAP system name form the logon pad and the logon data. Then you can create the BSP Application. On this screen it is also possible to connect to a already existing application which allows you to retrieve the sources from the BSP application of your colleagues. But here we need a new application.

Finish the wizard and you have related the local project to an empty BSP application. You have to copy the source files to the BSP application on the ABAP server. Select the Submit function in the Team menu. This triggers the copy function. A popup shows all the files which are copied to the ABAP server.

If you now open the Run menu for the index.html file, you discover a new option. You can run the application on the ABAP server.

And here we are with the data:

We will see that the URL has changed: it runs on a server.

Last but not least I want to draw your attention to a button on the right hand side. This button opens the application in an external browser. You can configure your preferred one. I like to use Chrome. The F12 key is magic: it opens the debugger. Combined with an external break point in the ABAP backend code, you can run through your application.

For the present we are done with the Categories - end to end. We created an CDS view using the BOPF persistency of the Product business object, then we created an OData service in a gateway project with an entity set mapped to the CDS view using SADL. And finally we used it in an SAPUI5 application.

In the next step we go ahead with the Projects page: Implicit View Building where we will explore further capabilities of SADL and how to relate the entity sets in the UI application.

Need for some background, visit the spacesBOPF Application Framework,SAP Gateway or UI Development Toolkit for HTML5 Developer Center.

This is the third step of the series. You'll find an overview in the document Introduction.

In this step I'll show how to create the second entity set; the one for the product list page of the application which is mapped to a BOPF BO. It will be tested in the Gateway client and used to build the page. So let's start.

The product entity set will be mapped to the business object /BOBF/EPM_PRODUCT. The product BO has a language composition to the product name and a foreign key association to the Business Partner. In this example I am not going to create just another entitiy set but show how you create views implicitly with SADL following 1 to 0..1 associations.

The video illustrates the following sections.

Modifying the Gateway Service

We will modify the service created in the previous step Mapping Entity Sets with the Gateway Service Builder (transaction SEGW). Again we define the data model, then implement the service using SADL and test it.

Definition of the Data Model

As already described in the previous step, we need an entity type and an entity set. Unfortunately there is not yet a metadata importing feature for BOPF. In 7.40 it must be defined manually. The tool offers only the convenience to create the entity set together with the entity type.

The entity type I created for the product consists of some properties which can be provided by the ROOT node of the product BO - like product ID, supplier ID, price and currency. In addition we want to have the product name which is an attribute of a sub node and finally the supplier name - which is an attribute of another BO, the business partner BO.

BOPF uses GUIDs as database key which are not really readable. So for readable identifiers - like the business partner or product ID - you can define alternative keys in BOPF. The PRODUCT_ID is such an alternative key in BO /BOPF/EPM_PRODUCT (more about alternative keys, see here).This is what we will use as key in the entity type definition. Again we should carefully mark the attributes, for example it is not necessary that the URL for the picture is sortable.

The entity set has already been created, but we have to set the attributes:

We want to support the CRUD operations on the entity set, so we need these attributes.

Service Implementation

Again we select the function Map to Data Source in the right mouse menu of the Service Implementation Folder -> ProductHeaderSet. Again we have to select the mapping type: Business Entity.

Value help supports us entering the name. This time the Business Entity Source is 'BOPF Business Object', the Business Entity is the root node of the BOPF BO Product: /BOBF/EPM_PRODUCT~ROOT.

Finally the tool opens the mapping editor. On the left hand side I get the OData data model of the product entity set. On the right hand side, I find the source model, hence the root node of the BOPF BO.

As in the previous step we map the elements of the root node with drag and drop from right to left. The properties ProductName and SupplierName don't have a source in the root node but in associated nodes.

Open the composition PRODUCT_NAME and you get the attributes to map.

Note that SADL does not yet support BOPF language compositions in 7.40 out of the box. You have to redefine the filter in the mapping. Add the filter definition in square brackets to the association name. The name of the attribute follows preceded by a dot: <association name>[filter condition].<attribute name of the navigation target node>. In our example this is PRODUCT_NAME[LANGUAGE_CODE  ==  SY-LANGU].NAME.

Last but not least open the association TO_SUPPLIER and map the company name.

That's it. Save and activate the service. The provider classes are updated with the activation and you can test the new entity set.

Testing the Service

Back to the Gateway client you can test the new entity set. Select the product entity set in the drop down menu button Entity Sets and execute the GET request.

A list of products is returned. Enhance the URI by the product id of one of them following the OData syntax <service root>/<entity set>('<key>') and execute the get request again.

The selected product is returned.

You can use the response to create a request - just press the button Use as request. The body is copied to the request editor on the left hand side. Now you can manipulate it: change the price for example und execute a PUT (update) request.

It is also possible to create a new product using an existing one as template. Just delete the DbKey property which is provided by the BOPF framework and adapt the references using the ID of the new product.

Creation is an operation on the entity set. So just enter the entity set name in the URL, select the POST method and execute the request. A new product has been created.

To learn more about SAP NetWeaver Gateway go here.

Authorizations

It is possible to assign authorizations to BOPF nodes, see the tutorial How to Use Authority Checks in Business Object Processing Framework. If this is the case, the service adaptation engine uses the definition to enrich the select on the database. In principle this is the same as in the previous step.

The service we created provides the expected list and so it is ready to be used in the UI application.

Creating the SAPUI5 page

The video illustrates the creation of the SAPUI5 page.

Creating the page for the products is quite similar to the one for the categories page. It is another master page. But now we have to introduce the navigation from the categories page to the product page using the selected category as filter criteria. Let's start and go quickly through the creation of the view.

Select New/View in the right mouse menu of the SAPUI5 project to launch the view creation wizard. This is similar to the categories creation, so I do not repeat it here. Just take care to select XML view.

The wizard creates two new files: the one for the products view and the one for the products controller.

The Product View Definition

The view is again a list but this time we choose to define the data binding in the controller, hence no path to the ProductHeaderSet here. Beside this as we do not want to relaunch the application at each time we want to select a different category - even not for test purposes - we introduced a toolbar with a back button and a handler function.

The index.html File

Before we attack the controller, we want to integrate the page into the application and to navigate to it. So let's have a look at the index.html file.

We just have to create a variable for the page and add the page to the application as master page.

The Categories Controller

In the previous step we have already registered a callback function (listItemTriggered)  in the categories view when a category has been selected. We have to implement this callback function in the categories controller to navigate to the products page.

Functions registered on an event have an input object containing the context of the event. In the case of a selection event the context contains a reference to the selected item for example.

So let's see the listItemTriggered function.

We need a reference to the application which we get from the SAPUI5 framework function sap.ui.getCore. The splitter application which we are using has a navigation method allowing switching the master pages. This switch triggers an event onBeforeShow. Later on we have to register to and handle this event in the product controller.

For now we have to care for the selected category. As I already mentioned it is part of the context of the navigation event. The input parameter of the callback function for the select event has as parameter the source of the event. The later one has an attribute bindingContext containing the selected category amongst others. We put the complete binding context into the context of the navigation event which will be used in the products controller to set the correct filter for the list.

The Product Controller

In the product controller we bind the data model to the ProductHeaderSet. In this section we clone the view definition to use it later on as template. Then we bind the list items to the attribute ProductId of the ProductHeaderSet. For the categories page we defined the binding in the view. This is an example for defining it in the controller - if you need more dynamics.

Now to the registration and implementation of the callback function of the navigation event.

For pure ABAP developers there are some unfamiliar concepts in the code: anonymous functions, closures and this and that. Let's go quickly through the code. In the onInit callback function we register for the event triggered by the navigation. As callback we do not use a named function, but declare it inline. This is quite useful because very often the callback functions are not reused by different events. Having said this, this may be confusing for developers who are used to read functions in a procedural way. But anyway once you are familiar with it, it is really comfortable.

With this inline definition of functions it comes the closure concept. If it would be possible to define local methods in ABAP methods, then closure would mean that we can use the local variables of the enclosing method in the inline defined method - even if it is a callback of an event and executed at a completely different point in time.

And finally a word to this and that: this points to he context of a function. The context of the inline defined function is a different one than the context of the enclosing function - not very surprising. If in the inner function you need access to the context of the enclosing function, you have to copy it to a variable. Very often this variable is called that.

Now together with the closure concept you have access to the local variables of the enclosing function. You are in a nice position: you can access the context of the inner function with this and the context of the enclosing one with that.

For me all this has been quite hard stuff to learn. I hope that I've been somehow understandable - and as comparisons are always somehow false and true this is not all about closures and contexts. For more information start with Wikipedia.

But now to the code itself.

We register an anonymous function for the onBeforeShow event. The event parameter contains a reference to the selected category in the context attribute. We define a filter using the selected category. Then we update the list binding attaching the filter. That's it.

That 'this is it' has been quite a high hurdle for me in the beginning. I desperately searched for a method to bind the filter somehow to the http request. It was hard to learn that binding both URI and filter to the view early enough before the view triggers the request is sufficient.

The rest is straight forward: the splitter application offers a method to navigate back which is used in the callback function of the back button.

If you want to test the new page, you have to submit the code in the Team menu. Then you can run the index.html file on the ABAP server.

Now selecting a category navigates to the product page showing all products of that category.

So far for the product page. We defined the ProductEntitySet, mapped it to three BOPF nodes using SADL and used it in our application to implement the product page.

Now we are going to create the detail page where we will use navigation properties.

Need for some background, visit the spacesBOPF Application Framework,SAP Gateway or UI Development Toolkit for HTML5 Developer Center.