Tuesday, May 27, 2014

Using the SharePoint RichTextBox

Through the course of my own development projects, I had a need to for a rich textbox, for which SharePoint does support OOTB. However, here is the catch - if you wish to employ it, I discovered through rigorous research that manual calls to SharePoint javascript libraries are necessary to invoke needed features, such as full HTML support within the rich textbox. After piecing together all the different namespaces and javascript libraries \ functions from several different informative sites, I arrived at the following working solution. Two functions (With a parameter) are needed that are referenced in the ...\layouts\forms.js library; CreateRichEdit(id), and IsSafeHrefAlert().

CreateRichEdit along with the below script will render out the text box and toolbars, based on the RichTextMode speficied in the InputFormTextBox. IsSafeHrefAlert will ensure that any hyperlinks or pictures inserted via the toolbars will function properly, if used in the way I've documented below that forces the result to be TRUE.

Hope it helps!

______________________________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ Page Language="C#" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>


<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<SharePoint:CssLink runat="server" Version="4"/>
                <SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true"/>
<SharePoint:SPShortcutIcon runat="server" IconUrl="http://fcbc-sp3/images/Icon3.ico"/>
               
                <SharePoint:SPPageManager runat="server"/>
                <SharePoint:SPHelpPageComponent Visible="false" runat="server"/>


<script type="text/javascript">

function CreateRichEdit(id) {

if (browseris.ie5up && browseris.win32 && !IsAccessibilityFeatureEnabled()) {

g_aToolBarButtons = null;

g_fRTEFirstTimeGenerateCalled = true;

RTE_ConvertTextAreaToRichEdit(id, true, true, "", "1033", null, null, null, null, null, "Compatible", "\u002f", null, null, null, null);

RTE_TextAreaWindow_OnLoad(id);

}

else {

document.write("&nbsp;<br><SPAN class=ms-formdescription><a href='javascript:HelpWindowKey(\"nsrichtext\")'>Click for help about adding basic HTML formatting.</a></SPAN>&nbsp;<br>");

};

}
   var id = "<%= txtmsg.ClientID %>";
  

function IsSafeHrefAlert()
{
return true;
}
   
</script>
</head>

<body  >

<form id="form1" runat="server">
  <asp:ScriptManager id="ScriptManager" runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true" />
<SharePoint:InputFormTextBox ID="txtmsg" runat="server" Rows="20" Columns="50" TextMode="MultiLine"
                RichText="true" RichTextMode="FullHtml" />
                </form>

</body>

</html>

Tuesday, May 20, 2014

Back to Basics - Understanding How JQuery Animate Works

It occurred to me that I should scale back just a bit to help break down the basics of my favorite JQuery feature - the animation. You'll see this come up a lot in my write-ups, as this is such a simple, yet incredibly powerful feature. It calculates and literally "plays out" the difference between a start point and end point, which is not just limited to page locations. To begin, the following items are needed

  • Reference to JQuery library in the header (Latest is currently v 1.11.1)
    • <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
  • Method to invoke the function (Can be bound to whatever handler, such as onLoad, onClick, etc., using JQuery or plain Javascript)
    • function animateThis()
    • {
    • $('#myDiv').animate({
    •    opacity:'0.0',
    •    },1024,function(){doMore())}
    • );
    • }
  • A container to be animated (Div works best)
    • <div id="myDiv">This container will be animated using my parameters</div>


