Building navigation menus and linking your application pages

Once you have identified and created pages in a manner such as described in the article, Identifying and creating your application pages, you can start to build a navigation menu for your application. There are several controls that can be used to create different types of menus, depending on how you want to structure the navigation of the application. Figure 1 shows the top level menu of one of the default template websites built just with the Button control.


navigationmenus.jpg
Figure 1: Top-level navigation menu.


Top level menus are generally used to link to pages that function as section headers or entry points for a group of related functions or pages. In this case, these pages provide more information about the functions and offer new menus for the user to select from within that portion of the application or website.

If the number of functions which are aggregated under each top level menu option is not large, or if only some of the pages linked to from the top level menu actually have further navigation options, it is not uncommon to add a pull-down menu of choices directly from the top level menu. Refer to Using Menubar page to learn how to make complex multi-level menus.

Websites and applications that have a larger body of content or functionalities to organize will often have secondary navigation menus. These, in most cases, follow a different orientation than the one used in the top level menu. This means that, generally, if you have a horizontal top level menu, the secondary menus will be vertical and vice versa.

This menu allows you to navigate through several different download lists. This menu is shown when you enter the downloads area of the website in order to allow you to narrow your range of options.

Note: It's quite usual for secondary menus to follow a different "orientation" from the primary one. This is specially true if the primary menu has a horizontal orientation. One benefit of this arrangement is that both menus can easily be visible at the same time, reducing the need for the user to "navigate" between menu levels.


Linking your Application Pages

Most Morfik controls which are not designed for text input have a Hyperlink property that can be used for the purpose of establishing navigational paths inside the application or to offer the option of navigating outside the application.

It is by configuring the Hyperlink property of different controls to reference different Pages within your application that you define its navigational structure and how users will use it to find and enter information.

Through the use of Pages and Links it is possible to implement all navigation within an application built with Morfik without the developer having to write any code.

Hyperlink property is defined for the following controls:

  1. TextLabel
  2. Button
  3. Image
  4. Dropdown
  5. Container
  6. Rectangle


When the hyperlink property is defined for these controls the Morfik framework inserts an HTML anchor tag <a>ctrl</a> when generating the control HTML. This would make these controls appear as hyperlinks to a browser whenever their hyperlink property is set.


The new hyperlink property for the above controls could be set either through the Properties panel or using the Link button in the URLs section on the Ribbon when the form designer is active.


insepecorpanelhyperlink.jpg
Figure 2: The Hyperlink Property in Properties Inspector Panel.
ribbonhyperlinkbutton.jpg
Figure 3: Link Button on the Form Designer Ribbon.


The value of the hyperlink property is commonly set at deign-time. It is also possible to define or modify this property in the server-side of an application at run-time. Currently, it is not possible to set or modify this property in the browser code of an application.

The hyperlink property can easily be used to navigate to an external website by simply copying the full target URL into the hyperlink property. However to use hyperlinks for internal navigation within a Morfik application, a page must be created so that the system can navigate to the target location. Publishing URLs and using the hyperlink property for internal navigation is an essential requirement for SEO.

Setting Up Hyperlinks

In general you will be using either a TextLabel, a Button or an Image control to act as the visual representation of a hyperlink in your application. All of the controls have a Hyperlink property which can be set to point either to a published URL for navigation within your own application or website, or to an external application which will take the user to another website. They an be set to point to other protocols such as mailto which will be handled by the browser and should bring up the user's email client to send an email to the specified address.

You can set the Hyperlink property of a control either by selecting a URL in the drop down that is displayed when you click on the small arrow by the editor for this property in the Properties panel, or by clicking the Link button in the Home tab of the ribbon when the appropriate control is selected. If you click on the Link button you will get a dialog for selecting a previously published URL or manually entering one. This dialog is shown in Figure 6.

binding-data-to-interface-edit-hyperlinks.png
Figure 6: Dialog for selecting or entering the URL which you want to assign to the selected control.


You can use hyperlinks for creating an isolated link just as you can to create a menu, through the usage of a group of controls you can create navigation menus for your application.

Using Page URLs as targets for Hyperlink properties

So far it is the definition of a URL that has been discussed. Referencing a published URL in the new hyperlink property is straightforward if constant parameter values were to be passed. This is rarely the case when working with data-bound forms. To pass parameter values, Morfik allows for a special notation to be used in a URL reference to signify a data source with the following syntax:

[$DatabaseFieldName]


Examples of valid hyperlink property values are:

  • Products/[$ Product]
  • FAQ/[$FAQID]
  • About/Public/[$Category]News/[$Title]
  • http://ww.mywebsite.com/uses/[$UserID]


Please note that this notation is only valid for internal navigation. Another important point is that if a reference is created in this manner then the resultant URL would have high dependency on the data content which may change and render the URL as a broken link. This is particularly important if the URL is likely to be bookmarked externally. For situations like that it’s best to define a URL field in a table rather than a simple text field. This way the URL value can remain the same while the description data changes.

OpenPage Function

A Page can be programmatically accessed through the use of the OpenPage function. The OpenPage function is the equivalent of the OpenForm Function function and uses a Page URL as its first parameter with an optional second parameter that is identical to the third parameter of the OpenForm Function. The second parameter is only used if the URL used in the first parameter does not follow the clean URL format.

FX Code

Procedure frmRoot.Button2Click(Event: TDOMEvent);
Begin
    OpenPage('about/contactus');
End;

OnHyperlinkClick Event

All controls with the Hyperlink property have an event that is invoked whenever the hyperlink is clicked on by the user. This event can be intercepted to introduce custom behaviour for handling a particular link within an application.

FX Code

Procedure frmRoot.Button2HyperlinkClick(Var Url: string; Var Handled: Boolean);
Begin
    If Not DataValid Then
    Begin
        Handled := True;
        Exit;
    End;
 
    OpenPage(URL);
End;

Related Topics


Back to top