PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
New WEBDEV 25 feature!
  • This lesson will teach you the following concepts
  • Overview
  • Creating the query used to find orders
  • Creating the query
  • Query test
  • Using parameters in the query
  • Test of query with parameters
  • Creating the page proposing the multicriteria search
  • Creating a page
  • Creating the controls used to configure the criteria and to display the result
  • Optimizing the page display
Lesson 5.1. Multicriteria search
This lesson will teach you the following concepts
  • Creating a query with parameters.
  • Creating the interface used 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.
Lesson duration

Estimated time: 1h30 mn
Previous LessonTable of contentsNext Lesson
Overview
In the previous parts, we have created a WEBDEV project used to develop a site containing both an Internet section and an Intranet section.
We will still be working with the "Full_WEBDEV_Site" project that was used in parts 3 and 4.
  • If the "Full_WEBDEV_Site" project was not opened in the previous lesson:
    1. Display the WEBDEV home page if necessary (Ctrl + <).
    2. In the home page, click "Tutorial" and select "Full WEBDEV Site (With pages)".

      Answer

      A corrected project is available. This project contains the different pages created in this lesson. To open the corrected project, in the home page, click "Tutorial" and select "Full WEBDEV Site (Answer)".
In this lesson, we will give the user the ability to perform a multicriteria search.
In our example, this search will be done on the "Orders" 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.
The interface of "PAGE_Multicriteria_search" will be as follows:
Page interface
This interface includes:
  • controls used to select the search criteria.
  • buttons used to start the search or to print the result.
  • a Table control used to display the search result. This Table control is based on a query. This query will be used to select the records to display. The Table control will list the search results.
The first step consists in creating the query used to select the records.

Remark

What is a select query?
A select query is a query that will select the records corresponding to the specific criteria.
This type of query is called a select query because the SELECT command is used in SQL language.
Creating the query used to find orders

Creating the query

  • The query editor will be used to create the query.
    1. Click Create an element among the quick access buttons. The element creation window appears: click "Query­". The query creation wizard starts.
    2. Select the "Select" option.
      Indeed, 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 interface of query editor:
      Query editor interface
      This interface includes:
      1. an analysis reminder (the description of the project database).
      2. the items that will be included in the query.
      3. the options for selecting records.
      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:
      • information regarding the order. In the "Orders" data file, double-click on the items: OrdersID, Date, Status and TotalIOT.
      • information regarding the customer who placed the order. In the "Customer" data file, double-click on the "FullName" item.
      • information regarding the order payment method. In the "PaymentMode" data file, double-click on the "Caption" and "PaymentModeID" 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 "Orders.Date" item in the center of the screen, then click "Sort" (in the list of actions) and select "Sort on the selected item".
        Add a sort
      • In the window that is displayed, specify an ascending sort on the item and validate.
    3. A blue arrow with the number 01 appears on the right of "Orders.Date" item. This arrow indicates that an ascending order has been applied on this item. The number "01" indicates that this sort will be applied first.
      Sorted query item
    4. Give a name to the query: type "QRY_FindOrders" instead of "QRY_NoName1" in the "Query name" area:
      Name of query
    5. Validate the query description window ("OK" button).
    6. Validate the window for saving the query.
    7. The graphic query representation is displayed:
      Graphic representation of the query

Query test

Like all elements of a WEBDEV project, you have the ability to immediately run the test of the query that was just created:
  1. Click Test an element.
  2. The result is displayed in a window:
    Result of query test

    Remark

    A popup menu is displayed when a right click is performed on the query result. You have the ability to export the result to:
    • an XLS file (Excel).
    • an XML file (eXtensible Markup Language).
    • a Word or Open Office file.
  3. The result lists ALL orders. In our case, we want to display the orders corresponding to the search criteria only. 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:
  • Name of the customer.
  • Order status.
  • Order payment method.
  • Price of the order.
We must modify the query in order for these search criteria to correspond to 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 popup menu).
  • To manage 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 is displayed, we are going to specify that the selection condition corresponds to a parameter:
      Entering a selection condition
      • Select "Contains".
      • Check "the parameter".
      • Specify the parameter name: "ParamCustomerName".

        Remark

        It is recommended to use the prefix "param" on 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 completion of the code editor will propose all the parameters.
    4. Validate the condition description window. The number "1" appears on the right of "Customer.FullName" item, indicating that a selection condition was defined.
List of query elements

Remark

The query description in common language (at the bottom of query editor) is automatically updated according to the added condition.
Query in common language
  • Let's now see the second parameter: the order status:
    1. Select the Orders.Status item (in the middle of the screen).
    2. Expand "Selection condition" and select "New condition".
    3. In the window that is displayed, we are going to 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 on the right of "Orders.Status" item, indicating that a selection condition was defined.
  • We are now going to define a condition on the payment method. The "PaymentMode.PaymentModeID" 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 displaying the "PaymentMode.PaymentModeID" item in the result:
      • Click the eye ( Display item ) corresponding to the "PaymentMode.PaymentModeID" item in the list of query elements (in the middle of the screen).
      • In the menu that is displayed, select "Don't display".
    2. To define a selection condition on the "PaymentMode.PaymentModeID" item:
      • Select the "PaymentMode.PaymentModeID" item (in the middle of the screen).
      • Expand "Selection condition" and select "New condition".
      • In the window that is displayed, specify that the selection condition corresponds to a parameter:
        • Select "Is equal to".
        • Select "the parameter".
        • Specify the parameter name: "ParamPaymentModeID".
    3. Validate the definition of selection condition.
      List of query elements
  • The last selection condition to define affects the order amount. In fact, we are going to define two selection conditions in order to specify a minimum price and a maximum price.
    1. Select the "Orders.TotalIOT" item in the list of query elements.
    2. Display the popup menu of item (right mouse click) and select "Selection condition .. New condition".
    3. In the window that is displayed:
      • Select the condition "Is greater than or equal to".
      • Click "the parameter".
      • Specify the parameter name: "ParamMinPrice".
    4. Validate the definition of selection condition.
    5. Define once again another condition on the same "Orders.TotalIOT" item: display the popup menu of item (right mouse click) and select "Selection condition .. New condition".
    6. In the window that is displayed:
      • Select the condition "Is less than or equal to".
      • Click "the parameter".
      • Specify the parameter name: "ParamMaxPrice".
    7. Validate the definition of selection condition.

      Remark

      The definition of the two selection conditions on the item (is greater than or equal to and is less than or equal to) can be replaced by a single condition "Is included between".
      However, using a selection condition such as "Is included between" means that the two values must be typed (which is not the case if two different conditions are defined).
    8. Validate the query description window. The query graph is modified to take into account the selection conditions that have been defined.
      Query graph
    9. Save the query by clicking Save an element among the quick access buttons.

Test of query with parameters

  • To run the test of query with parameters:
    1. Click Test an element.
    2. A window is displayed, allowing you to type the different query parameters.

      Remark

      The parameters can be ignored by unchecking the box in front 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. Type the following data:
      • Uncheck ParamCustomerName and ParamStatus.
      • Select the ParamPaymentModeID parameter. In the lower section of the screen, type "1".
      • Select ParamMinPrice. In the lower section of the screen, type "1500".
      • Select ParamMaxPrice. In the lower section of the screen, type "3000".
    4. Validate the window. The query result corresponding to the specified parameters is displayed.
    5. Close the window.
We are now going to create the page used to:
  • specify the parameters of this query,
  • run this query,
  • display the query result.
Creating the page proposing the multicriteria search

Creating a page

  • To create a page used to display the result of multicriteria search:
    1. Create a new blank page.
      • Click Create an element among the quick access buttons.
      • The element creation window appears: click "Page" then "Page".
      • The page creation wizard starts.
      • In the "Based on a project template" section, choose "PAGETPL_Single" and finish the wizard.
    2. The window for saving the page is displayed.
    3. Type the title: "Multicriteria search". The name ("PAGE_Multicriteria_search") is automatically proposed.
    4. Validate.

