SharePoint 2013 On-premise reorder userprofile property page drag and drop

The order property control in SharePoint 2013 isn’t user friendly. I have a solution to ordering the SharePoint 2013 profile fields for on-premise with a drag and drop.

userprofile

okbutton

With a application page and the right rightss to write properties in the userprofile page can you drag and drop in your own portal. No central administration needed.

Files there are created:
– Create a SharePoint 2013 Farm Project
– Added a svc service this service write the order in property bag of the SharePoint site. This way is it posible to save a “concept version” when you use the “OK” button to save the userprofile service.

try
            {
                SPSecurity.RunWithElevatedPrivileges(() =>
                {
                    using (var site = new SPSite(GetSiteUrl()))
                    {
                        site.AllowUnsafeUpdates = true;
                        site.RootWeb.AllowUnsafeUpdates = true;
                        site.RootWeb.AllProperties[“ProfileSortOrder”] = item;
                        site.RootWeb.Update();
                    }
                });
            }
            catch
            {
            }

the javascript part

<link rel=”stylesheet” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/redmond/jquery-ui.css” type=”text/css” media=”all” />

    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js” type=”text/javascript”></script>

    <script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js”
            type=”text/javascript”></script>

    <script type=”text/javascript”>

        $(function() {
            $(‘#sortable’).sortable({
                placeholder: ‘ui-state-highlight’,
                update: OnSortableUpdate
            });
            $(‘#sortable’).disableSelection();

            var progressMessage = ‘Saving changes…’;
            var successMessage = ‘Saved successfully!’;
            var errorMessage = ‘There was some error in processing your request’;
            var messageContainer = $(‘#message’).find(‘p’);

            function OnSortableUpdate(event, ui) {
                var order = $(‘#sortable’).sortable(‘toArray’).join(‘,’).replace(/id_/gi, ”);

                messageContainer.html(progressMessage);
                var serviceUri = “/_vti_bin/WVProfileOrder/UpdateProfileService.svc/SaveItems”;

                $.ajax({
                    type: ‘POST’,
                    url: serviceUri,
                    data: JSON.stringify(order),
                    contentType: ‘application/json; charset=utf-8’,
                    dataType: ‘json’,
                    success: OnSortableUpdateSuccess,
                    error: OnSortableUpdateError
                });
            }

            function OnSortableUpdateSuccess(response) {
                if (response != null) {
                    messageContainer.html(successMessage);
                }
            }

            function OnSortableUpdateError(xhr, ajaxOptions, thrownError) {
                messageContainer.html(errorMessage);
            }

        });

    </script>

 

The control

<asp:ListView ID=”ItemsListView” runat=”server” ItemPlaceholderID=”myItemPlaceHolder”>
           <LayoutTemplate>
           </LayoutTemplate>
           <LayoutTemplate>
               <asp:PlaceHolder ID=”myItemPlaceHolder” runat=”server”></asp:PlaceHolder>
           </LayoutTemplate>
           <ItemTemplate>
               <li class=”<%# Eval(“cssClass”) %>” id=’id_<%# Eval(“ItemID”) %>|<%# Eval(“ItemName”) %>|<%# Eval(“SectionDisplay”) %>’>
                   <%# Eval(“DisplayName”) %> – <%# Eval(“ItemName”) %> </li>
           </ItemTemplate>
       </asp:ListView>

 

site.AllowUnsafeUpdates = true;
                        site.RootWeb.AllowUnsafeUpdates = true;
                        SPContext.Current.Web.AllowUnsafeUpdates = true;
                        SPServiceContext context = SPServiceContext.GetContext(site);
                        var upcm = new UserProfileConfigManager(context);
                        int count = 0;

                        ProfileSubtypePropertyManager pcolEmployee =
                            upcm.ProfilePropertyManager.GetProfileSubtypeProperties(profileTypeName);
                        ArrayList allProps = pcolEmployee.PropertiesWithSection;
                        foreach (ProfileSubtypeProperty property in allProps)
                        {
                            if (!property.TypeProperty.IsVisibleOnEditor && !property.TypeProperty.IsVisibleOnViewer)
                            {
                                continue;
                            }
                           
                            try
                            {
                                item = new WvReOrderItem();
                                if (property.IsSection)
                                {
                                    item.SectionDisplay = true;
                                    item.CssClass = “ui-state-highlight”;
                                }
                                else
                                {
                                    item.SectionDisplay = false;
                                    item.CssClass = “ui-state-default”;
                                }

                                item.ItemID = count;
                                item.ItemName = property.Name;
                                item.ReOrderType = profileTypeName;
                                item.DisplayName = property.DisplayName;
                                items.Add(item);
                                count++;
                            }
                            catch (Exception exception)
                            {
                            }

I hope that this example helps you in the correct way, would you lik to have a example contact me at the contact information about this blog.

Advertisements

One thought on “SharePoint 2013 On-premise reorder userprofile property page drag and drop

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.