Monday, June 25, 2018

Configure Visual Studio BIDS to deploy a SharePoint list report to SharePoint (SharePoint 2013)

The ability of Visual Studio Business Intelligence Services to report against a SharePoint list and create a report based on that list is a useful way of presenting data. You can then embed this report in a report viewer web part on a web part page to display. Deploying the report to SharePoint using the built in Visual Studio BIDS tools however can be tricky as it requires coordination between SharePoint site components and the report deployment configuration.

SharePoint needs to be configured in SQL Server Integrated Mode for sql server report deployment. Both of the site collection features "Report Server Integration" and "Reporting" must be enabled on the site collection level. If these are not enabled, you will not be able to create the data connection library and report library needed to support reporting.


Step 1 - Create the report

Open Visual Studio BIDS and create a new report project.  Create a new Shared Data Source that extracts data from the SharePoint list you wish to work on.  Create a new dataset based on that datasource to pull out the fields you wish from that list.  Develop your report locally using Visual Studio and its "preview" feature to complete and test the report.


Step 2 - Set up the SharePoint site repositories

The first component you will need to add is a data connection library.  Add this list type to your SharePoint site.  Navigate to this library and copy the url.  Remove any trailing data after the list name(in bold):

https://your_sharepoint_site/data_connections/Forms/AllItems.aspx

Next, you will need a report library. Add a the report library app type to your site. Copy the URL of the report library again removing the trailing information:

https://your_sharepoint_site/reports/Forms/current.aspx

Step 3 - Configure Visual Studio Deployment and Deploy

Within Visual Studio, right click on the name of your report. Select "properties". This will bring up the Configuration manager for your report project. Here are the configuration properties required to deploy the report to SharePoint:

Overwrite Datasets True
Overwrite Data Sources True
Target Dataset Folder: https://your_sharepoint_site/data_connections
Target Data Source Folder: https://your_sharepoint_site/data_connections
Target Report Folder https://your_sharepoint_site/reports
Target Report Part Folder:
TargetServerURL: https://your_sharepoint_site
Target Server Version: SQL Server 2008 R2 or later

Click the OK button once finished. Right click the project name and choose "Deploy". You will see the progress in the output window of your deployment. Now, navigate to your report library, click on the name of the report, and verify it is working. You can directly use this link on other pages in your site to refer users to this report.


Tricks and Tips

You will sometimes get a permissions error if you deploy a report to SharePoint if you did not specify credentials for the data source. Ensure that your data source has "Use Windows Authentication" selected within the data source properties.

Your reports will not be viewable by other non site admins until it is "Published". Once you have the report deployed and approved by your client (if necessary), navigate to the report library, click the three dots to the right of the report name and choose "Publish a major version". This will make your report viewable by all users who have permissions to your site.

Sometimes you will want to host the report in a webpart page, rather than have the report open directly. To do this, create a new web part page in SharePoint and insert the "SQL Server Reporting Services Report Viewer" located in the "SQL Server Reporting" category. Use the report viewer web part tools to select and embed your report.

Optionally, you can enable remote errors for reports in local mode using the "Site Settings->Reporting Services->Reporting Services Site Settings" site action. Put a checkmark in the box "Enable remote errors in local mode". This will give you a more detailed error message if your report fails.
Posted by at No comments:

Wednesday, June 13, 2018

Create a dynamic content slider against a SharePoint list using jQuery. SharePoint 2007, 2010, 2013

On the front page of many SharePoint sites there is a section called "news" or "announcements". Located on the home page of your company or organization site, this is a quick way to disseminate important information to all users of your SharePoint site.

This is usually set up using a SharePoint list that contains the announcements or news items, and a content query web part on the front page gets the most recently published news item or article. This is a quick way to update the home page without having to edit the html source on that page every time the news or announcement changes.

However, the issue with this approach is that it only shows one announcement at a time. Sometimes, there may be multiple news items or announcements to show on the home page, but you don't have the space on the page for multiple items.

I was tasked with taking an existing news content query web part and replacing it with a Content Slider. This would show each news item on the page for a few seconds, and then scroll to the right for the next news item. A group of buttons at the bottom allows direct control of which news item you wish to see.

This is a fairly standard way of presenting information on the web, and so there are a lot of javascript and css based solutions for this challenge available. However, I wanted to host this solution in SharePoint 2007, and wanted to be able to use jQuery to extract information from the SharePoint news list. So it made sense to look into a few of the available jQuery content sliders to see which would meet my needs. The final choice ended up being awShowcase, you can download it from here:

Awkward Showcase on GitHub

Step 1: Download supporting libraries.

Within the SharePoint site that is going to be hosting your content slider, locate your site assets library. If it doesn't exist, create a document library called site assets.

Download and unzip the AWShowcase files locally, and place the unzipped files and folders in your site assets library. Download the jquery source file and SP Services jquery source files and place those in your site assets library as well. Your site assets library should look similar to this:


Step 2: Update your news or announcements library.

If you have an existing news or announcements list, you will need to add and update a couple of fields to make it work with this content slider. The first thing to add is a field called "Slider". This is a straight text field. If you want your announcement or news article to appear in the slider, you put the letter "Y" in this textbox.

You may already have a start date associated with your announcement/news list. If not, add it now. If you name it "StartDate" as one word, then you won't need to change the jquery for that field later.
You will also have a field that contains the announcement content. In my case, I called the field "HTML" because it allows rich html content to give richer tools to people entering the slider content. You will need to change the field name in the code below if it is not "HTML".

If you have not already enabled it, enable approval for the announcments/news list. The list items must be approved to show on the content slider.

Step 3: Add and populate the content editor web part.

Navigate to the page you wish to display the new content slider on and edit the web part page. Add a new content editor web part. Edit this web part and choose to edit the HTML source.

Add links to your supporting libraries at the top of your html content:

Now, copy and paste the following code underneath your supporting library links:



Step 4 - Modify the code to suit your environment.

Make the following changes in the code:
  1. Update all of the view fields in the CAML query to match your field names. So if the field I call "HTML" is called "Announcement" in your source list, change all instances of HTML to "Announcement". Make sure you change the names in all locations, use search and replace.
  2. Update the name of the announcements list to match the name of your source list. In the code above, our list is called "spotlight".
  3. Refer to the github link at the beginning of this article to understand the showcase property customizations. You will want to modify the width and height to fit your page.
Save the content editor web part code in SharePoint, and close the web part configuration window. Refresh the page to review the functionality. If the page doesn't work, first ensure you have the libraries correctly linked by uncommenting the "alert('jquery loaded')" line by removing the two forward slashes. Save you changes and refresh the page. If an alert pops up, jquery is working, if not, then that is the problem.

The other potential source of issues is within the field names. Be sure your field names are the internal SharePoint names for those items, rather than the name displayed on the list. If you are unsure what the internal name is, open properties for that list, and hover over the column names. The link that appears will contain the actual field name at the end.

The field looks like "Start Date" but when we hover over the field we see this URL

/_layouts/FldEdit.aspx?List=%7B06826D90%2D478A%2D423F%2DA762%2DDFCDD7005964%7D&Field=StartDate

we know the actual field name is "StartDate".

Posted by at 1 comment:

Friday, June 8, 2018

Using callbacks to force function completion in order (jQuery)

I had a recent issue with a dynamic page constructed in SharePoint using jQuery.  The page had two functions.  The first used SPServices to extract data from a SharePoint list.  The second configured the jQuery ShowCase object to create a content slider based on the content extracted from the SharePoint list.  However, while the content initially loaded, any button or link clink would clear the content, the ShowCase went blank.


I put some alerts into the code to find out what was happening and found that, if I had an alert at the end of each function, they worked.  If I removed the alerts, it no longer worked.


What was happening here was that the alerts were giving enough time for one function to complete before the other started.  The first function would fire, the alert would come up on the screen.  This would give sufficient time for the data to return and then the ShowCase Function would fire on the completed content.  But how to do this without alerts?


The answer was jQuery callbacks.  This code forces the execution of each function in sequence, and, critically, does not fire the second function before the first has completed.  Here is what that looks like:


  var callbacks = $.Callbacks(); // create callbacks object
  callbacks.add(getData); // add the data extraction function
  callbacks.add(renderShowCase); // add the ShowCase render function
  callbacks.fire(); // fire those functions in sequence.


By default, javascript functions on a page load to not complete (and return data) before subsequent functions are fired.  If none of the functions are dependent on others completing, then this is the most efficient way of rendering the page.  If however one of the functions is dependent on another completing before firing, callbacks are an excellent solution.



Posted by at No comments: