Skip to Content

From time to time I encounter the question of performing a Join operation with Visual Composer. I will try to show one way to handle this.

Example Join scenario

In the following scenario  get customers and orders data using two different JDBC Stored Procedures:

1.PNG

The application looks like this – note the input values we pass to get part of the orders table:

rt_1.PNG

We now want to present the data in one table in the UI, namely: for each order show also the details of the relevant customer. Where we had the customers:

/wp-content/uploads/2014/05/bd_1_461822.png

and the orders:

/wp-content/uploads/2014/05/bd_2_461823.png

we now need to have one table, the connection made by the customer_id:

/wp-content/uploads/2014/05/bd_3_461824.png

Visual Composer does not support a Join operation in modeling. This is no surprise: In other programming languages we refrain from doing this in the application level as well.

/wp-content/uploads/2014/05/join_q_2_462110.png

Using the database to perform the Join

In this case we need to build the scenario differently, handling the Join on the database.

1. Create a new Stored Procedure for the Join operation:

/wp-content/uploads/2014/05/5_join_461780.png

As the original getOrders service required input for start and end dates, we need to have the same in the new Stored Procedure, filtering on the ordered_on field.

2. In Visual Composer consume the new operation:

2.PNG

3. The application looks this way now:

rt_2_2.PNG

4. We could group the results using the Group by option to get a better view (optional):

6_alv_2.PNG

5. Here is the application, we now have grouping on the customer name, plus the collapse / expand arrows.

rt_alv_2.PNG

Join and Updates

In some scenarios we need to update data before or after the Join, for example:

1. Present the customers and orders tables, and allow updates for each.

2. Show the joined table.

Option 1:

1. Updating data in the tables triggers update the database through a Data Service.

2. Presenting the Joined data calling the Data Service that performs the  Join, which gets the updated data.

Option 2:

If relevant for the specific scenario, show only the Joined data, and allow updates through this UI – calling relevant Data Services for update.

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