User Controls and User Code

From the hierarchical editor, we can add different controls by doing right click --> add over the node in which we are located.

However, sometimes we need to add other user controls that can be downloaded from the GeneXus Marketplace or developed by the team. WorkWithPlus provides a mechanism in order to integrate any user control in the Hierarchical Declaration and easily custom the screen´s layouts. 

The challenge

The customer needs to have an idea of how many contacts a person has. To do this, we are going to add a chart inside PersonContactWW that shows the information needed.

In order to reach the desire results, you have to follow the steps below.

Step 1

Add the "User Control" node and customize the layout so you can visualize the grid next to the new chart.

SelectionFeatures_imgUC3

Save the instance in order to generate the objects.

Step 2

Open the PersonContactWW object and go to its events section to add behavior to the chart. Add the following subroutine:

Sub 'GxChartData' 
    For Each Person
        &GoogleChartData.Categories.Add(PersonFullName)
    EndFor

    &GoogleChartSeries = new()
    &GoogleChartSeries.Name = "Contacts"
    
    For each PersonContact
        &total = 0
        For each
            order PersonId
            defined by PersonContactName
            &total += 1
        EndFor
        &GoogleChartSeries.Values.Add(&total)
     EndFor
     &GoogleChartData.Series.Add(&GoogleChartSeries)    
EndSub

And in the Start event call the created subroutine:

SelectionFeatures_imgUC

Run the application and visualize the results (to test the chart it is recommended to insert some persons with some associated contacts):

SelectionFeatures_imgUC5

Comment & Tips:

  • As you can see, we can add custom code within the Events section. This code won´t be removed when WorkWithPlus is applied.
  • You can always add your custom code before and below the code added automatically by WorkWithPlus.

Summary

Well done! You should now be able to:

  • Add a User Control within a WorkWithPlus instance
  • Add your own code within the generated objects