Many times information needs to be shown in the same Panel object but in different ways. To do so in the Native Mobile Generator we can use multiple girds.
This article shows an example on how to use multiple grids in the same Panel for Smart Devices.
We are going to use three different grids with different information displayed, and each with its own Default Action associated.
Let's start by creating the following three transactions and apply the Work With Smart Devices pattern to all of them:
Create the two SDTs that will be used to get the data from the transactions Country and Client.
Note: when using multiple grids, only one can have attributes, the other grids must have only SDTs and/or variables.
Define the next SDTs:
Tip: to create the SDTs just drag and drop the Client and Country transactions in the respective SDT, and click on the "Is Collection" check box as shown in the images from above.
Now we need a way to get the data from the transactions into the SDTs we have just created, to do so it's needed to create a Procedure and a Data Provider for each one.
Let's start by creating the DP for the SDTClients as follows:
Tip: As we did when we created the SDTs, when creating a data provider we can drag and drop the item directly, and some code will be automatically added. We only need to add the atributes, we want to assign, to the right side of the assignation.
Next we define the proc "GetClients" for the SDTClients with the following variables, rules and source code:
&SDTClients = ClientDP.Udp()
Now we need to define the DP for the SDTCountry as follows:
Next we define the proc "GetCountries" for the SDTCountry with the following variables, rules and source code:
&SDTCountryCol = CountryDP.Udp()
After creating the Procedures and Data Providers, there is a way to get all the data needed to load the two grids with SDTs, so finally we can start creating the Panel.
Create a Panel for Smart devices called "SDPanelGridsExample" and define the next variables:
Next step is to define the events for the Panel, we need to create three actions, "CountrySelection", "ClientSelection" and "NewsSelection" (one for each grid). These actions will be called when the default action of each grid is triggered.To define these events go to the "Event" tab and press the "Add..." button, enter the name of the action and finally press "OK" (you will have to do this for all the actions).
Once all events are defined we have to define the events code for each as follows:
&SDTClients = GetClients.Udp()
&SDTCountry = GetCountries.Udp()
&timeElapsed = &Today - TRNNewsDate + 1
Note: the SDTs data is loaded in the refresh event for both SDTClients and SDTCountry, this is mandatory.If we don't load the SDTs in the refresh event the grids will be empty.
Now the layout needs to be defined. To do this; right click on the layout, select "Insert Variable", then choose one of the SDT variables we have defined (SDTClients or SDTCountry), press ok, and select the members of the SDT you want to be displayed. We need to do this for both SDT variables (in this example we chose the name of the Client and the name of the Country to be displayed on each grid). Also we have to add a Grid with the TRNNews attributes and define its class as SD Paged Grid, so drag and drop a grid from the toolbox, add the TRNNews attribute "TRNNewsHeadline" and the variable "timeElapsed" (this variable will be used to calculate the days since the creation of the news in the Load event).
The created layout should be similar to the one displayed on the next image:
Tip: for Android and BlackBerry it would be better to define the layout as follows (just for looks, it's not mandatory)
Finally it's needed to associate the default action of each grid to its respective event, to do so we need to select the grid and change the "Default Action" property to the respective one, for example for the grid containing the SDT "SDTClients":
Press F5 and test the girds (you may want to create some registers in the database before).
Note: the default action is executed when one of the rows of the grid is selected.
Final Note: The Load Event will be associated to the grid with a base table associated.