Friday, October 22, 2010

SharePoint Rich Text Box (InputFormTextBox) Control

Use of Rich Text Box (InputFormTextBox) Control in SharePoint:


Objective:

In this article, I am going to explain use of RichTextField (InputFormTextBox) control in SharePoint.

Requirement:

Take an example of one requirement: We need to create newsletter on the basis of user input. The user input can be a normal text or html format text.

Resolution:

In this scenario, we can use SharePoint Rich Text Box (InputFormTextBox) control in a custom webpart/usercontrol. Check the screen shot below:





Ways of using SharePoint Rich Text Box (InputFormTextBox) control:

1. The following code illustrates how to use SharePoint Rich Text Box (InputFormTextBox) control in user control:

i. Add the required directive at the top of the ascx page (if you're using a web user control):


<%@ Register Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" Namespace="Microsoft.SharePoint.WebControls" TagPrefix="AmitKumarSPControls" %>


ii. For creating instance of SharePoint Rich Text Box (InputFormTextBox) control in your ascx (if you're using a web user control):










2. You can also create this type of control completely in code:

i. This is available under Microsoft.SharePoint.WebControls namespace (if you're using a custom web part):



InputFormTextBox richMessage = new InputFormTextBox();
richMessage.RichText = true;
richMessage.RichTextMode = SPRichTextMode.FullHtml;


You may also use following useful properties:


richMessage.AllowHyperlink = true;
richMessage.TextMode = TextBoxMode.MultiLine;
richMessage.Wrap = true;
richMessage.Rows = 10;
richMessage.Width = System.Web.UI.WebControls.Unit.Percentage(100);



There are a number of properties/attributes that you can set:

•ID: control id.
•Text: the string within the control.
•ErrorMessage: you can define a custom error message that will be displayed when an error occurs.
•ErrorMessageLabelControl: you can specify a control id of a control on the page in which the error message will be rendered.
•TextMode: accepts a value of type TextBoxMode. Possible values are MultiLine, SingleLine and Password. The default is SingleLine.
•Columns: indicates the width of the text box.
•Rows: indicates the number of rows that will be displayed. This is only applied if the TextMode property is set to MultiLine.
•RichText: indicates if a normal text box or a rich text box will be displayed. The default value is false. The text box will only be rendered as a rich text box if the TextMode property is set to MultiLine.
•RichTextBoxMode: accepts a value of type SPRichTextMode. Possible values are Compatible, FullHtml and HtmlAsXml. The default value is Compatible. this property only applies if the RichText property is set to true.
•AllowHyperlink: this property only applies if the RichtText property is set to true. The necessary controls to insert hyperlinks and images will be added to the tools pane.
•Direction: This orders the controls in the tools pane from left to right or from right to left. The value is of type ContentDirection having values NotSet, LeftToRight, RightToLeft. The default value is NotSet. This property only applies if the RichText property is set to true.





Example:

The following code illustrates how to use SharePoint Rich Text Box (InputFormTextBox) control in user control. In this example, I am also validating, value in SharePoint Rich Text Box (InputFormTextBox) control is empty or not using JavaScript.

RichTextBoxControl.ascx Code:



<%@ Control Language="C#" AutoEventWireup="true" CodeFile="RichTextBoxControl.ascx.cs" Inherits="RichTextBoxControl" %>
<%@ Register Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"
Namespace="Microsoft.SharePoint.WebControls" TagPrefix="AmitKumarSPControls" %>



















 
Rich Text Box Control




















Enter Text:*






RichText="true" RichTextMode="FullHTML" Rows="21" Style='height: 270px; width: 700px;'
TextMode="MultiLine" Width="700px">






 


 







RichTextBoxControl.ascx.cs Code:




using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Text;
using Microsoft.SharePoint;

public partial class RichTextBoxControl : System.Web.UI.UserControl
{

#region Render Controls and Handle Controls Event


#region Handle Page Load Event
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
SetAttibutes();
}
}
#endregion

#region Handle Display Button Click Event
protected void btnDisplay_Click(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(txtNotes.Text))
{
SetMessage(txtNotes.Text.Trim(), lblMessage);
}

}
#endregion


#endregion

#region Helper

#region set controls attributes
private void SetAttibutes()
{
//Add JS to the Display button
btnDisplay.Attributes.Add("OnClick", "return TextBoxMessageCheck('" + txtNotes.ID + "','" + txtNotes.ClientID + "');");
//


}
#endregion

#region Show message on the screen
///
/// This method makes the lblMessage object visible to the page and set its Text property to the message provided.
///

/// The string value assigned to the Text property of the lblMessage object.
private void SetMessage(string message, Label lblMessage)
{
if (lblMessage != null)
{
lblMessage.Visible = true;
lblMessage.Text = message;
}
else
{
Page.Response.Write(message);
}
}
#endregion

#endregion
}






You can deploy custom user control in SharePoint with the help of SonofSmartPart Web part.


References for this article:

http://msdn2.microsoft.com/en-us/library/microsoft.sharepoint.webcontrols.inputformtextbox.aspx

http://smartpart.codeplex.com/releases/view/10697
Share:

6 comments:

Balu said...

Does this work with Chrome and Firefox? I have issues of not loading formatting toolbar in all the browsers except IE.

Amit Kumar said...

This validation JS work with all browser.

Rohit Blog said...


I have created a webpart using inputformtextbox. But when I click the image button, I doesn’t show the browse option for the image.

Any property setting is there?

Thanks in advance,

Girish said...

How to upload video to richtextbox editor?

Girish said...

Thanks a lot..
I was looking for this item.
I need to add a custom toolbar for uploading video to this custom rich text editor such that video can be played inside the richtext editor itself
How can it be done?
Pls help me...

Anonymous said...

Hi ,

I have one urgent requirement with input form texbox ,

first
1) Is there way to freeze the toolbar of text box (rich text box) for example when i scroll down the tool bar ( font ,formating control etc) disappear hence if i want to bold anything i have to scroll up again

2) on right click can i show tool bar options for formating the way we have in word

We are working on WSS3.0

Please help

thanks in advance

About Me

My photo
Based in Bangalore, INDIA, Amit is a MCC. He has an MCA from the U.P.T.U., INDIA and holds Microsoft certifications including SharePoint 2007/2010/2013. He is an contributor to MSDN and http://amitkumarmca04.blogspot.com/. Amit have experience in SharePoint,ASP.Net with C#, Classic ASP, VB,Macros,HTML,JavaScript,JSON,BootStrap and AngularJS.

Followers

Labels