The Designer provides several types of views to use in your application:
The built-in Application module contains three built-in views:
login: A page that displays at run time in order to authenticate the user for access to any modules and views that require authentication to access. If such authentication is required, this page opens as the initial page when the app starts up, and it opens as many times as there are different authentication targets among the app's data providers. Only after all required authentications are successful, does the app provide access to the user according to their authorization roles (if any). You can customize this view's defaults using its property settings.
landing-page: The default start page for an app, which provides initial user access to any authorized modules that you have created. This view has no properties to customize. As an alternative, you can provide the user with the deployment URL to any authorized view that you create as the start page for the app. For more information, see the description of app layout and components in Kendo UI Builder by Progress: Modernizing OpenEdge Applications.
unauthorized-page: A page that displays whenever an authenticated user tries to access an unauthorized module or view. This page has defaults that display, including information about unauthorized access and a link to a default page to continue with further options for accessing the app. You can customize this view's defaults using its property settings.
These Application module views are added for you and do not participate in normal app navigation with your own user-created views.
The modules you create can contain one or more predefined or user-defined views that you create, and which you can customize, depending on the type of view.
To add views to your user-created modules:
1. From the view design page, click + Add View at the top of the VIEWS pane on the left. This opens the Add View dialog box.
2. Choose the View Type. What follows is a basic summary. Each type of view has different properties and behaviors that can be customized, as described in later topics:
Blank: Allows you to design your own custom view by dragging-and-dropping rows and columns to create a layout and then adding content components to the layout for data management, field editing, data charting, scheduling, media, navigation, and additional custom content. This view has the greatest layout flexibility among the available views. However, this view can require far more custom coding than other views in order to define the behavior of all its components.
Data-Grid: A read-only or user editable, table-like display of the information in a single data source. The data source itself determines much of the presentation and organization of the data in the grid.
Data-Grid-Form: A split screen featuring a read-only Data-Grid and a form displayed in the same screen showing information from a selected row. The information shown in the form can be read-only or user editable. If you enable editing, the screen switches to display a visualization of the form suitable for editing. Properties of this view allow you to modify the presentation and behavior of both its grid and form.
Data-Grid-Separate-Form: Similar to the Data-Grid-Form, but in this case, only the read-only Data-Grid is shown unless users select a row. The information from the selected row is then shown in a form displayed on a separate screen that overlays the grid. If you enable editing, depending on its edit mode, the screen switches to display a visualization of the form suitable for editing. Properties of this view allow you to modify the presentation and behavior of both its grid and form.
Stacked-Data-Grids: Displays information from two data source tables in a parent-child relationship defined within a single Data Object resource for an OpenEdge ProDataSet. A single read-only parent grid at the top of the view displays rows from the parent table, and a single read-only or user editable child grid below the parent grid displays rows from the child table that are related to any single row in the parent grid that you select. The user can therefore view or edit rows in this single child grid that are related to only one selected parent row at a time. This view supports properties for editing the parent grid very similar to the properties for editing a read-only Data-Grid view; it also supports properties for editing the child grid very similar to the properties for editing a read-only or editable Data-Grid view.
Hierarchical-Data-Grid: Displays information from two data source tables in a parent-child relationship defined within a single Data Object resource for an OpenEdge ProDataSet. This is a single hierarchical grid, where rows from the parent table are displayed in a single read-only parent grid, and expanding any row in this parent grid displays related rows from the child table in a separate read-only or user editable child grid that appears embedded below the expanded parent row. The user can also expand multiple parent rows at a time in a single parent grid page. This allows related child rows to be viewed or edited for multiple parent rows at one time using the separately embedded child grid that displays under each expanded parent row. Although the visualization and behavior of the parent and child grids is different, the properties for editing parent and child grids of this view are almost identical to the properties for editing a Stacked-Data-Grids view.
3. Add a Name for the view. The name cannot contain spaces. Only letters, numbers, dashes, and underscores are permitted.
Note: Once entered and saved, the name of the view cannot be edited.
4. (Optional) Add a Label for the view. The label can contain spaces and is used to identify the view both in the VIEWS list at design time and on the app's views page at run time. If you do not specify a label, the view is identified using Name.
5. (Optional) Click Roles to display a list of user roles that you can use to determine the authorization of authenticated users to access this view at run time. The list of roles that you can choose from is limited to the list of roles defined for the module. For information on adding roles to this list and enabling them to authorize users, see Using roles to authorize user access.
6. Click Add View to save the new view. This adds the view to the end of the VIEWS list. Note that you can rearrange the order of views by dragging and dropping them anywhere in the list. The order you build the app with matches the run-time order of views as they appear each module.
Note: For built-in views, changing the list order is only a design-time convenience for keeping frequently-edited views near the top of the list.
For built-in views, any time after app creation, and for user-created views, any time after you create them, you can change some general view settings by clicking the gear menu next to the view name. This selects the view and provides the following options:
Edit (for a built-in view) and Properties (for a user-created view): This opens an Edit View dialog box, which is similar to the Add View dialog box for user-created views, where you can change all of the initial view settings except View Type and Name. This allows you to set or change the view Label and Roles, and to specify custom names for three functions that handle general view events specified with the following settings:
Init Event Function: Executes the first time the view is displayed (default: onInit).
Show Event Function: Executes every time the view is displayed (default: onShow).
Hide Event Function: Executes when the view is replaced in the layout (default: onHide).
Any Init Event Function and Hide Event Function that you specify must be defined in the file, application-folder\app\src\modules\module-folder\view-folder\router-event.js. If specified, this file contains default definitions for these functions.
Any Show Event Function you specify must be defined in the file, application-folder\app\src\modules\module-folder\view-folder\controller.public.js. If specified, this file contains a default definition for this function. Additional view-specific and component event functions, like the Row Select Event Function for grids, are also supported, which you can specify in the properties of the view or its components. You must also define these view-specific event functions in this same controller.public.js file. However, this file contains a default definition only for the Row Select Event Function for grids (default name: onRowSelect), if specified. You can model all other view-specific event functions that you add on this one.
Note that all the main files for adding HTML and JavaScript code extensions to a view are located in application-folder\app\src\modules\module-folder\view-folder, where application-folder is the path to the folder that contains and is named for your web app, module-folder is the name of the folder defining the module, and view-folder is the name of the folder defining the view. For more information on custom code and event functions, see the sections on extension points and source code customization in Kendo UI Builder by Progress: Modernizing OpenEdge Applications.
Delete (for user-created views only): This deletes the selected view from the module.
Note: This option does not appear for built-in views, which you cannot delete.
Adjusting the size of the view design area
You can adjust the size of the view design area by dragging the vertical splitters that separate the view design area in the middle from the Views section on the left and the View Styles and View Properties sections on the right. You can also hide these sections by double-clicking the splitters or by clicking on the arrow that appears when you hover on a splitter, so that the view design area occupies the entire width of the Kendo UI Designer screen. To unhide, double-click the splitters again, which should now be positioned at the extreme ends of the view design area. To zoom in or zoom out, use the zoom slider in the toolbar.
The built-in Application module contains three built-in views: