ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

New WINDEV 2024 feature!
Help / WINDEV Tutorial / Tutorial - WINDEV application: Managing data
  • Lesson 2 - Searching and iterating over records
  • Overview
  • Modifying the window: using a Tab control
  • Creating the Tab control
  • Modifying the Tab control: tab titles and images
  • Implementing the search
  • Area for displaying the data found
  • Exact-match search
  • Generic search
  • Looping through forms
  • Window test
  • To sum up

Tutorial - WINDEV application: Managing data

Lesson 2 - Searching and iterating over records
We will cover the following topics:
  • Record search management.
  • Iterating over records.
Durée de la leçon 30 min
Overview
In the previous lesson, we saw how to add and modify records. We will now complete our application by adding a search functionality (to modify a record, for example).
We will modify the main window of the "WD Full Application" application to add tab panes.
  • The first tab pane will display the list of products and will allow you to add and modify them (we developed these features in the previous lesson).
  • In the second tab pane you will be able to find a customer by name. The customer form will be displayed in the same tab pane.
Two search modes will be implemented:
  • an exact-match search,
  • a generic search.
Warning
This lesson is based on the WD Full Application example used in Lesson 1. To follow this lesson, you must have completed the steps in Lesson 1.
Modifying the window: using a Tab control
In this example, the search will not be performed in a new window: we will use the WIN_Menu window. So far, this window displays the list of products.
We will use tabs to display different data in this window. Tabs are used to group data by theme. The user can directly access a theme by clicking the desired tab.
The Tab control includes all the features you need to create tabs.

Creating the Tab control

To display the data of the "WIN_Menu" window in a Tab control:
  1. Open the "WIN_Menu" window if necessary:
    • from the open document tabs.
    • by double-clicking its name in the "Project explorer" pane.
  2. Select the controls and move them outside the window. This may seem "strange", but it will make it easier to work on the Tab control and then associate the controls with the desired tab pane.
    Moving the window controls
  3. Create a Tab control in the window:
    • On the "Creation" tab, in the "Containers" group, expand "Tab and associated" and select "Tab".
    • Click in the window to create the Tab control.
    • Position the Tab control at the top left of the window.
    • A Tab control is created with two tabs by default. The Tab control occupies the entire available space in the window.
  4. Select the controls outside the window and move them to Tab 1.
  5. A green border appears when hovering the controls on the Tab control. This border indicates that the controls in the current tab pane will be automatically associated with it.
  6. Enlarge (if necessary) the window and the Tab control to display the Table control and the buttons in the Tab control.
Handling controls in a Tab control
  • To check whether all the controls are associated with the current tab, click another tab: all controls associated with the tab disappear.
  • To resize the Tab control without taking into account the anchors defined on the controls of the tab pane, hold down the Shift key while you resize the control.
Window interface with Tab control

Modifying the Tab control: tab titles and images

Change the name of the Tab control:
  1. Double-click the Tab control that was just created: the control description window appears.
  2. Change the control name. Name the control "TAB_View".
  3. Validate the control description window.
Two tabs are created by default. We will change their text directly:
  1. Select the Tab control.
  2. Click "Tab 1". The tab switches to edit mode: type "List of products". Press Enter to validate.
    Tab title in edit mode
  3. Click "Tab 2". The tab pane is displayed. Click "Tab 2" again. Type "Find customers". Press Enter to validate.
We will associate an image with each tab in the Tab control. To do so:
  1. Open the Tab control description window (double-click the control, for example). The "General" tab of the description window allows you to configure the characteristics of each tab in the Tab control. The list of tabs is displayed on the left. You can change the characteristics of each selected tab on the right of the screen.
  2. In the description window, select "List of products".
    Characteristics of a tab in a Tab control
  3. The tab characteristics are displayed.
    Characteristics of a tab in a Tab control
  4. We will associate an image to the tab using WINDEV's image catalog.
    If an image can be displayed in a control or window, WINDEV proposes to use the image catalog. This image catalog can be opened via the "Catalog" option (available by clicking the Show image options button). The catalog contains hundreds of images, cliparts and more.
  5. Click Show image options on the right of "Image". Select "Catalog" in the context menu that appears. The image catalog window appears.
  6. Type "Product" in the search area. Click the search icon to start the search.
    Searching for an image in the image catalogue
  7. Select Product image and validate ("OK").
  8. The image settings window is displayed. This window allows you to change the image characteristics: size, lightness, etc. Keep the default options and validate.
  9. The image is generated in the project directory and the corresponding file is automatically associated with the current element.
  10. In the Tab control description window, click "Find customers" in the list of static tabs.
  11. Click Show image options on the right of "Image". Select "Catalog" in the context menu that appears. The image catalog window appears.
  12. Type "Person" in the search area. Click the search icon to start the search.
  13. Select, among the proposed images, the icon representing two persons (Image of people) and validate.
  14. Keep the default options in the image settings and validate.
  15. Validate the Tab control description window.
