ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / WEBDEV concepts / Part 4 - Advanced concepts
  • Overview
  • There are two methods to configure the browser "Back" button
  • Example of desynchronization
  • Preventing the use of the "Back" button
  • Operating mode
  • Implementation
  • Managing synchronization
  • Overview
  • Default synchronization
  • Enabling synchronization programmatically
WINDEV
WindowsLinuxJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac Catalyst
Others
Stored procedures
14. Configuring the "Back" button in practice
Previous pageTable of contentsNext page
Overview
The "Back" button allows users to see the history of pages they previously visited.
In a WEBDEV site in Session mode, each HTML page displayed on the browser is associated with a page context present on the server. Every action performed in the browser must be synchronized with the corresponding page session on the server.
However, the browser "Back" button is used to perform an action on the browser only: the page displayed in the browser and its context on the server can be desynchronized if the browser "Back" button is used.

There are two methods to configure the browser "Back" button

To avoid out-of-sync problems between the pages displayed in the browser and the corresponding sessions on the server, WEBDEV offers two methods for configuring the "Back" button:
  • Solution 1: Prevent return to this page from the browser's "Back" button.
    If the "Back" button is used to go the previous page, this action will have no effect.
    For more details, see Preventing the use of the "Back" button.
  • Solution 2 Synchronization management (default solution)
    For each action performed in the browser, the synchronization between the HTML page and its session is automatically checked.
    There are two methods to manage synchronization:
    • default synchronization (default mode used when creating a new page).
    • manage synchronization programmatically.
For more details, see Managing synchronization.

Example of desynchronization

Let's see an example of a site:
  • A page contains a Table control linked to an "ITEM" data file and a "Next" link.
  • The ITEM data file contains a single item, each record includes a letter of the alphabet.
  • The page displays 6 rows of the Table control and the "Next" link displays the next 6 rows.
When the page is opened, the Table control displays the first 6 records in the data file (from 'A' to 'F'). The user performs the following series of actions:
  1. Click on the "Next" link
    Result The server positions itself on the next 6 ITEM records and returns their contents to the browser. The browser displays the next page of the Table control with the 6 new contents ('G' to 'L').
  2. Click on the "Back" button
    Result: the browser displays the page preceding the first action. The Table control shows letters 'A' to 'F'. The server didn't receive any update request from the browser, so the position is still set on records 'G' to 'L' on the server side.
  3. Click on the "Next" link
    Result The server positions itself on the next 6 ITEM records (from 'M' to 'R'). The browser synchronizes with the server and displays the same elements: the Web user has the feeling that some information is not displayed.
This can have undesired effects when modifying a record in a data file (e.g., the user sees a record but actually modifies another).
Reminder every action on the browser must result in an action on the server: the server then sends a response to the browser. However, the "Back" button is only taken into account on the browser side, which means that the server cannot send a response.
Preventing the use of the "Back" button
If the "Back" button is used to go the previous page, this action will have no effect.

Operating mode

Disabling the "Previous page" feature of the browser inserts the following JavaScript code into the generated HTML page:
<SCRIPT LANGUAGE="JavaScript">
history.forward()
</SCRIPT>
When running the page in a browser, it will not be possible to go back to this page by using the "Back" button.
Remarks:
  • Clicking the "Back" button can make the page blink.
  • This mechanism can fail if a click of the "STOP" button is run before the forward() statement is run by the browser.

Implementation

To disable the browser "Back" button for a specific page:
  1. Open the page description window. To do so, go to the "Page" tab, "Description" group, and select "Description".
  2. On the "UI" tab, for "Browser "Back" button", select "Forbidden".
  3. Validate.
To disable the browser "Back" button for all the project pages:
  1. Open the project description window. To do so, go to the "Project" tab, "Project" group, and select "Description".
  2. Click the "Advanced" tab.
  3. For "Default option for the browser "Back" button", check "Forbidden".
  4. Validate. This option will be automatically taken into account for all new site pages.
Managing synchronization

Overview

For each action performed on a page, the page synchronization mechanism automatically checks the synchronization. This mechanism checks whether the page displayed in the browser corresponds to the page session on the server side.
There are two methods to manage synchronization:
  1. Default synchronization.
  2. Manage synchronization programmatically, in the page synchronization code.

Default synchronization

The default synchronization mechanism is triggered only if the "Allowed (runs the synchronization code)" option is selected for the page.
If a desynchronization occurs, a warning message informs the user that the requested action has not been performed. The page corresponding to the session on the server is redisplayed. The site can continue to operate.
To enable synchronization in a page:
  1. Open the page description window. To do so, go to the "Page" tab, "Description" group, and select "Description".
  2. On the "UI" tab, for "Browser "Back" button", select "Allowed (runs the synchronization code)".
  3. Validate. This page will be automatically included in the browser page history. To go back to this page, click the browser "Back" button.
To enable synchronization in all the pages of the project:
  1. Open the project description: On the "Project" tab, in the "Project" group, click "Description".
  2. On the "Advanced" tab, for "Default option for the browser "Back" button", check "Allowed (runs the synchronization code)".
  3. Validate. The project pages will be automatically included in the browser page history. To go back to these pages, click the browser "Back" button.
Remarks:
  • This management mode requires no specific WLanguage code.
  • Synchronization can be disabled for page controls that do not need to be synchronized ("Close" button, for example). Simply uncheck "Call page synchronization process if the user pressed the Back button" in the "Advanced" tab of the control description.
  • The warning message can be customized (see next paragraph).
Enabling synchronization programmatically
To enable synchronization programmatically:
  1. Open the page description window. To do so, go to the "Page" tab, "Description" group, and select "Description".
  2. On the "UI" tab, for "Using the browser "Back" button", select "Allowed".
  3. If necessary, configure the page controls for which synchronization must not be enabled.
    For each control that triggers an action on the server, you can specify whether the page synchronization must be enabled (default option) or ignored during this action. To ignore synchronization, simply uncheck "Call page synchronization process if the user pressed the Back button" in the "Advanced" tab of the control description.
  4. Enter the code required to set a custom synchronization in the page synchronization code. Use ChangeAction in the page synchronization code. This function is used to define the action that will be performed if the page is desynchronized.
Remarks:
  • ChangeAction is initialized with "No action" if a WLanguage function that allows displaying or re-displaying a page is used in the page synchronization code.
  • To customize the desynchronization message, specify the following in the page synchronization code:
    1. custom message.
    2. how to redisplay the current page on the server (with PageRefresh, for example).
  • To perform a synchronization from the information on the user's computer, it is recommended to:
    1. Use a hidden control containing the identifier of the displayed and selected record.
    2. In the synchronization code, find the current record on the browser. This search is performed using the identifier in the hidden control.
    3. Refresh the page.
Previous pageTable of contentsNext page
Comments
Click [Add] to post a comment

Last update: 09/27/2024

Send a report | Local help