DVelop Combo

With the aim of improving the way to visualize the data in fields, in WorkWithPlus 12 was included a new type of combo. This is the DVelop Combo.

With this control you will be able to create combos with different categories inside as a TreeView, and the possibility to search in these data.

Rendered DVelop Combo control for Country, shown collapsed with the "(None)" placeholder above an expanded searchable dropdown listing countries with flag icon, name, and continent, such as Argentina/South America, Australia/Oceania, China/Asia, France/Europe, and Italy/Europe.

You can use this type of control in attributes and variables. You only need to change the properties "Control Info" and "Control Type":

GeneXus IDE Properties panel for a WorkWithPlus WebPanel variable named "Country", with red arrows pointing to Control Info set to Custom and Control Type set to DVelop Combo; other settings show Data Source From Attributes, Item Values CountryId, Item Descriptions CountryName/CountryContinent/CountryFlag, and Sort Descriptions True.

 

Data Source From

Then, you must configure the source from where the data will be loaded. The options are: Attributes, Data Provider, Fixed values and User code:

Data Source From Attributes
Data Provider
Fixed Values
User Code

 

Attributes:


You can specify:

 

  • "Style" **
  • "Item Values".
  • "Item Descriptions" (it's optional. If you choose a value that is NOT 'Regular', it corresponds to the Title).
  • "Item Descriptions 2" (Depends on 'Style', it is the Subtitle value) **
  • "Item Descriptions 3" (Depends on 'Style', it's the Image value) **
  • "Sort Descriptions" or not.
  • "Load Data Dynamically" or not.
  • "Item Category Values" and "Item Category Descriptions" (in order to get the records categorized by another attribute).
  • "Allow Multiple Selection" or not.

If you set an "Item Category Value" and the "Allow Multiple Selection" property the definition is as follows:

GeneXus IDE Properties panel for the same DVelop Combo Country variable, with red boxes around "Item Category Values" set to RegionId, "Item Category Descriptions" set to RegionDescription, and "Allow Multiple Selection" set to True, configuring a region-grouped multi-select combo.

At runtime, you will see the combo like this:

Rendered DVelop Combo Country control configured for multiple selection, showing selected tag chips South Africa, China, Japan, and Uruguay, with an expanded dropdown grouped by continent (Africa, Asia) containing checkboxes, a search box, an "Only selected values" filter, and a "Select all" option.

 

Data Provider:

There are two possible situations:

  1. Load a Data Provider with a custom SDT, as follows:
    GeneXus IDE Structure view of the "SDTCountry" SDT, marked as a collection, containing item SDTCountryItem with fields Id (Numeric 4.0), Name (VarChar 40), and Region (Character 40).

    In this case, you need to assign "Item Values" and "Item Descriptions", and the DataProvider which loads it in the property "Data Provider". This case will only support one level Data (multiple or single selection).

    Like this Data Provider:

    GeneXus IDE source editor for Data Provider "DPCountry", mapping SDTCountryItem output fields Id = CountryId, Name = CountryName, and Region = RegionDescription; the Properties panel lists Data Provider settings including Expose as Web Service False, Output SDTCountry, and Collection False.

    You need to define a variable as follows, for that, change the property of the DVelop Combo 'Allow Multiple Selection = True':

    GeneXus IDE Variables tab of the "CountryWP" WebPanel, listing standard WorkWithPlus DVelop Combo variables including Combo_DataItem, ComboCat_DataItem, ComboTitles, VariableDP, VariableDP_Data, and VariableDP_DPItem, with a red arrow pointing to the VariableDP row and its VarChar(40) type.

    Add the variable to the instance and modify the following properties values:

    GeneXus IDE Properties panel for a WorkWithPlus variable "VariableDP" (VarChar 40), with Control Info highlighted: Control Type "DVelop Combo", Data Source From "Data Provider", Data Provider "DPCountry", Item Values Id, Item Descriptions Name and Region, Sort Descriptions True, Empty Item True, and Allow Multiple Selection True.

    At runtime it will look as follows:

    Rendered DVelop Combo Country multi-select control populated from a Data Provider, showing selected chips Uruguay, Peru, and Japan, with an expanded checklist grouped by region (South America) listing Saudi Arabia, South Africa, Spain, United States, and Uruguay (checked), plus a "Select all" option.

  2. Load a Data Provider using WorkWithPlus's SDT associated to DropDownOptions:

    The DVB_SDTComboData structured data type editor, Structure tab, shows the collection-level DVB_SDTComboData root (Is Collection checked) containing an Item group with fields ID (VarChar(40)), Title (VarChar(40)), and Children (of type DVB_SDTComboData, WWPBaseObjects), defining a recursive tree structure for combo data.

    If you load your data using this SDT, you can display multiple levels, depending on the children added to de DataProvider.

    For example, the following Data Provider will have 2 levels:

    The DpSDTComboData procedure's Source tab shows GeneXus code building a DVB_SDTComboData tree literal: a root Item with ID assigned from incrementing &Id and Title 'South America', containing nested Children items with Title values 'Uruguay', 'Argentina', and 'Brasil', followed by another sibling Item starting below.

    The ComboTreeView web panel's Patterns tab shows the object tree with variable MyVar under Panel: Combo TreeView, and a red arrow pointing to its Properties panel where Control Type is DVelop Combo, Data Source From is set to Data Provider, Data Provider is DpSDTCombo, and the highlighted Item Values and Item Descriptions fields are set to ID and Title respectively.

    At runtime it will look as follows:

    A DVelop Combo tree-style dropdown control shows the selected input reading 'Uruguay, France, Italy' with a search box, an 'Only selected values' checkbox, and an expandable checklist grouped under Europe (Spain, France checked, Italy checked, Germany) and South America (Uruguay checked), plus a 'Select all' option at the bottom.

    With this mechanism you could set N levels.

 

Fixed Values:

The third option of "Data Source From" is Fixed values. This means that you will define the values of the combo in the property 'Values'.

The WebPanelPerson Transaction pattern editor, Patterns tab, shows the object tree with the VariableFixedValues node selected under Panel: General Information; a red arrow points to an open Editor dialog listing Description/Value rows 'Some value'=1, 'Other value'=2, 'A third value'=3, with Add, Remove, Edit, Move up, Move down, OK, and Cancel buttons, illustrating how these fixed values populate the Values property (Some value:1,Other value:2,A third value:3) shown in the Properties panel on the right for a Numeric variable using control type DVelop Combo.

 

User Code:

The last option of "Data Source From" is User code. This means that you will have to assign the values for the variable displayed on the form.

The ComboTreeView web panel's Patterns tab shows variable MyVar under Panel: Combo TreeView with a red arrow to its Properties panel, where the Control Info section is highlighted showing Control Type DVelop Combo, Data Source From set to User code, Sort Descriptions True, Empty Item True, Empty Item Text GX_EmptyItemText, Allow Multiple Selection True, and Load Data Dynamically False.

Then, it is needed to add the code in the subroutine to load the data (at the beginning):

The ComboTreeView web panel's Events tab shows the 'LoadComboMyVar' subroutine source code building &MyVar_Data by creating &Combo_DataItem entries with ID and Title pairs (1 Mery Johnson, 2 Anne Grid, 4 John Leedman, 5 Peter Fort) added via &MyVar_Data.Add, followed by generated WorkWithPlus pattern code that sorts &MyVar_Data by Title and sets Combo_MyVar.SelectedValue_set from &MyVar.ToJson().

And at runtime it will look like follows:

A DVelop Combo multi-select dropdown list is open showing a search box, an 'Only selected values' checkbox, unchecked entries Anne Grid, John Leedman, Mery Johnson, and Peter Fort, and a 'Select all' option at the bottom.

 

Insert New Record in Dve#Insert New Record in Dvelop Combolop Combo

In WorkWIthPlus 13, we can insert a new record of the items displayed in the DVelop Combo.

In order to do this, we need an attribute as Dvelop Combo.

The GeneXus WorkWithPlus pattern editor for the TravelNotify transaction shows the AssuranceCompanyId attribute selected in the panel tree, with a red arrow pointing to its Properties panel where Control Type is set to "DVelop Combo", Data Source From "Attributes", Item Values "AssuranceCompanyId", and Item Descriptions "AssuranceCompanyName", configuring a combo box control bound to attribute-based data.

First, we can create a new Web Panel with the template 'Data displayed popup' based on the business component transaction (in this case the AssuranceCompany transaction). You can also use the transaction itself, but it is better if the transaction is designed for popup (width, fields, etc).

Comment: The 'Data displayed popup'  template is only available if you have run the Design System Wizard in WorkWithPlus 13. If you haven't imported a design in WorkWithPlus 13, the template won't be available, but you can create the Web Component by using any other template, it is not mandatory to use  'Data displayed popup'  template. 

The GeneXus IDE Patterns tab of a Web Panel shows the Work With Plus pattern applied with a Transaction node based on the TransactionPopUp template, including TableMain, TableAttributes, and an Action Group. The preview renders a pop-up form titled Web Panel CreateAssurance with Company ID, Company Name, Company Email, Company Phone fields and Confirm/Cancel buttons; the Properties panel lists Name, Module/Folder, Theme, Type (Web Page), and Master Page settings.

This Web Panel needs to have the property 'Support DVelop Combo Insertion' as true, so that inmediately after creating the new record, it is assigned automatically to the attribute/variable which contains the DVelop Combo.

In the attribute Dvelop Combo, add the panel created.

In the Work With Plus Patterns editor for transaction TravelNotify, a right-click context menu on the AssuranceCompanyId attribute node shows the Add submenu expanded, with a red arrow pointing to the AddRecordOption item alongside Link, Delete, Open Attribute, Cut, Copy, Paste, and Properties.

The Work With Plus pattern tree for transaction TravelNotify shows an Add Record Prompt (CreateAssurance) node nested under AssuranceCompanyId with a TrnMode.Insert parameter. The preview displays fields Notify Id, Departure Date, Return Date, Notify Comments, and Assurance Company Id; the Properties panel shows the TravelNotify transaction settings including Theme WorkWithPlusTheme and Protocol specification Unsecure (HTTP).

At runtime, it looks as follows:

An Assurance Company Id combo box is open showing a search field and a dropdown list with options Assit Card, Mapfre, Seguro Pack Viaje Santander, and New..., with a red arrow pointing to the New... option to indicate adding a record on the fly from the combo.

If you want that when you search for some record and press in the 'New' option, what you searched is filled automatically in the popup Web Panel, you need to follow the steps mentioned in the link below: How to: preset some field in 'New' option of DVelop Combo

 

Filter 'DVelopCombo' with dynamic values from attributes or variables

You can filter the records that are displayed in some 'DVelopCombo' associated to a dynamic attribute or variable in a simple way. 

Example: insert one Company and set the country and city. The city field needs to display only cities from the selected country.

Rendered WorkWithPlus popup "General Information" form for creating a Company, with Name "DVelop", Description "DVelop Software Solutions", a Logo image control showing a "Change" overlay, Country and City dropdowns, and Confirm/Cancel buttons.

In order to do this:

  • The control has to have the property 'Load Data Dynamically' as True
  • A new property named 'Conditions dynamic atts or vars' will appear. You need to select the attributes/variables that will have a condition associated to the control. WorkWithPlus will show you the name of the variable that you have to mention in the conditions
  • In the property 'Conditions (dynamic controls)' you need to add the conditions associated to the control, mentioning the variable that WorkWithPlus showed you

GeneXus IDE Patterns tab for the "Company" Transaction with the CityId attribute selected. The Properties panel highlights "Conditions (Dynamic controls)" set to CountryId = &Cond_Countryld, "Load Data Dynamically" True, and an open Editor dialog mapping CountryId to the &Cond_Countryld condition variable.

In the Example shown before:

  • CityId is the control with 'DVelop Combo' (DVelop Combo)
  • The dynamic attribute that is needed to use in the conditions is 'CountryId', so the variable to use in the conditions is '&Cond_CountryId'
  • In the property 'Conditions (dynamic controls)', the condition added is
 CountryId = &Cond_CountryId;

Important: you can read further information and scenarios about the DVelop Combo in the following link: Improvements in 'DVelop Combo' User Control

 

**Implemented since WorkWithPlus for Web 14.