Een korte recap: hoe zat het ook alweer?
Standaard edit/view forms in Sharepoint zijn slecht aanpasbaar; de lijst/bibliotheekvelden worden weergegeven in een webonderdeel waaraan helaas niets veranderd kan worden. En dat terwijl je toch af en toe wel de behoefte heb om (zonder InfoPath of Designer) een mooi formulier te kunnen maken met wat meer intelligentie erin en een wat andere opmaak. Al was het maar het kunnen verbergen of zichtbaar maken van velden en het instellen van waarden van velden.
De truuk die je daarvoor kunt gebruiken is deze velden direct in de DOM object model te manipuleren. Je moet de velden dan eerst zien te vinden, waarna je eigenschappen ervan kunt wijzigen.
Een nieuwe opzet
In mijn eerste versie hiervan werden de velden recht-toe-recht-aan direct in het DOM object model opgezocht en gewijzigd. In mijn nieuwe opzet wordt eerst een JavaScript object model gemaakt van de velden in het formulier. Als dat model nueenmaal is gegenereerd kan eenvoudiger via JavaScript worden gewijzigd waarbij de bijgehorende velden in het DOM object model automatisch worden aangepast. Er is als het ware een abstractielaagje tussen het DOM object model en de intelligentie in de pagina gevoegd. Da's al een wat nettere opzet.
Maar nu naar de praktijk...
Een voorbeeld implementatie
Als demo van de nieuwe opzet heb ik het volgende geimplementeerd: een standaard list edit webpagina aangevuld met de volgende webonderdelen:
- Een Content Editor webonderdeel met JavaScript code om van de velden in het gesloten veld webonderdeel een JavaScript object model te genereren
- Een Content Editor webonderdeel voor een zelfgebouwde veld editor waarin wijzigingen (weergeven/verbergen) in het JavaScript object model kunnen worden doorgevoerd en in de webpagina worden getoond , "just for demo purposes".
Natuurlijk moet hiervoor eerst een testlijst worden gemaakt. Bij voorkeur een met velden voor ieder mogelijk veldtype, om alle mogelijkheden eens uit te proberen.
Edit modus van een lijst item edit formulier
Om een standaard listitem edit formulier te kunnen wijzigen moet het eerst in edit modus gebracht worden. Dat was in Sharepoint 2007 gemakkelijk (toevoegen van ToolPaneView=2 aan de URL van de betreffende webpagina). De SharePoint 2010 interface is echter gewijzigd ten opzichte van die van SharePoint 2007; een lijstitem wordt in een popup getoond. Aan de SharePoint 2010 URL's (b.v. http://hrweb.contoso.com/Lists/TestList1/AllItems.aspx) kun je daarom niet zien welke aspx pagina gebruikt wordt voor de popup. Daar kun je achter komen door via de rechtermuisknop de properties van de popup pagina op te vragen. Deze zal lijken op de volgende voorbeeld URL: http://hrweb.contoso.com/Lists/TestList1/EditForm.aspx. Via de truuk met de ToolPaneView=2 parameter kun je deze pagina in Edit-mode krijgen en kunnen de aanpassingen gemaakt worden.
Toevoegen van benodigde webonderdelen
In de opzet van de demo wordt het webonderdeel met de zelfgebouwde veld editor boven het gesloten webonderdelen met de velden geplaatst en het webonderdeel met de JavaScript code om van de velden in het gesloten veld webonderdeel een JavaScript object model te genereren eronder.
Het instellen van Content Editor webonderdelen gaat overigens enigszins anders dan in SharePoint 2007. Kon je met Sharepoint 2007 eenvoudig de HTML code via het properties menu instellen, in SharePoint 2010 moet je in het webonderdeel zelf klikken en via de Ribbon "Edit HTML source" selecteren. Daarnaast verandert SharePoint het een en ander in de code die je invoert zodat het editten ervan niet bepaald gebruiksvriendelijk wordt. Het is aan te raden om de JavaScript code in een gewone texteditor (tip: gratis NoteTab) te onderhouden en te plakken in het betreffende Content Editor webonderdeel. 't Is even wennen.
Webonderdeel 2: genereren van het JavaScript object model
JavaScipt kent user defined objecten die op een eenvoudige manier zijn aan te maken. De objecten kennen properties en kunnen worden uitgebreid met methods. Voor ons voorbeeld wordt een formulier object aangemaakt met daarin een array met veld objecten. Onderstaande code geeft op hoofdlijnen weer hoe deze objecten worden gedefinieerd.
function Form( iFormname ) {
this.Name = iFormname;
this.Fields = new Array();
// Scan form for fields and store them in the Fields array
ScanFields( this.Fields );
}
Form.prototype.FormFieldLookup = FormFieldLookup;
function Field( iFieldname, iRequired, ioDOMobject, ioRowDOMobject ) {
this.Name = iFieldname;
this.Required = iRequired;
this.Visible = true;
this.Enabled = true;
this.FieldDOMobject = ioDOMobject;
this.FieldRowDOMobject = ioRowDOMobject;
}
Field.prototype.FieldSetVisibility = FieldSetVisibility;
Field.prototype.FieldSetEnabled = FieldSetEnabled;
Met de ScanField functie wordt het JavaScript object model gevuld met de in pagina aanwezige velden. Deze zijn te herkennen aan de <h3 class="ms-standardheader"> tags. De veldkenmerken zijn dan eenvoudig in het DOM object model op te zoeken en aan het JavaScript object model toe te voegen. Om zelf eens te kijken hoe het DOM object model eruit ziet kan gebruik worden gemaakt van de "View source" functie in de browser en de IE Developer Toolbar.
Webonderdeel 1: de zelfgebouwde veld editor
Dit webonderdeel wordt gegenereerd op basis van een div en een tabelletje die middels JavaScript wordt gevuld met de veldinformatie in het JavaScript object model.
In de veld editor worden de JavaScript functies waarmee het JavaScript object model (en daarmee het DOM object model) vervolgens aangeroepen.
Enkele voorbeelden:
Opzoeken van een veldobject op basis van de veldnaam in het JavaScript obect model:
var vField = vForm.FormFieldLookup( vConsoleSelectFields.options[vConsoleSelectFields.selectedIndex].text );
Verbergen van een veldobject:
vField.FieldSetVisibility( iChecked );
Updates van deze blogpost
Deze eerste versie is nog wat summier. Maar zoals vorige keer deed zal ik ook nu in deze blogpost doen: in de loop van de tijd verder uitbreiden met uitleg, voorbeelden en toepassingen.
Happy coding!
Geen opmerkingen:
Een reactie posten