SharePoint Classic Form Ontwikkeling met Shareflex

SharePoint Online Classic en Modern

Shareflex gaat over het bouwen van (zakelijke) apps voor SharePoint Online. Microsoft biedt nu een gloednieuwe SharePoint Online moderne gebruikersinterface als toekomstige vervanging van de oudere klassieke gebruikersinterface van SharePoint Online.

Hoewel Shareflex beide omgevingen ondersteunt, SharePoint Online Classic en Modern, is er een groot verschil tussen beide. Dit bericht behandelt Shareflex Form Development op Classic SharePoint. We zullen de SharePoint Classic-ervaring uitleggen en laten zien.

Als u op zoek bent naar (low-code) ontwikkeling voor moderne gebruikersinterface, raden we u het volgende bericht aan over de SharePoint Online moderne interface.

BFE Forms Wizard voor klassieke gebruikersinterface

De gemakkelijkste en snelste manier om een nieuwe SharePoint Classic UI-applicatie te bouwen met Shareflex is om een bestaand Shareflex-implementatiepakket te gebruiken. Pas eenvoudig het SharePoint-aangepaste Forms-implementatiescript aan om te voldoen aan de vereisten voor de nieuwe SharePoint-toepassing en werk de xml- en JavaScript-bestanden in de implementatiemap bij.

Het resultaat van deze aanpak kan echter soms teleurstellend zijn. Als de nieuwe Microsoft SharePoint app bijvoorbeeld iets anders werkt wanneer u deze vergelijkt met de bestaande applicatie, of u bent vergeten slechts een klein stukje code in een van de bestanden.

Daarom is het in veel gevallen beter om te beginnen met het bouwen van de SharePoint-app vanaf het begin met behulp van de BFE Forms Wizard. Het is erg handig bij het genereren van het basisformulier en functies zoals het maken van de tabbladen, het plaatsen van de geselecteerde velden onder elk tabblad en het op een visuele manier weergeven van secundaire weergaven op de pagina. Bovendien kunt u met deze wizard eenvoudig de benodigde code produceren om unieke ID’s te genereren die worden gebruikt om de lijstitems te koppelen aan gerelateerde bestanden die zijn geüpload naar een afzonderlijke documentbibliotheek.

Voorbereidingen

Voordat u de BFE Forms Wizard kunt gebruiken, heeft u een SharePoint-site, een lijst, een documentbibliotheek (wanneer u bestanden in uw applicatie wilt toestaan) en velden nodig. In dit artikel gebruiken we de siteverzameling ‘formsdesignertest’, een lijst met de naam ‘Test List’ en een documentbibliotheek met de naam ‘Test List Documents’.

De stappen zijn:

  • Maak de site (‘formdesignertest’)
  • Misschien wilt u standaardbibliotheken en lijsten verwijderen als u deze niet nodig heeft (zoals documenten en sitemiddelen).
  • Maak een lijst (‘TestList’) en enkele lijstkolommen. Zorg ervoor dat u een tekstkolom van één regel maakt voor de unieke ID, in dit voorbeeld: fld_ID
  • Maak een documentbibliotheek waar bijlagen moeten worden opgeslagen (‘TestListDocuments’). Maak vervolgens een tekstkolom met één regel voor de unieke ID die overeenkomt met de TestList. In dit voorbeeld: fld_ID
  • Tenzij u de speciale ‘BFE’-weergave gaat gebruiken voor het weergeven van secundaire lijstitems (zie volgende opsommingsteken), moet u de’ AllItems’-weergave in de TestListDocuments-documentbibliotheek aanpassen zoals beschreven in het volgende opsommingsteken. Anders zijn er geen voorschriften voor de Allitems-weergave. Een mogelijke logische structuur is:
    • Weergeven: Edit, Type, Name, fld_ID, mogelijke andere
    • Sorteren op fld_ID
    • Items in map weergeven (default)

SharePoint classic form 1

  • Maak een nieuwe weergave in de documentbibliotheek met de naam BFE (die zal worden gebruikt om secundaire bestanden voor het item weer te geven)
    • Display: Edit, Type, Name
    • Sorteren op Title
    • Toon alle items zonder mappen

SharePoint classic form 2

How to use the BFE Forms Wizard

Open vanuit de Shareflex Web Deployment-app de Shareflex Forms Wizard (‘Manage List Forms’) om het SharePoint-formulier te bewerken.

SharePoint classic form 3

Opmerking: u kunt de BFE Forms Designer ook openen door een SharePoint-formulier van een andere Shareflex-toepassing te openen. Van daaruit klikt u gewoon op de knop ‘Open Wizard’ die u vindt onder het tabblad ‘Design’. Navigeer vervolgens naar de lijst waar u een formulier wilt maken.

Selecteer de website, lijst en klik vervolgens op de rode + om de configuratiemap toe te voegen (bijv. Verkorte site_lijst), in dit voorbeeld : ‘FDT_TestList’.

SharePoint classic form 4

U ziet dat het tabblad ‘History’ al aanwezig is. Voeg gewoon een tabblad ‘Main’ toe en verplaats het 1 niveau omhoog.

SharePoint classic form 5

Voeg een deel van de velden toe aan het SharePoint-formulier op het tabblad ‘Main’. Voeg vervolgens nog een tabblad toe (Details) en voeg bijvoorbeeld het RichText-veld toe onder dit tabblad.

U kunt ook ‘Other Fields’ (zoals inhoudstype) en nieuwe velden aan het formulier toevoegen. Een nieuw veld wordt echter niet opgeslagen in de SharePoint-lijst.

SharePoint classic form 6

Sla als volgende stap de tabbladen op.

Vervolgens worden de 3 ‘Form_Tab’ XML-bestanden gemaakt.

Het Form_TabMain.xml-bestand ziet er als volgt uit:

In SharePoint ziet u nog steeds de standaardformulieren. Daarom is er nog niets veranderd.

Voordat u de formulierpagina’s genereert, selecteert u de secundaire bibliotheek en de weergave die u onder aan het formulier wilt weergeven. In dit voorbeeld selecteer ik één documentbibliotheek. U kunt hier echter meerdere bibliotheken en lijsten toevoegen, afhankelijk van uw behoefte. Merk op dat ik ‘column fld_ID’ selecteer als de sleutel om op te filteren.

Nu specificeert u andere instellingen en functies. Bijvoorbeeld:

  • Wanneer u een nieuw lijstitem maakt, wordt het opnieuw geopend nadat het automatisch is opgeslagen.
  • Documentvoorbeeld, enz.

Als de instellingen correct zijn, klikt u op de knop ‘Generate now’.

Nu maak je een nieuw item aan in de lijst. U zult merken dat de lipjes op hun plaats zitten.

Als u het nieuwe item opslaat, wordt het automatisch geopend in de bewerkingsmodus. De secundaire lijst wordt onderaan weergegeven. Merk ook op dat de waarde fld_ID automatisch wordt gegenereerd (u moet dit veld op alleen-lezen instellen door de Form_TabMain.xml regel <td bfeId=”fld_ID” bfeType=”field” bfeReadOnly=”true” bfeWith=”250″ class=”ms-formbody”></td> te wijzigen).

In pscBAF\FormConfiguration ziet u dat de map FDT_TestList nu meer bestanden bevat. Zoals de JavaScript-bestanden die formuliergebeurtenissen uitvoeren en de teller onderhouden voor het genereren van een uniek ID dat wordt gebruikt om gerelateerde bestanden uit de secundaire bibliotheek te filteren.

De map pcsBAF\ListEventsConfiguration\FDT_TestList wordt gemaakt met XML-bestanden voor elke lijst, die CAML-queries bevat die de items uit de secundaire bibliotheken die zijn verbonden met het gerelateerde item uit de primaire lijst bewaren.

Als u de configuratie van Event Receivers opent vanuit de Shareflex Web Deployment app (‘Configure Event Receivers’), ziet u de zojuist gemaakte regels. Deze regels beheren de gerelateerde items tussen de lijst en de documentbibliotheek. Als u bijvoorbeeld een item uit de lijst verwijdert, zorgt een regel ervoor dat gerelateerde items in de documentbibliotheek ook worden verwijderd.

BFE Forms Designer

Nu de tabbladen, velden, secundaire weergaven en regels aanwezig zijn, kunt u het ontwerp van het formulier naar wens aanpassen met behulp van de tool Forms Designer. Gebruik deze tool om het Form_Tab.xml-bestand visueel te beheren in de pscBAF FormConfiguration Library (degene die je hebt gegenereerd met de BFE Forms Wizard). U doet dit door een item uit de lijst te openen en op het tabblad Ontwerp te klikken om toegang te krijgen tot de BFE Form Designer (knop Formulier bewerken).

