Archive

Archive for the ‘CEWP’ Category

The SPXSLT Project And How To Turn Announcements Into Marquee

June 11th, 2011 Abed Khooli 2 comments

Like several other posts, this one was inspired by a comment on my earlier post (Horizontal News Ticker Using SharePoint 2010 CQWP) and a question on SharePoint Forums about limiting the number of characters in the summary view of an announcements list. Usually the announcements Body field is rich text and if you try substring($thisNode/@Body,1,n) where n is the number of characters to display, you will end up with an html tag that may not get closed within the character limit. So, you need to strip the html tags first and this functionality is not available in SharePoint Designer.
Luckily, Marc Anderson, who maintains the SPXSLT project at Codeplex, had a ready xsl template which limits the Body to the first n words, which is even better. You should check Marc’s work and the SPXSLT project as it could save you plenty of time.
In a dataview web part, you can customize one item or the entire view (which could easily inject several hundred lines of XSL when you switch to code view). This is usually the same xsl that serves several types of lists. Sometimes, you only need a few lines to get your data in the rights format. Marc’s template is under 80 lines (including empty lines) and does even more than the standard one.
What you do (and this is for lists of type announcements) is to open the page that has the web part in SharePoint Designer, have the web part selected and from List View Tools (ribbon), Design tab, Customize XSLT (customize Entire View – click the drop down arrow to get there). Switch to code view and the block of code should be selected. Select the portion of code between and (several hundred lines) and delete it. You will use your own instead. You could use the one from Marc’s post as is, but here, we will do something different. The actual announcements view is rendered as table cells and we would like to make use of the liScroll Jquery plugin and turn our announcements linked titles into a news ticker or marquee.
In this case, we don’t need the html manipulation or even the word count. I based my template on Marc’s but removed all table related markup, used and kept the Title field only. I also gave the

    element the class name dfwp-list for no specific reason other than matching the class used by the CQWP (so earlier instructions work without modification). The rest is the same as outlined in the Horizontal News Ticker post.
    Note: The @FileRef will not actually link to the item display form (this is how it reads in the original). To fix it, try to view one item from a standard announcements list and code the url accordingly. It should be something like: http://current-web-address/_layouts/listform.aspx?PageType=4&ListId=list-GUID&ID={@ID}&ContentTypeID=0x010400B0AC1F599DF7584FA331A0991AB8E6ED
    You need to enter your own values for current web address and list-guid (without the braces!)
    One more note: if you add your announcements as a dataform instead of xsltview, you can use the design group (dataview tools) and select a bullet list. In this case, you can link titles to the display form directly from the UI.

Categories: CEWP, DataView, Lists, SharePoint Designer 2010 Tags: , XSLT

Display A Thank You Page After A Survey Is Filled

June 6th, 2011 Abed Khooli 3 comments

The survey list did not get much of a facelift since 2007. In fact, it still uses the old list settings interface as opposed to ribbon enabled lists. After the user submits (or completes) the survey, s/he is sent to the default page which is usually the summary results. People have used the source=encoded url parameter in the address to redirect users to a certain url after the survey is completed. So, instead of leaving things at default, you could add that parameter to the url of the NewForm.aspx and may be have this as a link for users to click on instead of the typical Respond To This Survey link (ex. from an e-mail message or even an announcements list). Of course, it is easy to adjust the url and remove the ?source=url(encoded). The other issue is if a survey has page breaks. After the first page is filled, the next page will have a different url: EditForm.aspx and stays so till the survey is finished. These and other reporting issues (you get an extra quasi-question called Content Type in the graphical view!)  may convince you to either seek third party tools or use InfoPath if enabled (or supported) in your farm.
There is a work-around for the additional content type question (using JQuery). Here, I will also use JQuery to display a thank you page after the survey is completed – for the sake of enhanced user experience.
You can add your thank you page as html or aspx or even a web part page. Let’s say we have a nice paragraph praising the user for their input and a link to the home of the current site (with target=_top to break out of the dialog, even if this is not XHTML compliant). You would edit the NewForm if your survey is one page but here we will deal with a survey that has page breaks, so we edit the EditForm.aspx and add a CEWP. Could not edit the source, so linked the .js file (uploaded to a library) from the web part properties.
What do we write in that file? If you inspect the Finish button, you will find it has an OnClick event that posts back after a validation check. We take the id of this button and in our js file we unbind the click event and bind a modified version of it.

Substitute your id and your page url, replace nice quotes with plain text ones (if you are copying). Now you have your custom thank you page. Notice I am using the latest jq library (not a must) and no need to link from the Internet – you can put it in a document library and link it from there.

Horizontal News Ticker Using SharePoint 2010 CQWP

May 15th, 2011 Abed Khooli 21 comments

This post was triggered by a SharePoint forums post on creating a scroller or marquee. There are ready web parts (commercial) that provide this functionality, of course, but can we do it using the web browser alone?
Well, SharePoint has a content query web part (CQWP) that can be utilized to extract data from lists and libraries across the whole site collection and it presents entries in a standard html list format (

  • …). There is a JQuery plugin that converts this structure into a news ticker (see the liScroll website for details and download). Notice that JQuery can also use a class to identify the
      element as described on the liScroll site and one of the classes used by CQWP is dfwp-list. The steps are simple: add your own CQWP to a page (in this example, I used Blog Posts) and set it up as titles only. Add a content editor web part (CEWP) above the CQWP and edit its source. Add the JQuery library (used 1.6 in this example, make sure your master pages does not reference one already), then add liScroll plugin and its associated style sheet. Here, I ctually uploaded the three of them to a document library and referenced them from there (a must if your site is not connected to the Internet). Then, add the short script that does the scrolling. You can hide the CEWP (set chrome type to none) and also configure the CQWP (ex. give it a better title).
      Notice that you can control the scrolling speed by providing a “travelocity” parameter as explained on the liScroll website. You can also modify the CSS to change the interface.

Categories: CEWP, CQWP, SharePoint Server 2010 Tags: Marquee, News scroller,

Control the width of a drop down list in a SharePoint New or Edit form

April 12th, 2011 Abed Khooli No comments

If you have a lookup field in one list and the display field (ex. title) is long, chances are the title is truncated and only the first part is visible.
You can fix this without using SPD or InfoPath by utilizing the content editor web part (CEWP). Each element on the form has its own style and its own ID or class as rendered in the browser. You can use the Developer Tools in MSIE or FireBug in FireFox to find out the ID of the drop down control, then add a CEWP to the Edit and New forms of the list.
On the list tab, in the Customize list group, use the Form Web Parts and add a CEWP to the default edit and new forms. Edit the CEWP html source and add a style specifying the ID you got from developer tools or Firebug and set width to 100% for full width. Save the page and try it. You can even maximize the Silverlight window if the text is very long.
customize list