HowTo: Using Multiple Grids on a Panel for Smart Devices

Official Content

Many times information needs to be shown in the same Panel for Smart Devices object but in different ways. To do so in the Smart Devices 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.

Step 1 - Creating the Transactions

Let's start by creating the following three transactions and apply the Work With Smart Devices pattern to all of them:

TwoGridsCountryTRN

TwoGridsClientTRN.jpg

TwoGridsTRNNews

Step 2- Creating the SDTs to load the information

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:

TwoGridsSDTClientDefinition

TwoGridsSDTCountryDefinition

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.

Step 3 - Creating the Procedures and Datas Providers to load the information

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:

TwoGridsSDTClientsDP

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:

Variables:

TwoGridsSDTClientsProcVariablesDefinition

Rules:

Parm(out:&SDTClients);

Source:

&SDTClients = ClientDP.Udp()

Now we need to define the DP for the SDTCountry as follows:

TwoGridsSDTCountryDP

Next we define the proc "GetCountries" for the SDTCountry with the following variables, rules and source code:

Variables:

TwoGridsSDTCountryProcVariablesDefinition

Rules:

Parm(out:&SDTCountryCol);

Source:

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

Step 4 - Creating the Panel for Smart Devices

Create a Panel for Smart devices called "SDPanelGridsExample" and define the next variables:

TwoGridsPanelVariablesDefinition

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

TwoGridsPanelActionDefinition

Once all events are defined we have to define the events code for each as follows:

Event Refresh
	Composite
		&SDTClients = GetClients.Udp()
		&SDTCountry = GetCountries.Udp()
	EndComposite
EndEvent

Event 'CountrySelection'
	Composite
		WorkWithDevicesCountry.Country.Detail(&SDTCountry.CurrentItem.CountryId)
		Refresh
	EndComposite
EndEvent

Event 'ClientSelection'
	Composite
		WorkWithDevicesClient.Client.Detail(&SDTClients.CurrentItem.ClientId)
		Refresh
	EndComposite
EndEvent

Event 'NewsSelection'
	WorkWithDevicesTRNNews.TRNNews.Detail(TRNNewsId)
EndEvent

Event Load
	&timeElapsed = &Today - TRNNewsDate + 1
	load
EndEvent

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

TwoGridsPanelLayoutDefinition

TwoGridsTRNNewsGridControlType

The created layout should be similar to the one displayed on the next image:

TwoFridsPanelLayoutResult

Tip: for Android and BlackBerry it would be better to define the layout as follows (just for looks, it's not mandatory)

TwoFridsPanelLayoutResultAndroidAndBB

Step 5 - Associating the default event of each Grid

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":

TwoGridsDefaultActionProperty

Step 6 - Done!

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.

Examples:

Android:

TwoGridsAndroidExample1

TwoGridsAndroidNewsDefaultAction 

TwoGridsAndroidClientDefaultAction

TwoGridsAndroidCountryDefaultAction

BlackBerry:

TwoGridsBBExample1

TwoGridsBBNewsDefaulAction

TwoGridsBBClientDefaultAction

TwoGridsBBCountryDefaultAction

iOS:

TwoGridsiOSExample1

TwoGridsiOSNewsDefaultAction

TwoGridsiOSClientDefaultAction

TwoGridsiOSCountryDefaultAction




Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.