The development component for UI typically has one or more views. The basic idea of any UI DC is to report data or to provide interactive screen to the user.For better maintanace and usabilty  I would suggest that we maintain 2 DCs, one for holding model & queries(service component) and other for UI components. In this blog we will explore how we can consume a Service DC and display the data in the UI.

Prerequisite:

• Create a Dc for holding the service component as depectied in the blog Building Queries in Netweaver Mobile 7.1 – Laptop Perspective.
• “Add to Public Part” by right clik on the service model and give a name to the public part.

• Build the Service Component.

Step By Step Process For Using the query in the User Interface

• Create a new DC for UI “uicomp“
• Add dependencies to the “uicomp“, select “servicecomp” in Development Infrastructure perspective.

• Create an application for the new UI DC (uicomp) “UiApp“
• Use the service model as used model in the “uicomp“

• Create a model binding in the view controller by selecting the query which will give the result. Here in our case we have used “QueryNotificationOutput“.

• In the view context we will be having “QueryResult” node. It is better to rename the node, as this would be conflicting, if we have more than one query output node. We will name it as QueryNotificationResult

• Apply template in the view for placing the table UI element in the view layout.

• Now we need to do a little coding for fetching the data. I have added the following code in wdDoInit () method.
• Create an instance of the service model

ServiceModel model = ServiceModel.getInstance ();

• Now we will create a query for “QueryNotificationOutput” using model object.

QueryNotificationOutput queryNotificationOutput = model.createNotificationQueryOutput();

• We need to pass the parameter to the query for fetching the data(we need to fetch the notifications of notif type “M1”)

queryNotificationOutput.getQueryInput().setNOTIF_TYPE(“M1”);

• Execute the query

queryNotificationOutput.execute();

Once the query is executed we need to bind the context node with the query result and invalidate the node.

wdContext.nodeQueryNotificationOutput.bind(queryNotificationOutput);

wdContext.nodeQueryNotificationOutput. nodeQueryNotificationResult().invalidate();

• Build the application and create an Archive of the Dc.

• Deploy the application

• Open the LaptopClient select the “uiMCD” and process

• Maintain the connection settings and synchronize the device.
• Click on the application which is installed on to the mobile client

Summary

Basic idea of this blog is to make aware how the query is used in the development of UI components in Laptop Perspective. Here I have demonstrated how we could use the simple query that returns a set of values and how to display in a table UI element. However, we could use different types of UI elements that should display values returned from a query We can create complex queries that will return values from different tables (joins) as well. This is very simple example for showing how to consume queries in UI Development in mobile solutions for  laptop perspective.