Wednesday, November 16, 2016

ASP.NET UpdatePanel with jQuery in SharePoint

ASP.NET UpdatePanel with jQuery in SharePoint.
Create a Visual WebPart and add below code to this WebPart.
<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VisualWebPart1.ascx.cs" Inherits="VisualWebPartProject4.VisualWebPart1.VisualWebPart1" %>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div runat="server" id="div1">
            <div>
                Country &nbsp; *
                <asp:DropDownList runat="server" ID="ddlCountry">
                    <asp:ListItem Text="--" Value="--"></asp:ListItem>
                    <asp:ListItem Text="Country1" Value="Country1"></asp:ListItem>
                    <asp:ListItem Text="Country2" Value="Country2"></asp:ListItem>
                    <asp:ListItem Text="Country3" Value="Country3"></asp:ListItem>
                </asp:DropDownList>
            </div>
            <br />
            <div>
                <asp:Button runat="server" ID="btnSave" CausesValidation="true" ValidateRequestMode="Enabled" Text="Register" OnClick="btnSave_Click" />
            </div>
            <br />
            <div>
                <asp:Label ID="lbl1" runat="server"></asp:Label><br />
            </div>
        </div>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>
Create a WebPart Page and a above WebPart in this page and also add one Content Editot WebPart (CEWP) to this same page, in this CEWP add below code or  use JS file reference which is having below code.
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(InIEvent);
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("input[id*='btnSave']").click(function () {
                var country_val = $("select[id*='ddlCountry']").val();
                if (country_val == '--') {                  
                 event.preventDefault ? event.preventDefault() : (event.returnValue = false);
                    alert('Required Field: Please select Country');
                }
            });
        });
    </script>
</head>
<body>
</body>
</html>
Save Page and close edit page. now test the code. here we are doing required field validation from JQuery for DropDownList which is located inside UpdatePanel.

Tuesday, November 15, 2016

A free JavaScript image gallery framework for image galleries used in SharePoint

A free JavaScript image gallery framework for image galleries used in SharePoint.
Go to SharePoint Site -> Doc1 -> ImageSlider Folder and upload few images as shown below..
Go to Site Assets Library and upload JS files into Library.
Go to any page -> Edit Page -> add content editor web part (CEWP ) and add below script to web part.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        html, body {
            background: #222;
            margin: 0;
        } 
        body {
            border-top: 4px solid #000;
        } 
        .content {
            color: #777;
            font: 12px/1.4 "helvetica neue",arial,sans-serif;
            width: 620px;
            margin: 20px auto;
        } 
        h1 {
            font-size: 12px;
            font-weight: normal;
            color: #ddd;
            margin: 0;
        } 
        p {
            margin: 0 0 20px;
        } 
        a {
            color: #22BCB9;
            text-decoration: none;
        } 
        .cred {
            margin-top: 20px;
            font-size: 11px;
        } 
        #galleria {
            height: 320px;
        }
    </style>
</head>
<body>
    <!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>-->
    <script type="text/javascript" src="/SiteAssets/jquery.min.js"></script>
    <script type="text/javascript" src="/SiteAssets/jquery.SPServices-2014.02.min.js"></script>
    <script language="javascript" type="text/javascript">
        $.noConflict();
        var varListName = "Doc1";
        var folderName = "/Doc1/ImageSlider";
        jQuery(document).ready(function ($) {
            $().SPServices({
                operation: "GetListItems",
                async: false,
                webURL: "https://sreekanth5.sharepoint.com/",
                listName: varListName,
                CAMLViewFields: "<ViewFields><FieldRef Name='LinkFilename'/></ViewFields>",
                CAMLQueryOptions: "<QueryOptions><Folder>" + folderName + "</Folder></QueryOptions>",
                completefunc: function (xData, Status) {
                    $(xData.responseXML).find("[nodeName='z:row']").each(function () {
                        var liHtml = $(this).attr("ows_LinkFilename");
                        $("#galleria").append("<a href='/Doc1/ImageSlider/" + liHtml + "'><img src='/Doc1/ImageSlider/" + liHtml + "', data-big='/Doc1/ImageSlider/" + liHtml + "' data-title='' data-description=''></a>");
                    });
                }
            });
            loadGalleria()
        });
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.4.7/galleria.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.4.7/themes/classic/galleria.classic.min.js"></script>
    <script>
        function loadGalleria() {
            Galleria.run('#galleria');
        }
    </script>
    <div class="content">
        <div id="galleria"></div>
    </div>
</body>
</html>

Save page and check the result as shown below.