Navigációs lehetőségek a SharePointhoz

Ez a cikk azokat a navigációs lehetőségeket bemutató webhelyeket ismerteti, amelyeken engedélyezve van a SharePoint-közzététel a SharePointban. A navigáció kiválasztása és konfigurálása jelentősen befolyásolja a SharePoint-webhelyek teljesítményét és méretezhetőségét. A SharePoint-közzétételi webhelysablont csak akkor szabad használni, ha egy központosított portálhoz szükséges, és a közzétételi funkciót csak bizonyos webhelyeken szabad engedélyezni, és csak akkor, ha szükséges, mert ez befolyásolhatja a teljesítményt helytelen használat esetén.

A navigációs lehetőségek áttekintése

A navigációs szolgáltató konfigurálása jelentősen befolyásolhatja a teljes webhely teljesítményét, és körültekintően kell eljárni, hogy olyan navigációs szolgáltatót és konfigurációt válasszon, amely hatékonyan méretezhető a SharePoint-webhelyek követelményeinek megfelelően. Két beépített navigációs szolgáltató, valamint egyéni navigációs implementációk érhetők el.

Az első lehetőség, a Szerkezeti navigáció a SharePointban a klasszikus SharePoint-webhelyekhez ajánlott navigációs lehetőség, ha bekapcsolja a webhely szerkezeti navigációs gyorsítótárazását. Ez a navigációs szolgáltató megjeleníti az aktuális webhely alatti navigációs elemeket, és opcionálisan az aktuális webhelyet és annak testvéreit. Olyan további képességeket biztosít, mint a biztonsági vágás és a helystruktúra enumerálása. Ha a gyorsítótárazás le van tiltva, az negatív hatással lesz a teljesítményre és a méretezhetőségre, és szabályozható lehet.

A második lehetőség, a Felügyelt (metaadatok) navigáció egy felügyelt metaadat-kifejezéskészletet használó navigációs elemeket jelöl. Azt javasoljuk, hogy ha szükséges, tiltsa le a biztonsági vágást. A biztonsági vágás alapértelmezés szerint engedélyezve van ehhez a navigációs szolgáltatóhoz; Sok webhely azonban nem igényli a biztonsági vágás többletterhelését, mivel a navigációs elemek gyakran konzisztensek a webhely összes felhasználója számára. A biztonsági vágás letiltásához javasolt konfigurációval ez a navigációs szolgáltató nem igényli a webhelyszerkezet számbavételét, és nagy mértékben méretezhető, elfogadható teljesítményhatás mellett.

A beépített navigációs szolgáltatók mellett számos ügyfél sikeresen implementált alternatív egyéni navigációs implementációkat. Ebben a cikkben Keresés-alapú ügyféloldali parancsfájl-készítésről olvashat.

A SharePoint navigációs lehetőségeinek előnyei és hátrányai

Az alábbi táblázat összefoglalja az egyes lehetőségek előnyeit és hátrányait.

Szerkezeti navigáció	Felügyelt navigáció	Keresés-alapú navigáció	Egyéni navigációs szolgáltató
Profik: Könnyen karbantartható Biztonsági beállítások levágva Automatikus frissítés 24 órán belül a tartalom módosításakor	Profik: Könnyen karbantartható	Profik: Biztonsági beállítások levágva Automatikus frissítések a webhelyek hozzáadásakor Gyors betöltési idő és helyileg gyorsítótárazott navigációs struktúra	Profik: Az elérhető lehetőségek szélesebb választéka Gyors betöltés a gyorsítótárazás megfelelő használata esetén Számos lehetőség jól működik a rugalmas laptervezéssel
Hátránya: Hatással van a teljesítményre, ha a gyorsítótárazás le van tiltva Szabályozástól függő	Hátránya: Nem frissül automatikusan a webhelyszerkezetnek megfelelően Hatással van a teljesítményre, ha a biztonsági vágás engedélyezve van , vagy ha a navigációs struktúra összetett	Hátránya: Nem lehet egyszerűen megrendelni a webhelyeket A mesteroldal testreszabását igényli (technikai készségek szükségesek)	Hátránya: Egyéni fejlesztésre van szükség Külső adatforrásra/gyorsítótárra van szükség, például az Azure-ra

