PC SOFT

WINDEVWEBDEV AND WINDEV MOBILE
ONLINE HELP

Home | Sign in | English UK
New WEBDEV 24 feature!
  • This lesson will teach you the following concepts
  • Overview
  • Creating a page in Session mode used to list the products
  • Creating a page that is using a template
  • Creating controls
  • Page test
  • Modifying products via a page in "Product form" Session mode
  • Creating the page
  • What should this page do?
  • Creating edit controls
  • Displaying data in the page
  • Creating buttons
  • Managing the product image
  • Displaying the form from the list of products
  • Adding a new product via the "Product form" page
  • Checking the product addition
  • Viewing the records
Lesson 3.3. Pages for addition and modification
This lesson will teach you the following concepts
  • Creating a page in Session mode used to list the products.
  • Creating a page in Session mode whose type is product form.
  • Managing the product addition and modification.

Estimated time: 50 mn
Previous LessonTable of contentsNext Lesson
Overview
We are going to create the different pages of the WEBDEV site in Session mode used to list, add and modify products. These operations will allow you to discover:
  • how to use WEBDEV to create pages in Session mode,
  • how to access the database.
These operations will also allow you to use some very useful features of WEBDEV­.
  • Open the "Full WEBDEV Site" exercise:
    1. Display the WEBDEV home page (Ctrl + <).
    2. In the home page, click "Tutorial" and select "Full WEBDEV Site (Exercise)".

      Answer

      A corrected project is available. This project contains the different windows created in this lesson. To open the corrected project, in the WEBDEV home page (Ctrl + <), click "Tutorial" and select "Full WEBDEV Site (With pages)".
Creating a page in Session mode used to list the products
To create the page used to list the products, we are going to create a blank page then add all controls: this will allow us to present the steps required to create this type of page.

Creating a page that is using a template

  • To create a blank page:
    1. Click among the quick access buttons (or press Ctrl + N).
    2. The window for creating a new element is displayed: click "Page" then "Page".
    3. The wizard for creating a new page is displayed.
    4. Select the "Menu" template.

      Note

      A preset template is used to group part of the interface and processes in a single location.
      We recommend that you use templates to re-use and standardize the interface of your sites.
    5. Make sure that option "Create: a page and its template" is checked.
    6. Validate the wizard (green button).
    7. The new page is displayed in the editor.

      Note

      When validating the wizard for page creation, WEBDEV automatically creates:
      • the page that will be displayed in the browser. This page is directly displayed in the editor and it can be modified.
      • the associated page template, corresponding to the preset template that was chosen. To modify the page template, it must be edited. This operation will be presented later in this lesson.
    8. The window for saving the page is displayed. Type the page title: "List of products". The page name "PAGE_List_of_products" is automatically proposed.
    9. Validate.
  • By default, this page contains the different controls used to display the possible overviews. In our case, we are going to delete these controls:
    1. Select the controls found in the page (press Ctrl + A).

      Note

      In the editor, by default, only the page controls are accessible. The controls and events of the template cannot be edited. By pressing Ctrl + A, only the page controls are selected. The controls found in the page template are not modified.
    2. Delete the controls (Del key).
    3. Only the controls corresponding to the page template remain in the page.
    4. Save the modifications performed in the page: click among the quick access buttons (or press Ctrl + S).

Creating controls

To create the list of products, we will be using a Looper control. This control will be linked to the "Product" data file.

Note

