ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

New WEBDEV 2024 feature!
This content has been translated automatically.  Click here  to view the French version.
Help / WEBDEV Tutorial / Tutorial - Multi-criteria search and printing
  • Lesson 1 - Multi-criteria search
  • Overview
  • An Page to search
  • Step 1: Creating the query to find orders
  • Creating the query
  • Query test
  • Using parameters in the query
  • Test of the query with parameters
  • Creating the multi-criteria search page
  • Creating a page
  • Creating the controls to set the criteria and display the result
  • Optimizing the page display

Tutorial - Multi-criteria search and printing

Lesson 1 - Multi-criteria search
We will cover the following topics:
  • Creating a query with parameters.
  • Creating the interface to select the search criteria.
  • Passing parameters to a query.
  • Displaying the query result in a Table control.
  • Optimizing the page refresh by enabling Ajax.
Durée de la leçon 1h30 mn
Overview
This tutorial will show you how to propose a multi-criteria search in an Page on a WEBDEV site.. You can then print one of the invoices corresponding to the search result..
In this lesson, we will allow users to perform a multi-criteria search. This search will be carried out in an Page in session mode..
In our example, this search will be done on the "Order" data file. The user will be able to select:
  • the name of the customer,
  • the order status,
  • the payment method,
  • the price of the order.
To create this page, we'll handle the "Site_WEBDEV_Complet" project..
Opening the example project:
  1. In WEBDEV, open the "Site_WEBDEV_Complet" project:
  2. Go to the WEBDEV home page (Ctrl + <).
  3. Click on "Tutorial", then in the "Part 3 to 6" area, double-click on "Site WEBDEV Complet - Exercise".
Warning
This project will be used in the different lessons of this tutorial.
An Page to search
The UI of "PAGE_Multicriteria_search" will be as follows:
Page UI
This UI includes:
  • controls to select the search criteria.
  • buttons to launch the search or print the results.
  • a Table control to display the search result. This Table control is based on a query. The query will be used to select the records to be displayed.
First, we'll create the query that will allow us to select the records we're looking for according to different criteria. Then we'll create the Page to enter the search criteria and display them.. Search criteria can be selected in a specific Page.
Step 1: Creating the query to find orders

Creating the query

The first step is to create the record selection query.
What is a select query?
A select query is a query that selects the records corresponding to specific criteria.
This type of query is called "select query" because of the SQL SELECT command.
For this query, we'll use the query editor.
  1. Click Create an element in the quick access buttons. The new element window appears: click "Query­". The query creation wizard starts.
  2. Select the "Select" option.
    This query will be used to select records. Go to the next step.
  3. The query description window appears.
    Let's take a look at the UI of the query editor:
    Query editor interface
    This IU includes:
    1. the tree structure of the analysis (the description of the project database).
    2. the items that will be included in the query.
    3. the record selection options.
    4. the query in SQL code or in natural language.
To build the query, we are going to select the elements that will be displayed in the result.
  1. Double-click the items in the analysis, to the left of the description window. The items taken into account are displayed in the middle of the screen.
    We want to display:
    • the order information. In the "Order" data file, double-click the following items: OrderID, Date, Status and TotalIOT.
    • information regarding the customer who placed the order. In the "Customer" data file, double-click the "FullName" item.
    • the payment method. In the "PaymentMethod" data file, double-click the "Caption" and "PaymentMethodID" items.
    The query description window is as follows:
    Description of the query in this lesson
  2. The data will be sorted by date.
    • Select the "Order.Date" item in the center of the screen, then click "Sort" (in the list of actions) and select "Sort by the selected item".
      Add a sort
    • In the window that appears, select an ascending order and validate.
  3. A blue arrow with the number 01 appears to the right of "Order.Date". This arrow indicates that an ascending order has been defined on the item. The number "01" indicates that this sort will be applied first.
    Sorted query item
  4. Give a name to the query: in "Query name", change "QRY_NoName1" to "QRY_FindOrders":
    Query name
  5. Validate the query description window ("OK" button).
  6. Validate the query save window.
  7. The graphic query representation is displayed:
    Graphic representation of the query

Query test

We will immediately test the query we have just created:
  1. Click Test an element.
  2. The result is displayed in a window:
    Query test result
  3. The result lists ALL orders. In our case, we will only display the orders that match the search criteria. To do so, we must use a query with parameters.
  4. Close the window.

Using parameters in the query

In our example, the user will be able to select a value for the following search criteria:
  • Customer name.
  • Order status.
  • Order payment method.
  • Price of the order.
We will modify the query so that these search criteria match the query parameters.
To define the query parameters, open the query description window: double-click the background of the graphic query representation (or select "Query description" in the context menu).
To define the "Customer name" parameter:
  1. Select the Customer.FullName item in the middle of the screen.
  2. Expand "Selection condition" (in the window's "Actions" section) and select "New condition".
  3. In the window that appears, we will specify that the selection condition corresponds to a parameter:
    New selection condition
    • Select "Contains".
    • Check "the parameter".
    • Specify the parameter name: "ParamCustomerName".
      It is recommended to use the "param" prefix for the query parameters. This allows you to easily find them in the code editor.
      When you search for a query parameter, simply enter ‘param' and the code completion feature of the code editor will show all the parameters.
  4. Validate the condition description window. The number "1" appears to the right of the "Customer.FullName" item, indicating that a selection condition has been defined.
List of query elements
The query description in natural language (at the bottom of the query editor) is automatically updated based on the new condition.
Query in natural language
Let's now see the second parameter: the order status:
  1. Select the Order.Status item (in the middle of the screen).
  2. Expand "Selection condition" and select "New condition".
  3. In the window that appears, we will specify that the selection condition is equal to a parameter:
    Selection condition
    • Select "Is equal to".
    • Select "the parameter".
    • Specify the parameter name: "ParamStatus".
  4. Validate the condition description window. The number "1" appears to the right of the "Order.Status" item, indicating that a selection condition has been defined.
We will define a condition on the payment method. The "PaymentMethod.PaymentMethodID" item must not be displayed in the query result but a condition must be applied to it. To do so, it will be made invisible.
  1. To avoid showing the "PaymentMethod.PaymentMethodID" item in the result:
    • Click the eye (Show item) corresponding to the "PaymentMethod.PaymentMethodID" item in the list of query elements (in the middle of the screen).
    • In the menu that appears, select "Don't display".
  2. To define a selection condition on the "PaymentMethod.PaymentMethodID" item:
    • Select the "PaymentMethod.PaymentMethodID" item (in the middle of the screen).
    • Expand "Selection condition" and select "New condition".
    • In the window that appears, specify that the selection condition corresponds to a parameter:
      • Select "Is equal to".
      • Select "the parameter".
      • Specify the parameter name: "ParamPaymentMethodID".
  3. Validate the selection condition.
    List of query elements
The last selection condition will be defined on the order amount. We will define two selection conditions to specify the minimum and maximum price.
  1. Select the "Order.TotalIOT" item in the list of query elements.
  2. Right-click to open the context menu of the item and select "Selection condition .. New condition".
  3. In the window that appears:
    • Select the condition "Is greater than or equal to".
    • Click "the parameter".
    • Specify the parameter name: "ParamMinPrice".
  4. Validate the selection condition.
  5. Define another condition on the "Order.TotalIOT" item: right-click to open the context menu of the item and select "Selection condition .. New condition".
  6. In the window that appears:
    • Select the condition "Is less than or equal to".
    • Click "the parameter".
    • Specify the parameter name: "ParamMaxPrice".
  7. Validate the selection condition.
    You can replace these two selection conditions (greater than or equal to and is less than or equal to) with "Is between".
    However, when you use the "Is between" selection condition, it means that you must enter the two values (which is not the case if you define two different conditions).
  8. Validate the query description window. The query graph updates and takes the new selection conditions into account.
    Query graph
  9. Save the query by clicking Save an item in the quick access buttons.

Test of the query with parameters

To test the query with parameters:
  1. Click Test an element.
  2. A window appears and allows you to enter the different query parameters.
    The parameters can be ignored by unchecking the box on the left of their name. In this case, the selection condition associated with the parameter is ignored. For example, if ParamCustomerName is ignored, the query will take into account the orders of all customers.
    Remark: If all parameters are unchecked, the query returns the entire result.
    Query test parameters
  3. Define the following data:
    • Uncheck ParamCustomerName and ParamStatus.
    • Select the ParamPaymentMethodID parameter. In the lower section of the screen, enter "1".
    • Select ParamMinPrice. In the lower section of the screen, enter "150".
    • Select ParamMaxPrice. In the lower section of the screen, enter "300".
  4. Validate the window. The query result corresponding to the specified parameters is displayed.
  5. Close the window.
Now, we will create a page to:
  • specify the query parameters,
  • run the query,
  • to display the query result.
Creating the multi-criteria search page

Creating a page

To create the page that will show the result of the multi-criteria search:
  1. Create a new blank page.
    • Click Create an element in the quick access buttons.
    • The new element window appears: click "Page" then "Page".
    • The page creation wizard starts.
    • In "Based on a project template", select "PAGETPL_Simple" and finish the wizard.
  2. The page save window appears.
  3. Type the title: "Multicriteria search". The name "PAGE_Multicriteria_search" is automatically filled in.
  4. Validate.

Creating the controls to set the criteria and display the result

We are going to create a Table control based on the query then to create the different controls allowing the user to select the search criteria.
Creating the Table control
To create the Table control that will display the search result:
  1. Create a Table control: on the "Creation" tab, in the "Data" group, expand "Table" and select "Simple table".
  2. Click the "PAGE_Multicriteria_search" page: the Table control creation wizard starts.
  3. The Table control will be based on the "QRY_FindOrders" query (created previously). Select "Display data from a file or existing query". Proceed to the next step of the wizard.
  4. Select the query that will be used as data source for the Table control:
    • Expand the "Queries" group.
    • Select the "QRY_FindOrders" query.
      Table control creation wizard - Selecting the data source
    • Move on to the next stage of wizard.
    • Select all the items displayed: they will all be displayed in the Table control.
      Table control creation wizard - Selecting the items to display
      Proceed to the next step of the wizard.
  5. Keep the default options in the different steps of the wizard and confirm.
  6. The Table control is automatically created in the page.
  7. If necessary, move the Table control so that it is displayed in its entirety.
    Table control in the page editor
For better readability, we will modify the Table control description.
  1. Open the Table control description (double-click the control).
    The description window of the Table control includes two sections:
    • the upper section, containing the control name, as well as the name and type of the columns.
    • the lower section, containing the different description tabs.
      Table control description window
    If you click the name of the Table control, the lower section shows the characteristics of the table.
    If you click a column, the lower section shows the characteristics of the columns.
  2. Click the name of the Table control. The caption of the Table control appears in the lower section. We will change this text. Replace the text with "Search results".
    Changing the caption of the Table control
  3. Click the "COL_OrderID" column. The column title is displayed in the lower section of the screen. Replace "Order ID" with "ID".
    Changing the title of COL_OrderID
  4. Click the "COL_FullName" column. Replace "Name" with "Customer".
  5. Click the "COL_Caption" column. Replace "Caption" with "Payment mode".
  6. Validate the Table control description window. These changes are automatically applied to the control.
  7. Reduce the size of the "ID" column so that all the columns fit in the Table control.
  8. Enlarge the Customer and PaymentMethod columns.
    Table control in the page editor
  9. Save the page by clicking Save an item in the quick access buttons. We will check the column sizes when running the page.
Live Data and controls based on queries
Live Data is not displayed in the controls that use a query as data source for the following reason: The data displayed depends on the result of the query and can only be known at runtime.
We will test this page for the first time:
  1. Click Test an element in the quick access buttons.
  2. Only the orders paid in cash, with a price between $150 and $300 are displayed. This corresponds to the results of the last query test run in the editor, when we specified the parameters in the query test window.
    Table control at runtime
  3. Close the browser to go back to the editor.
Let's take a look at the events associated with the Table control:
  1. Select the Table control and press F2.
  2. The "Initialization of TABLE_QRY_FindOrders" event contains the following code:
    Initialization of TABLE_REQ_SearchCommands (server)
    // Le champ utilise une requête paramétrée pour afficher ses données.
    // Les paramètres de cette requête doivent être définis avant ou 
    // lors de l'initialisation du champ.
    // La requête sera exécutée automatiquement si au moins un paramètre a été défini.
    //
    // Pour plus d'informations, veuillez consulter l'aide:
    // Requête paramétrée, Utilisation dans un champ Table, un champ Liste ou un champ Combo
    //
    // Paramètres de la requête 'REQ_RechercheCommandes'
    //MaSource.ParamNomClient = <Valeur du paramètre ParamNomClient>
    //MaSource.ParamEtat = <Valeur du paramètre ParamEtat>
    MySource.ParamIDModeRèglement = "1"
    MySource.ParamPrixMin = "150"
    MySource.ParamPrixMax = "300"

    The test parameters have been retrieved as default parameters for the execution. Now, we will modify the page to allow the user to enter the parameters using different controls.
  3. To build our page, we will comment out all the lines of code that correspond to parameters:
    • Select the three lines of code that start with "MySource ...".
    • Press Ctrl + /.
    • The lines of code are commented out.
  4. Close the code editor (click "X" in the upper-right corner).
We will create the different controls allowing the user to select the query parameters. These controls will be created above the Table control.
If necessary, move the Table control and reduce its height to leave some space for the criteria selection controls.
First parameter: Customer name
We will create an Edit control to allow the user to search for a customer name.
To create the edit control:
  1. Open the "Analysis" pane if necessary: on the "Home" tab, in the "Environment" group, expand "Panes", select "Panes", and then select "Analysis". The different data files defined in the "Full_WEBDEV_Site" analysis are displayed in the pane.
  2. Click Arrow to the left of the "Customer" data file: the items in the data file appear.
  3. Select the "FullName" item located in the Customer data file, then drag it and drop it in the "PAGE_Multicriteria_search" page.
  4. The edit control is automatically created. Move this control above the Table control.
    Creating the 'Name' Edit control
We will now pass the value entered in the Edit control as parameter to the query:
  1. Select the Table control and press F2.
  2. In the initialization event of the Table control, replace the following line:
    Initialization of TABLE_REQ_SearchCommands (server)
    //MaSource.ParamNomClient = <Valeur du paramètre ParamNomClient>
    by:
    Initialization of TABLE_REQ_SearchCommands (server)
    MySource.ParamNomClient = SAI_NomComplet

    In this code, EDT_FullName is the name of the Edit control that you have just created. The value of this control is associated with the ParamCustomerName parameter expected by the query.
  3. Close the code editor.
Before running the test, we are going to create a Button control to re-display the content of the Table control according to the value selected in the Radio Button:
  1. Create a Button control:
    • on the "Creation" tab, in the "Usual controls" group, click Create a Button control.
    • then, click at the top right of the page.
  2. Change the control caption (press Enter). Enter "Find".
  3. Change the control style:
    • Right-click to open the context menu of the control and select "Choose a WEBDEV style".
    • In the window that appears, select "Details (With background)".
      Choosing the style
    • Confirm ("OK" button).
  4. Resize the control if necessary:
    • select the control.
    • select "Adapt size" in the context menu.
  5. Open the control code: press F2.
  6. Write the following code in the "Click xxx (server)" event:
    Clic xxx (server)
    TABLE_REQ_RechercheCommandes.Affiche(taInit)

    In this code, the taInit constant executes the initialization event of the Table control again (the event in which the parameters are passed to the query).
  7. Close the code editor.
We will test the first parameter:
  1. Save the page by clicking Save an item in the quick access buttons.
  2. Click Test an element in the quick access buttons.
  3. In the page that appears, type "ADDAMS" and click "FIND". The content of the Table control changes: all the orders placed by "ADDAMS" are displayed.
    Find a customer by name
  4. Close the test page.
Second parameter: Order status
Three states can be assigned to an order:
  • en attente,
  • validated,
  • canceled.
In our analysis, the order status is saved in the "Status" item of the "Order" data file. This item is a radio button.
To allow the user to select one of these three states, we will use a Radio Button control bound to the "Status" item of the "Order" data file.
Radio buttons are also called "option boxes". They are used to select a single option in a list of options.
How to differentiate a radio button from a check box?
  • Radio Buttons are used to select a single option.
  • Check Boxes are used to select multiple options.
To create the Radio Button control:
  1. In the "Analysis" pane, click Arrow to the left of the "Order" data file: the items in the data file appear.
  2. Select the "Status" item in the Order data file, then drag and drop it onto "PAGE_Multicriteria_search".
  3. The Radio Button control is automatically created. Move this control above the Table control.
    Creating the Radio Button control
We will use the value selected in the Radio Button control to pass it to the query as a parameter:
  1. Open the events associated with the Table control:
    • Select the Table control.
    • Right-click to open the context menu and select "Code".
  2. In the initialization event of the Table control, replace the following line:
    Initialization of TABLE_REQ_SearchCommands (server)
    //MaSource.ParamEtat = <Valeur du paramètre ParamEtat>
    par:
    Initialization of TABLE_REQ_SearchCommands (server)
    MySource.ParamEtat = SEL_Etat

    In this code, RADIO_Status is the name of the Radio Button control that you have just created. The value of this control is associated with the ParamStatus parameter expected by the query.
  3. Close the code editor.
We will test the first two parameters passed:
  1. Click Test a page in the quick access buttons.
  2. Type "ADDAMS" and select "Pending".
  3. Click "FIND": only the orders placed by ADDAMS and waiting for payment are displayed.
    Orders of a given customer, filtered by status
In this example, only the orders placed by a given customer and with a specific status have been displayed. Now, we will list all the orders placed by a customer regardless of their status. We will modify the page to perform this process.
In this case, we must:
  • Add an additional status to display all orders,
  • Manage the additional status.
Close the browser.
To add an option to the Radio Button control:
  1. Select the previously created Radio Button control.
  2. Open the control description window (double-click the control, for example).
  3. In the "Content" tab, in the list of options, insert the "All orders" option at the top of the list:
    • Click the "+" button.
    • Type "All orders".
    • Use the up arrow (on the right) to move the option up.
      Radio Button control options
  4. Validate the control description window.
  5. Enlarge the control in the editor to display all the options (move the Table control if necessary).
The "All orders" option ignores the "ParamStatus" query parameter. To ignore a query parameter, simply assign the NULL value to this parameter. We will manage this case for ParamStatus.
  1. Select the Table control and open its events (press F2 or select "Code" in the context menu).
  2. In the initialization event of the Table control, replace the following line:
    Initialization of TABLE_REQ_SearchCommands (server)
    MySource.ParamEtat = SEL_Etat
    by:
    Initialization of TABLE_REQ_SearchCommands (server)
    SWITCH SEL_Etat
    // Toutes les commandes
    CASE 1
    MySource.ParamEtat = Null
    OTHER CASE
    MySource.ParamEtat = SEL_Etat-1
    END

    In this code, if the RADIO_Status control corresponds to 1 (case of the "All orders" option), the "NULL" value is assigned to the associated query parameter. Otherwise, the value of the parameter is the number of the selected option minus 1 (which corresponds to the option we added).
  3. Close the code editor.
Let's test the page.
  1. Save the page by clicking Save an item in the quick access buttons.
  2. Click Test a page in the quick access buttons.
  3. Type "ADDAMS" and select "All orders".
  4. Click "FIND": all the orders placed by ADDAMS are displayed, regardless of their status.
    Find a customer by name and the status of the orders
  5. Close the browser.
Third parameter: Payment mode
Several payment methods can be used for an order: cash, checks, etc. The available payment methods are stored in the "PaymentMethod" data file.
We will use an Combo Box control based on this data file to allow the user to select the desired payment method.
The Combo Box control displays a list of elements and allows users to select an element from the list.
Unlike a List Box, a Combo Box displays only one element at a time: when you click the control, it expands and allows you to select another element. Only one element can be selected.
The elements displayed in a Combo Box control can be defined when creating the control in the editor. These elements:
  • are defined programmatically.
  • come from a data file or query.

To create a Combo Box control:
  1. On the "Creation" tab, in the "Usual controls" group, click "Combo box".
  2. Click where you want to create the control in the window (e.g., next to the Radio Button control).
  3. The Combo Box control creation wizard starts.
  4. Select "Display data from a file or existing query" and go to the next step.
  5. Select the "PaymentMethod" data file and go to the next step.
  6. The item to be displayed in the Combo Box control is "Caption". Select "Caption".
    Go to the next step.
  7. Select the search key: "Caption".
    Go to the next step.
  8. Select the return value: "PaymentMethodID". This return value is very important because it will be passed as parameter to the query.
    Go to the next step.
  9. Keep the default options in the different steps of the wizard and validate the creation of the Combo Box control.
  10. The Combo Box control is automatically created in the page.
Change the caption of the Combo Box control (press Enter). Type "Payment mode".
Changing the caption of the control
We will now pass the value selected in the Combo Box control as parameter to the query:
  1. Open the events associated with the Table control: Select the Table control and press F2.
  2. In the initialization event of the Table control, replace the following line:
    Initialization of TABLE_REQ_SearchCommands (server)
    //MaSource.ParamIDModeRèglement = 1
    by:
    Initialization of TABLE_REQ_SearchCommands (server)
    MySource.ParamIDModeRèglement = COMBO_Mode_de_Règlement

    In this code, COMBO_PaymentMethod is the name of the Combo Box control we have just created. The value of this control is associated with the ParamPaymentMethodID parameter expected by the query.
  3. Close the code editor.
  4. Save the page (Save an item or Ctrl + S).
We will test the parameters passed:
  1. Click Test a page in the quick access buttons.
  2. Type "ADDAMS".
  3. Change the order status using the Radio Button control and the payment method using the Combo Box control, then click "FIND". The content of the Table control changes.
    Orders of a given customer, filtered by status
  4. Close the browser.
Last parameter: Order total
The last query parameter corresponds to the order total. We have a parameter that corresponds to the minimum amount and a parameter that corresponds to the maximum amount. The user must be able to choose a price interval. To do so, we will use a Range Slider control.
A Range Slider control is a graphic control that can be easily included in a WEBDEV site and that is used to select the bounds of an interval (start value and end value).
To manage the product price:
  1. On the "Creation" tab, in the "Graphic controls" group, expand "Slider" and select "Price range".
    Creating a Slider control
  2. Click inside the page, between the "Payment mode" control and the "FIND" button. The range slider is automatically created.
    Creating a Slider control
The control you have just created is an advanced control that includes the slider and two controls displaying the bounds. The control is already programmed to display the bounds. We will initialize the Slider control so that the bounds match the data from the Order data file.
  1. Select the Slider control and open the events (F2).
  2. Insert the following code above the existing lines in the initialization event of the control:
    Initialization of TABLE_REQ_SearchCommands (server)
    // La valeur inférieure est le montant le moins cher
    Commande.LitPremier(TotalTTC)
    MySelf.BorneMin = Commande.TotalTTC
    MySelf.ValeurInférieure = MySelf.BorneMin

    // La valeur supérieure est le montant le plus cher
    Commande.LitDernier(TotalTTC)
    MySelf.BorneMax = Commande.TotalTTC
    MySelf.ValeurSupérieure = MySelf.BorneMax

    Let's analyze this code:
    • <Data file>.ReadFirst reads the first record of the "Order" data file according to the search key, TotalIOT in this case. Therefore, this function reads the record corresponding to the lowest amount.
    • Then, the amount read in the record is associated with the lower bound of the Slider control as well as its lower value.
      • The lower bound specifies the minimum value that can be selected by the user.
      • The lower value specifies the minimum value currently selected.
    • The same principle is used to find the greatest amount. The only difference is the function used: <Data file>.ReadLast. This function reads the last record of the Order data file according to the amount, i.e. the record with the highest amount.
  3. Close the code window.
We will pass the selected amounts as parameter to the query:
  1. Open the events associated with the Table control: select the Table control and press F2.
  2. In the initialization event of the Table control, replace the following lines:
    Initialization of TABLE_REQ_SearchCommands (server)
    //MaSource.ParamPrixMin = "1500"
    //MaSource.ParamPrixMax = "3000"

    by:
    Initialization of TABLE_REQ_SearchCommands (server)
    MySource.ParamPrixMin = POTI_Budget.ValeurInférieure
    MySource.ParamPrixMax = POTI_Budget.ValeurSupérieure

    In this code, the parameters corresponding to the prices are equal to the lower value and upper value of the slider.
  3. Close the code editor.
  4. Save the page (Save the item or Ctrl + S).
We will test the parameters passed:
  1. Click Test a page in the quick access buttons.
  2. Define the different search parameters:
    • Customer name,
    • Status,
    • Payment method,
    • Amount.
  3. Click "FIND". The content of the Table control changes.
    Search using the slider
  4. Close the browser.
Optimizing the page display
By default, when the "Find" button is clicked, the server returns all the content of the page.
To optimize the page display, you can enable the Ajax mode on this button. In our example, the server will only return the content of the Table control.
WEBDEV includes multiple methods to use the Ajax technology in a site:
  • Ajax in one click: simply click AJAX in the code editor to enable Ajax on an event.
  • Ajax controls (Table and Looper controls). The Ajax controls are used to display data dynamically loaded from the server. No need to download everything at the same time!
  • Ajax using specific WLanguage functions: AjaxExecute and AJAXExecuteAsynchronous.
To enable Ajax on the "Find" button:
  1. Select the "Find" button and open its events (F2).
  2. In the header of the "Click on xxx (server)" button event, the AJAX link is struck through.
    Ajax not enabled
  3. Click the AJAX link: the "AJAX enabled" link appears, indicating that the event is automatically changed into an Ajax event.
    Ajax enabled
  4. Close the code editor.
Test the page:
  1. Click Test a page in the quick access buttons.
  2. Define the different search parameters:
    • Customer name,
    • Status,
    • Payment method,
    • Amount.
  3. Click "Find". Only the content of the Table control is re-displayed.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 2024
Comments
Click [Add] to post a comment

Last update: 11/16/2023

Send a report | Local help