Standard Page Overview

What Is a Standard Page?

A standard page enables quick frontend service development through a low-code or no-code approach. You can easily design your page by dragging widgets onto a canvas. Common service applications like leave e-flow, business trip reimbursement, and online voting primarily perform basic operations: adding, deleting, modifying, and querying service data. These applications feature straightforward frontend page designs. You can use the standard pages provided by the platform.

The widgets with preset styles on standard pages have encapsulated basic event code, avoiding repeated work and enabling you to focus on services.

Standard Page Development Workbench

Access the application designer and choose Page in the navigation pane. Click the plus sign (+) next to Standard Page to create a standard page. You can create a page from scratch or from a template. The section introduces standard pages.

Figure 1 Standard page development workbench
Click to enlarge

The standard page development layout is divided into four areas: a widget area on the left, a button area at the top, an operation area in the center, and a page element configuration area on the right. For details, see Table 1.

**Table 1** Function areas of the development page
Area	Function
Button	Area for function buttons used to perform operations such as Save, Save As, Preview, Change History, Undo, Redo, and Performance.
Widget	Widget area of the page. When you design a page, you need to drag widgets from this area to the page to implement abundant page functions. Basic: Preset widgets. Hover the cursor over a basic widget. A question mark is displayed. Click the question mark to view the usage description of the basic widget. Custom: Custom widgets developed offline by users and are uploaded to the platform. Users can use these widgets to enrich the functions of page widgets.
Work area	Area where you can perform operations such as page layout and widget positioning. Designer View: Default view of the page. In the view, you can drag the widget elements to be displayed on the page to quickly build a required page layout. Model View: Model display view on the page. Event View: In this view, events in the page layout are displayed as code in the work area. Style Code: Custom style code of a page. More > Widget Code: In this view, widgets in the page layout are displayed as code in the work area. More > Model Code: In the page layout, each model is displayed in the workspace as code. More > Libraries: Third-party library code loaded on the page.
Configurable page element area	Area for setting page and widget properties. In this area, you can set widget properties and events, or load third-party libraries. Properties: You can set the general properties of a widget. Events: Entry to the event orchestrator. You can use the preset event orchestrator or directly define JavaScript code to implement the interaction between page widgets and backend APIs. Libraries: Entry for you to load libraries on which the page depends. Certain functions of the page design depend on specific libraries. You can add or delete some libraries on this tab page. The platform provides some preset libraries. To meet new requirements, a new library can be loaded.

Common Operations on Standard Pages

Before designing a standard page, you need to have a comprehensive understanding of the development page.

Access the application designer and choose Page. Click the plus sign (+) next to Standard Page. On the displayed dialog box, specify the page label and name and click Add to create a standard page. (On the displayed dialog box, you can choose Create from scratch or Create from template.)

Multiple widgets are preset on the standard page. You can drag these widgets from the widget area on the left to the design view in the middle.
Figure 2 Dragging widgets to the design view

Before configuring a widget, you can move the cursor to each widget and click in the upper right corner of the widget to view the widget details. For details about how to use and configure preset widgets, see Setting Properties of Standard Page Widgets.
Figure 3 Help icon of the widgets

In Design View, select a widget. On the Properties tab page on the right, set the properties such as the bound data and widget style, as shown in Figure 4.
Figure 4 Widget property panel
In Designer View, select a widget. On the Events tab page on the right, set the associated events of the widget. For example, you can select a button widget and add the corresponding event code to on-click of the button widget to save the GUI input to the database after the button is clicked.
Figure 5 Editing the associated event of a widget
Use the widget navigation to quickly select a widget.
When a widget is selected, the system displays its HTML label level in the widget navigation. You can also click a label level to quickly switch widgets. For example, click Page in the widget navigation to select the outermost page widget on the page. As shown in Figure 5.
Use the widget tree to quickly select a widget.
You can click Components Tree in the lower right corner of the page to expand the widget tree. In the widget tree, you can click a label level to quickly select or switch widgets.

Figure 6 Using the widget tree to quickly select a widget

Differences Between Standard Pages and Advanced Pages

The standard page offers basic flow and flexible layouts, while the advanced page includes flow and absolute layouts, suitable for scenarios requiring more personalized layouts.
The standard page features simple widgets, whereas the advanced page offers sophisticated ones, including water drop and line charts.
In the sandbox and runtime environments, standard pages do not support anonymous access, while advanced pages support anonymous access.

For details about advanced pages, see Advanced Page Overview.

Parent Topic: Standard Pages

Previous topic: Standard Pages

Next topic: Creating a Blank Standard Page