Add a clickable, “friendly” title to your Sharepoint Online 2013 documents – AND open them in the browser!

17_6_21_weird_file_names_revision_3.docx -SAY WHAT??

Let’s face it, file names are often not pretty. The underscores, hyphens  and other meta data elements in company naming conventions along with individual quirks and naming habits, can lead to some pretty unfriendly looking links in your document libraries.  You’d think the creators of Office would know better, but Microsoft doesn’t provide a simple way to replace those odd looking links with more descriptive text that would help end users find the files they need.

Rendering html in a calculated field – RIP 6/13/17

The easiest solution was always to use the trusty calculated field to replace the file name with something else that humans might understand. But since Microsoft announced on June 13th they removed the ability to render calculated fields as html (on June 13th  – supposedly to terminate this 10 year old “security risk”  – nice!) – come September (if you got the extension) this will no longer be an option.

Jslink saves the day

Fortunately for now at least, we have jslink – which allows you to rewrite how a web part is rendered. You can google up many expert tutorials on how to use jslink – I’m just concerned here with the specific syntax needed to replace a file name with user friendly text.

To start, add a single line text field to your library to contain the text you want to use, naming it something really original, for example: “Title”.  Overwrite the “Item” ctx element with the following:

overrideCtx.Templates.Item = CustomItem;
function CustomItem(ctx) {
// Build a list item entry for every item in the list.
var ret = “<div class=’link’><a href='<domain/library>” + ctx.CurrentItem.FileLeafRef + “‘>” + ctx.CurrentItem.Title +  “</a> </div>”;
return ret;
}

In this example, “ctx.CurrentItem.FileLeafRef” provides the file name and “ctx.CurrentItem.Title” provides your user friendly title.

Add “open in browser” functionality

The only issue with this approach is it will force users to download the file, and won’t open it in the browser, regardless of the settings you’ve configured for the library (another piece of Microsoft brilliance!)

If you want users to be able to open files in the browser, you’ll need to include one of the url query parameters that enforce that behavior in your script. I found this link format works best:

<domain/library>/_layouts/15/WopiFrame.aspx?sourcedoc=%7B<item guid here>

To derive the internal field name for the item guid, I turned to this handy list of internal field names and found it was “UniqueId”.

So now to display a user friendly file name AND open files in the browser, update the jslink script to:

overrideCtx.Templates.Item = CustomItem;
function CustomItem(ctx) {
// Build a list item entry for every item in the list.
var ret = “<div class=’link’><a href='<domain/library>/_layouts/15/WopiFrame.aspx?sourcedoc=” + ctx.CurrentItem.UniqueId + “‘>” + ctx.CurrentItem.Title + “</a> </div>”;
return ret;
}

 

More fields, no problem

Follow the same syntax above to add any number of other fields to your list view – just make sure they’re included in the view you’re using. And that’s how you turn “17_6_21_weird_file_names_revision_3.docxinto “Weird File Names June 2017”

 

 

 

Create A Better Slider For Office 365 Sharepoint Online 2013 Sites

unsliderYour choices are limited if you’re looking for an attractive slider or slideshow for your Office 365 public site. There is a slideshow web part you can use, but it’s not very attractive and has limited settings. The Bright Banner app from the Sharepoint store is the only 3rd party app that works with anonymous sites and is the easiest option to deploy.But if you want something that combines a modern look and ease of use – something that promotes your content by for example allowing you to overlay text on a background image while still using images in a Sharepoint list, you may want to consider the jQuery “unslider”. It uses jQuery to run the slider and the clever SPServices to pull content from a list. Here’s a demo that shows how text and images can be combined:

http://365.webbrewers.com/SitePages/home.aspx

Mark Rackley came up with the idea of combining the unslider script with SPServices, so this is just a recap of that idea in the context of a Sharepoint Online 2013 public site – with a few bonus tricks of my own – like adding multiple sliders and a filter to select which slides are displayed. It’s ideal if you want to be able to display different messages and quickly edit them without having to create a whole new slide.

The basic steps to install it are:

Create a list to store the slides
Upload the necessary files
Add a content editor web part to a page

Create A List

Use “add an app” to add a custom list called “Slider”
Create 2 fields in the list:
A rich text field called “HTML” (which lets you format the text that overlays the image – there must be some content in this field!)
A hyperlink/picture field called “Picture” and set to the picture setting.
You can upload some test content at this point if you like

 

Admin view of list using “newsletter” style display

Upload Files

This is easiest done using Sharepoint Designer but you can also use the browser tools
Download the unslider script from here » and upload/import it to your site’s Site Assets library
Download the slider script from here » and either upload it to Site assets, or just copy/paste the code into a new js file in Sharepoint Designer.
This file contains all the needed references to external jQuery and SPServices files.

Note that the slider.js file also contains some basic css styling, so that’s where you’d make changes (if you know what you’re doing).

Deployment

Open a page for editing

At the spot you want the slider to appear, insert a content editor web part
Click “add content” and in the web part properties box, add this link in the “content link” box:
/SiteAssets/slider.js

cewp-unslider

Usage

You’ll get the best results if you use images having the same dimensions. Remember, the image is set as a background with the HTML field text overlaying it so you can play around with the positioning of the image and the formatting of the text. In my example, I used a small image pushed to the right and styled up some large text messages in the HTML field. As you can see, you can also add “read more” buttons to the html field.

If you don’t see the slider when you reopen the page, go back to the list and add a few blank lines or some content to the HTML field. That field sets the slider’s height so it can’t be empty!

Advanced – Multiple Sliders
As is, the installed scripts reference one list, so you can only display one slider. You will need to make a few adjustments if you want multiple sliders.
Create a new list as above only name it say “Slider2”
Copy the contents of the slider.js file over to a new file named “slider2.js” (again much easier to edit it directly in SPD)
Look for this line: var sliderList = “Slider”; // Name of the list that contains slides
Change “Slider” to “Slider2”.
In the content editor web part, link to the new slider2.js file.

That’s it!
Advanced – Configuring Slider Options
If you want to change the slider settings like speed,

datasheet-slider

Add A Site Description To Office 365 Sharepoint Online 2013 Public Sites

Yep – removing the site description was another of those 2013 public site “upgrades”…. Has MSFT ever heard of SEO?? The 2010 asp placeholder for this element doesn’t work in 2013 sites, and there probably isn’t a predefined one, so if you want to add a site description below your site title, you’ll have to hard code it in manually.For that we’ll need to:Open the site in Sharepoint Designer (2010 or 2013).
Open All Files » _catalogs » masterpage and open the html file that’s linked to the master page you’re using (eg oslo.html)
Hunt down this element: h1 id=”pageTitle” class=”ms-core-pageTitle”

031514_2232_addasitedes1

AFTER its closing h1 tag, add the tag and description you want to use eg:

h2 My site description /h2

TIP: If you want to be able to style the description (and who wouldn’t?), add a class eg h2 class=”desc”
h2 class=”desc”>…….
Save the file
To publish it, go to site settings » galleries » master page and layouts and click “publish a major version” from the context menu.
The Result:

031514_2232_addasitedes2

Now you can both let site visitors know what your site is about AND make it a little more relevant and appealing to search engines. If you have any questions, please ask them in my forum »

Create An FAQ Page For Your Office 365 Sharepoint 2013 Site – No Code Needed!

051414_1357_createanfaq1A popular feature of web pages is the use of “named anchors” – which comprise a special type of url that takes a user to a specific section of a page, and an “anchor” that identifies that location. This requires adding a hash tag and the “name” to a url (#gohere) and placing a special link tag at the location.Most often used for FAQ sections, this technique is also seen in a wiki’s in-page table of contents and in any kind of navigation that makes finding content on a page easier. One way to achieve this effect in an O365 site, is to add the anchor code using the script editor web part. Butyou have to know the code to use and it can leave you with a confusing array of web parts cluttering your page when you edit.An easier way to do it without having to know any code, is to use the built in “Bookmarks” tool which is available in the ribbon’s link tools. All you have to do is add a “trigger” link the user will click, and a bookmark link located before the destination content. This will work in Small Business or Enterprise accounts and on public or private sites.
Here’s an example: http://365new.webbrewers.com/Pages/wiki.aspx
Trigger Link
Open a page for editing
Insert your text and click the link tool under the insert tab
Select “address” and in the url box, simply add a hash tag and the name of your anchor. It can be anything but can only be used once per page: “#topic1” (Don’t include the quotes!)
Save the page

021614_2312_createanfaq1

Destination “Anchor Link”/ Bookmark
Now you have a link on the page that points at a location, in this case: “/mypage.aspx#1”. The next step is to give that link a target on the page by adding a bookmark.

Highlight the title/heading of the content you want to link TO.
Click the link tool under the insert tab and select address
You have to make the text a link before you can add a bookmark, so enter a hash tag in the url box (which you’ll remove in the next step)
Click anywhere in the link that’s now on the page and open the “Link” tab.
Add the name you chose in the first step to the bookmark box (NAME ONLY – DON’T INCLUDE THE HASH TAG!).
Delete whatever is in the url box.
Save and publish the page.

021614_2348_createanfaq1

Repeat the whole process as many times as you need – making sure you save after each bookmark is added. And if you want to also add a “back to top” link below each content section, reverse the process. Put the trigger link after one section, copy and paste it after all the other sections and add the bookmark link to the top of the page.
Better Looking Links
Finally, if you want to add a little style to your links try using the “summary links web part” for your trigger links. It creates a neat, unordered list and offers a few styling and grouping options. You can also export it and use it as a template to add anchor links to other pages.

Questions?
Please visit my forum »

Adding A Dropdown Filter To Improve List Navigation In Office 365 Sharepoint Online 2010 & 2013

Sharepoint lists/libraries include various filtering options to help users find what they’re looking for. But the built in, “Excel” like filters and the default form filter web parts aren’t very intuitive or convenient. A drop down menu of options would be more user friendly, and it’s doable by customizing the simple html form filter.
021214_1430_addingadrop1
The Steps:
Add a filterable meta data column to a list.
Insert the form code needed for the drop down menu.
Connect the form filter to the list.
Here are some examples:
2010: http://365.webbrewers.com/SitePages/Eng%20Capstone%20Test.aspx
2013: http://365new.webbrewers.com/Site%20Pages/Text%20filter.aspx
Prepare the List
If your list/library doesn’t already have it, you’ll need to add the column you want to filter on
You can use “category” or any other meaningful meta data term
Open the list settings and create the column, and ensure it’s included in the view you will use
Prepare the Page
On any public or private site page, insert the list view web part
Choose the location you want, and insert an “HTML Form Filter Web Part”
Add The Code

021114_2250_addingadrop1

Open the form filter web part properties
Click “Source Editor” and add your form code in the dialog box
You can use any code but the lines in red below are REQUIRED for the form to work.
Also the option values MUST MATCH the values defined in your meta data column in the previous step.
The optional last line is a trick to clear any filters by refreshing the page.
Sample code (tags removed):

div onkeydown=”javascript:if (event.keyCode == 13) _SFSUBMIT_”
select name=”Media”
option value=”Painting” selected=”selected”Painting/option
option value=”Drawing”Drawing/option
option value=”Print”Print/option
option value=”Charcoal”Charcoal/option
option value=” “*Reset All*/option/select
input type=”button” value=”Go” onclick=”javascript:_SFSUBMIT_”/
/div
a href=”http://365new.webbrewers.com/Site%20Pages/Text%20filter.aspx” Clear All filters!/a


Clear All filters!
Connect The “Dots”!
Next you have to pass the selected value to the list and execute the filtering
Click the down arrow for the filter web part to open a context menu
Click “connections” and select “provide form values to” – when your list name appears, select it.

021114_2250_addingadrop2

If you see a warning about “prevent opening new dialog boxes…” just click cancel.
In the dialog box that opens, there are 2 options:

021114_2248_addingadrop3

1. Choose connection: select “get filter values from” and click the “configure” button

021114_2248_addingadrop4

2. Configure connection: “provider field name” would be the field you defined in the code above (“media” in that example).
The “Consumer field name” presents a drop down of all the list’s fields so select the meta data column you want to filter on.
The value selected will be what gets used to filter the list.
Click “Finish” and the connection is set.
Adding Multiple Filters
To further fine tune the filtering you can add more form filters connected to different columns, allowing the selection of quite specific results. In this example, for instance, filtering is done on “Institution, “Discipline” and ….any other parameter.
Questions?
Please visit our forum »

Office 365 Public Site Video Pop Ups

The problem.
090413_0203_office365pu1You’d expect the “embed code” tool to allow you to add a simple javascript pop up code to a public site page so you can have a video or other content pop up on demand. But it doesn’t and should really be renamed the “embed some code” tool. Anything other than the simplest html gets filtered out so javascripts won’t execute.
The obvious answer is to wrap the javascript in

/form> …. code here….. form>

tags which disables the filters that strip code. This effectively “closes” the opening page form tag and defeats whatever MSFT has added to eliminate certain code tags – but it only works in competent browsers like Firefox. Unfortunately people still use IE and if you do use that method, you’ll find that IE drops the last
tag which breaks the whole page.
Because I like finding ways to do things MSFT says I can’t, I fiddled with this and found an (admittedly) clumsy workaround. Basically you put the video embed code in one file, call that file with the javascript code in another file and then iframe that file on your page…..like this:
Paste your video embed code in notepad, save as an aspx file and upload to the site assets library (or create the file directly in Sharepoint Designer).
Paste the javascript pop up code calling the first aspx file in notepad and upload that aspx file to site assets.
Insert an embed code snippet on your public page iframing the 2nd aspx file
When the link is clicked, the javascript executes and opens up the first file containing the video in a pop up. The script is enclosed in an iframe so is unaffected by the MSFT page filters that would normally strip it out.
The code.
Aspx file 1: embed code from video source
Aspx file 2: Javascript pop up code
a href=” YOURFILE1URLHERE “>Click here to see video /a>
Embed code on page:
The result.
Try this example page in Firefox or IE to see it in action.

Questions?

Visit my forum » if you have any questions. For development work, you can contact me here ». And if you think this would be useful to others, feel free to share it by clicking one of the share buttons up top!

Add a WORKING Paypal button to a 2013 365 public site

101313_1928_addaworking1It’s well known that Paypal buttons don’t work on 2013 public sites. A basic html rule doesn’t allow forms to be nested so you can’t add the required PP form tag within the aspnetForm page tag. If you wrap the PP code in
/form> …. your code here…. form>

tags they will work in Firefox/Chrome but not in IE.Oy vay! So here’s yet another “no code” workaround or 2 to compensate for the sloppy coding behind the public site editor.
Method 1: Buy Now Buttons.
If you only need a Buy Now (or simple Add To Cart) button you can use the email link Paypal provides.
Create your button at Paypal
In the last step, click the email tab and copy the link
Add some text or an image to a site page. You can grab the Paypal image url from another button.
Highlight the text/image and insert a link
Select “from address” and paste in the PP link copied earlier.
There’s an example at the top of this page »

Method 2: Add To Cart And Buttons With Options

First, paste your Paypal code into notepad (as many button codes as you need).
Save the file as an .aspx file
Upload it to the SITE ASSETS library in the public site (TIP:or create file directly in Sharepoint Designer).
Insert a Page Viewer web part on your page
Open the page viewer’s web part properties
Enter the url of your uploaded file as the target link

101313_1928_addaworking2The page viewer web part includes a space for the title even if you leave the title box blank. If you want to eliminate the “gap”, simply open the web part properties box and select “none” under appearance » chrome type.
You can see examples of this procedure here »
Why do I have to use a page viewer web part?
The page viewer wp iframes the paypal aspx “page” on your public site page. The iframe isolates the paypal code from the form tags that wrap all content on the public site page and allows it to work correctly.
Questions?
This issue existed in Office Live Small Business and it’s bizarre that such a simple thing to fix hasn’t been addressed in O365. I can’t explain that, but if you have any questions about this workaround, please ask them in my forum ». For development work, you can contact me here ». Click a social button up top to share this post if you found it useful!

Adding video to a Sharepoint Online blog post (SharePoint 2010)

wmpWhen you create a new blog site in SPO, the default blog post promises it will: “….help you share information related to a particular subject area in the form of text, images, links, and other media such as video”. Unfortunately, Sharepoint strips out any embed tags like iframe or object from any list, so video can’t be directly added to a post – which is actually a list item in a standard list.This article will show you how to workaround that restriction and insert any embedded content into any list – in 3 easy steps.

Add an empty div to a post (or rich text field in any list).
Insert a content editor web part linked to a file
Create a file with a little javascript that injects your embed code into the empty div in the list
By locating the embed code outside the list, the “illegal” embed tags are rendered after the list and aren’t detected by the list filters. Javascript insertsyour embedded content inside the blog post wherever you inserted the empty div. And, yes, you’ll finally be able to add video content – beloved by search engines everywhere – to your blog. (I’m using a blog as an example here, but this can be adapted to insert any kind of coding into a rich text field in any type of list).
What you’ll end up with is a really easy way to manage embedded content. By simply adding or adjusting the embed code in one “central” text file, you can add a new video, change dimensions, change videos, insert a powerpoint slideshow etc. And since this technique only uses standard web parts and javascript, it should work the same no matter which version of Sharepoint you’re using – 2010 or 2013.

Here’s how:
Since we’re talking about adding a video to a Sharepoint list, here’s an example – an embedded video that will show you how to do just that. Text instructions and the code snippets needed come after the video!

untitled2

1/ Insert an empty div
Open the post for editing and click the “edit html source” button. Add an empty div where you want the video to appear.
Give it an id you will use later in the javascript: in this example –

div id=”test”></div

untitled2

2/ Add a content editor web part
All the posts use the post.aspx page so to open it for editing enter //Lists/Posts/Post.aspx?ToolPaneView=2&PageView=shared
Click “add a web part”, select a content editor web part and then click “edit web part”
In the properties box, enter /Documents/test.txt in the “content link” pane
The code MUST be rendered after the empty div so select the right zone under “layout” to make sure it is.
Select “None” for the chrome type so a web part title doesn’t show in your blog.
Save the web part and the page

3/ The code
You can either create a text file with the code below and upload it to the Documents library, or even easier create it right in Sharepoint Designer. Just make sure the id (in this example: “test”) corresponds to the id of the div you added to the list in the first step.
Open the site in SPD – navigate to the Documents library – click the new file tool and select text file – change the file name* – paste in the code below.
*The only requirement for the file name is that its url correspond to what you entered in the content editor.

Video inserted in post–>
script type=”text/javascript”>
vartest=document.getElementById(“test”);if(document.getElementById(“test”)){document.getElementById(“test”).innerHTML=’YOUR EMBED CODE GOES HERE-YOU CAN PASTE IT FROM YOU TUBE OR OTHER HOST’} /script>

Once you save the file, the content editor will run the code and bypass Sharepoint’s restriction on embedded content.

Multiple videos on a page
Since all posts use the posts.aspx page and the text file is already being referenced, you can add more instances of the inner html javascript to the text file. Each instance must have a unique div id which must be referenced in the file. In other words, you can add an empty div with an id of “test2” to the same or another post, and repeat the javascript in your file using “test2” in place of “test”.
One more trick: once you’ve inserted the content editor web part on one page, you can save it in your web part gallery and make it available for use on other sites or pages. To do that, select the web part in Sharepoint Designer. Click “Web Part Tools – Format” in the ribbon. Click “To Site Gallery” under the “Save Web Part” section. To add it to another page or site, select where you want it in design view (in SPD), open the web part tool and insert it.