A webhely legmegfelelőbb beállítása a webhely követelményeitől és a műszaki képességeitől függ. Ha olyan könnyen konfigurálható navigációs szolgáltatót szeretne, amely automatikusan frissül a tartalom módosításakor, akkor a gyorsítótárazást engedélyező szerkezeti navigáció jó választás.

Navigációs teljesítmény elemzése a SharePointban

A Lapdiagnosztika a SharePointhoz eszköz a Microsoft Edge és a Chrome böngészők böngészőbővítménye, amely a Modern SharePoint portált és a klasszikus közzétételi webhelylapokat egyaránt elemzi. Ez az eszköz csak a SharePointban működik, és nem használható a SharePoint rendszerlapján.

Az eszköz minden elemzett oldalhoz létrehoz egy jelentést, amely bemutatja, hogyan teljesít az oldal egy előre meghatározott szabálykészleten, és részletes információkat jelenít meg, ha egy teszt eredményei kívül esnek az alapértéken. A SharePoint rendszergazdái és tervezői az eszközzel elháríthatják a teljesítménnyel kapcsolatos problémákat, így gondoskodhatnak arról, hogy az új lapok a közzététel előtt optimalizálva legyenek.

Az SPRequestDuration különösen az az idő, amely alatt a SharePoint feldolgozhatja a lapot. A nehéz navigáció (például a lapok bele foglalása a navigációba), az összetett webhelyhierarchiák, valamint az egyéb konfigurációs és topológiai beállítások jelentősen hozzájárulhatnak a hosszabb időtartamokhoz.

Szerkezeti navigáció használata a SharePointban

Ez a beépített navigáció, amelyet alapértelmezés szerint használnak, és ez a legegyszerűbb megoldás. Nincs szükség testreszabásra, és a nem műszaki felhasználók egyszerűen hozzáadhatnak elemeket, elrejthetnek elemeket, és kezelhetik a navigációt a beállítások lapról. Javasoljuk, hogy engedélyezze a gyorsítótárazást, különben költséges teljesítménybeli kompromisszumra van szükség.

Szerkezeti navigációs gyorsítótárazás implementálása

A Webhely beállításai>– Megjelenési navigáció> területenellenőrizheti, hogy a szerkezeti navigáció van-e kiválasztva a globális vagy az aktuális navigációhoz. A Lapok megjelenítése lehetőség választása negatív hatással lesz a teljesítményre.

A gyorsítótárazás a webhelycsoport szintjén és a webhely szintjén is engedélyezhető vagy letiltható, és alapértelmezés szerint mindkettőhöz engedélyezve van. Ha a webhelycsoport szintjén szeretné engedélyezni az engedélyezést, a Webhely beállításai>webhelycsoport felügyeleti>webhelycsoport-navigáció területén jelölje be a Gyorsítótárazás engedélyezése jelölőnégyzetet.

Ha a webhely szintjén szeretné engedélyezni az engedélyezést, a Webhely beállításainak>navigációja területen jelölje be a Gyorsítótárazás engedélyezése jelölőnégyzetet.

Felügyelt navigáció és metaadatok használata a SharePointban

A felügyelt navigáció egy másik beépített lehetőség, amellyel újra létrehozhatja a szerkezeti navigációval azonos funkciók többségét. A felügyelt metaadatok konfigurálhatók úgy, hogy a biztonsági vágás engedélyezve legyen vagy le legyen tiltva. Ha letiltott biztonsági vágással van konfigurálva, a felügyelt navigáció meglehetősen hatékony, mivel az összes navigációs hivatkozást állandó számú kiszolgálóhívással tölti be. A biztonsági vágás engedélyezése azonban a felügyelt navigáció néhány teljesítményelőnyét eltitkolja.

Ha engedélyeznie kell a biztonsági vágást, javasoljuk, hogy:

• Az összes felhasználóbarát URL-hivatkozás frissítése egyszerű hivatkozásokra
• A szükséges biztonsági vágási csomópontok hozzáadása felhasználóbarát URL-címekként
• A navigációs elemek számának korlátozása legfeljebb 100-ra és legfeljebb három szint mélyre

Számos webhely esetében nincs szükség biztonsági vágásra, mivel a navigációs struktúra gyakran konzisztens a webhely összes felhasználója számára. Ha a biztonsági vágás le van tiltva, és olyan hivatkozást ad hozzá a navigációhoz, amelyhez nem minden felhasználó fér hozzá, a hivatkozás továbbra is megjelenik, de hozzáférés-megtagadási üzenethez vezet. A tartalomhoz való véletlen hozzáférés nem áll fenn.

Felügyelt navigáció implementálása és az eredmények

A felügyelt navigáció részleteiről a Microsoft Learn számos cikket tartalmaz. Lásd például a Felügyelt navigáció áttekintése a SharePoint Serverben című témakört.

A felügyelt navigáció implementálásához a webhely navigációs szerkezetének megfelelő kifejezéseket és URL-címeket kell megadnia. A felügyelt navigáció akár manuálisan is összeválogatható, hogy sok esetben lecserélje a szerkezeti navigációt. Például:

)

Keresés-alapú ügyféloldali szkriptelés használata

Az egyéni navigációs implementációk egyik gyakori osztálya az ügyfél által renderelt tervezési mintákat használja, amelyek a navigációs csomópontok helyi gyorsítótárát tárolják.

Ezeknek a navigációs szolgáltatóknak több fő előnye is van:

• Általában jól működnek rugalmas oldaltervekkel.
• Rendkívül skálázhatóak és nagy teljesítményűek, mert erőforrás-költség nélkül renderelhetők (és az időtúllépés után a háttérben frissíthetnek).
• Ezek a navigációs szolgáltatók különböző stratégiákkal képesek lekérni a navigációs adatokat, az egyszerű statikus konfigurációktól a különböző dinamikus adatszolgáltatókig.

Az adatszolgáltató például egy Keresés-alapú navigációt használ, amely rugalmasságot biztosít a navigációs csomópontok számbavételéhez és a biztonsági vágás hatékony kezeléséhez.

Az egyéni navigációs szolgáltatók létrehozására más népszerű lehetőségek is rendelkezésre állnak. Az egyéni navigációs szolgáltató létrehozásával kapcsolatos további útmutatásért tekintse át a SharePoint-portálok navigációs megoldásait .

A kereséssel folyamatos bejárással kihasználhatja a háttérben létrehozott indexeket. A rendszer lekérte a keresési eredményeket a keresési indexből, és az eredményeket biztonsági szempontból levágta. Ez általában gyorsabb, mint a beépített navigációs szolgáltatók, ha biztonsági vágásra van szükség. A szerkezeti navigáció keresésének használata , különösen ha összetett webhelyszerkezettel rendelkezik, jelentősen felgyorsítja az oldalbetöltési időt. Ennek a felügyelt navigációval szemben az a fő előnye, hogy kihasználhatja a biztonsági vágás előnyeit.

Ez a megközelítés magában foglalja egy egyéni mesterlap létrehozását, és a beépített navigációs kód egyéni HTML-kódra való cseréjét. Az alábbi példában ismertetett eljárást követve cserélje le a fájl seattle.htmlnavigációs kódját. Ebben a példában megnyitja a seattle.html fájlt, és a teljes elemet id="DeltaTopNavigation" egyéni HTML-kódra cseréli.

Példa: A beépített navigációs kód cseréje egy mesterlapon

1. Lépjen a Webhely beállításai lapra.
2. A Mesteroldalak elemre kattintva nyissa meg a mesterlapgyűjteményt.
3. Innen navigálhat a tárban, és letöltheti a fájlt seattle.master.
4. Szerkessze a kódot egy szövegszerkesztővel, és törölje a kódblokkot az alábbi képernyőképen.
   
   
5. Távolítsa el a és <\SharePoint:AjaxDelta> a <SharePoint:AjaxDelta id="DeltaTopNavigation"> címkék közötti kódot, és cserélje le a következő kódrészletre:
   

<div id="loading">
  <!--Replace with path to loading image.-->
  <div style="background-image: url(''); height: 22px; width: 22px; ">
  </div>
</div>
<!-- Main Content-->
<div id="navContainer" style="display:none">
    <div data-bind="foreach: hierarchy" class="noindex ms-core-listMenu-horizontalBox">
        <a class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" data-bind="attr: { href: item.Url, title: item.Title }">
            <span class="menu-item-text" data-bind="text: item.Title">
            </span>
        </a>
        <ul id="menu" data-bind="foreach: $data.children" style="padding-left:20px">
            <li class="static dynamic-children level1">
                <a class="static dynamic-children menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" data-bind="attr: { href: item.Url, title: item.Title }">

                 <!-- ko if: children.length > 0-->
                    <span aria-haspopup="true" class="additional-background ms-navedit-flyoutArrow dynamic-children">
                        <span class="menu-item-text" data-bind="text: item.Title">
                        </span>
                    </span>
                <!-- /ko -->
                <!-- ko if: children.length == 0-->
                    <span aria-haspopup="true" class="ms-navedit-flyoutArrow dynamic-children">
                        <span class="menu-item-text" data-bind="text: item.Title">
                        </span>
                    </span>
                <!-- /ko -->
                </a>

                <!-- ko if: children.length > 0-->
                <ul id="menu"  data-bind="foreach: children;" class="dynamic  level2" >
                    <li class="dynamic level2">
                        <a class="dynamic menu-item ms-core-listMenu-item ms-displayInline  ms-navedit-linkNode" data-bind="attr: { href: item.Url, title: item.Title }">

          <!-- ko if: children.length > 0-->
          <span aria-haspopup="true" class="additional-background ms-navedit-flyoutArrow dynamic-children">
           <span class="menu-item-text" data-bind="text: item.Title">
           </span>
          </span>
           <!-- /ko -->
          <!-- ko if: children.length == 0-->
          <span aria-haspopup="true" class="ms-navedit-flyoutArrow dynamic-children">
           <span class="menu-item-text" data-bind="text: item.Title">
           </span>
          </span>
          <!-- /ko -->
                        </a>
          <!-- ko if: children.length > 0-->
         <ul id="menu" data-bind="foreach: children;" class="dynamic level3" >
          <li class="dynamic level3">
           <a class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" data-bind="attr: { href: item.Url, title: item.Title }">
            <span class="menu-item-text" data-bind="text: item.Title">
            </span>
           </a>
          </li>
         </ul>
           <!-- /ko -->
                    </li>
                </ul>
                <!-- /ko -->
            </li>
        </ul>
    </div>
</div>

6. Cserélje le az URL-címet az elején a betöltő kép horgonycímkéjében egy, a webhelycsoportban lévő betöltési képre mutató hivatkozásra. Miután elvégezte a módosításokat, nevezze át a fájlt, majd töltse fel a mesterlaptárba. Ez létrehoz egy új .master fájlt.
7. Ez a HTML az az alapszintű korrektúra, amelyet a JavaScript-kódból visszaadott keresési eredmények fognak feltölteni. A var root = "webhelycsoport URL-címe" értékének módosításához szerkesztenie kell a kódot az alábbi kódrészletben látható módon:

var root = "https://spperformance.sharepoint.com/sites/NavigationBySearch";

8. Az eredmények a self.nodes tömbhöz vannak rendelve, és egy hierarchia jön létre az objektumokból, linq.js a kimenetet egy self.hierarchy tömbhöz rendeli. Ez a tömb a HTML-hez kötött objektum. Ez a váltóNézet() függvényben történik úgy, hogy átadja az önobjektumot a ko.applyBinding() függvénynek.
Ez után a hierarchiatömb a következő HTML-hez lesz kötve:

<div data-bind="foreach: hierarchy" class="noindex ms-core-listMenu-horizontalBox">

A és az eseménykezelői mouseentermouseexit hozzá lesznek adva a felső szintű navigációhoz az alwebhely legördülő menüinek kezeléséhez, amely a addEventsToElements() függvényben történik.

Összetett navigációs példánkban a helyi gyorsítótárazás nélküli friss oldalbetöltés azt mutatja, hogy a kiszolgálóra fordított időt a teljesítményteszt szerkezeti navigációjából csökkentettük, hogy a felügyelt navigációhoz hasonló eredményt kapjunk.

Tudnivalók a JavaScript-fájlról...

A teljes JavaScript-fájl a következő:

//Models and Namespaces
var SPOCustom = SPOCustom || {};
SPOCustom.Models = SPOCustom.Models || {}
SPOCustom.Models.NavigationNode = function () {

    this.Url = ko.observable("");
    this.Title = ko.observable("");
    this.Parent = ko.observable("");

};

var root = "https://spperformance.sharepoint.com/sites/NavigationBySearch";
var baseUrl = root + "/_api/search/query?querytext=";
var query = baseUrl + "'contentClass=\"STS_Web\"+path:" + root + "'&trimduplicates=false&rowlimit=300";

var baseRequest = {
    url: "",
    type: ""
};


//Parses a local object from JSON search result.
function getNavigationFromDto(dto) {
    var item = new SPOCustom.Models.NavigationNode();
    if (dto != undefined) {

        var webTemplate = getSearchResultsValue(dto.Cells.results, 'WebTemplate');

        if (webTemplate != "APP") {
            item.Title(getSearchResultsValue(dto.Cells.results, 'Title')); //Key = Title
            item.Url(getSearchResultsValue(dto.Cells.results, 'Path')); //Key = Path
            item.Parent(getSearchResultsValue(dto.Cells.results, 'ParentLink')); //Key = ParentLink
        }

    }
    return item;
}

function getSearchResultsValue(results, key) {

    for (i = 0; i < results.length; i++) {
        if (results[i].Key == key) {
            return results[i].Value;
        }
    }
    return null;
}

//Parse a local object from the serialized cache.
function getNavigationFromCache(dto) {
    var item = new SPOCustom.Models.NavigationNode();

    if (dto != undefined) {

        item.Title(dto.Title);
        item.Url(dto.Url);
        item.Parent(dto.Parent);
    }

    return item;
}

/* create a new OData request for JSON response */
function getRequest(endpoint) {
    var request = baseRequest;
    request.type = "GET";
    request.url = endpoint;
    request.headers = { ACCEPT: "application/json;odata=verbose" };
    return request;
};

/* Navigation Module*/
function NavigationViewModel() {
    "use strict";
    var self = this;
    self.nodes = ko.observableArray([]);
    self.hierarchy = ko.observableArray([]);;
    self.loadNavigatioNodes = function () {
        //Check local storage for cached navigation datasource.
        var fromStorage = localStorage["nodesCache"];
        if (false) {
            var cachedNodes = JSON.parse(localStorage["nodesCache"]);

            if (cachedNodes && timeStamp) {
                //Check for cache expiration. Currently set to 3 hrs.
                var now = new Date();
                var diff = now.getTime() - timeStamp;
                if (Math.round(diff / (1000 * 60 * 60)) < 3) {

                    //return from cache.
                    var cacheResults = [];
                    $.each(cachedNodes, function (i, item) {
                        var nodeitem = getNavigationFromCache(item, true);
                        cacheResults.push(nodeitem);
                    });

                    self.buildHierarchy(cacheResults);
                    self.toggleView();
                    addEventsToElements();
                    return;
                }
            }
        }
        //No cache hit, REST call required.
        self.queryRemoteInterface();
    };

    //Executes a REST call and builds the navigation hierarchy.
    self.queryRemoteInterface = function () {
        var oDataRequest = getRequest(query);
        $.ajax(oDataRequest).done(function (data) {
            var results = [];
            $.each(data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results, function (i, item) {

                if (i == 0) {
                    //Add root element.
                    var rootItem = new SPOCustom.Models.NavigationNode();
                    rootItem.Title("Root");
                    rootItem.Url(root);
                    rootItem.Parent(null);
                    results.push(rootItem);
                }
                var navItem = getNavigationFromDto(item);
                results.push(navItem);
            });
            //Add to local cache
            localStorage["nodesCache"] = ko.toJSON(results);

            localStorage["nodesCachedAt"] = new Date().getTime();
            self.nodes(results);
            if (self.nodes().length > 0) {
                var unsortedArray = self.nodes();
                var sortedArray = unsortedArray.sort(self.sortObjectsInArray);

                self.buildHierarchy(sortedArray);
                self.toggleView();
                addEventsToElements();
            }
        }).fail(function () {
            //Handle error here!!
            $("#loading").hide();
            $("#error").show();
        });
    };
    self.toggleView = function () {
        var navContainer = document.getElementById("navContainer");
        ko.applyBindings(self, navContainer);
        $("#loading").hide();
        $("#navContainer").show();

    };
    //Uses linq.js to build the navigation tree.
    self.buildHierarchy = function (enumerable) {
        self.hierarchy(Enumerable.From(enumerable).ByHierarchy(function (d) {
            return d.Parent() == null;
        }, function (parent, child) {
            if (parent.Url() == null || child.Parent() == null)
                return false;
            return parent.Url().toUpperCase() == child.Parent().toUpperCase();
        }).ToArray());

        self.sortChildren(self.hierarchy()[0]);
    };


    self.sortChildren = function (parent) {

        // sjip processing if no children
        if (!parent || !parent.children || parent.children.length === 0) {
            return;
        }

        parent.children = parent.children.sort(self.sortObjectsInArray2);

        for (var i = 0; i < parent.children.length; i++) {
            var elem = parent.children[i];

            if (elem.children && elem.children.length > 0) {
                self.sortChildren(elem);
            }
        }
    };

    // ByHierarchy method breaks the sorting in chrome and firefox
    // we need to resort  as ascending
    self.sortObjectsInArray2 = function (a, b) {
        if (a.item.Title() > b.item.Title())
            return 1;
        if (a.item.Title() < b.item.Title())
            return -1;
        return 0;
    };


    self.sortObjectsInArray = function (a, b) {
        if (a.Title() > b.Title())
            return -1;
        if (a.Title() < b.Title())
            return 1;
        return 0;
    }
}

//Loads the navigation on load and binds the event handlers for mouse interaction.
function InitCustomNav() {
    var viewModel = new NavigationViewModel();
    viewModel.loadNavigatioNodes();
}

function addEventsToElements() {
    //events.
      $("li.level1").mouseover(function () {
          var position = $(this).position();
          $(this).find("ul.level2").css({ width: 100, left: position.left + 10, top: 50 });
      })
   .mouseout(function () {
     $(this).find("ul.level2").css({  left: -99999, top: 0 });
   
    });
   
     $("li.level2").mouseover(function () {
          var position = $(this).position();
          console.log(JSON.stringify(position));
          $(this).find("ul.level3").css({ width: 100, left: position.left + 95, top:  position.top});
      })
   .mouseout(function () {
     $(this).find("ul.level3").css({  left: -99999, top: 0 });
    });
} _spBodyOnLoadFunctionNames.push("InitCustomNav");

A függvényben jQuery $(document).ready fent látható kód összegzéséhez létrejön egy viewModel object létrehozott függvény, majd meghívja az loadNavigationNodes() objektumon lévő függvényt. Ez a függvény betölti az ügyfélböngésző HTML5 helyi tárolójában tárolt, korábban létrehozott navigációs hierarchiát, vagy meghívja a függvényt queryRemoteInterface().

QueryRemoteInterface() létrehoz egy kérést a getRequest() függvény használatával a szkriptben korábban definiált lekérdezési paraméterrel, majd adatokat ad vissza a kiszolgálóról. Ezek az adatok lényegében a webhelycsoport összes webhelyének tömbje, amely különböző tulajdonságokkal rendelkező adatátviteli objektumokként jelenik meg.

