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