When an OpenEdge web app first starts up, if no view in any module accesses data providers that require authentication, an app landing page displays when you first open the web app, which displays a built-in landing-page view that every Designer-generated web app contains, with a basic layout as shown in these example screens:
Figure 2. App layout example—landing page
If one or more views access data providers that require authentication, a built-in login view displays prompting for credentials to access each secure data provider in the app (see Editing the login view). If all requested credentials are accepted, the landing page is then displayed.
This landing page includes the following default components:
Header — Showing the default logo in the example:
You can specify your own company logo using web app settings (described later).
This header can also provide a drop-down menu on the right (not shown) that includes a Logout option. This drop-down menu is hidden if no login was required to access data providers.
Module icon list — Showing selectable icons for modules that are available in the app. If you select a module, its first available view displays in the views page (see below). Each module is identified with a run-time label that you can optionally specify at design time.
Note: You can bypass this landing page by providing a URL that goes directly to a view, such as the following Customer List view shown in the following Order Entry module example. For example, suppose this view is part of a web app, OrderEntryWebApp, that is hosted on a local Progress Application Server for OpenEdge instance. If the local URL for the landing page is http://localhost:8810/OrderEntryWebApp/#!/home, the URL to open this Customer List view directly is http://localhost:8810/OrderEntryWebApp/#!/module/order-entry/customer-list. Note that the module and view URIs are always provided in Kebab Case. This same kebab case is used in the URL regardless of how the components of the module and view names are specified in the Designer. For more information on specifying view names in the Designer, see Adding and editing a Data-Grid view.
This is an example app views page that might display if you select the Order Entry module in the example landing page above:
Figure 3. App layout example—views page
The app views page opens with the following components
Header — Displays with the same elements as the landing page header described previously. If, at any time, you select the logo in the header, the app returns to the landing page.
Module/view list — On the left, showing a list of the modules available in the app, each with its own drop-down list of views that it provides. The example shows the following modules:
Order Entry — After being selected in the app landing page, the views page is opened for this module, with its drop-down list shown and the first listed view in the module selected and displayed. You can then display a different view in the module by selecting the label for another view in the list.
Sports — An additional module, with its drop-down list displaying a single view.
Not shown for Order Entry, any module selected in the landing page has its initial view displayed along with the module description in an overlaying caption. The caption disappears with the next selection on the page.
View display area — On the right, showing a single view from a module (initially, the first view in the module selected on the landing page). When you select and open a view in any available module, the opened view is then displayed, and replaces any view previously displayed in the view display area.
Note: A web app built in the Kendo UI Designer is built with only a single HTML page. The app landing page and views page are not separate HTML pages, but represent the same HTML page displaying different types of views: 1) the landing page, which displays the built-in landing-page view, and 2) the views page, which displays a single view that is selected in a module.
Header — Showing the default logo in the example: