How to develop inline controls

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.

devguide_clip0172

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

devguide_clip0173

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.

[C#]

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

[VB.NET]

Label1.Text = DateTime.Now.ToString()

5. Change the following line:

[C#]

public partial class CMSInlineControls_ShowTime : System.Web.UI.UserControl

to

public partial class CMSInlineControls_ShowTime : CMS.ExtendedControls.InlineUserControl

[VB.NET]

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:

[C#]

Button1.Text = this.Parameter;

[VB.NET]

(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 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

devguide_clip0174

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 () button. Select the control and set the Button text value to Show time. Click OK. The special expression is now inserted into the text.

devguide_clip0751

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:

devguide_clip0763

Page url: http://devnet.kentico.com/docs/5_5r2/devguide/index.html?how_to_develop_inline_controls.htm