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. But you 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.

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


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.

Because SP Online is so poorly made, you may have to save the page and then go back in and delete the hash tag.


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.


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.
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:
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


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_”/
a href=”” 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.


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


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


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.
Please visit our forum »

Changing the Office 365 Logo In Sharepoint Online 2013 Sites

022014_0452_changingthe1To brand the top bar navigation with your own logo and hide the Office 365 one, add this to a site stylesheet:

.o365cs-nav-leftAlign {background:#000url(YOUR_LOGO_URL_HERE) 0 0 no-repeat !important;}.wf-o365-o365logo{display:none !important;}

Change the color to match the theme you’re using.

Change The Link
To change the link, add a div to your master page with the o365cs-nav-leftAlign class. Insert your desired link in the div. Then add a position to that class:

div.o365cs-nav-leftAlign {position:absolute;top:5px; background:#000url(YOUR_LOGO_URL_HERE) 0 0 no-repeat !important;}

Change Other Top Bar Links
Use the same technique to change links like the sites links, making the appropriate adjustments to account for the different location. If you want to simply hide or adjust the style of other links, use a browser inspector tool to identify the link’s id/class and then add css code to target it.
For example, to hide the “OneDrive” link, add this to a stylesheet:
#O365_MainLink_ShellDocuments{display:none !important;)