Introduction to Designer Projects & Visual Designers

Project types and work items

SnapDevelop provides visual designers for you to rapidly create EF Core entities, enumerations, query models, and Vue Web pages.

The project types that support the visual designer include C# Web API, C# Library, and Vue Web Application, which are therefore called "designer-projects". Using these designer projects, you can automatically generate standard .NET projects containing controllers, services, and C# models, as well as Vue.js web applications. The automatically generated .NET projects can be opened and maintained in any .NET development environment (such as Visual Studio).

When you want to create a designer project in SnapDevelop, you can select the menu File > New > New Project, and then select the following project types in the Designer-developed tab of the New Project window:

  • Web API: Create a designer project from which the back-end Web APIs can be generated.

  • Library: Create an empty library.

  • Vue Web App: Create a designer project that can generate a front-end Vue Web application and a back-end Web API. This project will by default include an example.

  • Vue Web App (Empty): Create a designer project from scratch that can generate a front-end Vue Web application and a back-end Web API.

Select the menu Project > New Item. In the Designer-developed tab, you can select to create the following items in a visual designer:

  • Entity Design (from Scratch): Create an empty entity metadata file.
  • Entity Design (from Database): Create an entity metafile by importing the database schema from an existing database.
  • Base Entity Design: Create a base entity which can be inherited by the other entities.
  • Owned Entity Design: Create an empty owned entity metadata file.
  • Enum Design: Create an enumerator metadata file.
  • Composite Query Design: Create a query model from one or more entities (as data source).
  • View Design (from Template): Create a Vue Web design file based on an entity/model and a page template.
  • View Design (from Scratch): Create a blank Vue Web design file. You can freely associate entity or query models, add UI components, and design layouts.
  • Example Chart Design: Create a Vue Web design file for displaying charts.

Visual designers

Entity designer

Entity designer includes Entity Designer, Base Entity Designer, and Owned Entity Designer:

  • Entity designer: This designer opens after you select the "Entity Design (from Scratch)" or "Entity Design (from Database)" in Add New Item. It allows you to create and configure an entity that is compatible with EF Core, SQLSugar, Dapper, or other ORMs. (Currently, only EF Core 6 is supported). Normally for each database table, you create one entity.

  • Entity (Base) designer: This designer opens after you select the "Base Entity Design" in Add New Item. It allows you to create and configure a base entity that can be inherited by the other entities.

    Compared to a regular entity, a base entity has no Table/Schema and Inheritance mapping options; no Filter and Service & APIs; and it can only inherit from another base entity.

  • Entity (Owned) designer: This designer opens after you select the "Owned Entity Design" in Add New Item. It allows you to create and configure a new owned entity type. An owned entity is an entity to be embedded within its owner (another entity).

    Compared to a regular entity, an owned entity has no Table/Schema and Inheritance mapping options; no Filter and Service & APIs; and it cannot inherit from any other entity.

For more detailed information on the entity designer, please refer to Entity Designer.

Enum designer

The Enum designer opens after you select the "Enum Design" in Add New Item.

It allows you to create and configure an enumerator that contains fixed set of constants for use as an enumerated type in entities.

For more detailed information on the enum designer, please refer to Enum Designer.

Composite query designer

The Composite query designer opens after you select the "Composite Query Design" in Add New Item.

It allows you to join, group, sort, and display reports based on entities. The composite query model is often used in scenarios with multiple tables or complex queries.

For more detailed information on the composite query designer, please refer to CompositeQuery Designer.

View designer

The View designer opens after you select the View Design (from Template), View Design (from Scratch), or Example Chart Design in Add New Item.

It allows you to create Web pages from the entity/model and the page templates including Home (Home.sdv), Layout (Layout.sdv), Example Chart page, and page template such as Detail page, Form page, Table page, TreeTable page.

Different view pages and templates provide different configuration options. You can open each page, view the hierarchy and select components through the Outline Tree, or directly select the component in the middle UI Designer, and then view and set related options in the Attributes, Rule, Event, and Style pages on the right.

For more detailed information on the view designer, please refer to View Designer.