We have just created a new control: we must now define its anchors in the window. When the window is enlarged, the Tab control must also be enlarged in order to occupy the entire available space. Therefore, the control must stretch to the right and to the bottom.
  1. Select the Tab control.
  2. Right-click to open the context menu and select "Anchor".
  3. In the anchor settings window, select Width and height and confirm.
  4. Save the window by clicking Save element in the quick access buttons.
Implementing the search
The "WIN_Menu" window was entirely created. We can now focus on the content of the Tab control pane for finding customers.
This Tab control pane will be divided into several areas:
  • An area for displaying the data found.
  • An area for entering the search elements.
  • An area containing the navigation buttons.

Area for displaying the data found

First, we will create different controls to display the customer data.
We will create the Edit controls in the same way we created the controls in the product form window: a simple Drag and Drop from the "Analysis" pane.
To create the controls that will display the customer data:
  1. Open the WIN_Menu window in the editor and click the "Find customers" tab. The empty tab pane appears.
  2. Display the "Analysis" pane in the editor if necessary: on the "Home" tab, in the "Environment" group, expand "Panes", select "Panes", and then select "Analysis". The different data files described in the "WD Full Application" analysis appear in the pane.
  3. Click Arrow to the left of the "Customer" data file: the items in the data file appear.
  4. Select the items of the Customer data file displayed in the "Analysis" pane. You can select multiple elements by holding the Ctrl key down.
  5. Drag and drop these items onto the "Find customers" tab pane.
    Drag and drop of items from the Customer data file
  6. The controls are automatically created in the Tab control pane. These controls are bound to the corresponding item in the data file.
  7. Save the window (Ctrl + S).
We will align the controls and make them the same size:
  1. Select the "City" control and then the other Edit controls in the window (hold the Ctrl key down while clicking the different controls). The first selected control will be used as reference to set the size of the other controls.
  2. On the "Alignment" tab, in the "Inside and outside" group, click "Justify (Ins. and Out.)".
    Ribbon 'Alignment' tab
Test the window (click Test window in the quick access buttons). Click the "Find customers" tab. The window is displayed with empty controls. Close the test window to go back to the editor.

Exact-match search

First, let's perform an exact-match search.
Key information:
Exact-match searches look for records that exactly match the search keywords.
To perform an exact-match search, we are going to select the customer name in a Combo Box control. The "Exact-match search" Button control will be used to display the form of the corresponding person. In this case, only one person matches the selected name.
The Combo Box control will be located above the created controls. If the controls are too close to the top of the Tab control pane, you will need to move them down. To do so:
  1. Select all the controls in the Tab control pane:
    • Press Ctrl + A: all the controls in the window and in the current tab pane are selected.
    • Hold the Ctrl key down and click the Tab control: only the controls in the Tab control pane are selected.
    • Release the Ctrl key.
  2. Move one of the selected controls down.
    Selecting the controls to move down
  3. All controls are moved down.
To create the Combo Box control used to select the desired person:
  1. Create a Combo Box control: on the "Creation" tab, in the "Usual controls" group, click "Combo Box".
  2. Click "Find customers", and position the control between the tab and the "Customer ID" control.
  3. The Combo Box control creation wizard appears. We will create a Combo Box control based on the "Customer" data file.
  4. Select "Display data from a file or existing query".
    Combo Box control creation assistant
    Proceed to the next step of the wizard.
  5. Select the "Customer" data file. Go to the next step.
  6. We will display the customer's first and last name.
    • Deselect the "CustomerID" item.
    • Select the "FullName" item.
      Combo Box control creation assistant
  7. Go to the next step.
  8. The "FullName" item will also be used to sort the list of customers displayed in the Combo Box control. Select the "FullName" item.
    Combo Box control creation assistant
  9. Go to the next step.
  10. The value returned by the Combo Box control will be the "CustomerID". This is the value that will be searched in the Customer data file. Select the "CustomerID" item.
    Combo Box control creation assistant
    Go to the next step.
  11. The Combo Box control will not be bound to any item. Keep "No" and go to the next step.
  12. Validate the next step ("Next").
  13. Give a name ("COMBO_Customer" for example) and a caption ("Sought customer" for example) to the control.
  14. Finish the wizard. Position the Combo Box control in the window (e.g. in upper-left corner).
  15. Select the Combo Box control and resize it (via the handles) so that the entire customer name is displayed.
    Creating the search control
