Blank View

The Blank view is the user-defined view that is provided by the Studio.

Features

  • Represents an empty view which enables you to define a custom functionality and layout.
  • Allows you to specify multiple data sources.
  • Supports the creation of responsive layout by dragging and dropping rows and columns.
  • Provides options for adding, modifying, and removing the built-in or custom components within the view.
  • Enables you to copy and paste components.

Preview

Blank View

Data Binding

Due to its specifics, the Blank view provides certain approaches for data binding and defining its data sources.

Blank View Data Sources

To start working with a Blank view, you need to define data source instances for it which you can later bind to most of its components. The definition of the data source instances is done based on one or more of the existing data sources that are defined for the application data providers. From the View Properties pane, add and review the desired data source instances which will be used in the Blank view.

Blank View Data Sources

Using Data Source Instances

A data source is used with components that work with a set of records. A model (or data model) is used to represent the values of a single data source record. The Studio automatically creates a data model for every data source instance which is created for a view. When a component works with a data model, the binding is two-way, and the UI and the data are always in sync. For example, to create a view with a grid and a form, the grid is bound to the data source and the form fields are “bound” through their data model. When a row is selected in the grid, the framework automatically copies the values from the data source into the data model of the same name, so that the currently selected record is shown in the form.

Every component that works with data has a Model property which points to the name of the model created over the data-source definition and runtime is represented by a record of the data source. Most of these model-bound components have two fields to specify their Model property—one field to specify the data model itself and a second field to specify the field from that model whose value the editor displays or updates. In addition, the list components also have the option to specify a single field from their model to represent the value of the component. They all have a Value Primitive checkbox property which, when selected, provides a two-field Model property similar to other model-bound editor components to select both the data model and its value field—for example, the Drop Down List component.

Angular Reactive Forms support

In context of Angular generated application the views supports Reactive Forms model-driven approach. You can attach a form group to each view or view's containers (rows and column) and then attach components to these form groups via the property inspector.

Each view has collection of form groups.

Blank View Form Groups

When developers create form groups they can assign a form group directly to the view or to view's containers via the property inspector Form Group Name property.

Blank View Form Group Name

Each input component can be assigned to particular group's form control by using the Form Control Name property editor.

Blank View Form Control Name

Layout

The Blank view supports a responsive layout that draws from Bootstrap Grid for different screen sizes which are based on the display type.

The view provides the following display types:

  • Desktop
  • Laptop
  • Tablet
  • Phone
  • Phone Portrait

The two basic layout elements in the Blank view are rows and columns. You can drag and drop these elements from the Components palette:

  • Row—Rows act as containers for columns and allow only columns to be dropped to them.
  • Column—Once a row is added, you can drag and drop one or more columns into that row. The columns allow the dropping of rows or other components to them, but you are not allowed to drop columns to columns. You can delete columns and their contents by clicking on the thick top border and then the Trash can icon. When you select a column, you can edit its properties.

The most important available layout features are:

  • Column width—You can specify or change the column width (column span) for each screen size. There are 12 available column slots in each row. A column can occupy one or more slots. For example, you can have 12 columns that span one slot each, or three columns that span four slots each.

    Unless you enter a different width for the Desktop, Laptop, and Phone screen sizes, the required Tablet width will be used for all screen sizes.

  • Hide on—You can hide a column on a given screen size by selecting the checkbox for that screen width. You can use this feature to provide more details on larger screens while minimizing the content that is shown for smaller devices.

    • If you have not already dragged and dropped a column, dragging any other component to a row automatically creates a column for it.
    • To view the results of any layout changes, use the display type preview at the top right of the toolbar.

Components

The Blank view offers a variety of data management, editing, scheduling, and charting components.

Copying and Pasting

Apart from dragging and dropping components, you can also use the copy-paste functionality to duplicate them. Except for the IDs that are re-generated, the settings of the components are also copied and the proper containers can be inferred and placed automatically.

The copy-paste feature works:

  • Within the same view
  • Between views
  • Between applications

To copy and paste:

  • For Windows, use Ctrl+C for copying and Ctrl+V for pasting.
  • For Mac OS, use Cmd+C for copying and Cmd+V for pasting.
  • You can also use the menu bar options&mdashh;Edit > Copy for copying and Edit > Paste for pasting.

Adding Custom Code

Similar to the predefined views, the Blank view provides a custom section where you can add your own custom HTML code.

  • For Angular, the Studio generates the file in the \app\src\app\modules\default\[view-name]\ folder.
  • For React, the Studio generates the file in the \app\src\components\Default\[ViewName]\ folder.

To use the custom section in the Blank view, add the custom HTML code to the generated file in the respective directory. This custom HTML is used to add the template code for the Template properties of the content components which are added to the Blank view.

Unlike the custom-section files that are generated for the predefined views, the HTML content that is added to the topSection.html file of the Blank view is not visible in the view.

In this article
Not finding the help you need?