Saturday, September 23, 2017

jQuery Chosen Plugin in SharePoint

jQuery Chosen Plugin in SharePoint

Step1: Create a custom list.
Step2: Create a choice column and select check boxes allow multiple selection.
Step3: Create NewForm1.aspx using Designer and make it default form.

Setp4: Edit and add below code and save NewForm1.aspx
Code:
Replace below code in NewForm1.aspx
Old code:
--------------------
<tr>
        <td width="190px" valign="top" class="ms-formlabel">
            <h3 class="ms-standardheader">
                <nobr>Choice</nobr>
            </h3>
        </td>
        <td width="400px" valign="top" class="ms-formbody">
            <SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="Choice" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Choice')}" />
            <SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="Choice" ControlMode="New" />
        </td>
    </tr>
Updated code:
--------------------
<tr>
            <td width="190px" valign="top" class="ms-formlabel">
                <h3 class="ms-standardheader">
                    <nobr>Choice</nobr>
                </h3>
            </td>
            <td width="400px" valign="top" class="ms-formbody">
                <table>
                    <tr>
                        <td>
                            <div id="divChoice"></div>
                        </td>
                    </tr>
                    <tr>
                        <td id="tdChoice">
                            <SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="Choice" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Choice')}" />
                            <SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="Choice" ControlMode="New" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
Replace below code also.
Old code:
--------------------
<asp:content contentplaceholderid="PlaceHolderAdditionalPageHead" runat="server">
    <sharepoint:delegatecontrol runat="server" controlid="FormCustomRedirectControl" allowmultiplecontrols="true" />
    <sharepoint:uiversionedcontent uiversion="4" runat="server">
        <contenttemplate>
            <sharepoint:cssregistration name="forms.css" runat="server" />
        </contenttemplate>
    </sharepoint:uiversionedcontent>
</asp:content>

Updated code:
--------------------
<asp:content contentplaceholderid="PlaceHolderAdditionalPageHead" runat="server">
    <sharepoint:delegatecontrol runat="server" controlid="FormCustomRedirectControl" allowmultiplecontrols="true" />
    <sharepoint:uiversionedcontent uiversion="4" runat="server">
        <contenttemplate>
            <sharepoint:cssregistration name="forms.css" runat="server" />
        </contenttemplate>
    </sharepoint:uiversionedcontent>
    <!--<link rel="stylesheet" href="/sites/dev/SiteAssets/Chosen/chosen.min.css"/>
    <script type="text/javascript" src="/sites/dev/SiteAssets/Chosen/jquery.min.js"></script>
    <script type="text/javascript" src="/sites/dev/SiteAssets/Chosen/chosen.jquery.min.js"></script>
    <script type="text/javascript" src="/sites/dev/SiteAssets/Chosen/chosen.proto.min.js"></script>-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.proto.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            buildChosen();
            $("#selectChoice").chosen().change(function () {
                var selectedItemsChoice = $(this).val();
                $("#tdChoice td").each(function (index) {
                    $(this).find(':checkbox').prop('checked', false);
                    for (var i = 0, len = selectedItemsChoice.length; i < len; i++) {
                        if ($(this).text().trim() == selectedItemsChoice[i].trim()) {
                            $(this).find(':checkbox').prop('checked', true);
                        }
                    }
                });
            });
            $("#tdChoice").hide();
        });
        function buildChosen() {
            htmlChoice = '<select  class="Choice" multiple="multiple" id="selectChoice">';
            $("#tdChoice td").each(function (index) {
                if ($(this).find(':checkbox').prop('checked')) {
                    htmlChoice += "<option value='" + $(this).text() + "' selected='selected'>" + $(this).text() + "</option>";
                } else {
                    htmlChoice += "<option value='" + $(this).text() + "'>" + $(this).text() + "</option>";
                }
            });
            $('#divChoice').html(htmlChoice);
            $('#selectChoice').chosen({ width: "400px" });
        }
    </script>
</asp:content>
Step5: 
Test the application. Click on Create new item from ribbon in list.
before update code:
--------------------

After update code:
--------------------

1 comment:

  1. Hi there, thank you for your post! I was wondering whether this is possible for Look Up fields?
    Thank you :)

    JC

    ReplyDelete

Featured Post

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management

Protect an API by using OAuth 2.0 with Azure Active Directory and API Management https://docs.microsoft.com/en-us/azure/api-management/api-...

Popular posts