Category Archives: Content Editor Web Part

Design Manager and The Return of the Snazzy Looking 15 Minute Weather Web Part


You may also be interested in: fpweb.net


 

Editor’s note: Contributor Erik Abderhalden is a consultant with Rightpoint. Follow him @erikboderek

They say there’s only two seasons in Chicago: construction and winter. Thankfully most of the major highway and tolls are construction free now (sans I-90 west of 290), and winter is a while away. Or is it? Chicago weather is downright bizarre. How do you keep tabs on what it’s like outside? 15 minute weather web part to the rescue!

What I love about the 15 minute weather web part is how easy it is to style. Unlike other weather web parts, you can really get into this one and style it however you want. In my initial post this would just be another ol’ web part sitting pretty in a zone. What if I’m too cool for zones? OK Fonzie, chill. We can create the weather web part as a snippet and place it anywhere we want and style it however we want. Since we’re too cool for zones, we can even embedded in – wait for it – the master page.

Thanks to the HTML snippet generator in SharePoint 2013 you can place it anywhere you want in the master page. Here’s how. Make sure Publishing is enabled on your site first.

  1. Download jQuery Tools here and zWeatherFeed here and place them in your site. Download jQuery too – especially if your master page isn’t already using it.
  2. Follow the configuration steps in my original post (stop after the first code block)
  3. Save the code as a text file
  4. Upload the text file to your Style Library and publish it
  5. Follow steps 1-5 here.
  6. In the Design tab select Media and Content > Content Editor
  7. 2013-11-12-WeatherWebpart-Part02-01.png

  8. In the content link property, enter the URL of where the text file from step 4 was uploaded
  9. Expand the Appearance section and set Chrome Type to None
  10. Click the Update button right of the web part properties
  11. 2013-11-12-WeatherWebpart-Part02-02.png

  12. Click Copy to Clipboard. Don’t worry that the preview is empty.
  13. Open up your master page in SharePoint Designer
  14. Make sure you open up the HTML version of your master page and not the .master
  15. Look for SharePoint: AspMenu ID="TopNavigationMenu". A line or two after it there should be a / asp: ContentPlaceHolder> and a / SharePoint: AjaxDelta> . Create a div with the class "weather".
  16. Paste the content copied from the snippet generator inside that div. It should look something like this:
  17. 2013-11-12-WeatherWebpart-Part02-03.png

  18. Save the master page and check out your site

OK – so it looks a little wonky. Let me help you with some CSS. Throw this in a CEWP or reference it via an external stylesheet in your master page. This won’t be perfect because the position of the classes depends on other elements in your master page, but this should whet your appetite.



When done, your web part should look like this. If you have multiple locations in your text file, the web part will rotate through them as well.

2013-11-12-WeatherWebpart-Part02-04.png

I wanted to share one caveat. If you’re using design manager to package up your publishing assets to move between environments or create a boilerplate site template, leaving the 15 minute weather web part, or any other web part embedded in the master page, is a bad idea. Strange things happen when you import the package. I’ll save you the headache now instead of later.

Finally I need to share some credit where credit is due. This post wouldn’t be possible without the help of my awesome coworker Liz Sdregas.

SharePoint: Create a Snazzy Looking Weather Web Part in 15 Minutes or Less


You may also be interested in: fpweb.net


 

Editor’s note: Contributor Erik Abderhalden is a consultant with Rightpoint. Follow him @erikboderek

When people ask me what’s the weather is like outside, I think of Good Morning Vietnam when Robin Williams asks his fictional weather reporter Roosevelt E. roosevelt what the weather’s like. Roosevelt snaps back, "You got a window? Open it."

When it comes to intranet sites, one of the more frequent requests is the ability to display weather. Not everyone in corporate America has the ability to open a window, nay even sit by a window. Thus a weather widget, or in the case of SharePoint a web part, is utilized to showcase the current temperature and give workers something to look forward to when they leave work or plan their weekend.

If you Google "SharePoint weather web part" you get a slew of solutions and they all have different functionality. What if instead of downloading a web part you could use a content editor web part and some JavaScript, CSS and accomplish the same functionality for free? It’s easy to set up and takes about 15 minutes from start to finish.

In this solution, I’ll be utilizing Zazar’s zWeatherFeed JavaScript and some CSS. zWeatherFeed utilizes Yahoo weather and is easily customizable to meet your requirements.

First, download the zWeatherFeed JavaScript here. If you’re like me and reside in the United States, we don’t use Celsius like the rest of the world, so we need to change the script to use Farenheit instead of Celsius. In your favorite script editing program, open up the script you just downloaded. Do a search for "unit" and replace the value of "c" to "f". The location varies if you downloaded the .min.js or .js file. Here’s what you need to look for:

zweather.min.js
unit:"c"
zweather.js
var defaults = { unit: ‘f’,

Great. Upload the JS to a safe place on your SharePoint site.

Now create a new text file. In the text file we’re going to place our code to call the JavaScript, and set up the HTML formatting for the weather.

The code is as follows. Be sure to update line 3 to reflect the JavaScript’s actual location.



In line 7 of the code are all the zip codes the web part will diplay the weather for. You can use up to 10 zip codes so update the code to be reflect all the zip codes you wish to display. When done, upload the file to your site.

Now you’ll need some styling. First things first, download this image and add it to your SharePoint site. This will be used to toggle between the different weather forecasts and displays at the bottom of the web part.

We’re not doing anything fancy here other than following the instructions about styling the .day and .night classes so the web part’s background will reflect if it’s presently day or night in the currently location. You can add the stylesheet to the page via your prefered MO: another CEWP, in the same text file as the JS, an external stylesheet etc.,

However you place the stylesheet, be sure to update line 53 to reference the image you downloaded in the previous step. If you don’t include the reference, no worries, but you won’t have the nice navigation in the web part because that’s what truly defines this web part as snazzy opposed to all those non-snazzy weather web parts.



Be sure to upload the CSS to your site. Now that the fun stuff is done, it’s just configuring the page. Add a content editor web part to the page and reference the JavaScript in the web part’s content link property. Repeat if applicable for the CSS. And voila! You’re now the proud owner of a snazzy looking weather web part!

2013-11-05-WeatherWebpart-01.png

SharePoint: I didn’t know you could do that with CSS!


You may also be interested in: Documentation Toolkit for SharePoint


 

Editor’s note: Contributor Benjamin Niaulin is a SharePoint Specialist at Sharegate. Follow him @bniaulin

Not long ago, I started a branding series to get closer to how I could change the look and feel of my SharePoint site without dealing with tons of complicated code stuff. So I looked at the basic elements of a SharePoint site, mainly the navigation, and with CSS I discovered a whole world of possibilities. In time, I even pushed on to realize jQuery did not have to be a scary word only developer’s use. You can find links to my series here.

I decided to start a series that will show you some cool little tricks you can do with CSS. If you are not sure how to apply CSS, go back to the first articles of my series above where it is described in details. In short, you can use the Content Editor Web Part to a CSS that will apply to a single page. The one with the CEWP on it.

Hide the Quicklaunch

We all love the quicklaunch, navigation menu on the left.

2013-04-29-DidntKnowCSSSharePoint-01.png

But there are times when you would rather maximize the page content and leave the quicklaunch out of it.

2013-04-29-DidntKnowCSSSharePoint-02.png

The solution is but a few lines of CSS:


<STYLE>
#s4-leftpanel {
    display: none
}
.s4-ca {
    margin-left: 0px
}
</STYLE>

The code above hides the “left panel” (quicklaunch) and gives the “Content Area” (.s4-ca) full width by starting from 0px on the left.

Hiding the “Recently Modified” of wikis

2013-04-29-DidntKnowCSSSharePoint-03.png

Probably the most popular demand I get during sessions or at conferences.

This will do the trick:


<STYLE>
.s4-recentchanges{
     display:none;
}
</STYLE>

SharePoint uses a class called s4-recentchanges to show it

Hiding “I Like it and Tags and Notes”

I do get this request from time to time. Although I don’t always agree as it adds a great value to the end user on SharePoint and My Profile.

2013-04-29-DidntKnowCSSSharePoint-04.png


<STYLE>
.ms-socialNotif-Container {
     display:none;
}
</STYLE>

And it’s gone

Change the look of hyperlinks with specific words in the link

Let’s say you want to add an icon for every link to “My Sites” in your SharePoint. Or simply change the font and color of links to the company web site.

2013-04-29-DidntKnowCSSSharePoint-05.png

In this example, I want to change the color of the link to the Sharegate site to orange and make it bold. But I don’t want to do this only to this hyperlink, that would be easy. I want CSS to always find the links wherever they are and change it automatically


<STYLE>
A[href*='share-gate'] {
    COLOR: #e36c09; 
        FONT-WEIGHT: bold
}
</STYLE>

2013-04-29-DidntKnowCSSSharePoint-06.png

Stay in touch via twitter @bniaulin

jQCalendarPart Mini SharePoint Calendar Web Part


You may also be interested in: fpweb.net


 

Editor’s note: Contributor SC Vinod is a SharePoint Developer at Hexaware Technologies. Follow him @scvinod

Introduction:

I always wanted everything to work on a full-fledged client side application in SharePoint. I’d like to thank the Client Object Model in SharePoint 2010, which inspired me a lot; though it was of no use in this application, unfortunately (but more on that later). Also, I wanted to use JavaScript/jQuery over Silverlight to get rid of that ugly “time out” message and the unnecessary task for the end users to download the Silverlight plugin.

This application is to integrate the jQuery Calendar control with the events added in a SharePoint Calendar list. This works in both SharePoint 2010 and SharePoint 2013.

Inspiration:

A similar application has already been developed and described here. It was developed by using SharePoint Server Object Model as a SharePoint web part by extending the ASP.NET calendar control but I wanted to make a completely client side application with slight functionality. I received help from this blog on how to query a SharePoint Calendar list using CAML query but it still really drove me crazy.

Description:

This is a JavaScript application developed using jQuery. The JS code, when added to a Content Editor Web Part in a SharePoint page, would display a jQuery calendar control synchronized with the SharePoint calendar list. Below, the list of features are explained:

  • The calendar control highlights the dates of all the upcoming events of the current month present in the Calendar list of the site.
  • The dates, when hovered over, would display a small pop-up showing the respective date’s events.
  • Below the calendar control would be the list of all the upcoming events of the current week.
  • The links, when clicked, would open the respective event’s page.

Look at the below image for a better understanding:

2013-04-01-JQCalendarMini-01.png

As you can see in the above image, cells 8, 9, 12, 13, and 14 are highlighted with a blue color border to show that these are the dates in the current month having events registered in the Calendar list. Below the calendar you can see the list of upcoming events of the current week. Also, when you hover over date “8” in the calendar you can see that a pop-up is being shown displaying the events of that particular date.

Hurdles:

Initially, I wanted to use SharePoint 2010 Client Object Model. Since it was not possible to retrieve recurring events using COM I had to use SharePoint list web services instead. This also had limitations, as I was able to retrieve only 30 events from the Calendar list in total which was not enough. So, I went ahead and used SPServices which resolved my problems to a great extent.

Limitations:

The web part will not work if you try to navigate to the next month or to the previous month. Please wait as I’m working on a fix to highlight all the dates which have events registered when a user is navigating to the next month.

Also, the name of the Calendar list should be “Calendar”. The code will not work if the list name is different since it has been hard coded.

Code:

I have used the jQuery DatePicker control and SPServices to get this application working. I have tested this on an Office 365 SharePoint 2013 preview site and it works fine too. But I wanted to develop it as an app and publish it in the app store for SharePoint 2013. So please wait until I get a SharePoint 2013 development environment.

Deployment Steps:

Since it is purely a client side application, we can simply deploy it by just moving the files. I assume that you have worked with CEWP before. I have explained the deployment process through the steps below:

  • Download the jQCalendarPart.zip file from here.
  • Unzip the jQCalendarPart.zip file.
  • Copy the unzipped jQCalendarPart folder into the layouts folder of SharePoint server.
  • Create a Content Editor Web Part in your SharePoint site where you want to display this web part.
  • Open the jQCalendarPart.min.js file from the jQCalendarpart folder and copy the content into the CEWP created above.
  • Save the page to see the web part showing a jQuery calendar control synchronized with the SharePoint calendar events from the Calendar list in your site.

How to Create a Smart Table in SharePoint Online 2013


You may also be interested in: SharePoint Services with mindfiresolutions


 

Editor’s note: Contributor Alexandru Dionisie is an Internet Professional and Technical Writer. Follow him @AlexDionisie

According to Microsoft:

- "Excel Interactive View is a new technology, powered by Excel Services, that generates Excel table and chart views on-the-fly, in the browser, from an HTML table hosted on a web page."

By using Excel Interactive View (EIV) in SharePoint we can change the way that a table is presented. From a regular table, using EIV we can convert it into a smart table, which can perform different operations:

  • Sorting;
  • Filtering;
  • Add charts;
  • etc.

2013-01-15-ExcelInteractive-01.png

More than that, this technology can be used in WordPress. The Excel Mashup team has created a plugin for WordPress. Here is a page where the EIV plugin is used: EIV.

Of course, you can use the embed code, if you don’t wanna use the plugin.

Resources:

Note: The Romanian version of this article is posted here: Cum creăm tabele inteligente în SharePoint Online 2013?

How do we add EIV into SharePoint?

  • on the Excel Mashup website generate your code

2013-01-15-ExcelInteractive-02.png

  • in SharePoint go into Edit Mode

2013-01-15-ExcelInteractive-03.png

  • from the Insert tab choose to insert a Content Editor web part

2013-01-15-ExcelInteractive-04.png

  • go into Edit mode for the web part and click inside the web part
  • create your table as you wish
  • from the Format Text tab click on Edit Source

2013-01-15-ExcelInteractive-05.png

  • copy the code generated on the Excel Mashup website – code from Step 1

2013-01-15-ExcelInteractive-06.png

  • paste the code above the table tag

2013-01-15-ExcelInteractive-07.png

  • copy the code generated on the Excel Mashup website – code from Step 2

2013-01-15-ExcelInteractive-08.png

  • paste the code above the closing body tag

2013-01-15-ExcelInteractive-09.png

Note: because the SharePoint website uses https, you must change the second code. Change only the source part: from http to https. If you do not change it, every time the page loads, a security pop-up message will be displayed.

2013-01-15-ExcelInteractive-10.png

Now, save the changes.

2013-01-15-ExcelInteractive-11.png

As seen above, the EIV button is displayed above the table.

If you click that button, the magic happens.

2013-01-15-ExcelInteractive-12.png

You can choose to open the workbook using the Excel Web App to see what happens behind the scenes.

2013-01-15-ExcelInteractive-13.png

The workbook contains Slicers, a table and charts. All those elements combined gives us the Excel Interactive View technology.

Note: if you don’t use a web part, the second code will be removed, once you validate the changes.

2013-01-15-ExcelInteractive-14.png

Delay the Hover in SharePoint Dropdown Menus


You may also be interested in: O’Reilly – SharePoint 2010 at Work


 

Editor’s note: Contributor Benjamin Niaulin is a SharePoint Specialist at Sharegate. Follow him @bniaulin

If you have been using SharePoint for a while now inside your company’s Intranet, Extranet or even Public site, you may have found yourself cursing at the drop down menu.

2012-12-11-DelayHover-01.png

Let me explain… See, every time a user’s cursor goes remotely close to the top navigation, also called the Global Navigation, the entire drop down menu appears. This can become very annoying; especially since most SharePoint Intranets have more than three sub menu items as show in my example above.

The speed of the community

In all honesty, I wasn’t even thinking about doing this article today. But I saw a question on twitter…

2012-12-11-DelayHover-02.png

I decided to take it to another level and write an article on it to give everyone a chance to do this because it’s not as easy as it looks.

Again, it’s great to be able to engage with everyone revolving around SharePoint so quickly using tools like Twitter.

Let’s start by understanding

For this to work there are no shortcuts, we need to understand exactly what SharePoint does to override or change what happens on the screen. First things first, let’s cover the HTML and CSS. We understand that HTML is the structure and that CSS is the styling and positioning (if not more but let’s keep it simple) of the HTML.
If you are starting with all of these notions, a while back I had done a whole series on branding at the Power User level. These notions are necessary to understand what I am doing.

Branding Series on NothingButSharePoint

I am going to use my F12 trick to see what’s under the hood of this navigation.

2012-12-11-DelayHover-03.png

F12 result:

2012-12-11-DelayHover-04.png

This tells us that the entire navigation is a DIV with a class of “s4-tn” where “tn” represents “Top Navigation”. Fortunately, we will not need to use this today. What we need to discover is where the Dropdown is and how it is loaded. If you noticed in the screenshot above, every heading in the navigation are represented as LI (List Items) in a UL (Unordered List).

2012-12-11-DelayHover-05.png

F12 result:

2012-12-11-DelayHover-06.png

If we analyze the screenshot above, we can understand that each heading is a LI with a CSS class of “static”. However, if that heading has a dropdown menu it will also be using a class called “dynamic-children”.

Cool! We found you!

Now we know that if we want to play with anything related to SharePoint’s dropdown menus, we will need to look at what’s going on there. Already, we can see that each one has an A (anchor) and a UL with a class of dynamic.

The CSS Result needs to be analyzed

There are many ways to make a dropdown menu in the world of the web, the key for us lies in understanding which method is used by SharePoint to overwrite it or make it our own. Earlier, we figured out that each heading that has a dropdown can be identified with li.static.dynamic-children.

Wait a minute, that’s just the heading not the dropdown menu. Based on our research above, we can assume that the dropdown menu is the UL with the CSS class of dynamic we are looking for as well.

Heading:
li.static.dynamic-children

Dropdown:
ul.dynamic

Let’s understand how the dropdown menu appears on our screens. How do we do this? Press F12 again, locate the dropdown menu container, in this case ul.dynamic, and see what it says.

2012-12-11-DelayHover-07.png

What stands out from the other CSS only there to design the menu is shown above. SharePoint puts the dropdown menu container at -999em from the left of the screen. Obviously, this means no one sees it but it is there. We can assume that when we hover our mouse over the heading, SharePoint changes the position to the correct location. We need to figure out what that is. Unfortunately, I have not figured out how to do that with IE so I will use Chrome to show the rest.

See Chrome offers a “computed styles” to see everything applied on a single element using the same F12 view. I decided to take the heading and the dropdown menu container to compare their “computed styles” before and after I hover.

Heading Before Hover

2012-12-11-DelayHover-08.png

Heading on Hover

2012-12-11-DelayHover-09.png

If we look at what happened here, there are two new CSS properties applied.

The heading now has a position that is relative and a z-index of 100. But that’s not it, there is also a new class applied called “hover”. This isn’t good news, it means that SharePoint uses JavaScript to handle the dropdown menus and we are going to have to work with that to fix it as well.

Let’s look at the comparison between the dropdown menu’s CSS in viewing and hovered state now.

Dropdown menu container before Hover

2012-12-11-DelayHover-10.png

Dropdown menu container on Hover

2012-12-11-DelayHover-11.png

We can gather that the JavaScript adjusts the positioning of the dropdown menu so that it shows up on the screen at the right location.

My solution including the delay

I am going to using jQuery inside a regular Content Editor Web Part for this solution, remember this means that it will only work on a single page. If you want this to work everywhere, you will need to add the code in a JS file and reference it in your master page. I want to keep it simple for now.

Here is what I put in my HTML Source Editor:


<script src="/sites/benjamin/Style Library/jquery-1.8.3.min.js" type="text/javascript"></script><script type="text/javascript">
(function($) {
var timer;

$(document).ready(function() {
    $('li.static.dynamic-children').unbind('mouseover').unbind('mouseout');
    $('li.static.dynamic-children').hover(function () {
        var li = $(this);
            	
	li.css({ 'position': 'relative', 'z-index': '100' });
        li.find('ul.dynamic').css({ 'left': '-1px', 'top': '25px' });
	li.find('ul.dynamic').hide();
        timer = setTimeout(function () {
            li.find('ul.dynamic').show('fast');
        }, 800);
    }, function () {
	clearTimeout(timer);
	var li = $(this);
        li.css({ 'position': 'static', 'z-index': 'auto' });
        li.find('ul.dynamic').css({ 'left': '-999em' });
    });
});
}(jQuery));


</script>

In a short description, I waited for the page to load to disable previous scripts on the items I chose (though it might not be necessary). I then changed the CSS so that my heading and its container is at the correct location but I quickly hide it. Once that is done, I tell it to wait 800 milliseconds before showing the dropdown menu using an animation. That is the trick for the delay, change that to any number you want. Finally, once the mouse leaves the heading I put everything back where it was.

If you want to change the timer, simply change the number 800 to anything you like. The advantage is that you can also use this to animate the dropdown menu. Notice I used “.show(‘fast’) in my code snippet. This helps you create a nice slide down effect on your dropdown menu instead of just seeing it popup on the screen.

Hope this helps.

SharePoint: How to Add a Twitter Widget to your Team Site


You may also be interested in: SharePoint Hosting by Fpweb.net


 

Editor’s note: Contributor Alexandru Dionisie is an Internet Professional and Technical Writer. Follow him @tutorialeoffice

Using a SharePoint web part we can show our tweets in a widget that’s embedded in a SharePoint site.

We first must create our custom widget here: Widgets

After creating your custom widget, copy the generated code into a text document and save it in the Site Assets library from SharePoint.

2012-10-08-TwitterWidget-01.png

In our site, insert a Content Editor web part.

2012-10-08-TwitterWidget-02.png

In the Properties Pane in Content Link section we paste the link to the file that contains the code.

Then, we save the changes and the Twitter widget becomes active.

2012-10-08-TwitterWidget-03.png

2012-10-08-TwitterWidget-04.jpg

How to Add a Facebook Widget to your Team Site


You may also be interested in: Secure SharePoint with User Claims White Paper from Titus


 

Editor’s note: Contributor Alexandru Dionisie is an Internet Professional and Technical Writer. Follow him @tutorialeoffice

Using some components from SharePoint (web Parts) we are able to add a Facebook widget into a SharePoint Team Site.

How do we do it?


<div id="fb-root"></div> 
<script>(function(d, s, id) { 
  var js, fjs = d.getElementsByTagName(s)[0]; 
  if (d.getElementById(id)) return; 
  js = d.createElement(s); js.id = id; 
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=155174084566571"; 
  fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script> 
<div class="fb-like-box" data-href="http://www.facebook.com/tutorialeoffice" data-width="300" data-height="500" data-show-faces="false" data-stream="true" data-header="true"></div>

  • copy the code into a text document (*.txt);
  • upload the text document into the Site Assets library (for this example I’ve used SharePoint Designer).

2012-10-02-FacebookWidget-01.png

  • now, go into the desired page and enter into Edit Page mode;
  • insert a Content Editor web part;

2012-10-02-FacebookWidget-02.png

  • open the Properties pane for that widget;
  • in the Content Link box add the location of the uploaded text document.

2012-10-02-FacebookWidget-03.png

After you add the link, close all the opened windows and save the page.

Now you will see a Facebook widget in your SharePoint page.

2012-10-02-FacebookWidget-04.png

SharePoint – InfoPath 2010: Form Library Modal Popup


You may also be interested in: SharePoint-based solutions by B&R Business Solutions


 

Editor’s note: Contributor Chris Grist is a SharePoint Architect at Beach Energy. Follow him @gristdog

In the last couple of weeks I have worked on several InfoPath projects which are using form library’s to save the completed form. However I did not like the way the user was navigated away from the site to enter a new form, several of these forms I wanted to be rapidly completed and therefore I started to look at a different way to open the forms.

Of course in SharePoint 2010 we have the modal popup dialog, and after looking at a list form that had been customised with InfoPath, it appeared that it was possible to have an InfoPath form load inside a modal popup.

The rest of this post details how you would achieve this.

The first step is to get your form ready and published, once this is complete head over to your form library and click add a new item.

Once the form has loaded copy the URL:

2012-07-30-FormLibModalPopup-01.png

You will end up with something that looks like:


<a href="https://sharepoint.com/_layouts/FormServer.aspx?XsnLocation=https://sharepoint.com/SharePointSaturday/Forms/template.xsn&SaveLocation=https://sharepoint.com/SharePointSaturday&ClientInstalled=true&Source=https://sharepoint.com/SharePointSaturday/Forms/AllItems.aspx&DefaultItemOpen=1">https://sharepoint.com/_layouts/FormServer.aspx?XsnLocation=https://sharepoint.com/SharePointSaturday/Forms/template.xsn&SaveLocation=https://sharepoint.com/SharePointSaturday&ClientInstalled=true&Source=https://sharepoint.com/SharePointSaturday/Forms/AllItems.aspx&DefaultItemOpen=1</a>

If you were to create a normal hyperlink to the above address, the chances are it will try and open in InfoPath client, so therefore we need to remind it to open in the browser using the syntax OpenIn=Browser. Therefore the link we now have saved looks like the following:


<a href="https://sharepoint.com/_layouts/FormServer.aspx?XsnLocation=https://sharepoint.com/SharePointSaturday/Forms/template.xsn&SaveLocation=https://sharepoint.com/SharePointSaturday&ClientInstalled=true&Source=https://sharepoint.com/SharePointSaturday/Forms/AllItems.aspx&OpenIn=Browser&DefaultItemOpen=1">https://sharepoint.com/_layouts/FormServer.aspx?XsnLocation=https://sharepoint.com/SharePointSaturday/Forms/template.xsn&SaveLocation=https://sharepoint.com/SharePointSaturday&ClientInstalled=true&Source=https://sharepoint.com/SharePointSaturday/Forms/AllItems.aspx&OpenIn=Browser&DefaultItemOpen=1</a>

To open a form inside a modal popup, SharePoint 2010 uses JavaScript which is linked to in the following format:


<a onclick="javascript:NewItem2(event, "INSERLINKHERE");javascript:return false;" target="_self">Open Form</a>

Insert your link in between the quotes where it says INSERTLINKHERE. Then insert the hyperlink on to a page, I had trouble inserting directly on to a page but inside the a content editor web part works just fine.

2012-07-30-FormLibModalPopup-02.png

Now when we click the link you should receive a modal pop-up and not be redirected to a separate page.

2012-07-30-FormLibModalPopup-03.png

If you don’t need the ribbon controls it can look even slicker:

2012-07-30-FormLibModalPopup-04.png

JQuery dashboards to SharePoint: How To


You may also be interested in: SharePoint Solutions In-A-Box from Alcero


 

Editor’s note: Contributor Peter Ward is a SharePoint Solution architect. Follow him @peter_1020

This post outlines the steps to apply JQuery dashboards to a SharePoint 2010 page.

  • No coding or administration is required.
  • Skillset: Power user, you should be familiar adding content to SharePoint pages. Eg: Content Editor web parts
  • The data has to reside in lists

- For further details see Alexander Bautz post. he did the heavy lifting, this is a more step by step approach to his code.

Steps

Add these components to your Site.

  1. Copy the contents of this JS file into the Site Assets library of the site: Click here

 2012-07-18-jQueryDashboards-01.png

  1. Create a list in the site called GoogleVisualization_InteractiveChartsConfig (This name has to be exact) . This list should be based from a list template called. If this templatge doesn’t exist in the site collection, email SharePoint Support and they will add it.

This is the template that needs to be added by the site collection administrator. Click here

  1. Goto the page were you want to display the charts
  2. Add 2 Content Editor web parts parts to the page where to want to display th charts

TIP: To understand how to add a content editor web part, click here.

2012-07-18-jQueryDashboards-02.png

  1. Add the following HTML code into the Chart 1 Content Editor web part

<div id="MyChart1"> </div>

  1. Add the following HTML code to the HTML footer code Content Editor web part

<script type="text/javascript">

// All charts must be represented by a container with a unique id. This container must be present in the page
arrOfChartContainers = ["MyChart1"];</script><script src="/sites/Sales_and_Trading/client_relationship_management/DashboardBoard/SiteAssets/js/jquery.min.js" type="text/javascript"></script><script src="http://www.google.com/jsapi" type="text/javascript"></script><script src="/sites/Sales_and_Trading/client_relationship_management/DashboardBoard/SiteAssets/js/ChartUsingGoogleVisualizationAPI_v2.9.3.5.js" type="text/javascript"></script>

NOTE: The path in the HTML above must correspond to the path of your site.

  1. Save content editor web part and the page.

2012-07-18-jQueryDashboards-03.pngThe HTML is now saved on the page. The chart must now be configured.

  1. Click on the download arrow of the web part.

 2012-07-18-jQueryDashboards-04.png

  1. Complete the Chart configuration menu:

From this:

2012-07-18-jQueryDashboards-05.png

To

2012-07-18-jQueryDashboards-06.png

  1. Click Save

The chart should display:

2012-07-18-jQueryDashboards-08.png

To add additions charts to the page. Add additional content editors:
With the HTML :


<div id="MyChart2"> </div>

And make the addition to the HTML footer:


= ["MyChart1", "MyChart2"];</script><script src="/sites

Further Reading:

The API

Graph options:

2012-07-18-jQueryDashboards-09.png

2012-07-18-jQueryDashboards-10.png