To create the Button control to find customers:
  1. Create a Button control: on the "Creation" tab, in the "Usual controls" group, click Create a Button control.
  2. Position the Button control next to the Combo Box that was just created.
  3. Name the control "BTN_ExactMatchSearch" and define "Exact-match search" as caption.
  4. If necessary, adjust the size of the control so that the caption is displayed properly in the control.
  5. Write the following WLanguage code in the "Click" event of the control:
    // Finds the customer by identifier
    Customer.ReadSeekFirst(CustomerID, COMBO_Customer) 
    IF Customer.Found() THEN
    // Displays the customer data
    Customer.ToWindow()
    END
  6. Let's take a look at this WLanguage code:
    • <Data file>.ReadSeekFirst is used to perform an exact-match search. In this example, the search is performed on the Customer data file and on the CustomerID item. The search value is the last parameter of the function. Here, the search value corresponds to the value selected in the Combo Box. This value is obtained by using the name of the Combo Box control (COMBO_Customer).
    • <Data file>.Found is used to check the search result. If <Data file>.Found returns True, a value was found; if <Data file>.Found returns False, no value was found. Any record found is read and it becomes the current record in the data file.
    • In this code, if the record was found, it is displayed by <Data file>.ToWindow.
      <Data file>.ToWindow and <Window>.ToFile perform the reverse operation: the data in the items of the data file is displayed in the corresponding controls.
  7. Close the code editor.
  8. Save the window (Ctrl + S).
Let's test our exact-match search:
  1. Test the window (click Test window in the quick access buttons).
  2. Click the "Find customers" tab if necessary.
  3. Select a value in the Combo Box control and click "Exact-match search".
    Exact-match search test
  4. The result appears immediately.
  5. Close the test window to go back to the editor.

Generic search

We are now going to perform a generic search.
Key information:
A generic search looks for all elements beginning with the search value.
To perform this search, we will create an Edit control to enter the name you are looking for, and a Button control to launch the search.
To create the search control:
  1. If necessary, select the "Find customers" tab of "WIN_Menu" in the editor.
  2. Create an Edit control: on the "Creation" tab, in the "Usual controls" group, click Create an Edit control.
  3. In the window, click below the Combo Box control ("Sought customer"). The edit control is created.
  4. Name the control "EDT_Sought_Name" and define "Sought name" as caption.
To create the Button control to launch the generic search:
  1. Create a Button control: on the "Creation" tab, in the "Usual controls" group, click Create a Button control.
  2. Position the control next to the Edit control that was just created.
    Search interface
  3. Name this control "BTN_GenericSearch" and define "Generic search" as caption.
  4. If necessary, adjust the size of the control so that the caption is displayed properly in the control.
  5. Write the following WLanguage code in the "Click" event of the button:
    // Finds a customer by name
    Customer.ReadSeek(FullName, EDT_Sought_Name)
    IF Customer.Found() THEN
    // Displays the customer data
    Customer.ToWindow()
    ELSE
    Error("No customer matches")
    END

    <Data file>.ReadSeek is used to perform a generic search. In this example, the search is performed on the "Customer" data file and on the "FullName" item. The search value corresponds to the value typed in the "EDT_Sought_Name" control. This value is obtained by using the control name.
  6. Close the code window.
  7. Save the window (Ctrl + S).
Now, we can simply test our generic search:
  1. Test the window (click Test window in the quick access buttons).
  2. Click the "Find customers" tab if necessary.
  3. Enter a value in the edit control (for example "BEEF") and click "Generic search".
    Generic search test
  4. The result appears immediately. However, if several records correspond to the search, only the first one is displayed.
  5. Stop the test and go back to the editor.

Looping through forms

We will add four Button controls to iterate over the different records of the "Customer" data file. These controls are in a "Navigation" layout.
Navigation buttons
These controls will allow you to:
  • iterate over the different records in the data file,
  • iterate over the records that match a generic search.
