Wrap text around a web part in Office 365 Sharepoint 2013

By default web parts fill the entire zone making it difficult to control your page layouts. One way to position other content next to a web part is to add a css float to the web part. To do that:
Insert your web part on the page
Click the web part to select it and click “Edit Html Source” in the ribbon.
Add a class to the first div in the highlighted section – something like “class=”floatleft” …..

060414_1436_wraptextaro1

 

Right after the end of the highlighted web part bit, paste in your text and save the page
Open the style sheet under “Site” in the ribbon
Add the following rule: .floatleft{float:left;}
Optionally add a margin to separate the elements: .floatleft{float:left;margin-right:20px;}
Save the stylesheet.

Clear The Float.
When you use a float, all subsequent content that can fit in the available space will be moved next to the floated object. If you want to end the float at a certain point and resume the normal flow of the page, add this:

060414_1432_wraptextaro2

Here’s an example of the effect:
http://365new.webbrewers.com/home/protected-page

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 »

Add Multiple Contact Us Forms To The Office 365 2013 Public Site

111213_0010_addmultiple1By default, only one contact us form is allowed on the public site. If you find this too limiting, here’s a way you can add as many as you like. The trick is to add them to sub sites under the public site. And yes, you CAN add public sub sites – just follow the below instructions:
1/ Create a public sub site

Open your public site in Sharepoint Designer
Click “sub sites” in the left nav and “new sub site” at the right of the ribbon.
Name the site and allow it to set up.
Go back to the browser, and open the site with the urldomain.com/yoursubsitenamehere.
By default, you should have a site pages library where you can create pages. Add content types (“web page” etc) as needed.

2/ Add the contact us app

Since the app is already loaded in the parent public site, all you have to do now is:
In the new sub site, click the cog at top right and “Add an app”
Under “Apps you can add”, select the contact us app.
“Trust” the app and give it a few moments to set up
Open your new sub site page and add the app from the ribbon

3/ Add the new contact form to your public site

Now you have a new form and submissions list, completely separate from the one on your “parent” public site. You can either place a link to the page with your new contact form in your parent site’s navigation, or add the form to a public site page. Since the contact forms are “sub sites” themselves, you can easily iframe JUST THE NEW FORM itself on a page using the page viewer web part, without also displaying other page elements :

First, copy the url of the new form. In Firefox, simply add it to a page on the sub site, right click it and open “view iframe info” and you’ll see the url (it’s absurdly long!).

get-iframedform-url

Getting the contact form url using Firefox
Open a public page on the parent site for editing.
Insert a page viewer web part.
Open the web part properties dialog and paste the form’s url in the url box.
Save the web part and publish the page.
Here are examples of 2 different forms on the same site:
Parent site form: http://365new.webbrewers.com/contact-us
Sub site form: http://365new.webbrewers.com/Pages/Contact-subsite.aspx

If using a sub site page and it doesn’t have the same look as the parent pages, take a look at this:

“Apply Sharepoint 2013 public site design to team site / web part pages”

4/ Accessing the submissions lists
The lists associated with the different forms are of course located in their respective sites. So if you want to add an alert to generate an email notification of new submissions or export the list, you have to open the parent or sub site, click “site contents” and then the contact us form tile.

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!

Calendar Creator Free List Template – Add A Simple Calendar To An Office 365 2013 Public Site

Share events and schedules with the world! This free list template will let you add a list and simple calendar web part to Sharepoint Online 2013 public web sites. See an example here »
Download here »

Compatibility And Limitations
The calendar will display current month view, links to previous and next months and any corresponding events in ANY O365 tenant public site.
The event items cannot be opened by anonymous viewers due to restrictions MSFT has imposed on public sites. However a tool tip will display event date and title when event is moused over.
Enterprise level tenants can enhance the calendar and make event details accessible by allowing anonymous access. To do that you will need to install this solution:
http://anonymous365.codeplex.com/ (The solution can’t be activated in Small Business accounts).

011614_0233_calendarcre1

Contents
SPO 2013 Calendar Creator.stp file | Readme.txt file
Installation
1/ Download zip file and extract
2/ Open “list template gallery” on desired site [If not in settings, use this url: yourdomain.com/_catalogs/lt/Forms/AllItems.aspx]
3/ Click “upload document” and navigate to the location the .stp file was saved in.
4/ Click the “cog” icon at top right of page and “Add An App”
5/ Locate “SPO 2013 Calendar Creator” and add to your site
Deployment
1/ Open your desired web site page for editing or create new
2/ Place cursor where you want calendar to appear
3/ Click the “insert” tab and the “App Part” icon
4/ Locate the SPO 2013 Calendar Creator app and click the “Add” button.
5/ If the standard list view appears, click edit web part and change it over to the “calendar” view.

6/ Save/publish the page

011514_2147_calendarcre2
Public view

Maintenance
1/ Click the cog at top right » site contents » locate the list and open
2/ To add an event: “items” tab » new item and fill in the form.
3/ To edit event: click the title in the calendar display and click “edit item” in the ribbon.
4/ Click the “list” tab and “list settings” to reconfigure columns, views etc.

011614_0254_calendarcre2
Admin interface

Alerts

Sharepoint calendars are just lists formatted with a complex view so can’t provide the same functionality as an Exchange calendar. Like any SP list you can set an alert based on a limited set of conditions, such as when an event is added or changed. More sophisticated functionality like setting up reminders would require some hefty customization, using workflows and probably code.
Support
The software includes no warranty but we’ll try to help if you post any problems at:http://365.webbrewers.com/Pages/Office365AnswersCommunityForum.aspx

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!

Using the RSS Feed Viewer Web Part To Show 365 Content On Another Site

If you want to show some content from one site collection on another, the RSS Feed Viewer Web Part is an easy way to overcome the restrictions MSFT has put in place. The only caveat is the source content must be hosted on the public side of your account. Feeds of internal content (team sites) will not work.In this example I’ll show you how easy it is to display a list of blog posts from one 365 site on a site in a completely different site collection. This is how it will look:
062413_1156_usingtherss1

 

Instructions:
Activate the rss feed in the list/library settings
Open the list and copy the rss feed url (click the rss icon to get it)
Open the page you want to display the list on
Insert an Rss Feed Viewer Web Part
In the web part properties, paste in the rss feed url

062313_0434_usingtherss2

That’s it! Now you can display 365 list/library content on any other site – even a site external to 365. You can see an example here»
One neat thing about the viewer web part is that when you click a list item title, an excerpt will open in a drop down with a “see more” link to the full content. A feed of a document library will show a selection of fields in the drop down-though I’m not sure how to control what shows. Users with appropriate permissions can also click through to find a link to open/download the document.
As you can see, my example is on a public site, which by default doesn’t include the RSS web part. No problem, you can either download it from your team site’s settings» web part gallery or from here».
Then, since access to the public site web part gallery is “hidden”, append /_catalogs/wp/Forms/AllItems.aspx to your domain and upload the web part.
Enjoy!

Get More Web Parts For The Office 365 Sharepoint Online Public Site

It’s great that you can add web parts to the public site – but in one of those pointless moves seemingly designed to needlessly frustrate users – MSFT decided to limit the web parts made available. So here’s how to overcome that restriction. I’ve used this technique to add a lot of different web parts to the public site – in this example I’m going to use the “Picture Library Slideshow Web Part” which was suggested by markgi_MSFT in the 365 forum.Export the web part.First you have to locate the web part. It’s probably going to be in your team site web part library:
Click the “cog” in the top right corner and navigate to Site settings»Web designer galleries»Web parts.
Locate MSPictureLibrarySlideshow.webpart and click it to download.
TIP: If you can’t find it, you can download it here: https://wb2-web.sharepoint.com/Docs/MSPictureLibrarySlideshow.webpart
Import the web part.
In another brilliant move, MSFT hid the public site web part gallery, so you’ll have to enter this url to open it: yourpublicsitedomain.com/_catalogs/wp/Forms/AllItems.aspx. Import the web part by navigating to where you saved it.
Now it should be available to add to a public page. Here’s an example:
http://365new.webbrewers.com/Pages/Slideshow-web-part.aspx Here’s how it should look:

062113_0205_getmorewebp1

Download Web Parts Here!
There are 72 web parts in a 2010 Enterprise account. If you can’t find a web part in your Small Business team site, open up a trial Enterprise account and you’ll find all 72!. You can drag and drop all of them over to your public site if you open the public and team site web part galleries in either windows explorer or Sharepoint Designer. Or you can download a couple of popular ones here:
Chart Web Part | RSS Feed Viewer Web Part
Picture Library Slideshow | Content Query Web Part