Guest Author: Peter Allen
BitsOfSharePoint

Introduction

How to make a code free CEWP solution for the end user!  Read On.

End user: "HELP!!! All these solutions using the Content Editor Web Part, look like they will address my issues, but I know NOTHING about code.  I do not understand how I am to change something called variables to make it work on my site. I am not sure I can implement this, but I wish I could."

How many times have we been told this or have not since the end user may get overwhelmed and moves on. I bet that your CEWP solutions have not been implemented more times then you care to know because of this issue.

I listened to one of Mark Millers presentations at www.endusersharepoint.com where he had a panel discussing the needs of information workers.  One of the topics was about how even the great CEWP solutions were still a lot of work for the information worker to easily install and thus information works leave and do not implement the solution.

I have had many email conversations with information workers wanting to implement a solution of mine, but were hung up on where exactly should the changes take place.  When they say they have tried everything I ask them to send me the code and then I can see if they have added the info correctly.  Only those who are determined to make the solution work will go though all these steps.  Many will just walk away because it is too hard to find the right place in the code to make the changes. 

Wouldn’t it be great if we could make an interface for the end user so that they do not have to look at code, boy this would make it a lot easier!!

So I got to thinking about this problem and then it dawned on me that Microsoft has provided in the CEWP a way to add code directly, Source Editor, and a way to visually edit content, Rich Text Editor (RTE).  We have the tools right there to make an interface using the RTE, but how do we take information added in the RTE and use it in the code?  This is where jQuery comes in and helps us pull the data entered in the RTE by the user. Now that is exciting. 

In summary we have the ingredients to create a better way for information workers to implement our solutions in a no code manner, YEAH!

Overview

What is CEWP Solution Interface?  Who is this geared for?  It is all  about providing CEWP solution developers an easier way to deploy solution that require customizations.  This series of articles is geared for the solution developer with the intention to help the end user or  information worker to have an easier time install CEWP solutions.

So what problem are we trying to solve?  Simply ease of use.  Microsoft started this with the introduction SharePoint, which made it some much easier for the end user to create a collaborative site without having to go to IT. Now we need to do the same for the CEWP solutions that we create.

Your CEWP solution uses JavaScript or jQuery to solve many needs, but many times for the solution to work in the end user SharePoint environment the end user needs to go into the code of your solution and change variables. This solution is an attempt to solve the problem for the both the creator of the solution and the end user installing it.

So, let’s create a way that the end user does not have to go into the code to make changes. The rest of this article will outline the high level view of how this solution will work.  We will create an interface that can capture the required variables from the end user to be used in your solution using JaveScript and jQuery for the solutions.  If this interest you please read on.

What we need:

• CEWP – check 
• Source Editor – check
• Rich Text Editor (RTE) – check 
• JavaScript – check
• jQuery – check (I will show how we can have this dynamic being local or externally hosted.)

So let’s transform this from The Old Way where the information worker has to look through code like this to find the right place to make changes.   Code changes should really just be made by the creator, not the implementer.

Let’s transform to a new way that looks and feels more like an options panel.  As you can see in the The New Way the information worker does not have to look at any code.  They have a nice form that has instruction on what to do.  This should make it much easier to implement your CEWP solution.

We also can have the option to communicate when there are errors or missing information.  The more we can communicate to the end user the better the experience and the more likely that an end user can solve problems without getting frustrated and needing to go back to the developer.

Below you see images where we can display errors when they occur.  The wonderful part is that we can show errors even when they are not in edit page mode.  The example below shows the error in the standard page view.

In addition to communicating errors we can communicate information about the solution.  Now we can identify what solution it is, what version it is and provide the user a URL to find and read about the latest info on the solution.  This information should only be shown when we are in edit mode and we can do that too. Again, we can communicate more information about the solution and how the end user can access details about the solution.

Next Steps

In the next series of articles I will outline how we wrap your CEWP solution with the above interface and transform how users interact with your solution.   We will start off with the basics in the next articles and focus on just having the interface for the end user to add the variables needed.  We then will progress in to Solution Info panel, error checking and how we implement jQuery.

Hope you find this helpful.  Please send me any comments.

Guest Author: Peter Allen
BitsOfSharePoint

Peter Allen is a SharePoint enthusiast and evangelist having deployed solutions in Healthcare, financial, and engineering firms.  He has worked in the technology field for 15 years creating solutions both internally and externally for clients. He has worked at start-ups, mid and larger corporations and has consulted.  He currently hosts a site http://www.bitsofsharepoint.com where he blogs about solutions to extend the features of SharePoint.