Visual Composer: Value Help Data Service

[thomas_jung]

Introduction
I have been working with Visual Composer quite a bit lately. I have been impressed by just how much can be done without writing any code and in a very short amount of time. But as I had been building a few demos, I had never ran across the Value Help Wizard. It wasn't until the other day that a college pointed out this useful feature to me. So I thought it might be helpful to others to see this wizard in action. In addition, later in the weblog I will share some coding that I used to create a simple yet generic value help service for use in the Visual Composer Help Wizard.

Please Note: the screen shots and functionality that I present here are part of the Visual Composer version that ships as an integrated part of the SAP Netweaver Portal as of Netweaver04S. These capabilities will not be generally available until SP8 of Netweaver04S. Please refer to the Service Marketplace for the availability schedule of support stacks.

Sample Application
We will start by looking at the finished product- a simple report developed in Visual Composer.

Figure 1 - Sample Application Design

Our simple application revolves around a single business service. This business service is technically an RFC being hosted on an AS-ABAP backend system. We have our Input Form for data selection. We then visual the outputs of the service in a data table and a chart.


Figure 2 - Sample Application Output

But that is all really just background information for the purpose of what we want to look at today. We just want to focus on the Value Help. Notice the button that sits next to our Input Field. When we press this button, we get a popup window. This window contains a data table with all the keys and descriptions of possible values for our input field. This is what we are concerned with - how to build this functionality.


Figure 3 - Visual Composer Value Help in Action

Value Help Wizard
If we return to the Visual Composer Storyboard, we can see from the Layout View that the Value Help wizard is easy to invoke. You just have right mouse click on the field you want to generate the value help for. Then you choose Add Value Help from the context menu.

Figure 4 - Starting the Value Help Wizard

The first step of the wizard will show us details about the field we selected. The most important information is probably the system that it came from so that we know where we probably need to go to get the value help service. We can also choose type of selection we want to generate. The Visual Composer Value Help wizard analyses the meta data of the input field we are attaching the value help to suggest the best type of selection.


Figure 5 - Value Help Configuration Wizard

In the next step we can choose the system and service name that we want to connect to in order to get our value help values. In this example, we will connect to another RFC based data service in our same backend system.


Figure 6 - Select Data Service

In the final step of the wizard, we have to map the input and output parameters of the data service that we calling. Now the service I built is really quite simple. It contains one input field with the data of the data dictionary reference we want to generate help values for (later in the weblog I will detail how this works from the ABAP side). The output contains a key/description pair table. If this was a complex BAPI with many inputs and output, you would use this screen to choose the proper input and output mappings.



Figure 7 - Specify Data Service Runtime Parameters

After the completion of the wizard, we can return to the design view and we see a new event path emanating out of our input form. This path leads to to a Popup Signal.


Figure 8 - New Value Help Event

If you double click on the Popup Signal, you will be forward navigated to the popup iView that was generated by the wizard. Here we can see our value help data service and the data table that displays the results.


Figure 9 - Value Help iView Design

You even have the opportunity to change the look of the value help by altering the elements in the design or layout views. For instance you might decide later that you don't want to display the Key field column. You can easily hide it by changing the properties on the Search results table view.


Figure 10 - Value Help iView Layout

ABAP RFC for the Data Service
As I was working on some demos I started to create dedicated RFCs for the different value helps that I wanted to use. Of course there are many BAPIs that can provide value lists, but they can't cover all possible data elements. Then it occurred to me, wouldn't it be nice to have one generic RFC that could supply key/description lists off of either basic data dictionary domains or simple search helps.

When doing BSP development, developers face a similar situation. In order to populate htmlb:dropDownListBox elements, you need a similarly structured internal table. To support BSP developers there is a utility for reading these value help pairs by just supplying a data object reference. This utility is CL_BSP_SERVICES=>GET_SIMPLE_HELPVALUES. This particular utility has no real inner ties to the BSP framework and therefore can be used in any type of application. I have found that many of the useful BSP services continue to add value in other development environments such as Web Dynpro and now Visual Composer.

So all my ABAP Function Module needs to do is create a data reference from the input description. This way from Visual Composer you can just type the name of the data dictionary element that you want to use to generate the value help list. Then we call the BSP utility and pass the results back out of the RFC.

function z_rfc_vc_simple_value_help .*"----------------------------------------------------------------------*"*"Local Interface:*"  IMPORTING*"     VALUE(DATA_REF) TYPE  STRING*"  EXPORTING*"     VALUE(E_VALUE_HELP) TYPE  SHSVALTAB*"----------------------------------------------------------------------  data: field type ref to data.  translate data_ref to upper case.  if data_ref is initial.    exit.  endif.****Create a data object of the specified type  data: error4 type ref to cx_sy_create_data_error.  try.      create data field type (data_ref).    catch cx_sy_create_data_error into error4.      exit.  endtry.****Use the provided BSP services to get the HelpValues from the data reference  data: error1 type ref to cx_bsp_services_param.  data: error2 type ref to cx_bsp_services_notfound.  data: error3 type ref to cx_bsp_services_shlp.  try.      call method cl_bsp_services=>if_bsp_services~get_simple_helpvalues        exporting          data_object_ref = field        changing          helpvalue_tab   = e_value_help.    catch cx_bsp_services_param into error1.      exit.    catch cx_bsp_services_notfound into error2.      exit.    catch cx_bsp_services_shlp into error3.      exit.  endtry.endfunction.

Visual Composer Drop-Down List
Now that we have our simple data service, we can actually use this to populate drop down lists in Visual Composer as well. In the example that I used, there is a relatively small list of possible values. It really would be better suited to a drop down list than the full blown value help.

In order to start making the change, lets just return to the main design view of our application. From here we can view the properties for the Input Form. From the control column we can choose Drop-Down List.


Figure 11 - Changing to a Drop-Down List

Now when we go into the control properties, we can choose how we want to fill our entry list. If we choose Dynamic, we will be given the option to once again find a data service. The same data service that we designed for Value Help will work perfectly fine here as well.


Figure 12 - Find a Data Service

Although this step doesn't trigger a wizard, the process for choosing the data service and then mapping the parameter is really quite similar to the Value Help Wizard. Just like before we will supply a literal for the name of the data dictionary data reference. We an then map our output value to the Value and Text Fields of the Drop-Down List.


Figure 13 - Mapping Data Service Parameters

You can then see that the final product works by seamlessly calling our data service to populate our Drop-down List.


Figure 14 - Drop-down Populated by Our Same Data Service