Each button has an icon that displays:
  • the first record,
  • the previous record,
  • the next record,
  • the last record.
To create the Button control used to display the first file record:
  1. Go to the "Find customers" tab in the editor.
  2. On the "Creation" tab, in the "Usual controls" group, click Create a Button control.
  3. The shape of the control appears under the mouse pointer. Then click the Tab control pane, below "Generic search". The Button control is automatically created.
Skin templates are used to standardize the windows in a project. They define the style of all controls in the windows. A specific style is defined for each navigation button. To apply this style:
  1. Select the Button control if necessary.
  2. Right-click to open the context menu and select "Choose a style".
  3. All the button styles are displayed in the window that appears. Under "Other styles", select "BTN_First".
    Control style
  4. Validate.
Change the name of the Button control:
  1. Open the control description window:
    • Select the Button control.
    • Right-click to open the context menu and select "Description".
  2. Name this control "BTN_First".
  3. Validate the description window.
It's your turn:
Likewise, create 3 Button controls.
  • Name these controls as follows: "BTN_Previous", "BTN_Next" and "BTN_Last".
  • Associate these controls with the following styles: "BTN_Previous", "BTN_Next" and "BTN_Last".
We will now write the WLanguage code associated with the different buttons.
Let's start with the button for displaying the first record.
  1. Right-click the control. Select "Code" in the menu that appears.
  2. In the code window, write the following WLanguage code in the "Click" event:
    // Reads the first customer
    Customer.ReadFirst()
    IF Customer.Out() THEN
    // No customer
    Info("No form to view.")
    ELSE
    // Displays the customer data
    Customer.ToWindow()
    END
    <Data file>.ReadFirst is used to read the first file record according to the key used for the last search (FullName in our case).
For the button that displays the previous record, you can write the following WLanguage code in the "Click" event of "BTN_Previous":
// No iteration has been initialized
IF Client.RecNum() <= 0 THEN
// Reads the last customer
Customer.ReadLast()
ELSE
// Reads the previous customer
Customer.ReadPrevious()
END

// If the beginning of file is exceeded
IF Customer.Out() THEN
Info("Start of file reached.")
ELSE
// Displays the customer data
Customer.ToWindow()
END
Likewise, write the following WLanguage code in the "Click" event of "BTN_Next":
// No iteration has been initialized
IF Client.RecNum() <= 0 THEN
// Reads the first customer
Customer.ReadFirst()
ELSE
// Reads the next customer
Customer.ReadNext()
END

// If the end of file is exceeded
IF Customer.Out() THEN
Info("End of file reached.")
ELSE
// Displays the customer data
Customer.ToWindow()
END
Lastly, write the following WLanguage code in the "Click" event of "BTN_Last":
// Reads the last customer
Customer.ReadLast()
IF Customer.Out() THEN
// No customer
Info("No form to view.")
ELSE
// Displays the customer data
Customer.ToWindow()
END
In these different codes:
  • <Data file>.ReadLast reads the last record in the data file based on the key used for the last search.
  • <Data file>.ReadNext reads the record whose key value is immediately greater than the one of the current record.
  • <Data file>.ReadPrevious reads the record whose key value is immediately less than the one of the current record.
In any case:
The code in the "Next" and "Previous" Button controls contains additional lines of code to:
  • Check whether a search has already been started in the Customer data file (check the result of <Data file>RecNum to find out if a read operation has already been started).
  • Read the first or last record if necessary. The next or previous record cannot be read if no reading has been started in the data file.
Save the window by clicking Save an element in the quick access buttons.

Window test

Let's test the window one last time:
  1. Test the window (click Test window in the quick access buttons).
  2. Click the "Find customers" tab if necessary.
  3. Find a customer (enter "BEEF" and start a generic search, for example).
  4. Browse the data file by clicking each of the navigation buttons.
  5. Stop the test to go back to the editor.
To sum up
Completed project
Do you want to check the end result of the steps described here?
A completed project is available. This project contains the different windows created in this lesson. To open the completed project, go to the home page and click "Tutorial", then in "Tutorial - WINDEV application: Manage data", double-click "Full application - Answers".
In this lesson, we discovered how to perform exact-match and generic searches and how to loop through a data file. In the next lesson, we will perform a multi-criteria search in the database records.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 2024
Comments
Click [Add] to post a comment

Last update: 12/20/2023

Send a report | Local help