Skip to Content

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:

image

 

  • 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.

image

 

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

image

 

  • 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“.

 

image

 

image

  • 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

image

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

image

 

 

  • 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();

 

image

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

 

image

 

  • Deploy the application

image

 

  • Open the LaptopClient select the “uiMCD” and process

image

 

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

image

image

 

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.

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply