Kentico CMS 7.0 Developer's Guide

How to develop inline controls

How to develop inline controls

Previous topic Next topic Mail us feedback on this topic!  

How to develop inline controls

Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic!  

This topic will show you an example of inline control development. We will create a simple control that will display the current time when a button is clicked.


1. Open the web project in Visual Studio (or Visual Web Developer) using the WebProject.sln file or using File -> Open -> Web Site... in Visual Studio.

2. Right-click the CMSInlineControls folder and choose Add New Item. Choose to create a new Web User Control and call it ShowTime.ascx.


3. Switch to the Design tab and drag and drop a Label control and a Button control onto the form:

4. Double-click the Button control and enter the following code into the Button1_Click method. It will ensure the displaying of the current date and time by the label control.



Label1.Text = DateTime.Now.ToString();




Label1.Text = DateTime.Now.ToString()


5. Change the following line:


public partial class CMSInlineControls_ShowTime : System.Web.UI.UserControl
public partial class CMSInlineControls_ShowTime : CMS.ExtendedControls.InlineUserControl




Partial Class CMSInlineControls_ShowTime

  Inherits System.Web.UI.UserControl




Partial Class CMSInlineControls_ShowTime

  Inherits CMS.ExtendedControls.InlineUserControl

What you did                        
You have changed the user control so that it inherits from the InlineUserControl class. It allows you to access the parameter of the control in the next step.

6. Add the following code to the Page_Load method of the control:



Button1.Text = this.Parameter;




(The Page_Load method is not generated by default in VB.NET)


Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

   Button1.Text = Parameter

End Sub

What you did
This code sets the Button1 caption based on the parameter of the inline control.

7. Save the changes.

8. Go to CMS Site Manager -> Development -> Inline controls. Click NewControl New control and enter in the following values:

Control display name: Show time

Control name: ShowTime (the name of the user control without the extension)

Control file name: ~/CMSInlineControls/ShowTime.ascx

Parameter caption: Button text



Click OK.

9. Now click the Sites tab and check the boxes for all sites where content editors should be able to insert this control. Click OK.


10. Go to CMS Desk, edit some page with editable regions and click the Insert Inline Control (fckInlineControls) button. Select the control and set the Button text value to Show time. Click OK. The special expression is now inserted into the text.




Please note


Due to the fact that in-line controls are obsolete, the Insert Inline Control (fckInlineControls) button is only available in the toolbar after adding the following key into the configuration/appSettings section of your web.config file:


<add key="CMSEnableInlineControls" value="true" />



11. Click Save to save changes and click Live site to see the live version of the page. The user control is now displayed inside your text. The button has the caption you have specified. When you click the button, the label displays the current date and time: