Low-code applicatie platform Shareflex

Video transcript

In deze video leg ik uit hoe je in korte tijd met Shareflex een werkende applicatie bouwt.
We maken een nieuwe site collectie aan, waar we de Shareflex Online Add-in toevoegen.
Vervolgens maken we een contactenlijst en een bibliotheek om gekoppelde bestanden in op te slaan.
Daarna configureren we met behulp van Shareflex Forms de koppeling van deze bestanden met de items uit de contactenlijst.
En daarna passen we met de designer de layout van het formulier aan.
Ik ga er in deze video vanuit dat Shareflex al geinstalleerd is, dat in ieder geval de Shareflex Online App en de Shareflex Forms Package al geupload zijn in de App Catalog en dat de Shareflex Online App al geregistreerd is.
We beginnen met het maken van een nieuwe site collection met een Modern Experience.
Hiervoor gaan we naar het SharePoint Admin Center, en dan gaan we naar Active Sites.
We klikken op ‘Create’.
De team site die hier wordt getoond is de klassieke versie.
De moderne versie is namelijk niet verbonden aan een Office 365 groep.
Daarom klikken we op ‘Other Options’ en daar vinden we de Team site template zonder Office 365 groep.
We noemen de site collection TestModern.
En we zorgen ervoor dat deze site collection niet op root level wordt gemaakt.
Dat is een voorwaarde voor een goed functioneren van Shareflex.
En dan klikken we op ‘Finish’.
We openen de nieuwe site collection en gaan dan naar Site Content om de Shareflex Online app toe te voegen aan de site collection.
We klikken ‘New’, ‘App’ en kiezen dan ‘Shareflex Online’.
Dan openen we de app.
Eerst gaan we de kern van de Shareflex Online applicatie installeren.
Dit kan een minuut of 5 duren.
Je kunt het log van de setup nakijken door op de groene button te klikken.
Vervolgens klikken we ‘Prepare Master Site’.
Hiermee wordt de pscBAF beheersite gemaakt.
Omdat we deze binnen de TestModern site collectie maken, betekent het dat deze master site alleen de resources en configuraties van deze site collectie beheert.
Je zou ook kunnen kiezen voor een exclusieve centrale Master Site voor alle Site Collecties, maar om het overzichtelijk en eenvoudig te houden, maak ik nu een decentrale master site.
Ook hier kun je het log van de setup bekijken.
Als je dan op de ‘Master Site’ of de ‘Core web’ button klikt, wordt de TestModern/pscBAF lijst geopend, waar alle configuraties en resources voor deze site te vinden zijn.
Nu gaan we ons bezig houden met de SharePoint content.
Eerst gaan we terug naar de SharePoint TestModern site.
We gaan een contactenlijst en een bijbehorend contactdocumentenbibliotheek maken.
Eerst gaan we naar de site settings.
Op site niveau maken we een column, genaamd ‘Contact_ID’.
Dan maken we een nieuwe lijst, we noemen deze ‘Contacts’.
In de List Settings openen we de Advanced Settings.
Daar klikken we bij ‘Allow management of content types’: ‘Yes’
Vervolgens voegen we aan deze lijst het bestaande ‘Contact’ content type toe.
Dan verwijderen we het ‘Item’ content type van deze lijst.
En voegen we tot slot de ‘Contact_ID’ column toe.
Dan maken we een nieuwe bibliotheek om bestanden naar toe te uploaden.
ContactDocuments
In de library settings voegen we ook daar de Contact_ID column toe.
Ook maken we een nieuwe view, genaamd BFE.
Deze view gebruikt Shareflex om gekoppelde bestanden op het contactformulier te tonen.
De view moet geen folders tonen, dus dat zetten we hier uit.
Nu gaan we weer terug naar de Shareflex Online App.
Daar klikken we ‘Tools’, ‘Manage List Forms’.
Hier kiezen we de Website, deze is correct.
Dan klikken we op ‘Design Forms’, en kiezen de lijst ‘Contacts’.
Links zie je dan alle velden, rechts de configuratie van het formulier.
De naam van de configuratiefolder laten we zo.
We willen een formulier met 2 tabs en 2 kolommen.
Dat is de standaard waarde, je kunt later nog kolommen toevoegen.
Je ziet dat de History Tab automatisch wordt toegevoegd.
Dan kiezen we het Primary Key veld, dat is ontact_ID.
Het veld dat de items in de contactenlijst en de documentenbibliotheek met elkaar verbindt.
Hier kunnen we instellen hoe het automatisch gegenereerde Contact ID wordt opgebouwd.
We kiezen voor een oplopende nummering.
Dan de Secondary View.
Hier kiezen we de bibliotheek met bestanden die aan het Contact item gekoppeld zijn, dus ContactDocuments.
Onder ‘Rules’ laten we alle opties aanstaan.
We zouden de prefix voor het Contact ID kunnen wijzigen, maar dat is nergens voor nodig.
Onder ‘Advanced’ laten we ook allen opties zoals ze zijn.
En dan klikken we ‘Enable Shareflex Forms’.
We zien hier het formulier met 3 tabs: Contact, Tab2 en History.
Eerst gaan we de Contact_ID column aanpassen.
We veranderen het label: ‘Contact ID’.
‘Default text to display’ veranderen we naar ‘Is generated automatically’.
En we maken de column Read-only.
We verplaatsen de Contact ID column naar de Contact tab en verschuiven het naar boven.
We veranderen de tekst van Tab 2 naar ‘Other’.
We veranderen voor de duidelijkheid ook de naam van de XML file naar ‘Form_Tab_Other’.
Hetzelfde doen we met de XML file name voor Contact.
Je hebt hier nog een aantal weergave opties: grotere weergave, verticaal, classic in plaats van modern.
Deze opties zijn ook beschikbaar wanneer je het formulier in produktie opent.
Dan klikken we op ‘Save Config’ en dan ‘Done’.
Zo ziet het formulier er dan uit.
Als we nog niet tevreden zijn met het resultaat, komen we met één klik op de Design button zo weer terug naar het form design.
De button ‘Open FormConfiguration Folder ‘opent direct de lokatie van de form tab XML files.
Ook staat daar de UI.js, de file waar alle JavaScript code staat die nodig is voor het functioneren van het formulier.
Hier zijn nog een aantal opties om de weergave van de tabelkolommen, rijen en cellen op het formulier te manipuleren.
Naast de Input Hint die we al gezien hebben, is er de mogelijkheid om veldwaarden van een prefix of suffix te voorzien.
Met de ‘Bottom Code’ button kun je direct de UI JavaScript file aanpassen.
Ook kun je hier extra JavaScript files toevoegen aan het formulier.
Je kunt hiervoor code snippets gebruiken.
Verder passen we het Title veld aan.
Dit is een verplicht veld, we veranderen het label naar ‘Last Name’.
En we zetten de velden nog wat op een logische volgorde.
Ook zouden we hier bijvoorbeeld een kolom kunnen toevoegen aan de form tabel.
Maar dit is niet logisch.
Met de ‘Undo’ button kunnen we alle stappen sinds de laatste Save weer terug zetten.
Als je daarna op ‘Done’ klikt, in plaats van ‘Save Config’, wordt uiteraard gevraagd om de wijzigingen op te slaan.
Nu maken we een item met het nieuwe form.
De ‘Comments’ column is een Rich Text column waar je geformatteerde tekst kunt opslaan, maar geen files in kunt uploaden.
Dat doen we namelijk pas nadat we het item hebben gesaved.
We klikken op ‘Create’.
We zien dat het Contact ID automatisch gegenereerd is.
Als we het item openen, zien we de ContactDocuments libray onder het item.
Daar voegen we dan wat bestanden aan toe.
We uploaden een Word document en een PDF bestand slepen we naar de libary.
Als je op het icon klikt, zie je de inhoud.
Doen we hetzelfde voor het Word document en klikken we in dat Word document, dan kun je het document direkt vanuit dit scherm bewerken en opslaan.
Beide files tonen overigens het correcte Contact ID, en ook in de ContactDocuments bibliotheek zie je dat een Contact ID folder is aangemaakt waarin de bestanden zich bevinden.
Zo eenvoudig is het dus om met Shareflex Forms Designer een functioneel en overzichtelijk formulier te ontwikkelen.

 

 

 

5 views

Leave a Reply