Ezek az adatok ezután a korábban definiált SPO.Models.NavigationNode objektumokba lesznek elemezve, amelyek Knockout.js használatával megfigyelhető tulajdonságokat hozhatnak létre az értékeknek a korábban definiált HTML-fájlba való kötésével.

Az objektumok ezután egy eredménytömbbe kerülnek. Ez a tömb a Knockout használatával JSON-ra van elemezve, és a helyi böngészőtárban van tárolva, hogy jobb teljesítményt nyújtson a későbbi lapbetöltések során.

A megközelítés előnyei

Ennek a megközelítésnek az egyik fő előnye, hogy a HTML5 helyi tároló használatával a navigáció helyileg lesz tárolva a felhasználó számára, amikor legközelebb betölti az oldalt. Jelentős teljesítménybeli fejlesztésekhez juthatunk a keresési API szerkezeti navigációhoz való használatával; ennek a funkciónak a végrehajtásához és testreszabásához azonban bizonyos technikai képességekre van szükség.

A példaimplementációban a webhelyek ugyanúgy vannak rendezve, mint a beépített szerkezeti navigáció; betűrendben. Ha el szeretne térni ettől a sorrendtől, bonyolultabb lenne a fejlesztés és a karbantartás. Ehhez a megközelítéshez el kell térnie a támogatott mesterlapoktól. Ha az egyéni mesterlapot nem tartja karban, a webhely kihagyja a Microsoft által a mesteroldalakon végzett frissítéseket és fejlesztéseket.

A fenti kód a következő függőségekkel rendelkezik:

• Jquery- https://jquery.com/
• KnockoutJS - https://knockoutjs.com/
• Linq.js – https://linqjs.codeplex.com/vagy github.com/neuecc/linq.js

A LinqJS jelenlegi verziója nem tartalmazza a fenti kódban használt ByHierarchy metódust, és megszakítja a navigációs kódot. A probléma megoldásához adja hozzá a következő metódust az Linq.js fájlhoz a sor Flatten: function ()előtt.

ByHierarchy: function(firstLevel, connectBy, orderBy, ascending, parent) {
     ascending = ascending == undefined ? true : ascending;
     var orderMethod = ascending == true ? 'OrderBy' : 'OrderByDescending';
     var source = this;
     firstLevel = Utils.CreateLambda(firstLevel);
     connectBy = Utils.CreateLambda(connectBy);
     orderBy = Utils.CreateLambda(orderBy);

     //Initiate or increase level
     var level = parent === undefined ? 1 : parent.level + 1;

    return new Enumerable(function() {
         var enumerator;
         var index = 0;

        var createLevel = function() {
                 var obj = {
                     item: enumerator.Current(),
                     level : level
                 };
                 obj.children = Enumerable.From(source).ByHierarchy(firstLevel, connectBy, orderBy, ascending, obj);
                 if (orderBy !== undefined) {
                     obj.children = obj.children[orderMethod](function(d) {
                         return orderBy(d.item); //unwrap the actual item for sort to work
                     });
                 }
                 obj.children = obj.children.ToArray();
                 Enumerable.From(obj.children).ForEach(function(child) {
                     child.getParent = function() {
                         return obj;
                     };
                 });
                 return obj;
             };

        return new IEnumerator(

        function() {
             enumerator = source.GetEnumerator();
         }, function() {
             while (enumerator.MoveNext()) {
                 var returnArr;
                 if (!parent) {
                     if (firstLevel(enumerator.Current(), index++)) {
                         return this.Yield(createLevel());
                     }

                } else {
                     if (connectBy(parent.item, enumerator.Current(), index++)) {
                         return this.Yield(createLevel());
                     }
                 }
             }
             return false;
         }, function() {
             Utils.Dispose(enumerator);
         })
     });
 },

Kapcsolódó témakörök

Felügyelt navigáció áttekintése a SharePoint Serverben

Szerkezeti navigáció gyorsítótárazása és teljesítménye