Thursday, February 09, 2006

Here's something I thought I'd throw out there to demonstrate the much underrated Content Editor Web Part (CEWP). It's a client-side JavaScript Color Picker based on code from http://www.mickweb.com/javascript/colours/websafe.html 

The CEWP allows you to either embed formatted Rich Text into the web page or pure HTML/JavaScript so I could very quickly create a Web Part using the copied javascript. It just took a few mods such as getting rid of the image dependency by using a SPAN to form the cells instead.

The code's not much to talk about its just plain JavaScript creating a HTML <table> with <td>'s for the color cells. One interesting point is that the color table is dynamically generated. This is done by placing an empty block element, <p> in this case, giving it an ID and then set its innerHTML property to the generated table string.

function AttachColorTable(){
document.getElementById("'colourtable'").innerHTML= table_maker(36,6,'Select Colour');
}

This code is called on the load event of the page. I use attachEvent so I don't override any other code that may be using the onLoad event.

window.attachEvent('onload',AttachColorTable);

You can either import the DWP file on a single page or upload to the Site or Virtual Server galleries using instructions given by Todd Bleaker in a cool tip here http://mindsharpblogs.com/todd/archive/2005/08/04/646.aspx

Also check out the Google search Web Part also using the CEWP by Todd http://mindsharpblogs.com/todd/archive/2005/08/04/647.aspx

 

Download : Color Picker1.zip (1.36 KB)

Thursday, February 09, 2006 10:19:02 AM (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
 Tuesday, February 07, 2006

I tend to keep an eye on the sharepoint newsgroups mainly because I can jump in and help someone out with something I've had problems with in the past. One question today on the newsgroup was about adding a hidden field to a sharepoint list via the object model. I've hit this before and until you find out whats going on you feel a bit like you're in a maze of twisty passages all alike.

Often you might want an internal tracking flag or number handled via code that you don't want exposed in the edit list UI that some unsupecting user might then delete by accident.

In theory this should simple.

        SPSite spsite=new SPSite(http://localhost:4455);
        SPWeb web=spsite.OpenWeb();

        SPList list =web.Lists["Announcements"];

        string id=list.Fields.Add("NewField",SPFieldType.Boolean,false);
        SPField spfield=(SPField)list.Fields.GetField(id);

        spfield.Hidden=true;
        spfield.Update();

 

But if you try this you'll hit an exception - the reason? The code for the Hidden property checks to see if the property CanToggleHidden property is true and throws an exception if its not.

Fair enough,all we do then is set the CanToggleHidden  property to true and do the update but there is no such property on the object model.

There are two ways around this but its best to know some internal details about the SPField object. This way the internal data for a field is stored is in an XML format like this

<Field DisplayName="NewField" Type="Boolean" Required="FALSE" Name="NewField" ColName="bit4" CanToggleHidden="TRUE" Hidden="TRUE"/>

You can see here the CanToggleHiden and the Hidden properties. Note not all fields will have these extra properties if they are not set. The properties are read from /written to via the .dotnet XML classes.

This field definition is a subset of the whole list schema which is taken from the tp_Fields column of the Lists table in the SharePoint content database. The ColName refers to the column used to store the data in the UserData table. You don't need to add this column by hand its automatically calculated from the field type and number of fields of that type already in use.

Now the SPField object internally gets and set its properties into this XML fragment using some helper functions one of which is SetFieldBoolValue for boolean fields, there is also SetFieldIntValue and SetFieldAttributeValue.

The first way to get around the limitation is to add the field directly as XML using the AddFieldAsXml method on the SPFieldCollection using the XML format as above but leaving out the columnname.

   SPList list =web.Lists["Announcements"];

   list.Fields.AddFieldAsXml("<Field DisplayName=\"NewField\" Type=\"Boolean\" Required=\"FALSE\" Name=\"NewField\" CanToggleHidden=\"TRUE\" Hidden=\"TRUE\"/>");

Thats the supported way but one other interesting method is to toggle the internal CanToggleHidden internal property with reflection.

Add a reference to the System.Reflection namespace and you can do this

   Type type = spfield.GetType(); 
   MethodInfo mi= type.GetMethod("SetFieldBoolValue", BindingFlags.NonPublic | BindingFlags.Instance);
   mi.Invoke(spfield,new object[]{"CanToggleHidden", true});

you can then set the Hidden property via the OM without getting an exception

   spfield.Hidden=true;
   spfield.Update();


Either way both of these are hacks but at least one is supported.
 

Tuesday, February 07, 2006 10:10:34 AM (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  | 
 Thursday, February 02, 2006

This entry was prompted by a question on a newsgroup about hiding screen elements so you can get the whole contents of a page fitting onto a printout without the top/left nav links.

Personally I don't like the printer friendly buttons you see on web pages mainly because you often find heaps of javascript dynamically altering DOM element's styles or the developer has coded a special version of the page just for the printer.
Sometimes that may be needed but I'd just recently done a website where this feature was requested and came across an aspect of css that I'd missed before. That was the media=print attribute. A few tweaks to the css file to hide navigation divs and margins and voila the printouts came out perfectly.

In CSS 2 you can specify different stylesheets for the different output devices the document may be rendered to, see http://www.w3.org/TR/REC-CSS2/media.html for the full details.
You can either reference a separate css file like this

<LINK rel="stylesheet" type="text/css" href="print.css" media="print">

or you can inline the style like this

@media print { .classname   {display :none; visibility:hidden } }

So to alter how a SharePoint page looks when printed we can either alter the css files that SharePoint uses : ows.css and sps.css with SP Portal : or inline the stylesheet in the page.
We can inline by adding a Content Editor Web Part and using its source edit button to add this text

<style type="text/css">
@media print
{
.ms-bannerframe   {display :none; visibility:hidden }
.ms-nav   {display :none; visibility:hidden }

}
</style>

Go to File-Print Preview and you should see that the top and left nav bars are now hidden.
On the Portal sites you probably need to add the ms-navframe style to the list above as that's used in the left nav bar.

 

Thursday, February 02, 2006 9:27:52 PM (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  |