$(#SharePoint).jQuery(); pt. 2

Pt. 1 Fixing Multi-Choice Column
Pt. 2 Changing Grouped By Views

Pt. 2 Changing Grouped By Views

Another frequent UI correction is to remove the column title in Grouped By views. By default, the Grouped By view will group items together that share a field value. If you have several items, each with a field called Category and a field value of Category 1, those items will be grouped together.

The below items have two fields: Title and Category and are Grouped By Category. So all items with Category 1 are grouped together, all items with Category 2 are grouped together, etc. The goal here is to remove the word “Category” in each grouped section of the Grouped By View, leaving only “Category 1”, instead of “Category: Category 1”.

groupedBy_no_category

Before

groupedBy_category

After

 

 

 

 

 

 

 

 

 

 

 

Like last time, jQuery makes this very simple:

removeGroupedByText

The above function accepts a string to remove and iterates through the each grouped section and removes the text in textToRemove. This text should match the text you want to remove exactly, in the above example textToRemove should be set to “Category” to remove the text Category from the Before screenshot above and produce the After screenshot.

It’s also worth noting that list views allow two levels of grouped sections.

groupedBy_second

Before

groupedBy_second_removed

After

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

removedGroupedByTextSecondLevel

Like the first function this can remove the SecondCategory text. Notice the difference in selectors. Again the text should match exactly the text that you want to remove, in the above Before screenshot the text should be “SecondCategory” to produce the After screenshot.

Credit goes to this thread on stack exchange where I was given the answer.

Advertisements

$(#SharePoint).jQuery(); pt. 1

Pt. 1 Fixing Multi-Choice Column
Pt. 2 Changing Grouped By Views

Pt. 1 Fixing Multi-Choice Column

We use jQuery across SharePoint to make a lot of UI and UX corrections. One of our most common UI corrections is for displaying choice column values in lists views that are multi-select. If you have list with a choice column and allow users to multi-select more than one option it will get displayed in the list view as: [choice1],[choice2]:

before

This is great for parsing data but our end users hate it and I agree that from an end user standpoint you’re expecting to see choice1 and choice 2 horizontally displayed without the “,” delimiter.

There is a simple solution for this:

As I mention this is easy to parse, so knowing the column number of the list view and the delimiter for display, we can iterate through the list view and replace the html with the choices delimited by a <br> tag. This will display the choices horizontally as our users expect and can be abstracted into a global javascript function that can be called across your site collection.

jQuery_delim

Here, we need to know the column number and in the above the choice is the fourth cell in each row of the table or the fourth column. (The check and ellipsis are cells or columns of their own). The delimiter in this case is a “,” , so we want to find all instances of the “,” in the html. If you include a string “,” here it will only match the first instance. The regular expression /,/g will find all matches. Finally we want to replace with a <br> tag and push each choice to the next line. Knowing that we iterate through each tr and find the column number and get the html. Then we replace all instances of the delimiter with the <br> tag and finally set the html to our new variable to get the below:

after

This is best abstracted and called as a global function whenever you need it. Also note that other columns types will delimit by other delimiters like “;”.

SharePoint 2013 drag and drop feature

One of the most useful features of SharePoint 2013 is the ability to drag and drop documents or entire directories into Document lists.
drag_and_drop_library

I’d noticed that this wasn’t working consistently for all of our users and after some looking, there is a plethora of blog posts and explanations for this–so, I’ll add one more to it.

The drag and drop feature requires an IE version 10 or greater OR Office 2013. Our current standards for our users were IE9 and Office 2010, so of course they weren’t seeing it. I’m running IE10 and have both Office 2010 and Office 2013 installed for development purposes, which satisfies the requirements for it’s use. Importantly, this doesn’t mean that it’s impossible for users with IE9 or lower or Office 2010 to use it.

The simple solution is to install SharePoint Designer 2013 and choose Custom Installation. Deselect everything (including SharePoint Designer) except Office Tools. This will install the correct Active-X control and allow the drag and drop functionality to work.

installation

Useful SharePoint dlls

SharePoint has some great features like exporting list views to Excel or connecting Calendar events to your Outlook calendar. However, this might not always be easy for end users or users might not be willing to use the Ribbon menu to access these features (as in my case). Thankfully using REST, a little JavaScript can put this functionality directly onto a regular page as links to export to Excel or add an event to your Outlook calendar.

Exporting to Excel
In my first example, we had users who were rolling up list data onto a reporting page. From this page they wanted to export a different view of the list that we had set up for them. That, however, required them to navigate to the list and use the export to Excel button in the Ribbon menu:

export

On the reporting page, I added an Excel button with with a class Caption. With a line of JavaScript this can be set to the correct url:

var href = “http:// [sharepoint] / [site] /_vti_bin/owssvr.dll?CS=109&Using=_layouts/query.iqy&List=[List Guid]&View=[View Guid]&CacheControl=1”
$(“.Caption a”).prop(“href”, href);

This will give you a button to export whatever view of the list you would like to Excel:

export_button

As much as, I’d like to take credit for this discovery, check this link below for the thread and this link to another blog with that solution.

Add to Outlook Calendar
In my second example. we created a SharePoint calendar for users to manage events. A workflow sends them an email with the link to the event when they change the category of an event indicating that this is an event they will be attending.

Like the first example. this is also pretty simple. We created a calculated column with the value of the link below:
http:// [sharepoint] / [site] / [list] /_vti_bin/owssvr.dll?CS=109&Cmd=Display&List=[List Guid]&CacheControl=1&ID=&Using=event.ics

Notice the event.ics at the end which give us an ics file to create an Outlook calender event. This can then be included in the workflow email and will give them a link like the below:
outlook_calendar

jQuery UI YouTube videos

We had a request to support videos on our public website. What they wanted was a list of videos (buttons, a title and description) and to have the video open in a modal pop up to play, graying out the background and focusing on the video. Easy enough.

With some simple jQuery and HTML this works pretty well. It does require both jQuery and jQuery UI.

HTML:

diversity_inclusiveness

The above uses a table to layout each video and its description and image in a row. This creates an image (play button), the iframe with the YouTube video, and the description of the video.

The important elements in the HTML above are the class name “videoRow” of the tr, the first td with the class “videoButton” which contains an a tag with the class “pre’ and a div with the class “video” that contains the iframe and YouTube video. The second td with the class “description” contains the text description.

JQUERY:

diversity_inclusivness_jquery

The jQuery is pretty simple too.

jquery_1

For each a tag with class ‘pre’, the image becomes a UI button.

jquery_2

When a button is clicked, we first need to prevent the default behavior of a link click. If you look in the html above, href=”#” which could change the focus and scroll to the top of the page when clicked. e.preventDefault() will prevent this.

Secondly, we capture the button the video was attached to as a variable called buttonToAppendTo, this will be important later. The second variable is called videoToAttach and is a clone of the video element next to the button .

jquery_3

Still within the click function, we can then use the UI modal dialog to create a pop up window. The height and width are set to the height and width of the iframe and we set it to open at the center of the screen and create a lightbox effect.

On open a function is called that sets the css property of the video overflow to hidden. On close, the variables from before are used. If the modal dialog is closed, the video is still on the page and may still be playing. To avoid this it can be removed completly which will get rid of the element and stop it from playing. videoToAttach is the cloned video and can be inserted after the buttonToAppendTo. This will close out the video, stop it from playing, and allow the same button to be clicked and open the video again.

Add new Item prompt in SharePoint List

In a SharePoint list after clicking on the “Add new item” button, users will be taken to a form, fill out information and click save. At this point the form closes and the user can see the new item in their list. But what about when users want to add several items at once without clicking “Add new item” each time?

Luckily, there is the PreSaveAction() function that can be used to perform certain actions before the item is saved to the list:

preSaveAction

Thanks to a little hunting and this stack overflow post, I was able to learn that PreSaveAction() allows the user to override the default save button click behavior. In my example, I wanted to prompt the user to create another item or close the form. This can be accomplished with a simple javascript alert, as seen above in my defined PreSaveAction() function. What I’m doing is getting the current form url and saving it to a variable called current URL.

First, CurrentURL will look something like this: http:// [SharePoint ]/ [site] / [list] /newForm.aspx.

Secondly, I am saving the source parameter (where I want to redirect to — this form to add another item), in a variable called redirect. redirect will look something like this: ?Source=http://[SharePoint]/[site]/[list]/newForm.aspx. Keep in mind that appending the ?Source parameter to a SharePoint URL will control where the user is redirect after saving an item. In my case I can redirect them back to the newForm after saving an item.

Third, on the save button click, I call my PreSaveAction() function, which prompts the user to create another item, if they say no, the item is saved and the window is closed. If they say yes, window.location.search is set to the redirect variable. window.location.search returns the querystring which is exactly the part I want to set. This will then save the item and then redirect the user to the newForm where they can submit another item.

Format Date

One of the things I find myself looking up frequently is Date Values for SharePoint. When creating custom display forms, you typically end up with date and time values that look something like this: 2013-07-24T21:00:00Z. This isn’t really a useful value (to an end user). To change it to something more readable open designer and the disp form:

Find the date field:

My Start Time field looks like this in the form:
date_field
The corresponding code in designer:
date_field_code
The xsl:value of tag contains the information to modify. The select attribute is equal to the EventDate value, which is the Start Time. To make a more readable value, it can be changed to:
date_field_code_changed
The ddwrt namespace must be included to use a function like FormatDate. FormatDate, like the name implies, will change the formatting shown above to something useful or readable to an end user. Explanation of the parameters taken from the msdn page:
“The parameter szDate is converted to a DateTime. Based on the formatFlag parameter, which can have a value 0–15, a new DateTime string is constructed in the given locale lcid. Table 5 shows the results returned from this function.”
The above code will result in the below; a nicely formatted date for end users:
date_field_changed
Check the msdn article for a list of formats.