Now, to break down the animate method.


  • $('#myDiv') tells JQuery which element or container ID to animate (Match to the "id" attribute). 
  • .animate tells JQuery to use the "animate" method and perform it
  • ({opacity:'0.0',} tells JQuery which options to use for the animation math. I'm using opacity as example in this case, which, currently set to "0.0", instructs JQuery to animate myDiv from it's current opacity to 0% opacity (invisible). This can be set to different levels, such as "0.5", which would be 50% opaque - put another way, half transparent. The effect for this example is that the contents of myDiv would fade into nothing and disappear. 
    • Many CSS attributes can be used to animate, using any combination there-of
      • Positions can be used (margin-left, left, top, bottom, etc.) - *Interestingly right and margin-right are not supported
      • Sizing can be used (height, width, etc.)
  • 1024, tells JQuery how long the animation should take to finish out, in milliseconds (1024 ms = 1 second)
  • function(){doMore())}tells JQuery to call a new function at the completion of the animation (this is totally optional and can be omitted, if not needed)
That's it! Give it a try!

Thursday, May 8, 2014

Fluid Navigation using JQuery Animate Function

I promised I would do some writing on JQuery and give some examples of how to easily leverage that technology. JQuery can be an incredibly powerful enhancement to the UX of a page and (in some cases) the aesthetics. For the moment, I'm going to avoid the many plug-ins and add-on libraries, because they are as numerous as the stars. I highly recommend taking an evening and Googling or Binging (If that's a word?) "JQuery plugins", just to get a look at what's out there. It's truly amazing!

For one project, I needed to create a navigation process to scroll through different views of interactive elements, without leaving the homepage. All within the core library for JQuery, it has extensive support for animation, using the function example:

$('#[Tag to be animated]').animate({[CSS property]:'[Value]',},[speed in milliseconds, where 1000 = ~1 second]);

