Image Carousel SharePoint app does not use any Internet-based or mobile services.

This app does not collects and/or transmits user information.

1. Add Image carousel as app part on your page
2. Go to app part properties and select the appropriate size and maximum number of items to be shown in image carousel app part.
3. It supports 3 different sizes- Large: 940px X 350px, Medium: 620px X 260px and Small: 390px X 200px
4. You can choose up to 8 images to be shown in the image carousel. It is restricted to maximum of 8 items because more items can hamper the performance of your site page.
5. To configure images, click on the “Manage Carousel Items” link on the app part, it takes you to the library where you can add the images.

• Title: Text to be shown below the image on Image Carousel
• Detail Link: On clicking on the image, user will be navigated to this URL
• Display Order: Order of the image in the Carousel. Image Carousel shows images in ascending order of “Display Order” property on the image.
• Open Link in New Window: Whether the URL in “Detail Link” opens in a new window or same.

• Go To Site Settings > Site Permissions
• Click on "Anonymous Access" button on the ribbon
• Uncheck the "Require Use Remote Interfaces permission" checkbox

The navigation can be global navigation, current navigation or any navigation. It will all depend on how it is configured.  

I will follow the approach creating a custom menu that would be placed on Master page using delegate control.  

Creating Delegate control:

1. Create a user control under SharePoint mapped folder "CONTROLTEMPLATES". Let’s name it “GlobalNavigationControl.ascx” that is going to be used as delegate control in the master page.  

2. Open the .ascx file and add 2 user controls <SharePoint:AspMeu> and <asp:SiteMapDataSource> as shown in below code snippet. Also note that DataSourceID property of AspMenu should be the id of SiteMapDataSource.            

<SharePoint:AspMenu ID="MyGlobalNavigation" 
 runat="server"
 EnableViewState="false"
 DataSourceID="MyTopSiteMap"
 AccessKey="<%$Resources:wss,navigation_accesskey%>"
 UseSimpleRendering="true"
 UseSeparateCss="false"
 Orientation="Horizontal" 
 SkipLinkText=""
 CssClass="my-own-style"/> 
 
 <asp:SiteMapDataSource id="MyTopSiteMap" runat="server"/>

           To handle the styling of menu, use the CssClass property to set your own custom CSS class.

           CSS class for v4.master is "s4-tn"

3. The behaviour of the menu will depend on the properties of these 2 controls. Since we have created our own control “GlobalNavigationControl.ascx”, we need to expose the properties of the 2 controls so that it can be configurable.

4. Go to code-behind and create public properties as shown below:

#region Menu control Properties
 
 /// <summary>
 /// Gets or sets number of levels to be displayed as static 
 /// </summary>
 public int StaticDisplayLevels
 {
 get;
 set;
 }
 
 /// <summary>
 /// Gets or sets maximum number of levels to be shown in flyout sub menus
 /// </summary>
 public int MaximumDynamicDisplayLevels
 {
 get;
 set;
 }
 
 #endregion
 
 #region DataSource Properties
 
 /// <summary>
 /// Gets or sets provider for the site map data source
 /// </summary>
 public string SiteMapProvider
 {
 get;
 set;
 }
 
 /// <summary>
 /// Gets or sets StartingNodeOffset for the site map data source
 /// </summary>
 public int StartingNodeOffset
 {
 get;
 set;
 }
 
 /// <summary>
 /// Gets or sets a value indicating whether to start from current node or not
 /// </summary>
 public bool StartFromCurrentNode
 {
 get;
 set;
 }
 
 /// <summary>
 /// Gets or sets a value indicating whether to show starting node or not
 /// </summary>
 public bool ShowStartingNode
 {
 get;
 set;
 }
 
 #endregion
  

5. In page load event, assign the user control’s property values to the properties of AspMenu and SiteMapDataSource:

protected void Page_Load(object sender, EventArgs e)
 {
 this.MyGlobalNavigation.MaximumDynamicDisplayLevels = this.MaximumDynamicDisplayLevels;
 this.MyGlobalNavigation.StaticDisplayLevels = this.StaticDisplayLevels;
 
 this.MyTopSiteMap.SiteMapProvider = this.SiteMapProvider;
 this.MyTopSiteMap.ShowStartingNode = this.ShowStartingNode;
 …
 …
 }

 6. Add Site map provider in web.config. Open web.config file of your site, go to node “system.web/siteMap/providers”.
     Add below entry. Configure its properties like name, IncludePages, IncludeSubsites , ShowSiblings, etc. properly as per your requirements. 

<add name="MyGlobalNavSiteMapProvider" description="Provider for Global Navigation" 
 type="Microsoft.SharePoint.Publishing.Navigation.PortalSiteMapProvider, Microsoft.SharePoint.Publishing, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" 
 NavigationType="Combined" EncodeOutput="false" IncludePages="Never" 
 IncludeSubsites="Always" IncludeHeadings="True" IncludeAuthoredLinks="True" ShowSiblings="False" Version="14" />

7. Now add an “Empty Element” for delegate control entry.

8. Open Elements.xml of the delegate control and add below entry. This is setting the properties of the custom control that we just created above. Also note the property SiteMapProvider.This is actually the “name” of site map provider from web.config.

<?xml version="1.0" encoding="utf-8"?>
 <Elements xmlns="https://schemas.microsoft.com/sharepoint/">
 <Control Id="MyGlobalNavIDForMasterPage"
 Sequence="10"
 ControlSrc="~/_ControlTemplates/GlobalNavigationControl.ascx">
 <Property Name="MaximumDynamicDisplayLevels">0</Property>
 <Property Name="StaticDisplayLevels">1</Property>
 <Property Name="ShowStartingNode">false</Property>
 <Property Name="SiteMapProvider">MyGlobalNavSiteMapProvider</Property>
 </Control> 
 </Elements>
 

Add delegate control to master page: 

1. Open master page and go to the area/div where you want to add the navigation control.
2. Add the delegate control tag and make sure the property ControlId is set to the same ID that was set in the Elements.xml file of the delegate control.

<SharePoint:DelegateControl runat="server" ControlId=" MyGlobalNavIDForMasterPage "/>

 Add delegate control to the feature: 

Make sure the delegate control is added to one of the feature of in the project. As soon as the feature is activated at a site or site collection, the menu will start appearing on the master page.

Configuring the navigation to Up and Running site once the development is complete and you do not want to touch the code

This particular navigation is configurable through 3 places.

1. Form the delegate control Elements.xml. This will be available under your feature folder in 14  hive. Here you can change the control's properties if required.
2. From the web.config site map provider. Properties like, show subsites, show pages can be set in web.config file. This is recommended only while development and not when the site is in production or available for end users. 3rd option is recommended in that case.
3. Open the site and go to site settings>Look and Feel>Navigation. Here you will find all the properties like show subsites, show pages, etc that we pre-configured in web.config file.  

Examples of such scenarios are:

• Passing web part properties data to third party JavaScript.
• Using web part properties to loading data on demand at client side.

Here is the approach that is followed for this solution. Please note this is not the only approach to achieve this functionality.

1. Read the required web part properties at server side

2. Format the web part properties data as JSON string, so that it can be read by javascript.

3. Create a Hidden field and assign the JSON string as its value.

4. Add javascript reference and HTML controls to the page while rendering the page (Render event). The HTML controls contains a button that, on clicking, calls a javascript function.

5. Read the JSON object from hidden field value in the javascript.

6. Use the data as per your requirement.

Creating Solution:

Lets start with creating a Sandbox solution in Visual Studio. It can be a farm solution also, I have chosen sandbox so that it can be deployed in SharePoint online also.

Add a "Scripts" Module and then a JavaScript file named "ReadPropertiesAtClient" in the Scripts module.

Add a simple Web Part (not a visual web part because it is a sandbox solution), named "ReadAtClientWebPart"

 Open Elemets.xml and modify it to map it to Style Library:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
  <Module Name="Scripts" Url="Style Library/CustomScripts">
  <File Path="Scripts\ReadPropertiesAtClient.js" Url="Scripts/ReadPropertiesAtClient.js" Type="GhostableInLibrary" />
</Module>
</Elements>

The WebPart code:

Create two sample web part properties (WebPartName and WebPartDescription) that we will try to read.

[WebBrowsable(true)]
[WebDisplayName("Web Part Name")]
[WebDescription("Name of the WebPart")]
[Personalizable(PersonalizationScope.Shared)]   
public string WebPartName { get; set; }

[WebBrowsable(true)]
[WebDisplayName("Web Part Description")]
[WebDescription("Web Part Description")]
[Personalizable(PersonalizationScope.Shared)]
public string WebPartDescription { get; set; }

Now we need to override 3 methods: CreateChildControls, OnPreRender and Render

In CreateChildControls, create a hidden field object "hiddenWebPartProperties" and add it to controls

protected override void CreateChildControls()
        {
            base.CreateChildControls();
            HiddenField hiddenWebPartProperties = new HiddenField() { ID = "hiddenWebPartProperties" };
            this.Controls.Add(hiddenWebPartProperties);
        }

In OnPreRender create a JSON object of required webpart properies (WebPartName and WebPartDescription in our case).

protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);

            ////Construct JSON using the WebPart Properties
            string webPartPropertiesJSON = string.Empty;
            webPartPropertiesJSON = "{ 'WebPartName':'" + this.WebPartName + "', 'WebPartDescription': '"
                                                      + this.WebPartDescription + "' }";
            ((HiddenField)this.FindControl("hiddenWebPartProperties")).Value = webPartPropertiesJSON;
        }

Override Render to add javascript reference and HTML controls to the page. For page controls, I have added a button in a "DIV" and assigned a client click event to the button. On click of the button a javascript function "showProperties" is called that accepts SharePoint server control ID. 

protected override void Render(HtmlTextWriter writer)
        {
            this.RenderContents(writer);

            writer.AddAttribute(HtmlTextWriterAttribute.Type, "text/javascript");
            writer.AddAttribute(HtmlTextWriterAttribute.Src,
                                            string.Format("{0}/Style Library/CustomScripts/Scripts/ReadPropertiesAtClient.js",
                                            SPContext.Current.Site.ServerRelativeUrl.TrimEnd('/')));
            writer.RenderBeginTag(HtmlTextWriterTag.Script);
            writer.RenderEndTag();

            writer.Write("<div id='webPartDiv' style='align:center; margin:3px; border: solid thin black;" +
                               "width: 400px; height: 200px'>"+
                               "<input type=\"button\" value=\"Click to see web part properties\""+
                               " onclick=\"showProperties('"+this.ClientID+"')\"/>"+"</div>");
        }

The JavaScript code:

JavaScript code is very simple it has a function to show the properties on client side. Add below function to "ReadPropertiesAtClient.js" file.

    function showProperties(clientID) {
        var hiddenField = document.getElementById(clientID + '_hiddenWebPartProperties');
        if (hiddenField != undefined && hiddenField != null) {
            webpartProperies = eval("(" + hiddenField.value + ")");
        }
        var properties = "WebPart Name: " + webpartProperies.WebPartName + ". WebPart Description: " + webpartProperies.WebPartDescription;
        alert(properties);
    }

Deploy and Run:

Now the coding part is done, all we need to do is deploy the solution and add the webpart to a page.

Edit the web part and assign the value to the custom webpart properties, click 'Apply' and 'OK'. Now Click on 'Save and Close' button on the ribbon.

The page is ready, now we can test our webpart. Click the button and the webpart properties are displayed in an alert box.

We need 3 files in all for the deployment that needs to be placed in same folder:

1. Deploy.bat - A batch file that is used as a trigger to execute the powershell script and can be called from command prompt.
2. Deploy.ps1 - The powershell script file (.ps1).
3. Demo.Project.wsp - The SharePoint solution file.

Deploy.bat

We need some information about the environment and names of objects like site collection, web application, etc. Here we will have all these data stores in configurable variables.

The script will execute following steps including validation checks:

1. Create a web application
2. Create a site collection
3. Add and install WSP solution

You need to set the values of the variables mentioned at starting of the script under headings: Web Application settings, Site Collection Settings and Solution Settings. Once these configuration settings are done, you can run the script

Deploy.ps1

 Please note that this script does not have all the steps or commands that might be needed for a generic project, but it will give a clear idea about the approach and you can add or remove commands as per your requirements.

An example is using SQL Server 2008 Reporting Services report viewer web part to display SSRS reports. The default timeout of report server is 10 minutes. So if you try to view the report second time after being idle for 10 minutes, it will return you a message “ASP.NET session has expired or could not be found”. This is a more ‘Technical’ message that business users might find unusual.

In order to handle this we might want to either: Give a more specific message and tell user to refresh the page, or redirect to a login or error page. That can be customized as per your requirement; I will just show an
error message with a button to refresh the page.

To handle this situation I will be using JavaScript and apply it to master page so that it will be applicable to all the pages in the application.

Step 1: Open your master page in SharePoint designer and start editing.

Step 2: Add the div that will appear as popup. You can add it anywhere in the page, I will add it just before the div containing <SharePoint:SPRibbon>

<div id="SessionTimeMessageDiv" style="height:0px; display:none;">
     <div id="SessionTimeOutDiv" style=" position:relative; display:none; top: 0px; height: 100%;
         background-color: White; opacity: 0.75; filter: alpha(opacity=75); vertical-align: middle;
         left: 0px; z-index: 99998; width: 100%; position: absolute;  text-align:center;"></div>             
 
     <div style="width:400px; text-align:center; position:relative;  filter: alpha(opacity=100);
          vertical-align:middle; top:200px; left:40%; height:80px; border:thin lightBlue solid;
          background-color:white; z-index:99999;">
       <br/>
       <asp:Label ID="lblSessionTimeOut" runat="server" 
                  Text="You session has expired, please press Refresh button or refresh the page">
       </asp:Label>
       <br /><br />
       <asp:Button ID="Button1" runat="server" Text="Refresh" OnClientClick="refreshPage();"/>
    </div>
</div>

I have added 3 <div>s to have the effect of grayed out disabled page and Refresh message on top of that. Please note that on click of Refresh button, I am calling another JavaScript function to refresh the page.

Step 3: Add JavaScript functions to the master page

       //Global variable to hold the timeout time
       var sessionTimeout;
 
      // Reset the timeout to a static value. Will get this from web config later
       function resetTimer()
       {
         sessionTimeout=5;
       }
 
      // function to refresh the page
      function refreshPage()
      {         
        location.reload(true);
      }
 
      // Counter function. It is a recursive function that will keep calling itself each minute, you can reduce the time to few seconds for debugging
 
      function countTimeout()
      {
        sessionTimeout = sessionTimeout - 1;
        if(sessionTimeout >= 0)
        {
           //call the function again after 1 minute delay        
             
          window.setTimeout("countTimeout()", 60000);
        }
        else
        {
          //show message box
           document.getElementById("SessionTimeOutDiv").style.display = "block";                
           document.getElementById("SessionTimeMessageDiv").style.display = "block";            
        }
      }

Now we need to initialize the timer on page load and reset it whenever user is doing some activity on the page. We will reset the timer each time user clicks anywhere or presses some key. For this we need to call javascript on body load.

 Step 4: Handle Body onload event: 

Usually body load event of master page is already handled in SharePoint master page, so now we need to call multiple functions on body load. There is a crack for this. Taking example of NightAndDay.master:

<body scroll="no" onload="if(typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();" class="nightandday">

Change this to: 

<body scroll="no" onload=”BodyLoad();"class="nightandday">

Move old code to bodyLoad() function.

function bodyLoad()
{
     if (typeof(_spBodyOnLoadWrapper)!= 'undefined') _spBodyOnLoadWrapper();
} 

Now we can call our timer from this function. So the final function should look like:

function bodyLoad()
{
    if (typeof(_spBodyOnLoadWrapper)!= 'undefined') _spBodyOnLoadWrapper();
    resetTimer();
    countTimeout();
} 

Reset the timer when a user clicks on the screen or press any key. For this, add 2 more events on <body>: onclick="resetTimer()" and onkeypress="resetTimer()" 

Step 5: Read the session timeout: 

Now everything is ready except that the timeout is hardcoded. We will get it from Session.Timeout property. session timeout property can be fetched from following web.config entry:

<sessionState mode="InProc" timeout="10" />

Try reading sessionTimeout using code block in master page as: <%=Session.Timeout%>. This will throw an exception saying: “Code blocks are not allowed in this file”.

So I will write a custom control, add it to the master page and read the value in javascript.

Note: There can be other ways to read this value but I have not explored them. 

Add user control:

Create a new SharePoint solution in visual studio.

• Add SharePoint mapped “ControlTemplates” folder.
• Add a new User control – SessionTimeOut.ascx.
• Add following code to the ascx file:
  <div id ="timeout"><%=Session.Timeout%></div>
• Deploy the solution. 

Include the user control in master page: 

Register the TagPrefix. Add following line before <html> tag:

<%@ Register TagPrefix="useruc" TagName="SessionTimeOut" src="~/_CONTROLTEMPLATES/Sharepoint.UI.Webparts/SessionTimeOut.ascx"%>

Add following <div> in the master page body:

      <div style="display:none;" id="SessionDetails">
           <useruc: SessionTimeOut id="Idsession" runat="server" EnableViewState="false"> </useruc:AdminUser>       
      </div> 

Now we will have the session timeout available on the master page inside a hidden div named "timeout". This is what we added in the user control and can be read as:

document.getElementById("timeout").innerText; 

Now we have everything in place. The final JavaScript will look like: 

The <body> tag of master page should look like:

And the code to add in the <body> of master page: 

Thats all the coding. For debugging, try reducing the timeout in web.config and reduce the time from 60000 to 15000 in window.setTimeout("countTimeout()", 60000).

Important note: If you are using some external control in your pages that has its own timeout, then we need to make sure that the timeout mentioned in web.config should be less than or equal to that of enternal.

For example, you are using SQL Server Reporting Services ReportViewer to show SSRS reports that are hosted on a report server. Now the default time out of report server is 10 minutes, and if you set timeout in web.config as 30 minutes, then this approach will not work as we are reading from web.config.

In this case, there are 2 options:

1. Decrease the timeout in web.config to match to report server.
2. Increase the timeout in report server to have timeout more than or equal to that of web.config.