How to develop inline controls

  Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic! 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.
 
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

 

to

 

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

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