Web parts are components of a page which offer a mix of content and functionality, they are the main constituents of portal engine page templates. By browsing through the Pages -> Edit -> Design interface, you can easily use web parts to create pages directly. Rapid Development in Kentico is supported by Portal engine which delivers quick results to clients.
There are three different levels of web parts:
- Code Files: Inherited from the suitable base class, the web parts are the user controls.
- System Objects: Web parts are registered as objects in the system and the purpose of the object is to define the web part’s properties, specify the path to the user control source file and store other configuration options.
- Page Components: Web part templates are the web parts placed on page templates. A single web part can be created for many instances. Such instances are inserted into web part zones and they are defined within the layouts of page templates.
Let’s understand how both Web Part layouts and Widgets can help in creating structured, reusable components to increase velocity.
There are a variety of web parts which Kentico offers. One can develop their own web parts or modify existing ones.
Widgets:
Widgets provide CMS users the ability to add structured content elements to their pages. It will be within Portal Engines in Kentico and the widget is based on a web part.
It can be a complex task to create multiple web parts, which are needed to support widgets during rapid prototyping.
Here we will set up two widgets; one simple CTA (call to action) button and the other, a CTA banner which is more visually pleasing.
A- Setting Up Generic Web Parts And Widgets
Below are some steps that are needed before creating the generic widget/web part set-up.
A1- Creation of a generic web part
First we will create a new web part. This can be done through the Web parts application by selecting the category for the Web part. Here we will be using General. Click the New Web part button.
Complete the form:
Here, Kentico will create the desired files for your solution and will create the web part in the system. So now we have simple web parts with no properties whatsoever.
Note:
if you are using a web site application, you will have to add these files to your project before building the solution. According to this example, the files can be found in CMS\CMS_WebParts\General folder.
B- Add The Layouts
With a simple web part, we can take a look at web part layouts.
We can change the way web parts are displayed by web parts layouts. Based on the associated web parts, new widgets can be created. These layouts are used to create new widgets. They are also used to create new widgets based upon the associated web parts. Below are two layouts used for this demo:
B1- CTA Banner Layout
1. On the Layouts tab, click on the New layout button
2. Give the layout a display name of Call to action banner and then add following layout code:
<%@ Control Language="C#" AutoEventWireup="true" Inherits="CMSWebParts_General_GenericWebpart" CodeBehind="~/CMSWebParts/General/GenericWebpart.ascx.cs" %> <asp:PlaceHolder runat="server"> <section class="banner-section" style="background-image: url('<%= URLHelper.ResolveUrl( GetStringValue("LinkImage", "")) %>')"> <h2 class="banner-heading"><%= GetStringValue("LinkTitle", "") %></h2> <p class="banner-text"><%= GetStringValue("LinkDescription", "") %></p> <p><a class="btn btn-primary" href="<%= GetStringValue("LinkUrl", "") %>"><%= GetStringValue("LinkText", "") %></a></p> </section> </asp:PlaceHolder>
In this code you can see things like this <%= GetStringValue("LinkTitle", "") %>. Here we are accessing properties that do not exist in the web part, these will be delivered directly from the widget itself.
B2- CTA Button Layout
1. Switch to the Layouts tab and click on the New layout button
2. Give the layout a display name of Call to action button and add the following layout code:
<%@ Control Language="C#" AutoEventWireup="true" Inherits="CMSWebParts_General_GenericWebpart" CodeBehind="~/CMSWebParts/General/GenericWebpart.ascx.cs" %> <asp:PlaceHolder runat="server"> <a href="<%= GetStringValue("LinkURL", "") %>" class="button btn-cta"><%= GetStringValue("LinkText", "") %></a> </asp:PlaceHolder>
C- Creating Widgets
Now that we have a web part with some different layouts we can create widgets that our editors can use. The layouts defined above will be used by these widgets. They will have the relevant properties which are created in each widget to satisfy the properties requested in the layout.
In the General category two widgets are created. We follow the steps below to create the widget:
C1- CTA Banner Widget
1. First open the Widget application and from the tree view select the general category.
2. Now click on the New widget button and choose General/Generic web part.
3. From the General tab, change the properties below:
Display name: Call to action banner Layout: Call to action banner Code name: (Delete this so it can be automatically generated)
4. Click the Save button.
5. In the Security tab always make sure that ‘Allowed for’ is checked so the widget can be used in editor zones.
6. Now in the Properties tab, add these properties:
- a. Data type: Text
- Required: true
- Field caption: Title
- Form control: Text box
- b. Field name: LinkTitle
- c. Field name: LinkDescription
- Data type: Text
- Required: true
- Field caption: Description
- Form control: Text box
- d. Field name: LinkImage
- Data type: Text
- Required: true
- Field caption: Image
- Form control: URL selector
- Field name: LinkText
- Data type: Text
- Required: true
- Field caption: Link text
- Form control: Text box
- Field name: LinkUrl
- Data type: Text
- Required: true
- Field caption: URL
- Form control: URL selector
C2- CTA Button Widget
1. In the Widgets application and in tree view, choose general category.
2. Select General web part by clicking on the New widget button.
3. Change the following properties in the General tab.
- a. Display name: Call to action button
- b. Code name: (Delete this so it can be automatically generated)
- c. Layout: Call to action button
4. Now click on the Save button.
5. Again as above, in Security tab make sure that ‘Allowed for’ is checked so the widget can be used in editor zones.
6. Add these properties in the Properties tab.
- a. Field name: LinkText
- Data type: Text
- Required: true
- Field caption: Link text
- Form control: Text box
- b. Field name: LinkUrl
- Data type: Text
- Required: true
- Field caption: URL
- Form control: URL selector
D- Time For Action
We can now put everything into action as we now have all the component parts ready to go. Now simply load up the Pages application and navigate to the Home page.
E- Summary
This is a great way to get some rapid prototyping done without leaving the admin page in Kentico. In lightweight scenarios this a great way to quickly build your site. Since widget properties are not available for translation, widgets are not supported by Kentico’s Translation Services.
Don’t miss to check these out:
Is Kentico Cloud The Right Option For You?
5 Things To Expect From Kentico 10.0 Release
Kentico Project For Us Based Billion Dollar Steel Manufacturer Boosts International Business
References: mattnield, ridgeway, docs.kentico