Websydian v6.1 online documentationOnline documentation - WebsydianExpress v3.5

Tutorial - Add a dynamically loaded drop down

Prerequisites

You need to have completed the Create business process tutorial before working with this tutorial.

Overview

In many situations you will want to have a drop-down list that is loaded by reading data from the database.

This tutorial shows you how to convert an existing input field for an EventHandler to a drop-down list loaded with values from the database.

The EventHandler ItemSalesList.ShowList.ChangeGroup defined in the previous tutorial has an input field Item Group ID. The tutorial will show you how to change this to a drop-down list loaded with the possible values.

Define service function

A service function is needed to load the values in the drop-down list.

In a real life application you would probably load the dropdown from a table containing all item groups, but to keep the database definitions to a minimum for the tutorial, the Sales Statistics file will be used for loading the Item Groups.

A function reading through the records, and extracting one instance of each Item Group ID must be created.

Define triples

Source Object Verb Target Object
DataBase.Sales Statistics.BySales function FNC Sales Statistics
DataBase.Sales Statistics.BySales.FetchItemGroups is a FNC DataBase.Sales Statistics.Fetch.BlockFetch
is a FNC STORAGE/ServerExternal
replaces VW

...by VW

DataBase.Sales Statistics.Fetch
DataBase.Sales Statistics.BySales
local FLD

...for

Item Group ID
Work
output view VW

...for VAR

...omits FLD

DataBase.Sales Statistics.BySales
STORAGE/FetchedData
Item Number

Item Name

Number of order lines

Amount total

Sales total

variable VAR

...as SYS

WORK
local
implement SYS Yes

Make action diagram code

A couple of statements are needed in the action diagram for the FetchItemGroups function.

Post point "End initialize":

Set Work<Item Group ID> = <Item Group ID.*Blank>

Post point "End set row usage":

If View<Item Group ID> == Work<Item Group ID>

    Set FetchL<UseRow> = <UseRow.No>

Post Point "Process fetched row":

Set Work<Item Group ID> = View<Item Group ID>

 

This function will return one instance for each Item Group ID found.

Generate and build function

Generate and build the function "DataBase.Sales Statistics.BySales.FetchItemGroups".

Create Dropdown page

A dynamically loaded drop-down list is just a child page, with a special content, which is included in the page showing the dropdown.

Define this child page:

Source Object Verb Target Object
DataBase.Sales Statistics.BySales includes FNC ItemGroupDropDown
ItemSalesList.ItemGroupDropDown is a FNC _Abstract.HTMLDropDownGeneratorForProcess
implement SYS Yes
impl name NME IGROUPDD
file name NME IGROUPDD
replaces VW

...by VW

UIBASIC/UIBasic.Grid
DataBase.Sales Statistics.BySales
replaces FNC

...by FNC

UIBasic.Grid.BlockFetch
DataBase.Sales Statistics.BySales.FetchItemGroups
ItemSalesList.ItemGroupDropDown._DocumentTemplateGenerator implement SYS Yes
ItemSalesList.ShowList comprises FNC ItemSalesList.ItemGroupDropDown

One of the differences between "standard" Websydian and WebsydianExpress is that the PageGeneratorForProcess automatically is a ParentPageGenerator. So the comprises triple is the only thing necessary to include the dropdown on the page.

As the dropdown PageGenerator inherits from HTMLDropDownGeneratorForProcess the template is found in the same manner as the templates for the parent page, this means that the template for the ShowList and for the ItemGroupDropDown always can be placed in the same physical folder.

Generate and build functions

Generate and build the following functions:

ItemSalesList.ItemGroupDropDown

ItemSalesList.ItemGroupDropDown._DocumentTemplateGenerator

ItemSalesList.ShowList

Create and change templates

Run ItemSalesList.ItemGroupDropDown._DocumentTemplateGenerator

Change the generated template to the following content:

In the ITEMSALE template, the input field for the Item Group ID must be replaced with the drop down.

The easiest way to do this is by changing a line in the FORM for the ChangeGroup event.

From this:

To this:

Please note that WD21F (FORM NAME) is the generated implementation name of the EventHandler - it can be different in your application.

You can of course generate build an run the template generator for ShowList, but this will only place the replacement marker "/(IGROUPDD)" at the top of the template - you will still have to make the above replacement yourself - and you would also have to remember to reproduce any changes to the template you have made before.

Deploy objects

Test the function

Use the menu point to enter the function again.

The input field Item Group Id should now be shown as a drop down. Try selecting a value and press the Change Group button. The values shown in the list should now be restricted to the selected item group.