Page builder development

As a developer, you can enable content editors to create content on MVC sites using the page builder. The page builder provides a user-friendly interface where non-technical users can manage content using configurable widgets prepared by the developers.

Page builder

To enable the page builder:

  1. Register the page builder
  2. Create pages with editable areas
  3. Implement and register widgets
  4. Implement and register sections (layouts for widgets)

Prerequisite

In order to use the page builder, you need to enable preview mode support for your site.

Registering the page builder

To use the page builder, you need to enable it as a feature in your MVC project.

  1. Open your MVC project in Visual Studio.

  2. Enable the page builder feature by calling the UsePageBuilder method of the ApplicationBuilder instance.

    • Enable the feature at the start of your application's life cycle, for example in the Application_Start method of your project's Global.asax file.

      MVC projects created by the installer contain the ApplicationConfig class, whose RegisterFeatures method is called in the Application_Start method by default. You can use this class to encapsulate all of your ApplicationBuilder code (enabling and configuring of Kentico MVC features).

      Note: The feature must be enabled before you register routes into the application's RouteTable. The Kentico().MapRoutes() method adds required routes based on the set of enabled features.

      using Kentico.Web.Mvc;
      using Kentico.Content.Web.Mvc;
      using Kentico.PageBuilder.Web.Mvc;
      
      ...
      
      protected void Application_Start()
      {
      	...
      
          // Gets the ApplicationBuilder instance
          // Allows you to enable and configure Kentico MVC features
          ApplicationBuilder builder = ApplicationBuilder.Current;
      
          // Enables the preview feature
          builder.UsePreview();
      
          // Enables the page builder feature
      	builder.UsePageBuilder();
      
          ...
      }
  3. (Optional) Edit the project's Views\web.config file and add the Kentico.PageBuilder.Web.Mvc namespace.

    • The namespace allows you to easily access page builder extension methods in the code of your views.
    • Alternatively, you can add using statements for the namespace directly in the code of individual views.

      <system.web.webPages.razor>
        ...
        <pages pageBaseType="System.Web.Mvc.WebViewPage">
          <namespaces>
            ...
            <add namespace="Kentico.Web.Mvc"/>
            <add namespace="Kentico.PageBuilder.Web.Mvc"/>
        </namespaces>
        </pages>
      </system.web.webPages.razor>

The basic page builder feature is now enabled. You can prepare pages with editable areas in your MVC project and start developing widgets and sections.


Was this page helpful?