SharePoint

Flyoutanchor in Sandbox Solution

15 juli 2013

Ik heb altijd de beschikking gehad over ontwikkelen van Farm solutions bij klanten waar ik bezig ben geweest, maar nu Office 365 in populariteit groeit komt de vraag naar sandboxed solutions en apps meer en meer naar voren.

Toen SharePoint 2010 uit kwam ben ik gaan kijken naar Sandboxed solutions en wat hierin mogelijk was. In eerste instantie werd dit natuurlijk helemaal niets omdat het een behoorlijke restrictie geeft, maar ik keek er op een andere manier tegen aan. Ik zocht de oplossing en één waar ik het meest blij mee ben is het implementeren van de FlyoutAnchor binnen een Sandboxed solution.Ik heb de sandboxed oplossing al een tijdje op de plank en verder niets meegedaan, ook tot op heden ben ik verder niet op internet tegengekomen.

Ribbon
Sinds SharePoint 2010 is SharePoint voorzien van een Ribbon, deze Ribbon in eenvoudig uit te breiden met een CommandUIDefinition die op zijn beurt weer verschillende controls kan bevatten waaronder een FlyoutAnchor. Dit is een knop die zelf geen actie kent maar menuitems onder de knop bevat die wel een actie kennen. Een goed voorbeeld is de SendTo knop van een bibliotheek.

Flyoutanchor_1

Als we deze knop zelf willen maken moeten we SharePoint weten te vertellen welke knoppen hieronder vallen. Als het statische menu items zijn kan dit natuurlijk opgegeven worden bij de FlyoutAchor zelf, maar dit is niet waar dit artikel over gaat. Wat we willen bereiken is dat de menuitems worden bepaald door scripting en de menuitems dus dynamisch getoond kunnen worden.

Flyoutanchor_2

Op internet zijn verschillende Farm solutions te vinden die dit voor je bewerkstelligen, maar voor een sandboxed oplossing moet je ver gaan. Toch is het een stuk eenvoudiger dan je denkt.

Let’s get started

Als eerst moet je met het logische stuk beginnen en dat is de knop aanmaken, dit is hetzelfde als je altijd zou doen voor een Farm solution.

Flyoutanchor_3

De knop zelf krijgt geen CommandUIHandler toegewezen omdat dit niet nodig is, maar de knoppen die onder deze knop vallen geven we wel alvast een CommandUIHandler, zodat we scripting kunnen uitvoeren als een menuitem wordt aangeklikt.

De actie die we willen uitvoeren is een javascript functie die we via een javascript bestand installeren, de parameter die we meegeven is een simpel id die we bij het menuitem

De PopulateQueryCommand is het command dat uitgevoerd moet worden als de knop wordt ingedrukt, aan dit command moet javascript gekoppeld worden die de menuitems beschrijft.

JScript

Alle javascript die we nodig hebben deployen we via een aparte javascript bestanden. Het deployen van de javascript bestanden kan alleen maar gebeuren via een module. Een module is alleen te benaderen via de hoofdweb van een sitecollectie.

Flyoutanchor_4

Voor javscript die we direct nodig hebben moeten we er voor zorgen dat beschikbaar is binnen SharePoint, hiervoor gebruiken we de scriptsrc parameter van de CustomAction, omdat de module alleen aanwezig is op de sitecollectie kunnen we een directe link naar het bestand leggen.

Flyoutanchor_5

Initialiseren

Om de flyoutanchor goed te laten werken moet er een extra script ingeladen worden, dit script is ook wel PageComponent genaamd. Dit bestand kom je bijna overal tegen als je knoppen deployed voor de ribbon.

Dit bestand wordt niet direct ingeladen omdat het afhankelijk is van andere javascript bestanden van SharePoint. Daarom zorgen we ervoor dat een initialisatie script wordt uitgevoerd als de pagina is geladen.

Flyoutanchor_6

Het initialisatie script probeert het bestand ‘sp.ribbon.custom.ui.js’ bestand in te laden als de sp.js en de cui.js bestanden ingeladen zijn. Zodra de ‘sp.ribbon.custom.ui.js’ is ingeladen zorgen we ervoor dat de PageComponent ook wordt geinitialieerd.

Flyoutanchor_7

De _SPRoot variable is een shotcut om de sitecollectie op te vragen ivm subsite (Module zijn alleen via de rootsite te benaderen)

Flyoutanchor_8

PageComponent

De PageComponent heeft een standaard indeling en functies die aanwezig moeten zijn. Voor nu is maar één gedeelte interessant en dat is het prototype gedeelte.

Flyoutanchor_9

Dit gedeelte heeft 3 sectie die aangepast moeten worden om de flyoutanchor goed te laten werken en dat zijn de handleCommand, canHandleCommand en getFocusedCommands.

De getFocusedCommands geeft een array terug van de elementen die behandeld moeten kunnen worden.

Flyoutanchor_10

Zoals je ziet zijn de elementen genoemd van de gehele boom uit de CustomAction die de FlyoutAnchor beschrijft. De CustomAction Id, FlyoutAnchor Id, FlyoutAnchor Command en de Menuitems command. Al deze elementen moeten genoemd worden zodat dit allemaal behandeld kan worden.

De canHandleCommand verteld of de knop gebruikt kan worden, hierin kun je scripts plaatsen die de EnabledScript van de command kan zetten, in dit geval willen we de knoppen gewoon altijd aan hebben.

Flyoutanchor_11

De laatste functie handleCommand zorgt ervoor dat het juiste script draait om het menu op te bouwen. Hierin controleren we of de actie de actie is die we willen om de FlyoutAnchor te voorzien van items. Dit is het command die is opgegeven bij de PopulateQueryCommand.

Als dit command langs komt moet een javascript functie worden uitgevoerd die de menuitems creëert.

Flyoutanchor_12

Menuitems

Laten we het aanmaken van de menuitems simpel houden, maar hierin zou je net zo wild kunnen gaan als SharePoint het toelaat.
Voor nu maken we een menuitem aan met een vast ID maar wel een dynamische label, namelijk de huidige datum en tijd. (Om te laten zien dat het echt werkt).

Flyoutanchor_13

En natuurlijk werkt dit ook in Office 365!

Flyoutanchor_14

You Might Also Like

Geen reacties

Plaats een reactie