lørdag den 7. juli 2012

SharePoint 2013

SharePoint Apps



I was at 7 days training in next version of SharePoint back in February 2012. I was privileged to learn from Ted Pattison, Andrew Connell, Steve Peschka, Scot Hillier, Baer, and dear Luca and Vesa. After the traing, I got to work on two SharePoint 2013 projects.


My SharePoint 2013 blog

fredag den 30. marts 2012

JavaScript - Client Object Model - C#

When I started working with SharePoint back in 2004, it didn't take me long time to realize that you can code everything in C# on a SharePoint project, but it was far more easier, faster, and the performance was much better, if you minimized trips to the server and didn't use back-end code.

Realizing the power of JavaScript was easy, but working with JavaScript was not. Sure, it was easy to find JavaScript code that you can use in your project, but I missed that fine feeling of working with Visual Studio and writing C# code.

I like nice things, I like to draw and paint (things I draw aren't pretty, but I like it). I also think that nicely done user interface is used and appreciated more than the "ugly" one. For many years, I had a feeling that most of the time, I used JavaScript to create fancy pop ups and roll ups in SharePoint - things that, in my mind are a bit superficial. Not like C# code that "does" something important. Serious stuff. For many years, JavaScript for me was something I could copy/paste wherever and whenever it was needed. I felt that I didn't really have to concentrate on writing it, because it was just JavaScript. I kind of hated the fact that I spent so much time learning the OOP and C#, and I was earning money, and paying my bills with copy/pasting. I also didn't like the fact that I could paste that JavaScript code wherever I wanted - in the web part, on the page, on the master page, and it would work. No rules, no governance, no fancy tools, just Notepad.

Many years after, I realized that many of the developers couldn't just figure out how to "copy/paste". It seams that it is more difficult to comprehend than C# code. JavaScript don't work whenever and wherever.

Last year, I worked on two intranet portals, where SharePoint COM with JavaScript was the only way of going forward. Sure, I could just tell the customer that it's not possible to code and bla blah, blah. What do they know :-)
But, I decided to try it out - that new thing, the COM with JavaScript, because COM allows you to "do" something with JavaScript. You can get content from lists, write to lists, manage columns, and so on. I also decided to make a JavaScript library for the project, and web parts that reference the .js files, so I don't have JavaScript scattered to the four winds.

The project turned out very good and the customers are very fond of it. What can I say, JavaScript is not the same as it used to be, and I'm very close to loving it.

onsdag den 28. marts 2012

JavaScript - Client Object Model - Basics

SharePoint Apps


//Get current context
var ctx = new SP.ClientContext.get_current();

//Get other site (web) context
var ctx = new SP.ClientContext("/othersite/");

//Get web
var web = ctx.get_web();

//Get current page ID in Pages library
var pageID = SP.PageContextInfo.get_pageItemId();

//Get current user
var user = ctx.get_web().get_currentUser();
user.retrieve();
var userlogin = user.get_loginName();

Related Content
SharePoint JavaScript Client Object Model why not
SharePoint 2013 Script Editor and Embed Code
SharePoint 2013 JavaScript Add List with Columns

JavaScript - Client Object Model - Add New Item

function AddListItem() {

try {
//Get the context, web, and the list
var ctx = new SP.ClientContext.get_current();
var web = ctx.get_web();
var list = web.get_lists().getByTitle('TheList');

//Add new list item
var itemCreationInfo = new SP.ListItemCreationInformation();
var newitem = list.addItem(itemCreationInfo);
newitem.set_item("Title", "New List Item added with JavaScript and COM");
newitem.update();

ctx.executeQueryAsync(onSucceededCallback, onFailedCallback);

}
catch (e) {
alert(e);
}
}

function onSucceededCallback() {
alert('New list item is added');


}
function onFailedCallback() {
alert('Error: ' + args.get_message());
}

JavaScript and Client Object Model - Get Latest Video Pages

SharePoint Apps



//initiates function SetLabelValues on page load:

ExecuteOrDelayUntilScriptLoaded(GetValues, "sp.js");

function GetValues()
{

//Get context - video site

var ctx = new SP.ClientContext("/videositename/");

//Get web:

var web = ctx.get_web();

//Get list

var videoList = web.get_lists().getByTitle('Pages');

//Get the latest video
var caml = new SP.CamlQuery();


this.allVideos = videoList.getItems(caml);

//Video is a custom site column
ctx.load(this.allVideos, "Include(Title,Video,Created, Comments,FileRef)");

//Video List
var enumerator = this.allVideos.getEnumerator();

while (enumerator.moveNext()) {

var li = enumerator.get_current();
var videourl = li.get_item("FileRef");
var videotitle=li.get_item("Title");
//build the str string here...
}

//Write list to a div tag with id="VideoList"

var div = document.getElementById("VideoList");
div.innerHTML = str;
}

lørdag den 14. januar 2012

dk.msn.com News style with Content Query

SharePoint Apps



Coding News web part that resembles News display at dk.msn.com (or uk.msn.com) with one top headline and 5 thumbnail pictures below was not that hard to code.
Here are the things that you have to code:
- display the latest item as headline with large picture
- display as thumbnails, both the latest item and the last 5-6 items below the headline news
- shuffle the items - display item no. 2 as headline and after some time, display item no. 3 and so on
- fade the thumbnail that is currently displayed as headline
- allow user to click or move the mouse over thumbnails and choose which news is displayed as headline
- allow user to click on the item and display the entire item on another page
Here are some tips:
1. Create a custom style in your custom ItemStyle.xsl that is referenced from Content Query web part
2. Create a variable RowNum to display the latest news item as top headline:
3. Write if statement to display only the first item:

..xsl:if test="$RowNum < 1">...

4. Define both a and img tag with id, so you can reference them from JavaScript:

id="newsdisplayimage" src="{$SafeImageUrl}" title="{@ImageUrlAltText}" />

5. Define onClick and onMouseOver for thumbnail image link:

javascript:ShowLarge('')

6. Define thumbnail image with id:



7. Create a reference to JavaScript on the page
8. ShowLarge JavaScript function - example of how to display the thumbnail image as headline - large image:

function ShowLarge(Row) { try {var image=document.getElementById(Row + "_image");var mainimage = document.getElementById("newsdisplayimage");
mainimage.filters.item("DXImageTransform.Microsoft.Fade").apply();
mainimage.src=image.src;
mainimage.filters.item("DXImageTransform.Microsoft.Fade").play();


9. Shuffle between news items:
var t=setInterval("ShowLarge()",12000);


10. Fade thumbnail image for the current headline:
image.style.filter="Alpha(opacity=50)";

mandag den 17. oktober 2011

SharePoint 2010 and How to Build XML and Display ListItem with XSLT

SharePoint Apps



In the following, I'll explain how to build XML on-the-fly and display data with XSLT. The advantage of this approach is that you always can edit the way data is displayed without changing the code in C# and deploying the new assembly.

So, if you are tired of using StringBuilder to display data in your web parts, check out the description below:

I assume that you know how to create a web part in VisualStudio and write the code to fetch SPListItem that I defined as "projectitem" in the code.

SPListItem projectitem=.....

You can define the path to XSLT file as a web part property that is editable in the web part ToolPane:

private string _xslt = "/Style Library/Projects/ProjectInfo.xsl";

[WebBrowsable(true),
Category("ProjectInfo settings"),
DefaultValue("Current"),
Personalizable(PersonalizationScope.Shared),
WebDisplayName("XSLT path"),
WebDescription("Pat to XSL file")]
public string XSLT
{
get { return _xslt; }
set { _xslt = value; }
}

Also, define the string that will contain the XML, built on the fly:

string xmlInfo = "";

The code is used to fetch the item from a "Project list" that contains metadata about projects. Whilst I also defined the list of ProjectFields as:

This list is used in the code to save all the list item values - the values, defined in the list item columns.
The code loops through the list item fields (columns), so I also defined the field name and field value as FieldName and FieldValue:


class ProjectFields { public string FieldName { get; set; } public string FieldValue { get; set; } }

I loop through the list item fields (columns):

foreach (SPField field in projectitem.Fields){}

Than, I fetch the value for each field (column). The code to fetch the field value is different for each field type, so

I write something like this:

if (field.Type == SPFieldType.Text){}

or

if (field.TypeAsString == "TaxonomyFieldType"){}

or

if (field.Type == SPFieldType.User){}

Don't forget to check for fields and empty field values:
if (projectitem[field.Title]!=null){}

and

if (projectitem[field.Title].ToString() != ""){}

At the end of the loop, the field name and field value are saved in the list:

projectList.Add(new ProjectFields { FieldName = field.Title.Replace(" ", "_"), FieldValue = itemvalue });

Than, the foreach loop is closed and I can build the XML on the fly:

XElement xml = new XElement("Project");
foreach (ProjectFields data in projectList)
{
xml.Add(new XAttribute(data.FieldName, data.FieldValue));

}

Than, save the XML to a string:
xmlInfo = xml.ToString();

Finally, render the XML with XSL:
protected override void RenderContents(HtmlTextWriter output)
{
RenderChildren(output);
try
{
SPSecurity.RunWithElevatedPrivileges(delegate()
{
if (xmlInfo.ToString() != "")
{
string rootWebUrl = SPContext.Current.Site.RootWeb.Url.ToString();

XslCompiledTransform xslt = new XslCompiledTransform();
XmlDocument loadXsl = new XmlDocument();
XmlUrlResolver resolver = new XmlUrlResolver();
resolver.Credentials = System.Net.CredentialCache.DefaultNetworkCredentials;

XsltSettings xslt_settings = new XsltSettings();
xslt_settings.EnableScript = true;
xslt.Load(rootWebUrl + XSLT, xslt_settings, resolver);


XmlReader xreader = XmlReader.Create(new System.IO.StringReader(xmlInfo.ToString()));
System.Xml.XPath.XPathDocument pData = new System.Xml.XPath.XPathDocument(xreader);

xslt.Transform(pData, null, output);

}
});
} .......end with catch....


In VisualStudio, add a new module to your project - I called it XSLT and changed the Elements.xml file so it looks like this:

Than, add a new XSL file and call it ProjectInfo.xsl. Here is an example of how to display a field value called

ProjectManager in .xsl file:





NOTICE: DELETE ALL THE br TAGS FROM THE CODE