What is a Looper control?
The best way for displaying elements in list format in a Web page is to use a Looper control. A Looper control includes an area (containing several controls) that is repeated a given number of times.
Each area can, of course, contain different data.
  • To create the Looper control:
    1. On the "Creation" pane, in the "Data" group, expand "Looper" and select "Looper"
    2. Click in the top left corner of the page, just below the menu: the wizard for creating the Looper control starts.
    3. The wizard wants to know how the Looper control will be filled:
      • by programming (this feature will be presented in a next lesson),
      • from the database, from a data file or from a query,
      • from a WLanguage variable.
      In this case, the Looper control must display all products: select "Display the data coming from a file or from a query".
    4. Go to the next step by clicking the arrow at the bottom of the screen.
    5. The next wizard screen proposes the different data files and queries found in the current project. Expand "Analysis" if necessary and select the "Product" data file.
    6. Go to the next step.
    7. The wizard proposes the list of items found in the data file. By default, all items are checked in order to be displayed in the Looper control. In our case, we are going to display all the items EXCEPT for the product description.
      Uncheck "Description" and go to the next step.
    8. Then, the wizard proposes to select the search key, which means the default sort for the data displayed in the Looper control. The items proposed in the wizard correspond to the items defined as key items in the analysis. The products will be sorted according to their caption.
      Select "Caption" and go to the next step.
    9. We are now going to select additional parameters for creating the Looper control:
      • The Looper control is in Classic mode: the entire data will be displayed when loading the page.
        Select the "Classic" operating mode.
      • The Looper control is using an unlimited number of rows. Indeed, all products must be accessible in the page directly. The page will be enlarged in order to display all products.
        Select "No limit" in the "Maximum number of rows per page" area.
    10. Go to the next step. The Looper control will display the products on 3 columns.
      • Keep the default option: "Fixed number of rows, Fill in row".
      • In the "Number of columns" area, replace 2 by 3.
    11. Validate the wizard. The Looper control is automatically created in the page.
  • We are going to reposition the control in the page:
    1. Select the control.
    2. Move the control with the mouse in order to position it in the top left corner of the page. When the control reaches the limit of display area in the page template, green lines are displayed: these lines are used to position the control inside the display area.
    3. Then, reduce:
      • the size of control rows (the size of columns) in order for the control to be entirely displayed in the page.
      • the size of caption in order for the control to be positioned in the column.
Let's take a look at the control that was just created: the data is already displayed in the control, even in the editor.
This concept is called "Live data": the content of data files found on the development computer is used in the pages or reports handled in the editor. This feature is very useful to define the size of controls found in a page for example.
  • We are going to hide the control containing the product identifier. Why hide it instead of deleting it? Because this identifier will be useful in the rest of our development.
    1. Select the "STC_ProductID" control. This control corresponds to the identifier (control with a number at the top of looper).
    2. Display the description window of control ("Description" from the popup menu).
    3. In the "GUI" tab, uncheck "Visible".
    4. Validate the description window of control.
  • We are now going to modify the menu of our page in order to display the option used to list the products. The menu is found in the page template. Therefore, we are going to modify the page template.
    1. Display the popup menu of menu (right mouse click on "Home" for example) and select "Open the template".
    2. Select the menu.
    3. Click the "Home" option. A yellow border appears around the menu. This yellow border indicates that the menu is in "Edit" mode: it can be modified.
    4. Display the description window of option (select "Option description" from the popup menu).
    5. In the "General" tab:
      • Type the option caption: replace "Home" by "List of products".
      • In the "Action of option" area:
        • Select the type "Display a page of the site".
        • Select the "PAGE_List_of_products" page.
      • Validate the description window of option.
    6. If necessary, enlarge the control so that the caption of the option appears on a single line (use the control handles).
    7. Press Esc to exit from the edit mode.

      Note

      We have modified the menu displayed in the template. You can also modify other template elements such as the logo or the "Company" caption..
  • To update the pages that use the template:
    1. In the orange bar of template, click : this button is used to propagate the template modifications to all pages that use the model.

      Note

      If the modifications made to the template are not applied to your pages, a synchronization of templates will be proposed during the test of your page (and also before a deployment).
    2. In our case, a single page is proposed.
    3. Validate the window for updating the template.
    4. Close the page template.
Our page is ready to be checked.

Page test

  • We are going to run the test of the page that was just created.
    1. Click on among the quick access buttons.
    2. The page is automatically displayed in the browser.
    3. You have the ability to scroll the products with the page scrollbar.
  • Close the browser. The WEBDEV editor is redisplayed.
Modifying products via a page in "Product form" Session mode
Now that the list of products is displayed, you may want to modify a product. We are now going to create a page used to display the product details in order to modify them.

Creating the page

  • To create a page used to display the product details:
    1. Create a new blank page.
      • Click among the quick access buttons.
      • The window for creating a new element is displayed: click "Page" then "Page".
      • The wizard for page creation starts.
      • In the "Based on a project template" area, choose "PAGETPL_Menu" and validate the wizard.
    2. The window for saving the page is displayed. Type the page title: "Product form". The page name "PAGE_Product_form" is automatically proposed.
    3. Validate.

What should this page do?

This page is intended to modify the characteristics of the product currently selected in the Looper control. This type of page is called "Form" because it corresponds to a descriptive form of the requested element.
In our case, this page will be used to display the content of different items found in the "Product" data file.
First of all, we are going to indicate to the page the product that will be displayed. To do so, all you have to do is declare a parameter in the page.
  • To declare a parameter in the page:
    1. Press the F2 key. The code editor displays the different page events.
    2. Write the following code in the "Global declarations" event:
      PROCEDURE MyPage(gnProductID is 8-byte int)
    3. Let's study this code:
      • The PROCEDURE keyword in the "Global declarations" event is used to associate a procedure to the opening of the page.
      • The procedure is named "MyPage". At run time, this keyword will be automatically replaced by the name of current page.
      • The procedure expects the gnProductID variable (that is an 8-byte integer) in parameter. This variable corresponds to the product identifier that will be displayed in the page. The type of this variable is identical to the type of corresponding ProductID item described in the Product data file.
    4. Close the code editor.

Creating edit controls

We are now going to create the edit controls used to display information about the selected product.
  • To create the controls in the page:
    1. Display the "Analysis" pane if necessary: in the ribbon, 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 on the left of the "Product" data file: the items found in the data file are listed.
    3. With the mouse, select all items displayed in the pane (except for the "ProductID" item). You can for example use the mouse lasso or the multi-selection by holding the Ctrl key down.
    4. Drag and Drop these items to the page that was just created.
    5. Different controls are automatically created in the page. These controls are linked to the corresponding item in the data file. To check this:
      • Select the "Reference" control for example.
      • Display the popup menu (right mouse click) and select "Description".
      • Display the "Link" tab of description window:
        This tab shows that the current edit control is linked to the "Reference" item found in the "Product" data file.
    6. Close the description window.
    7. Save the page (Ctrl + S).
  • Reposition the controls in the page in order to get the following interface:
  • Enlarge the Image control used to display the image associated with the product.
  • We are now going to align the edit controls in the page and to give them the same size:
    1. Select the "Description" control then all other edit controls found in the page (hold the Ctrl key down while clicking the different controls). The first selected control will be used as reference for the size of other controls.
    2. Display the "Alignment" pane of WEBDEV menu. This pane contains all alignment options available for the controls.
    3. We want the outside and inside borders of controls to be aligned. Click "Justify (Ins. and Out.)".
    4. Save the page.

Displaying data in the page

The "Form" page must display the product that is selected in the Looper control. In the page code, we are going to type the code used to:
  • find the product to display.
  • display data in the page.
  • To display data in the page:
    1. Press the F2 key. The code editor displays the different page events.
    2. In the "Global declarations" event, write the following code below the code previously written:
      HReadSeekFirst(Product,ProductID,gnProductID)
      IF HFound(Product) = False THEN
      // Display the list of products
      PageDisplay(PAGE_List_of_products)
      END
      FileToPage()
    3. Let's study this code:
      • HReadSeekFirst is used to find the first record in the Product data file for which the ProductID item is equal to the value of gnProductID. gnProductID corresponds to the parameter passed to the page.
      • HFound is used to check whether a record was actually found. This function is mainly required for the multi-user sites. It is used to avoid errors caused by the deletions performed by the other users. In our case, if the record was not found (HFound returns False), the list of product is redisplayed.
      • FileToPage is used to display in the controls the data found in the data file, for the current record. In our case, the current record corresponds to the record found by HReadSeekFirst.
    4. Close the code editor.

Creating buttons

The "PAGE_Product_form" page will be used to modify a product found in the list of products.
We are now going to add a cancelation button and a validation button:
  • the cancelation button will be used to redisplay the previous page.
  • the validation button will be used to check the data typed and to save the modified data.
Cancel button
  • To create the "Cancel" button:
    1. On the "Creation" pane, in the "Usual controls" group, click "Button".
    2. Click below the edit controls to create the button.
    3. Modify the button caption (press the Space key to edit the caption): the new caption is "Cancel".
  • Type the code associated with the "Cancel" button:
    1. Select the button and press the F2 key. The events associated with the button are displayed.
    2. Type the following code in the server click code of button:
      PageDisplay(PreviousPage())
    3. Let's study this code:
      • PageDisplay is used to display a specific page.
      • PreviousPage is used to find out the name of previous page.
      • Therefore, this code is used to display the previous page.
    4. Save the modifications ( or Ctrl + S).
    5. Close the code editor.

Note

By default, any button created in a page sends the value of page controls to the server ("submit" button). This is the most common case.
Two other options are available:
  • Reinitialize the page controls.
  • No action. This mode must be used when the button must have a "Browser" action only.
These options can be selected in the "General" tab of the description window of Button control , "During the action" option.
Validate button
  • To create the "Validate" button:
    1. On the "Creation" pane, in the "Usual controls" group, click "Button".
    2. Then, click on the left of "Cancel" button to create the button.
    3. Modify the button caption: the new caption is "Validate".
      The validation button will be used to:
      • check the data typed: this check consists in verifying that the different page controls have been filled by the user. This check does not require any access to the server and it can be performed in browser code.
      • save the data typed in the Product data file. It is saved in server code. The data is sent to the server then it is saved in the data file.
  • Type the code associated with the "Validate" button:
    1. Select the "Validate" button and press the F2 key. The events associated with the button are displayed.
    2. Type the following check code in the browser click code of button:
      IF EDT_Reference ~= "" THEN
      Error("A reference must be typed.")
      ReturnToCapture(EDT_Reference)
      END
      IF EDT_Caption ~= "" THEN
      Error("A caption must be typed.")
      ReturnToCapture(EDT_Caption)
      END
      IF EDT_Description ~= "" THEN
      Error("A description must be typed.")
      ReturnToCapture(EDT_Description)
      END
      IF EDT_PriceBT = 0 THEN
      Error("A price must be typed.")
      ReturnToCapture(EDT_PriceBT)
      END
    3. Let's study this code:
      • For each edit control found in our page, a check is performed to find out whether a value was typed.
      • The ‘~=' operator is used to check the equality, excluding the case and the punctuation.
      • If no value is typed, an error message asks the Web user to perform an input (Error). The code execution is stopped and the input is forced in the relevant edit control by ReturnToCapture.
    4. In the server click code of button, type the code for saving data:
      PageToFile()
      HModify(Product)
      PageDisplay(PAGE_List_of_products)
    5. Let's study this code:
      • PageToFile is used to initialize the items with the values of linked controls, for the current record. This function is equivalent to the following code lines:
        Product.Reference = EDT_Reference
        Product.Caption = EDT_Caption
        Product.Description = EDT_Description
        ...

        Our page is using less than 10 controls and the benefit is already there; think of the pages containing a lot more controls: a single code line performs all assignments!
      • HModify is used to update the file data for the current record.
      • PageDisplay is used to display another page. in our case, the "PAGE_List_of_products" page is redisplayed.
    6. Save the modifications ( or Ctrl + S).
    7. Close the code window.

Managing the product image

In the Product data file, an item is used store the image associated with the product.
The Image control is already found in our page, allowing us to see the image, but we are going to give the Web user the ability to change the image associated with the product.
To do so, we are going to allow the Web user to upload an image file found on his computer and to associate it with the item found in the data file. We will be using an Upload control.

Note

The upload consists in copying a file from the client computer to the server.
On the contrary, the download consists in copying a file from the server to the client computer.

Note

WEBDEV proposes to manage the file upload via two specific controls:
  • an Upload control used to upload a single file,
  • an Upload control used to upload several files.
In this example, the user will upload a single file at a time, therefore we will be using the single-file Upload control.
  • To create the Upload control:
    1. On the "Creation" pane, in the "Usual controls" group, expand "Button". The list of preset buttons is displayed.
    2. Select "Uploading files".
    3. Click the position where the control must be created in the page (below the Image control for example).

Note

The Upload control includes:
  • a cell containing:
    • a Static control,
    • a Looper control used to display the characteristics of files to upload.
  • a button allowing the user to select the file to upload,
  • a button allowing the user to send the files to the server.
We are now going to adapt the control code in order to manage the file upload in our site.
  • To configure the Upload control:
    1. Display the "Adding" button code: select the control and press F2.
    2. Different events are associated with the Upload control. We are going to modify the "Receiving the uploaded files" event to copy the image into the site data directory.
    3. Write the following code in the event "Receiving the uploaded files" (ignore compilation errors, we will correct them later):
      UploadCopyFile(MySelf, fDataDir(), ...
      UploadFileName(MySelf, False))
      gsImagePath = fDataDir() + [fSep()] + ...
       UploadFileName(MySelf, False)
      IMG_Visual = gsImagePath

      Note

      This code is using "...". These 3 dots are used to perform a line break in a code line. They are used here for layout purposes.
      In the code editor, you can delete them and use a single code line.
    4. Let's study this code:
      • UploadCopyFile is used to save on the server the file uploaded by the user. In our case, the file is copied into the data directory (returned by fDataDir). The file name is kept.
      • Then, the path of uploaded image is stored in a global variable named gsImagePath.

        Note

        Why use a global variable?
        A global variable is required here because the image path will be used in the code of "Validate" button, to save the new image in the data file.
        See the appendices for more details about the use conditions of local and global variables.
      • fSep allows you to retrieve the separator that will be used on the operating system of server ("\" for Windows, "/" for Linux). Therefore, your site is independent of the server where it is installed!
      • Then, the uploaded image is displayed in the IMG_Visual Image control.
    5. When typing and saving the code, the gsImagePath variable is displayed in red and a compilation error occurs in the error pane: "‘gsImagePath' identifier unknown or inaccessible". Indeed, this global variable was not declared.
    6. To declare the global variable:
      • Display the code for declaring the global variables of the page (for example, in the code editor, on the "Code" pane, in the combo box with all the events, select "Global declarations").
      • Type the following code after the procedure declaration:
        gsImagePath is string
    7. Save the modifications by clicking among the quick access buttons. The compilation errors disappear.
    8. Close the code editor.
Our image can now be uploaded on the server. All you have to do now is save the image in the database.
  • To save the image in the Product data file:
    1. Display the code of "Validate" button:
      • Select the "Validate" button.
      • Press the F2 key.
    2. In the server click code of button, type the following code AFTER the call to PageToFile:
      IF gsImagePath<>"" THEN
      Product.Visual = fLoadBuffer(gsImagePath)
      END
    3. Let's study this code:
      • This code checks the content of gsImagePath global variable. If this variable does not correspond to an empty string, it means that the image was uploaded by the user. In this case, the "Visual" item of Product data file is filled with the binary image content. This content is retrieved by fLoadBuffer.
      • HModify (already found in the code) is used to save the changes in the data file.
    4. Save the modifications ( or Ctrl + S).
    5. Close the code window.

Displaying the form from the list of products

Now, let's see how to display the form of the product selected in the list of products. The principle is straightforward: the user will select the product in the Looper control and he will display the details via a link.
  • We are going to modify the "PAGE_List_of_products" page in order to create a modification link:
    1. Position on the "List of products" page: click the "PAGE_List_of_products" button found in the button bar:
    2. On the "Creation" pane, in the "Usual controls" group, click "Link".
    3. Then, click inside the Looper control to create the link (at the bottom right for example).
    4. Modify the link caption (press the Space key to edit the caption): the new caption is "Modify".
  • The "Modify" link must open the "PAGE_Product_form" page. We are going to open this page by programming.
    1. Select the "Modify" link and display the associated events (F2).
    2. In the code window that is displayed, write the following code in the server "Click" event:
      PageDisplay(PAGE_Product_form,ATT_ProductID[LOOP_Product])

      Note

      The assisted code input is going to help you: as soon as you type the opening bracket "(", a drop-down list proposes the name of all existing pages found in the project. All you have to do is select the page with the keyboard or with the mouse.
      If the name of requested page is not found in the list, it means that this one was not saved beforehand.
    3. Let's study this code:
      • PageDisplay is used to open the "PAGE_Product_form" page.
      • The opened page expects in parameter the identifier of product to display. This identifier corresponds to the identifier of the product selected in the Looper control. To get the identifier, you must specify the attribute that contains the identifier (ATT_ProductID) for the current row. The brackets are used to specify the row and LOOP_Product is used to get the current row in the looper.

        Note

        By default, ATT_ProductID returns the attribute value for the row that was clicked. The code can be written as follows:
        PageDisplay(PAGE_Product_form,ATT_ProductID)
    4. Save the modifications ( or Ctrl + S).
    5. Close the code window.
The different elements used to manage the product modification have been implemented, we are now going to run a test to make sure that everything is operating.
  • Run the project test ( among the quick access buttons).
    1. The editor asks for the first page of Session mode. In our case, select the "PAGE_List_of_products" page and validate.

      Note

      The first page of Session mode corresponds to the first page opened when starting the site in Session mode.
      The first project page in Session mode can be defined:
      • during the project test.
      • in the project explorer: all you have to do is select the requested page, display the popup menu and select "First project page in Session mode".
      When a first project page in Session mode is defined, a small 1 in red is displayed in front of the page name in the project explorer.
    2. The site is started.
    3. In the list of products:
      • Click the "Modify" link.
      • The detailed product page is displayed.
      • Modify the price of a product and validate.
      • The new price of product is displayed in the list of products.
  • Close the pages to stop the test.
Adding a new product via the "Product form" page
We just explained how to modify a product. Now, we want to be able to add a product. To do so, there is not need to re-create a new page: we will be using the "PAGE_Product_form" page that was created beforehand and adapt it to manage the addition.
  • First of all, we are going to modify the opening mode of "PAGE_Product_form" page:
    1. Position on the "Product form" page: click the "PAGE_Product_form" button found in the button bar.
    2. Press the F2 key to display the page code.
    3. In the "Global declarations" code, we are going to give a default value to the parameter passed to the page. Indeed, when modifying the record, the parameter passed always corresponds to the identifier of product to modify. But when adding a record, the element identifier does not exist. To manage this case, we will be using the default value "-1".
    4. In the "Global declarations" event, replace this code:
      PROCEDURE MyPage(gnProductID is 8-byte int)

      by the code:
      PROCEDURE MyPage(gnProductID is 8-byte int = -1)
    5. We must now manage the value "-1" (when adding a record). Replace the following code:
      HReadSeekFirst(Product,ProductID,gnProductID)
      IF HFound(Product) = False THEN
      // Display the list of products
      PageDisplay(PAGE_List_of_products)
      END
      FileToPage()

      by the code:
      IF gnProductID = -1 THEN
      HReset(Product)
      ELSE
      HReadSeekFirst(Product,ProductID,gnProductID)
      IF HFound(Product) = False THEN
      // Display the list of products
      PageDisplay(PAGE_List_of_products)
      END
      END
      FileToPage()

      Let's study this code:
      • If the product identifier is set to -1, it means that we are adding a product. In this case, HReset is run. This function initializes the item variables in the "Product" data file with the default values to manage a new record.
      • If the product identifier has a value different from -1, we retrieve the code used to open the form in modification.
    6. Close the code window.
  • The record addition must also be supported by the validation button.
    1. In the "PAGE_Product_form" page, select the "Validate" button.
    2. Display the events associated with the button (F2).
    3. The code in the event "Click (browser)" must not change: the checks to perform are always the same. Only the server code must be modified.
    4. In the event "Click (Server)", replace the existing code with the following code:
      PageToFile()
      IF gsImagePath <> "" THEN
      Product.Visual = fLoadBuffer(gsImagePath)
      END
      IF Product..NewRecord THEN
      HAdd(Product)
      ELSE
      HModify(Product)
      END
      PageDisplay(PAGE_List_of_products)

      Let's study this code:
      • ..NewRecord is used to find out whether the current record must be created.
      • If HRESET was called beforehand, the property returns True (new product) and the record must be created by HAdd.
      • Otherwise, the current record already exists and it must be modified by HModify.
      • HAdd adds the record into the data file. This function takes the values in memory and writes the content of file items into the data file itself. The indexes are immediately and automatically updated. In this case, it is the "Product" data file that is updated.

        Note

        The test code of new record can be replaced by HSave. This function is used to check whether the record is already found in the data file, and it allows you to add it or to modify it. The code becomes:
        PageToFile()
        IF gsImagePath<> "" THEN
        Product.Visual = fLoadBuffer(gsImagePath)
        END
        HSave(Product)
        PageDisplay(PAGE_List_of_products)
    5. Save the modifications ( or Ctrl + S).
    6. Close the code window.
  • We are now going to modify the page menu to allow the user to add a new product.
    1. Position on the "List of products" page: click the "PAGE_List_of_products" button found in the button bar.
    2. Display the popup menu of a menu option (right click) and select "Open the template".
    3. In the page template, select the menu.
    4. Click the "Items" option. A yellow border appears around the menu. This yellow border indicates that the menu is in "Edit" mode: it can be modified.
    5. Display the description window of option ("Option description" from the popup menu).
    6. In the "General" tab:
      • Type the option caption: replace "Items" by "Add a product".
      • In the Action area:
        • select the type "Display a page of the site".
        • select the "PAGE_Product_form" page.
    7. Validate. The menu option appears:
    8. In the orange bar of template, click to propagate the template modifications to all pages that use this template.
    9. In our case, the two project pages are proposed. Validate the window for updating the template.
    10. Close the page template.
We can now check the product addition.

Checking the product addition

  • To check the product addition:
    1. Run the project test ( among the quick access buttons).
    2. Click "Add a product".
    3. Enter a new product with the following characteristics:
      • Reference: REF-337
      • Caption: Surf 24
      • Description: Surf with WEBDEV colors
      • Price: 150
    4. Validate. The new product is displayed in the list of products.
    5. Click "Add a product" again.
    6. Enter a new product with the following characteristics:
      • Reference: REF-337
      • Caption: Surf 24
      • Description: Surf with WEBDEV colors
      • Price: 150
    7. Validate. A specific page is displayed:
      This page informs the user that a duplicate was found: indeed, the reference (that is a unique key) is identical for two products. This page is used to modify the reference value (displayed in a red area): type "REF-338" for example.
      This page is one of the pages for automatic management of HFSQL errors.

      Note

      Several errors may occur when adding or modifying a record: duplicate error, integrity error, password error, ...
      WEBDEV proposes several modes for managing these errors:
      • the automatic mode: for each error that occurred when managing database records, a specific page is displayed to the user. This page allows the user to modify his data directly.
      • the advanced programmed mode: a procedure or a custom page for error management is called whenever an error occurs when managing the database records.
      The "WW_Auto_Management_Errors" example, supplied with WEBDEV, is used to check these different error management modes. This example can be opened via the WEBDEV home page ("Open an example" option).

Viewing the records

The new created records can be immediately viewed in the Looper control of "PAGE_List_of_Products" page.
They can also be viewed with WDMAP that was already presented in the My first pages lesson.
Previous LessonTable of contentsNext Lesson
Minimum version required
  • Version 24
Comments
Click [Add] to post a comment