jQuery

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

Posted by

0

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.

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

Posted by

0

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 “;”.

Useful SharePoint dlls

Posted by

2

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

Posted by

0

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.