Low code ontwikkeling met Shareflex

Inleiding tot low code

Shareflex Modern UI is echt een low-code applicatie-ontwikkelingsplatform. Hiermee kunt u snel een SharePoint Online Business-applicatie ontwikkelen zonder codering te gebruiken. Beginnend met het maken van de sitecollectie tot het eenvoudig ontwikkelen van een gestructureerd en functioneel SharePoint-formulier met behulp van de Shareflex Form Designer.

Deze blog beschrijft de low-code ontwikkelmogelijkheden van Shareflex. Je kunt ook de volgende video bekijken.

 

 

Shareflex- en SharePoint Online-vereisten

Shareflex Low code applicatie-ontwikkeling

Shareflex is met name geschikt als low code applicatie-ontwikkelplatform voor SharePoint Moderne applicaties. Deze blog beschrijft in meer detail de Shareflex low code-functies.

Ons uitgangspunt is dat het volgende al aanwezig is:

  • Shareflex is geïnstalleerd in uw SharePoint-farm
  • De Shareflex Online App en het Shareflex Forms Pakket worden geüpload naar de App Catalogus
  • De Shareflex Online App is geregistreerd.

Deel 1/4 – Site-verzameling maken en Shareflex Online Add-ins

Eerst gaan we een nieuwe siteverzameling maken met een moderne SharePoint-ervaring. Op deze Site Collection zullen we de Shareflex Online Add-in toevoegen.

een. Ga naar het SharePoint Admin Center en selecteer ‘Actieve sites’.

b. Klik op ‘Create’. Merk op dat de hier getoonde Teamsite de SharePoint Classic-versie is, niet de SharePoint Modern-versie. Kies ‘Other options’ om dit te wijzigen.

Met deze Team Site-sjabloon wordt GEEN Office 365-groep gemaakt, aangezien dit de SharePoint Modern Team Site-sjabloon is.

In dit voorbeeld noemen we de siteverzameling ‘TestNoCode’. Om Shareflex te laten werken, moet u ervoor zorgen dat de siteverzameling NIET op rootniveau wordt aangemaakt (bijv. ../Sites/).

c. Voer de primaire beheerder en andere instellingen in. Klik vervolgens op ‘Finish’.

Nu de siteverzamelingen aanwezig zijn, voegt u de Shareflex Online-app toe door de URL TestNoCode te openen en naar Site-inhoud te gaan.

d. Selecteer vervolgens ‘New’, ‘App’ en kies vervolgens ‘Shareflex Online’.

f. Selecteer daarna de knop ‘Trust it’

f. Vernieuw de inhoudspagina van de site en open de Shareflex | online (demo) app

 

g. Ga naar de knop ‘Setup Core web now’. Hiermee wordt de kernwebsite voor de Shareflex Online-applicatie geïnstalleerd. Het kan ongeveer 5 minuten duren voordat de installatie is voltooid.

Installatie loopt …

h. Wanneer de installatie is voltooid, kunt u het installatielogboek controleren door de groene knop te selecteren.

Merk op dat op bestandsniveau de pscBAF-directorystructuur nu zichtbaar is

i. De ‘Prepare as Master Site’ knop maakt de pscBAF Administration Site aan. Voordat u echter op deze knop klikt, moet u overwegen of u een gecentraliseerd of gedecentraliseerd beheer van Site Collection-bronnen en configuraties wilt. We leggen het verschil hieronder uit. In dit voorbeeld kiezen we voor een gedecentraliseerde administratie (elke Site Collection is zijn eigen Master Site) en klikken we op de knop ‘Prepare as Master Site’.

Als de Master Site klaar is, kunt u het setup-logboek opnieuw bekijken door op de groene knop te klikken.

j. In de rechterbovenhoek is er een Core-web en een Master Site-knop. Wanneer u een van deze selecteert, opent u de TestNoCode/pscBAF-site met alle configuraties en bronnen voor deze site.

Decentralized vs Centralized Master Site

As mentioned in this example we use a decentralized Master Site. This means that the configurations and resources managed by the Master Site apply to the TestNoCode Site Collection only. However, you could also choose to create a centralized Master Site that manages the configurations and resources for ALL Site Collections.

In this case, you need to create an additional Site Collection where you install SharePoint Online and then click the ‘Prepare as Master Site’ button only there. After that go to the ‘Site Pool’ List on that Master Site and add the ‘TestNoCode’ Site. As a result the ‘Master Site’ button in the upper-right corner of the ‘TestNoCode’ Site will then bring you to this centralized Master Site.

SharePoint Online-lijst en bibliotheekvoorbereidingen

Deel 2/4 – Bereid SharePoint-lijsten en -kolommen voor

Nu Shareflex Online is geïnstalleerd en geconfigureerd, gaan we wat inhoud maken om mee te werken.

a. Ga naar de site-instellingen van de ‘TestNoCode’ -site. Open vervolgens de sitekolommen en maak een sitekolom met de naam Contact_ID.

b. Bezoek vervolgens de site-inhoud en maak een nieuwe lijst met de naam ‘Contacten’.

c. In de lijstinstellingen openen we de geavanceerde instellingen en schakelen we de optie ‘Allow management of content types’ in.

d. Voeg het bestaande inhoudstype ‘Contact’ toe aan de lijst.

e. Selecteer daarna het inhoudstype ‘Item’ en verwijder het uit de lijst.

f. Voeg ook de ‘Contact_ID’ Sitekolom in deze lijst in.

g. Ga terug naar de inhoud van de site. Maak een nieuwe documentbibliotheek ‘ContactDocuments’ aan die we gebruiken als locatie om bestanden naar te uploaden.

h. Ga vervolgens naar de bibliotheekinstellingen en voeg de kolom Contact_ID toe zoals we deden met de lijst met contactpersonen.

i. Maak een weergave in deze bibliotheek, genaamd ‘BFE’. Shareflex gebruikt deze weergave om bestanden op het contactformulier weer te geven die naar het item linken.

De weergave mag geen mappen weergeven. Daarom selecteren we de optie ‘Show all items without folders’.

Configureer Shareflex formulieren

Deel 3/4 – Configureer Shareflex Forms

De SharePoint Modern List en Library zijn nu op hun plaats. De volgende stap is het configureren van de verbinding tussen items in de Contactenlijst en bestanden die u wilt uploaden in de ContactDocuments-bibliotheek. Het doel is om het item Contactpersoon en de bijbehorende contactdocumenten op één en dezelfde pagina weer te geven. In wezen gaat het om het maken van eenvoudige SharePoint-formulieren.

een. Open de Shareflex Online-app via de inhoud van de site. Hierop volgend. Ga dan naar Tools/Manage List Forms.

b. Selecteer de ‘TestNoCode’ -website en klik op ‘Design Forms’

c. Kies de lijst ‘Contacts’ in de vervolgkeuzelijst

Aan de linkerkant vindt u alle contactpersonenlijstvelden terwijl u aan de rechterkant de configuratie van het contactformulier ziet.

U kunt de naam van de configuratiemap wijzigen in iets anders dan ‘ROOT_Contacts’ als u dat wilt. Een veelgebruikte methode is om de afkorting van de siteverzameling te gebruiken, bijv. TNC_Contacts.

d. Met de vervolgkeuzelijst Formuliertabbladen kunt u 0 tot 3 tabbladen op het formulier maken. Kies 2 tabbladen.

Houd er rekening mee:

  • Het standaardaantal tabelkolommen onder een tabblad is 2. U kunt echter in een later stadium tabelkolommen aan het formulier toevoegen of verwijderen.

  • Het extra tabblad Geschiedenis wordt automatisch toegevoegd. Dit tabblad toont informatie over het maken en wijzigen van het item, evenals werkstroominformatie
  • Het veld Primaire sleutel (dat de items in de lijst met contactpersonen verbindt met de bestanden in de bibliotheek ContactDocuments) is het veld Contact_ID
  • Waarden van het veld Contact_ID worden automatisch gegenereerd. In dit voorbeeld kiezen we voor het genereren van opeenvolgende nummers

  • De secundaire lijst (met de bijbehorende bestanden) is natuurlijk de ContactDocuments Library

  • Laat bij ‘Rules’ alle opties geselecteerd. Het voorvoegsel ‘CON-‘ voor de contact-ID-waarde is al goed. Daarom is het niet nodig om dit te wijzigen

  • Laat onder ‘Advanced’ ook alle opties geselecteerd.

e. Klik vervolgens op ‘Enable Shareflex Forms’

Nu heb je een volledig functionerend formulier met 3 tabbladen: Contact, Tab2 en History

Misschien bent u in dit stadium niet tevreden met de configuratie. U wilt bijvoorbeeld een andere methode voor het genereren van sleutels of u wilt aanvullende secundaire weergaven toevoegen. Klik in dat geval op de knop ‘Standaardformulieren opnieuw instellen’. Als resultaat brengt het u terug naar het begin van de configuratie.

Houd er rekening mee dat deze actie alleen de configuratie reset. Het reset het veld en de vormwijzigingen zoals beschreven in deel 4/4 van dit bericht niet.


Aanpassen van de formulieropmaak

Deel 4/4 – Pas de indeling van het formulier aan

a. Pas eerst het bijschrift voor ‘Tab2’ aan naar ‘Overig’.

b. Hernoem vervolgens het xml-bestand naar Form_Tab_Other.xml zodat we weten waar dit bestand betrekking op heeft. Bovendien kunt u het XML-bestand van het tabblad Contact hernoemen naar Form_Tab_Contact.xml.

c. Wanneer u een item opslaat, wordt automatisch de waarde Contact_ID gegenereerd. Pas het veld Contact_ID aan door simpelweg op de cel te klikken. Merk op dat er nu extra secties aan de rechterkant van het scherm worden weergegeven. Breng vervolgens de volgende wijzigingen aan in het gedeelte Inhoud van het veld Contact_ID:

  • Voer een aangepast label ‘Contact-ID’ in
  • Pas de ‘Text to display if field has no value’ aan naar ‘Is generated automatically’.
  • Stel het veld in op Alleen-lezen

 

d. Verplaats het veld Contact-ID naar het tabblad Contact door op de knop te klikken.

e. Ga dan naar het tabblad Contact. Selecteer vervolgens het veld Contact-ID en gebruik de pijlen om het veld naar de bovenkant van het tabblad Contact te verplaatsen.

f. Wijzig op dezelfde manier het bijschrift voor het veld Titel in ‘Achternaam’. Verplaats vervolgens alle velden over deze 2 tabbladen. Dit resulteert in een overzichtelijk contactformulier.

Bij ‘Custom Texts’ kun je een prefix en/of suffix specificeren die je aan de veldwaarde wilt toevoegen. U kunt hier ook een hint voor het invoeren van velden opgeven.

g. Klik op het tabblad ‘Other’ op het veld ‘Opmerkingen’ en selecteer ‘Show label on top of value’.

h. Klik vervolgens in het gedeelte ‘Cell’ op de knop om dit veld over 2 kolommen te spreiden

In het gedeelte ‘Raster’ kun je de tafelinstellingen aanpassen:

  • Bepaal de breedte van de tafel (vast of flexibel)
  • Kolommen toevoegen; maximaal 16 kolommen in totaal.
  • Een enkele rij of cel per keer invoegen.

Met de knop in de linkerbovenhoek, kunt u uw wijzigingen terugzetten naar het punt waar u het formulier het laatst heeft opgeslagen.

i. De sectie ‘Config folder’ biedt informatie over de geconfigureerde tabbladen voor dit specifieke formulier.

Als je wilt, kun je de tabvolgorde hier wijzigen.

De knop ‘Open FormConfiguration Folder…’ brengt u naar de fysieke locatie waar de configuratiebestanden (XML) zijn opgeslagen.

De UI.js bevat de JavaScript-code die nodig is voor het correct functioneren van het formulier.

In de SharePoint Modern UI van Shareflex kunt u JavaScript-code op het formulier gebruiken.

Door de ‘Bottom Code’-knop in de Form Designer te gebruiken, kunt u het UI JavaScript-bestand rechtstreeks via de Script-sectie openen en wijzigen.

Met de vervolgkeuzelijst Snippets kunt u Shareflex SF-API-codefragmenten in het JavaScript-bestand invoegen en wijzigen.

U kunt extra JavaScript-bestanden voor het formulier maken door op de knop ‘(Add Script)’ te klikken.

Selecteer in het veld Bereik het inhoudstype (of ‘any’ inhoudstypen) waar u het script wilt laten draaien.

U kunt ook verschillende formulierscripts uitvoeren voor elke formuliermodus, zoals hieronder weergegeven (voorbeeld ‘Edit’-modus).

Met de uitvoeringsopdracht-navigator kunt u de volgorde wijzigen waarin de JavaScript-bestanden worden uitgevoerd.

Alle scriptbestanden worden opgeslagen in de map ..\FormConfiguration\[FormTab]\.

Tevreden over het resultaat? U kunt het formulier opslaan door te klikken op en vervolgens . Als u de knop ‘Save Config’ overslaat, wordt u gevraagd om de wijzigingen toch op te slaan.

De knop in de rechterbovenhoek brengt u onmiddellijk terug naar de formulierontwerper.

j. Laten we nu een nieuw item maken met het contactformulier. Standaard worden velden weergegeven in compacte modus zoals geconfigureerd met de Form Designer. Via het menu kun je echter een andere weergave kiezen (zowel in productie als in de ontwerper).

Dit is het formulier in SharePoint Classic-modus waarin velden in verticale volgorde worden weergegeven. Houd er rekening mee dat de contact-ID een alleen-lezen veld is. Het geeft de tekst weer die is opgegeven toen het veld geen waarde bevat.

De kolom ‘Opmerkingen’ is een RTF-kolom waarin u opgemaakte tekst kunt opslaan, maar geen bestanden kunt uploaden. Het uploaden van bestanden is mogelijk zodra u het item opslaat.

Selecteer om het item op te slaan. Merk op dat de waarde van de Contact ID verandert in ID-PENDING tijdens het opslaan.

Wanneer u het item opent, is de contact-ID gewijzigd in CON-00001.

Ook is de ContactDocuments Library nu zichtbaar onder dit item.

k. U kunt de knop gebruiken om bestanden te uploaden. U kunt bestanden echter ook rechtstreeks slepen en neerzetten.

We voegen een Word-document en een pdf toe aan de ContactDocuments Library. Beide bestanden nemen de CON-00001 Contact-ID over van het hoofditem. Als gevolg hiervan linken ze nu naar dit item.

Als u op het Word- of PDF-pictogram klikt, wordt de inhoud van het bestand in het rechterframe weergegeven. In het geval van een Word-document kunt u het document rechtstreeks vanuit hetzelfde scherm bewerken en opslaan.

Wanneer u een Contact-item uit de lijst verwijdert, zorgt Shareflex voor het verwijderen van de gekoppelde Bibliotheekbestanden.

Merk op dat geopende items in lagen op elkaar worden weergegeven.

Tot slot ziet u hoe gemakkelijk het is om gestructureerde en functionele SharePoint Forms te ontwikkelen met de Shareflex Form designer; een echte low-code ontwikkelingsfunctie.

Samenvatting

Shareflex is een uniek low-code applicatieontwikkelingsplatform voor Modern SharePoint. Deze blog legt in detail het proces uit van het maken van de SharePoint Site Collection tot de ontwikkeling en aanpassing van SharePoint Forms.

Meer specifiek bespraken we de:

  • Creëren van een siteverzameling en installatie van de Shareflex Online Add-in
  • Voorbereiding van de SharePoint-lijsten en kolommen
  • Configuratie en aanpassing van de SharePoint-formulieren

Met behulp van het platform kunt u eenvoudig de standaard SharePoint Modern-mogelijkheden uitbreiden en snel complexe moderne SharePoint-applicaties maken. Hierdoor bied je zakelijke gebruikers de zakelijke functies en processen die ze nodig hebben om sneller te reageren op veranderende marktomstandigheden.

Om het nog makkelijker te maken biedt Shareflex ook ‘kant-en-klare’ SharePoint Moderne applicaties voor gangbare zakelijke functies en processen zoals; Contract- en factuurbeheer, kwaliteitscontrole van documenten, HR, enz.

Als u meer wilt weten over hoe Shareflex u kan helpen, aarzel dan niet om contact met ons op te nemen .

Geef een reactie