Skip to content

Using the Navigation Designer

The Navigation Designer is a tool for building drill-down style web applications. Create a ‘Mobile Web Project’ or a ‘FlexTron Drill-Down Project’ to use it. It can be opened via the toolbar button , the Help menu, or from the workspace dashboard.

On the Navigation Designer, each WebView in your application is displayed as a tile. The lines between the tiles represent navigation paths between these views. A navigation path matches a WebRegisterPath in the source code. The palette (usually on the left) changes when the Navigation Designer is active and shows which views can be generated for each table in the database.

The two main functions of the Navigation Designer are:

  • The ability to create new views by dragging them from the palette onto the Navigation Designer.
  • The ability to create and edit navigation paths by drawing lines between the views.

The lines are selectable, and the properties panel will display configuration options for the navigation. The views can be opened by double-clicking on them, which will open the view designer in a new tab.

Generating Views

When the Navigation Designer is active, the Palette panel shows views that can be generated. It suggests several views per table, where the main suggestions are a select view and a zoom view. It also suggests a zoom detail view, which will be a header detail view.

These views can be dragged onto the Navigation Designer, which will actually generate them. Depending on the number of columns in the table, it will ask the developer to select the columns that should be part of the generated view.

To optimize development time, it does not ask many questions; the idea is that developers can easily edit the generated views afterward. The wizards are still available for more detailed control over the generated views.

Once generated, a view can be edited by double-clicking on the tile, which opens the designer in a new tab. Here, the layout can be edited, and extra fields can be added by dragging them from the DDO Explorer panel.

Selecting a view will highlight its navigations (if it has any), show the main view properties on the properties panel, and show a delete button.

Clicking the delete button will show a popup asking if the view should be deleted from disk (this is irreversible) or just removed from the project (which leaves the file on disk). The dialog also shows the option to delete any navigation paths that are defined to this view.

Creating and Editing Navigations

Drill-down applications provide a flow for the end-user to navigate through the application. This flow is determined by the navigation paths. A navigation path allows the user to navigate from one view to another. These paths need to be defined up-front using WebRegisterPath commands to allow the framework to handle deep links and manage the browser's history.

Creating a navigation in the Navigation Designer is as simple as drawing a line between two views. This is done by dragging from the + icon on the bottom right corner to the view you want to navigate into. Once this is done, the navigation will become selected (they can also be selected by clicking on them). A selected navigation shows in a highlighted color and displays the delete icon.

When a navigation line is selected, the Properties panel will show configuration options for that navigation. The main option is the ‘When clicking on element’ pull-down that allows the developer to select which navigable control on the start view should perform the navigation.

In the pull-down menu, all buttons, forms, menu items, and other controls that can perform navigation will be shown.

Creating and editing navigations actually generates code within the start view of the navigation.

The main line it generates is the WebRegisterPath command, which registers the navigation. It also generates an event procedure triggering the navigation (OnClick in the code sample below) and generates an OnGetNavigateForwardData which configures the navigation with the ‘Read only’ and ‘New record’ options.

Object oDetailButton is a cWebColumnButton
    Set piWidth to 45
    Set pbFixedWidth to True
    Set pbResizable to False
    Set psBtnCssClass to "WebButtonIcon WebIcon_Info"
    Set peAlign to alignRight
    Set piListRowSpan to 2
    Set pbServerOnClick to True

    WebRegisterPath ntNavigateForward oZoomInvt

    Procedure OnGetNavigateForwardData tWebNavigateData ByRef NavigateData Handle hoToView
        Move True to NavigateData.bReadOnly
    End_Procedure

    Procedure OnClick String sButton String sRowId
        Send NavigatePath
    End_Procedure
End_Object

Understanding the Navigation Designer

The Navigation Designer purely works on the code metadata. When the Studio opens a workspace, it scans all the source code of the currently selected project. It sees all the included files and scans all of them, registering all of the objects and all of the WebRegisterPath commands. Therefore, the Navigation Designer will also work on existing projects as it will recognize the existing navigations.

The list of elements shown when creating a navigation is also fed by the code metadata. It iterates through all the objects in a view and looks at the metadata of these objects. Navigable elements are marked with the navigable meta tag, which makes the object show in the list of navigable elements. The content of the Navigable tag instructs the Navigation Designer which event needs to send the NavigatePath.

{ Navigable=OnClick }
Class cWebColumnButton is a cWebBaseDEO

This logic makes the Navigation Designer re-enterable and flexible. The user can go into a view, drop a cWebButton on the designer, and then go back to the Navigation Designer to add a navigation to that new button.

Also, note that the layout of the navigations is stored in a Navigation.json file in the IdeSrc folder of the workspace. If you carefully crafted a navigation model, consider backing up that file.

The Navigation Designer has some options that influence the generated code. These options are part of the workspace settings and are stored in the .sws file.

The settings can be found via the main menu under ‘Tools > Configure workspace…’ and then on the ‘Workspace Preferences’ tab. A shortcut is also available on the Navigation Designer toolbar.