Met de Forms designer kunt u bijvoorbeeld:

  • Tabbladen maken/bewerken/verwijderen.
  • Tabellen toevoegen.
  • Velden en labels invoegen.
  • Maak de indeling van de tabel op, en meer.

U kunt de tool Autoformat gebruiken om standaardformaten toe te wijzen aan veldbesturingselementen en standaardbreedten en stijlen aan cellen. Hier kunt u een voorbeeld van de formulierwijzigingen bekijken die u aanbrengt en de Form_Tab.xml rechtstreeks openen.

Als je de muisaanwijzer naar de rechterhoek van elke cel beweegt, zie je de informatie over die specifieke cel.

Ontwerp opslaglocatie

De Shareflex Forms en andere ontwerpelementen worden opgeslagen in submappen op de pscBAF (Portal Systems Business Application Framework [Shareflex]) Site Collection.

Formulieren bevinden zich in de map ..\pscBAF\FormConfiguration\. Voor elke lijst of bibliotheek in de applicatie wordt een individuele map gemaakt met de formulierbestanden. Deze individuele map is de formulierconfiguratiemap die u opgeeft wanneer u de Formulierenwizard gebruikt. Volgens het voorbeeld in deze blog is dit de map ‘FDT_TestList’.

In een andere applicatie hebben we een site ‘AA’ met een lijst ‘Audits’. Voor deze applicatie hebben we een eenvoudig Shareflex Form gemaakt voor de Document Library ‘AuditDocuments’. Meer specifiek de map ‘AA_AuditDocuments’. In deze applicatie is ook een LegalEntities List aanwezig.

Hieronder ziet u de bouwstenen waaruit het formulier van de testlijstlijst bestaat.

  • De gecombineerde XML-bestanden zijn het daadwerkelijke HTML-formulier, waarbij elk XML-bestand een enkel tabblad vertegenwoordigt
  • Variables.js bevatten de Globally Unique Identifiers van de applicatie (lijsten, formulieren, etc.)
  • WebPart_Top.js bevat de kernbibliotheken voor JQuery, psLib en Shareflex Workflow
  • Het WebPart_Bottom.js is een JavaScript-bestand dat aangepaste code bevat voor aangepaste elementen op het formulier (knoppen enz.). Dit is waar de magie plaatsvindt (zie paragraaf ‘Customizing Forms’)
  • U kunt het CSS-bestand gebruiken voor de formulierlay-out

De door gebeurtenissen geactiveerde code wordt opgeslagen als XML-bestanden in een submap van de map ..\pscBAF\ListEventsConfiguration\. De submap die voor deze xml-bestanden is gemaakt, bevat de naam van de primaire lijst.

Deze XML-bestanden activeren:

  • Berekening en toewijzing van een ID aan een nieuw item
  • Reservering van een secundaire lijstmap wanneer u het primaire item opslaat
  • Weergeven in de vorm van secundaire lijsten met gerelateerde bestanden
  • De weergave van de secundaire lijst bijwerken wanneer u bestanden toevoegt, bijwerkt of verwijdert
  • Verwijderen van bibliotheekbestanden wanneer u het gerelateerde lijstitem verwijdert

Om het belang van de Shareflex-tooling nogmaals te onderstrepen; de BFE Forms Wizard maakt in eerste instantie alles wat u ziet in de FormsConfiguration en ListEventsConfiguration mappen. De Forms Designer-tool past alleen de xml-bestanden in de FormsConfiguration-directory aan.

Formulieren aanpassen

Zoals hierboven vermeld, is de WebPart_Bottom.js het bestand waarin de magie plaatsvindt. Hieronder ziet u een screenshot van dit bestand nadat de formulieren zijn gegenereerd met de Forms Wizard. Het bestand bevat JavaScript, CAML en Shareflex-eigen psLib-functies allemaal samen. Dit is de plaats waar u uw formulieren aanpast (knoppen toevoegen, voorwaardelijke verberg-wanneer-functies toepassen, gebeurtenissen manipuleren, enz.).

Deze blog gaat helemaal over het maken van formulieren op klassiek SharePoint en de klassieke SharePoint-ervaring. Als u echter meer wilt weten over de ontwikkeling van formulieren in SharePoint Modern UI, lees dan het volgende bericht SharePoint Online Modern interface.

Geef een reactie

Slide you are not a robot *