Keeping in mind, that I had nine "windows" or collections of differing interactive elements (Images, links, etc.), this is the code that drives things. It answers to handlers from different menu options or elements within the "windows" themselves, giving me the ability to scroll through a large Div, by showing only a fixed portion (Equally spaced nested Div's) at a time.

The below function allowed me to pass in a parameter to tell the function were to navigate next, based on static logic (The content of the "window" elements are in most cases dynamic, but they will always appear on the same static "window" position). These elements are refreshed with each "if" case, as it can't be known from which "window" the visiting human will be on when selecting a new option. When a match is found in the "if" cases, it performs the animation at the bottom, were all other windows are animated to full transparency, while the selected "window" is animated to full opacity. Hence, not only are the "windows" moving in and out of view to guide navigation, but they are also fading in and out. Visit www.tmcacademy.com and try a few options to see it in action!

function MoveOver(option)
{
var scrollThis;
var boxHome = 'home';
var boxPrograms = 'programs';
var boxEnrollment = 'enrollment';
var boxAboutUs = 'aboutus';
var boxFaqs = 'faqs';
var boxStaff = 'staff';
var boxCalendar = 'calendar';
var boxDirections = 'directions';
var boxContactUs = 'contactus';
var boxCommunityLinks = 'communitylinks';
var show;
var wipe1;
var wipe2;
var wipe3;
var wipe4;
var wipe5;
var wipe6;
var wipe7;
var wipe8;
var wipe9;

if(option=='home')
{
scrollThis = 0;
wipe1=boxPrograms;
wipe2=boxEnrollment;
wipe3=boxAboutUs;
wipe4=boxFaqs;
wipe5=boxStaff;
wipe6=boxCalendar;
wipe7=boxDirections;
wipe8=boxContactUs;
wipe9=boxCommunityLinks;
show=boxHome;
}
if(option=='programs')
{
scrollThis = 1000;
wipe1=boxHome;
wipe2=boxEnrollment;
wipe3=boxAboutUs;
wipe4=boxFaqs;
wipe5=boxStaff;
wipe6=boxCalendar;
wipe7=boxDirections;
wipe8=boxContactUs;
wipe9=boxCommunityLinks;
show=boxPrograms;

}
if(option=='enrollment')
{
scrollThis = 2000;
wipe1=boxHome;
wipe2=boxPrograms;
wipe3=boxAboutUs;
wipe4=boxFaqs;
wipe5=boxStaff;
wipe6=boxCalendar;
wipe7=boxDirections;
wipe8=boxContactUs;
wipe9=boxCommunityLinks;
show=boxEnrollment;
}
if(option=='about')
{
scrollThis = 3000;
wipe1=boxHome;
wipe2=boxPrograms;
wipe3=boxEnrollment;
wipe4=boxFaqs;
wipe5=boxStaff;
wipe6=boxCalendar;
wipe7=boxDirections;
wipe8=boxContactUs;
wipe9=boxCommunityLinks;
show=boxAboutUs;
}
if(option=='faqs')
{
scrollThis = 4000;
wipe1=boxHome;
wipe2=boxPrograms;
wipe3=boxEnrollment;
wipe4=boxAboutUs;
wipe5=boxStaff;
wipe6=boxCalendar;
wipe7=boxDirections;
wipe8=boxContactUs;
wipe9=boxCommunityLinks;
show=boxFaqs;
}
if(option=='staff')
{
scrollThis = 5000;
wipe1=boxHome;
wipe2=boxPrograms;
wipe3=boxEnrollment;
wipe4=boxAboutUs;
wipe5=boxFaqs;
wipe6=boxCalendar;
wipe7=boxDirections;
wipe8=boxContactUs;
wipe9=boxCommunityLinks;
show=boxStaff;
}
if(option=='calendar')
{
scrollThis = 6000;
wipe1=boxHome;
wipe2=boxPrograms;
wipe3=boxEnrollment;
wipe4=boxAboutUs;
wipe5=boxFaqs;
wipe6=boxStaff;
wipe7=boxDirections;
wipe8=boxContactUs;
wipe9=boxCommunityLinks;
show=boxCalendar;
}
if(option=='directions')
{
scrollThis = 7000;
wipe1=boxHome;
wipe2=boxPrograms;
wipe3=boxEnrollment;
wipe4=boxAboutUs;
wipe5=boxFaqs;
wipe6=boxStaff;
wipe7=boxCalendar;
wipe8=boxContactUs;
wipe9=boxCommunityLinks;
show=boxDirections;
}
if(option=='contact')
{
scrollThis = 8000;
wipe1=boxHome;
wipe2=boxPrograms;
wipe3=boxEnrollment;
wipe4=boxAboutUs;
wipe5=boxFaqs;
wipe6=boxStaff;
wipe7=boxCalendar;
wipe8=boxDirections;
wipe9=boxCommunityLinks;
show=boxContactUs;
}
if(option=='community')
{
scrollThis = 9000;
wipe1=boxHome;
wipe2=boxPrograms;
wipe3=boxEnrollment;
wipe4=boxAboutUs;
wipe5=boxFaqs;
wipe6=boxStaff;
wipe7=boxCalendar;
wipe8=boxDirections;
wipe9=boxContactUs;
show=boxCommunityLinks;
}

 $("#insideFooter").animate({
    marginLeft: '-'+scrollThis+'px',
     },500);
    $('#'+show+'').animate({
    opacity:'1.0',
    },1000);  
    $('#'+wipe1+'').animate({
    opacity:'0.0',
    },1000);
    $('#'+wipe2+'').animate({
    opacity:'0.0',
    },1000);
    $('#'+wipe3+'').animate({
    opacity:'0.0',
    },1000);
    $('#'+wipe4+'').animate({
    opacity:'0.0',
    },1000);
    $('#'+wipe5+'').animate({
    opacity:'0.0',
    },1000);            
    $('#'+wipe6+'').animate({
    opacity:'0.0',
    },1000);
    $('#'+wipe7+'').animate({
    opacity:'0.0',
    },1000);
    $('#'+wipe8+'').animate({
    opacity:'0.0',
    },1000);
    $('#'+wipe9+'').animate({
    opacity:'0.0',
    },1000);    
}

Just in case, an example of a calling handler would be the following (Being included within an HTML element):

<a href="#" onclick="javascript: MoveOver('home');">HOME</a>