Creating the controls used to configure the criteria and to 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 used to display the search result:
    1. Create a Table control: on the "Creation" pane, in the "Data" group, expand "Table" and select "Table".
    2. Click in the "PAGE_Multicriteria_search" page: the Table control creation wizard starts.
    3. The Table control will be based on the "QRY_FindOrders" query (that was created beforehand). Select "Display the data found in a file or in an existing query". Go 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
      • Go to the next step of the wizard.
      • Select all proposed items: all of them will be displayed in the Table control.
        Table control creation wizard - Selecting the items to display
        Go to the next step of the wizard.
    5. Keep the default options in the different wizard screens and validate the creation of Table control.
    6. The Table control is automatically created in the page.
    7. Modify (if necessary) the position of Table control so that it is entirely displayed in the page.
      Table control in the page editor
  • For better readability, we are going to modify the Table control description.
    1. Open the Table control description (double-click the control).

      Remark

      The description window of a Table control includes two sections:
      • the upper section, presenting the name of control, the name of columns as well as their type.
      • the lower section, containing the different description tabs.
        Table control description window
      If the name of Table control is selected, the lower section presents the characteristics of Table control.
      If a column is selected, the lower section presents the characteristics of columns.
    2. Click the name of Table control. The caption of Table control is displayed in the lower section. We are going to modify this caption. Replace the proposed caption by "Search results".
      Changing the caption of the Table control
    3. Click the "COL_OrdersID" column. The column title is displayed in the lower section of the screen. Replace the "Identifier of Orders" caption by "ID".
      Changing the tile of COL_OrdersID
    4. Click the "COL_FullName" column. Replace the "Name" caption by "Customer".
    5. Click the "COL_Caption" column. Replace the "Caption" caption by "Payment mode".
    6. Validate the Table control description window. The control is automatically updated with the modifications performed.
    7. Reduce the size of "ID" column in order for all columns to be displayed in the Table control.
    8. Increase the size of Customer and PaymentMode columns in the Table control.
      Table control in the page editor
    9. Save the page by clicking Save an element among the quick access buttons. We are going to check the sizes of columns by running the page.

Remark

Live Data and controls based on queries
The 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 are going to run a first test of this page:
    1. Click Test an element among the quick access buttons.
    2. Only orders paid in cash and whose price is found between $1,500 and $3,000 are displayed, like in the last query test run in the editor, when the parameters were specified in the test window of query.
      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 the F2 key.
    2. The "Initializing TABLE_QRY_FindOrders" event contains the following code:
      // The control uses a query with parameters to display the data.
      // The parameters of this query must be defined before or
      // when initializing the control.
      // The query will be automatically run if at least one parameter is defined.
      //
      // See the online help for more details:
      // Query with parameters, Use in a Table, List Box or Combo Box control
      //
      // Parameters of 'QRY_FindOrders' query
      //MySource.ParamCustomerName = <Value of ParamCustomerName>
      //MySource.ParamStatus = <Value of ParamStatus>
      MySource.ParamPaymentModeID = "1"
      MySource.ParamMinPrice = "1500"
      MySource.ParamMaxPrice = "3000"

      The test parameters have been retrieved as default parameters for the execution. We are now going to modify the page in order for the parameters to be typed by the user, via controls.
    3. To build our page, we are going to switch all code lines corresponding to parameters into comments:
      • Select the "MySource ..." code lines.
      • Press Ctrl + / on the numeric keypad.
    4. Close the code editor (click the cross in the top right corner of editor).
We are now going to create in our page the different controls allowing the user to select the query parameters. These controls will be positioned above the Table control.
  • Move (if necessary) the Table control in the page and reduce its height in order to leave space for creating the different controls for criteria selection.
First parameter: Customer name
In order for the user to be able to type a customer name to find, we are going to create an edit control.
  • To create the edit control:
    1. Display the "Analysis" pane if necessary: on the "Home" pane, in the "Environment" group, expand "Panes" and select "Analysis". The different data files described in the "Full_WEBDEV_Site" analysis are displayed in the pane.
    2. Click the Arrow icon on the left of the "Customer" data file: the items found in the data file are listed.
    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. Position 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 the F2 key.
    2. In the "Initializing" event of the Table control, replace the line:
      //MySource.ParamCustomerName = <Value of ParamCustomerName>
      by:
      MySource.ParamCustomerName = EDT_FullName

      In this code, EDT_FullName is the name of edit control that was 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 Table control according to the value selected in the Radio Button control:
    1. Create a Button control:
      • on the "Creation" pane, in the "Usual controls" group, click Creating a Button control.
      • then, click at the top right of the page.
    2. Modify the control caption (press Enter on the keyboard). The new caption is "Find".
    3. Modify the control style:
      • In the popup menu of control (right mouse click), select "Choose a WEBDEV style".
      • In the window that appears, select "Details (With background)".
        Choosing the style
      • Validate ("OK" button).
    4. Resize the control if necessary:
      • select the control.
      • select "Adapt the size" from the popup menu.
    5. Display the code associated with this control: press F2.
    6. Write the following code in the "Click (server)" event:
      // Refreshes the display of Table control
      TableDisplay(TABLE_QRY_FindOrders, taInit)

      In this code, the taInit constant is used to re-run the "Initializing" event of the Table control (the event in which the parameters are passed to the query).
    7. Close the code editor.
  • We are now going to check how the first parameter is passed:
    1. Save the page by clicking Save an element among the quick access buttons.
    2. Click Test an element among the quick access buttons.
    3. In the page that is displayed, type the customer name ("ADDAMS") and click "FIND". The content of Table control is modified: all orders placed by the customer named "ADDAMS" are displayed.
      Searching for a customer by their name
    4. Close the test page.
