Display SharePoint 2013 Followed items in a WebPart

SharePoint 2013 bietet die Möglichkeit, verschiedenen Seiten und Dokumenten zu folgen. Hierfür wird die MySite benötigt, welche als Site Collection in der Central Administration angelegt wird. Die Details zum Setup hat Microsoft unter http://technet.microsoft.com/en-us/library/ee624362.aspx beschrieben.

Dieser Artikel beschreibt wie die Followed Sites aus SharePoint in einen eigenen WebPart integriert werden können.

Warten auf die SP.SOD Klasse
Sämtliche Features der MySite werden über JavaScript / AJAX Calls angeboten. Daher ist hier der erste Ansatz, sich mit den Client-Side SharePoint Komponenten auseinander zu setzen. Dabei fällt als erstes die SP.SOD Klasse auf: Diese bietet On-Demand JavaScripting an: Somit ist es möglich, Funktionalitäten im Nachhinein zu laden und auf dessen Bereitstellung zu warten:

// Make sure SP.ClientContext is available
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
    // Make sure SocialFollowingManager is available
    SP.SOD.executeFunc('userprofile', 'SP.Social.SocialFollowingManager', function() {
        // Do something when SocialFollowingManager is available
    });
});

Die executeFunc wartet, bis die angegebene Funktion (z.B. SP.ClientContext) geladen wurde und ruft anschliessend den bereitgestellten Funktionszeiger auf. Dieses Verhalten kann so verschachtelt werden, bis alle die benötigten Klassen mit Sicherheit geladen wurden.
Im Code-Schnippsel oben wird also gewartet, bis der SP.Social.SocialFollowingManager auf dem Client-Browser verfügbar ist.

Daten mit SP.Social.SocialFollowingManager Abfragen
Zum Abfragen der MySite  Daten wird die SocialFollowingManager Klasse verwendet. Auf dieser ist für unseren Case die getFollowed Methode interessant. Diese gibt als Resultat SocialActors zurück, welche die für uns relevanten Followed Sites enthalten. Aufgrund des SocialActorTypes kann bestimmt werden, welche Resultate (für uns Sites) im Result-Array gelistet werden.

Der folgende Code initialisiert den SocialFollowingManager und ruft anschliessend die getFollowed Methode auf:

var clientContext = SP.ClientContext.get_current();
var socialManager = new SP.Social.SocialFollowingManager(clientContext);
           
var socialActor = new SP.Social.SocialActorInfo();
socialActor.set_actorType(SP.Social.SocialActorTypes.sites);
           
var futureObject =  { result: socialManager.getFollowed(socialActor) };
     
clientContext.executeQueryAsync(
    function() {
        // visualize content in futureObject
    });

Zum Schluss wichtig ist der Aufruf von executeQueryAsync: Erst dieser führt den Call auf den Server aus und lädt die Daten vom Server ins futureObject.

Das WebPart als Ganzes
Anschliessend können die Daten mit beliebigem Client-seitigen Code visualisiert werden. Das Code-Schnippsel enthält ebenfalls den WebPart-Rumpf sowie die für ASP.NET benötigten Komponenten fürs Rendering.

[ToolboxData("<{0}:FavoritesWebPart runat=server></{0}:FavoritesWebPart>")]
public class FavoritesWebPart : System.Web.UI.WebControls.WebParts.WebPart
{
    #region Private Members

    private const string FavoritesContainerId = "fav";

    // Source:
    //  -> MSDN: http://msdn.microsoft.com/en-us/library/jj679862.aspx
    //  -> BLOG: http://techmikael.blogspot.ch/2013/03/following-or-favorite-pages-in.html
    //  -> BLOG: http://anujabhojani.blogspot.ch/2013_03_01_archive.html
    //  -> BLOG: http://blog.lekman.com/2013/06/making-suite-bar-menu-dropdown-in.html (SOLUTION)
    private const string FavoritesScriptStart = @"<script type=""text/javascript"">
<!--
(function($) {

(function(strElementId){

    var namicsFollower = {
        result: null,
        show: function() {
            var element = $("
"#"" + strElementId);
            $.each(this.result, function(idx, site) {
                var followCtnr = $("
"<p />"");
                var imageCtnr = $("
"<span />"",
                    {
                        style: "
"height:16px;width:16px;position:relative;display:inline-block;overflow:hidden;"",
                        'class': "
"s4-clust ms-promotedActionButton-icon""
                    });
                imageCtnr.append($("
"<img />"",
                    {
                        src: "
"/_layouts/15/images/spcommon.png?rev=23"",
                        alt: "
"Follow"",
                        style: "
"position: absolute; left: -218px; top: -48px;""
                    }));

                followCtnr.append(imageCtnr);
                followCtnr.append($("
"<a />"",
                    {
                        href: site.get_uri(),
                        text: site.get_name(),
                        style: "
"vertical-align: middle""
                    }));
                element.append(followCtnr);
            });
        },
        loadData: function() {
            var clientContext = SP.ClientContext.get_current();
            var socialManager = new SP.Social.SocialFollowingManager(clientContext);
       
            var socialActor = new SP.Social.SocialActorInfo();
            socialActor.set_actorType(SP.Social.SocialActorTypes.sites);
       
            this.result = socialManager.getFollowed(socialActor);

            clientContext.executeQueryAsync(Function.createDelegate(this, this.show));
        }
    }

    // Make sure SP.ClientContext is available
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
        // Make sure SocialFollowingManager is available
        SP.SOD.executeFunc('userprofile', 'SP.Social.SocialFollowingManager', function() {
            namicsFollower.loadData();
        });
    });
})("
;
    private const string FavoritesScriptInit = @"'{0}'";
    private const string FavoritesScriptEnd = @"
);

})(jQuery);

//-->
</script>"
;
   

    #endregion

    #region Public Members

    public FavoritesWebPart()
    {
    }

    /// <summary>
    /// Lifecycle override method for the CreateChildControls State of the WebPart.
    /// </summary>
    /// <remarks>
    /// The method handles all exceptions.
    /// </remarks>
    protected override void CreateChildControls()
    {
        try
        {
            base.CreateChildControls();

            HtmlControl favContainer = new HtmlGenericControl("div");
            favContainer.ID = FavoritesContainerId;
            Controls.Add(favContainer);

            Controls.Add(new LiteralControl(FavoritesScriptStart));
            Controls.Add(new LiteralControl(string.Format(
                FavoritesScriptInit,
                favContainer.ClientID)));
            Controls.Add(new LiteralControl(FavoritesScriptEnd));
        }
        catch (Exception ex)
        {
            // TODO: Log exception here...
            throw;
        }
    }

    #endregion
}

Ein Gedanke zu “Display SharePoint 2013 Followed items in a WebPart

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>