Second parameter: Order status
Three states can be assigned to an order:
  • pending,
  • paid,
  • canceled.
In our analysis, the order status is saved in the "Status" item found in the "Orders" file. This item is a radio button.
To allow the user to select one of these three states, we are going to use the Radio Button control associated with the "Status" item of "Orders" data file.

Remark

The radio buttons are also called "option boxes". They are used to select a single option among the proposed ones.
How to differentiate between a radio button and a check box?
  • The radio button is used to select a single option.
  • The check box is used to select several options.
  • To create the Radio Button control:
    1. In the "Analysis" pane, click the Arrow icon next to the "Orders" data file: the items found in the data file are listed.
    2. Select the "Status" item in the Orders data file, then drag and drop this item to "PAGE_Multicriteria_search".
    3. The Radio Button control is automatically created. Position this control above the Table control.
      Creating the Radio Button control
  • We are now going to use the value selected in the Radio Button control to pass it to the query as parameter:
    1. Display the events associated with theTable control:
      • Select the Table control.
      • Open the popup menu (right click) and select "Code".
    2. In the "Initializing" event of the Table control, replace the line:
      //MySource.ParamStatus = <Value of ParamStatus>
      by:
      MySource.ParamStatus = RADIO_Status

      In this code, RADIO_Status is the name of the Radio Button control that was just created. The value of this control is associated with the ParamStatus parameter expected by the query.
    3. Close the code editor.
  • We are now going to check how the first two parameters are passed:
    1. Click Run the test of a page among the quick access buttons.
    2. Type the name "ADDAMS" and select "Pending".
    3. Click "FIND": only the orders placed by the customer named ADDAMS and waiting for payment are listed.
      Order of a customer, sorted by name of the customer and status of their orders
  • In this example, only the orders placed by a customer and in a specific status can be listed. It may also be interesting to list all orders placed by a customer regardless of their status. We are going to modify our page in order to perform this process.
    To manage this case, we must:
    • Add an additional status to display all orders,
    • Manage the additional status.
  • Close the browser.
  • To add an option into the Radio Button control:
    1. Select the Radio Button control that was created beforehand.
    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 arrow pointing to the top (on the right) to move the option up.
        Options of Radio Button control
    4. Validate the control description window.
    5. Enlarge the control in the editor in order for all options to be displayed (move the Table control if necessary).
  • The new option "All orders" means that the query parameter "ParamStatus" will be ignored. 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 in the editor and display its events (press F2 or select "Code" from the control popup menu).
    2. In the "Initializing" event of the Table control, replace the line:
      MySource.ParamStatus = RADIO_Status
      by:
      SWITCH RADIO_Status
      // All orders
      CASE 1
      MySource.ParamStatus = Null
      OTHER CASE
      MySource.ParamStatus = RADIO_Status-1
      END

      In this code, if the RADIO_Status control corresponds to 1 (case of "All orders" option), the parameter of associated query has "NULL" for value. Otherwise, the parameter has for value the number of the selected option minus 1 (that corresponds to the option that was just added).
    3. Close the code editor.
  • Let's run the test of our page.
    1. Save the page by clicking Save an element among the quick access buttons.
    2. Click Run the test of a page among the quick access buttons.
    3. Type the name "ADDAMS" and select "All orders".
    4. Click "FIND": all orders placed by the customer named ADDAMS are listed, regardless of their status.
      Searching for a customer by their name and status of their orders
    5. Close the browser.
Third parameter: Payment mode
Several payment methods can be used for an order: cash, checks, ... The available payment methods are stored in the "PaymentMode" data file.
We will use an Combo Box control based on this data file to allow the user to select the desired payment method.

Remark

The "Combo Box" control is used to display a list of elements and to select an element from this list.
Unlike a list box, a combo box displays a single element at a time: during a click on the control, the combo box is expanded and it proposes to select another element. A single element is selected.
The elements displayed in a combo box can be defined when creating the control in the editor. These elements:
  • are defined by programming.
  • come from a data file or query.
  • To create a Combo Box control:
    1. On the "Creation" pane, in the "Usual controls" group, click "Combo box".
    2. Click the location where the control must be created in the window (beside the radio button that was just created for example).
    3. The Combo Box control creation wizard starts.
    4. Select "Display the data found in a file or in an existing query" and go to the next step.
    5. Select the "PaymentMode" data file and go to the next step.
    6. The item that will 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: "PaymentModeID". 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.
  • Modify the caption of Combo Box control (press Enter). The new caption is "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. Display the events associated with theTable control: select the Table control and press F2.
    2. In the "Initializing" event of the Table control, replace the line:
      //MySource.ParamPaymentModeID = 1
      by:
      MySource.ParamPaymentModeID = COMBO_PaymentMode

      In this code, COMBO_PaymentMode is the name of the Combo Box control that was just created. The value of this control is associated with the ParamPaymentModeID parameter expected by the query.
    3. Close the code editor.
    4. Save the page ( Save an element or Ctrl + S).
  • We are now going to check how the parameters are passed:
    1. Click Run the test of a page among the quick access buttons.
    2. Type the name "ADDAMS".
    3. Change the status of orders via the radio button and modify the payment method via the Combo Box control, then click the "FIND" button. The content of Table control is modified.
      Orders of a customer, sorted by name of the customer and status of their orders
    4. Close the browser.
Last parameter: Total amount of order
The last query parameter corresponds to the order amount taken into account. We have a parameter that corresponds to the minimum amount and a parameter that corresponds to the maximum amount. The interface must allow the user to type a price interval. To do so, we will use a Range Slider control.

Remark

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" pane, in the "Graphic controls" group, expand "Slider" and select the range slider with the prices.
      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 that was just created is an advanced control that includes the slider and two controls displaying the bounds. The programming required to display the bounds is already performed in the control. We are going to initialize the Slider control so that it proposes the bounds corresponding to the data found in the Orders data file.
    1. Select the Slider control and display its events (F2).
    2. Insert the following code (before the existing code lines) into the "Initializing" event of the control:
      // The lower value is the least expensive amount
      HReadFirst(Orders,TotalIOT)
      MySelf..MinValue = Orders.TotalIOT
      MySelf..LowerValue = MySelf..MinValue
       
      // The upper value is the most expensive amount
      HReadLast(Orders,TotalIOT)
      MySelf..MaxValue = Orders.TotalIOT
      MySelf..UpperValue = MySelf..MaxValue

      Let's study this code:
      • HReadFirst is used to read the first record of the "Orders" data file according to the browse key, TotalIOT in this case. Therefore, this function will be used to read the record corresponding to the lowest amount.
      • Then, the amount read in the record is associated with the lower bound of Slider control as well as its lower value.
        • The lower bound is used to specify the minimum value that can be selected by the user.
        • The lower value is used to specify the minimum value currently selected.
      • The same principle will be used to find the greatest amount. The only difference is the name of the function used: HReadLast. This function will allow you to read the last record of the Orders data file according to the amount, i.e. the record with the highest amount.
    3. Close the code window.
  • We are now going to pass the selected amounts as parameter to the query:
    1. Display the events associated with theTable control: select the Table control and press the F2 key.
    2. In the "Initializing" event of the Table control, replace the lines:
      //MySource.ParamMinPrice = "1500"
      //MySource.ParamMaxPrice = "3000"

      by:
      MySource.ParamMinPrice = SLIDER_Price..LowerValue
      MySource.ParamMaxPrice = SLIDER_Price..UpperValue

      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 element or Ctrl + S).
  • We are now going to check how the parameters are passed:
    1. Click Run the test of a page among the quick access buttons.
    2. Define the different search parameters:
      • Customer name,
      • Status,
      • Payment method,
      • Amount.
    3. Click "FIND". The content of Table control is modified.
      Search using the slider
    4. Close the browser.
Optimizing the page display
By default, during the click on the "Find" button, the entire page content is returned by the server.
To optimize the page display, you have the ability to enable the Ajax mode on this button. In our example, only the content of Table control will be returned by the server.

Remark

WEBDEV proposes several methods for using the Ajax technology in a site:
  • Ajax in one click: simply click in the code editor to transform an event into Ajax event.
  • Ajax controls (Table control, Looper control). The Ajax controls are used to display data dynamically loaded from the server. No need to download everything at once!
  • Ajax by programming via specific WLanguage functions: AJAXExecute and AJAXExecuteAsynchronous.
  • To implement the Ajax mode on the "Find" button:
    1. Select the "Find" button and display its events (F2).
    2. In the "Click (server)" button event, the AJAX link appears to be struck out in the code bar.
      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.
  • Run the page test:
    1. Click Run the test of a page among 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 25
Comments
Click [Add] to post a comment