Episerver Developer Meetup 21.4.2016 slides

1. EPISERVER
FORMS
Episerver Developer Meetup
21.4.2016 Mikko Huilaja

2. MIKKO HUILAJA
› Software Architect @Solita
› twitter.com/huilaaja
blog.huilaaja.net
github.com/huilaaja

3. AGENDA
1. Ominaisuudet
• DEMO
2. Laajennettavuus
• DEMO
3. Visuaalisuus
• DEMO
4. Käytännön neuvoja

4. New beginning of Forms and R.I.P. Episerver XForms

5. FORMS (LOMAKE-EDITORI)
› 1.0 versio julkaistiin helmikuussa
› Nyt jo versiossa 2.0.0.2 (eli vasta teini-iässä)
› Add-on eli erillinen NuGet
› Vaatii Episerver 9 MVC projektin
› Helppo asentaa NuGetista ja SMTP-asetukset

6. OMINAISUUDET
• Helppokäyttöinen
• Forms gadget
• Form Elements gadget
• Drag and drop
• Elementit ovat blockeja eli samat
ominaisuudet lokalisointi, versiointi,
käyttöoikeudet
• Voi tehdä “sivu lomakkeita” ja “globaaleja
lomakkeita”

7. OMINAISUUDET
• Multi-step forms
• S-posti templatet
• Käyttäjän profilointi
• Laajennettavuus “Dev<3”
• Käännetty vain Englanniksi
(tulossa suomeksi)

9. SPAMMIN ESTO
1. Käyttöoikeuksilla sallit vain kirjautuneiden käyttäjien päästä
lomakkeelle
2. CAPTCHA-elementti
3. Tai voit tehdä oman esim. Honeypot -elementin.

11. LAAJENNUKSET JA
INTEGRAATIOT

12. EXTENSIONS
› Custom Elements
› Events
› Repositoryn käsittely
› Actors
› Controllerit
› Service API
› Web Hooks
› IoC implementaatiot
› Alf Nilssonilla on hyviä esimerkkejä:
https://github.com/alfnilsson/Episerver
Forms

13. CUSTOM ELEMENTS
› Forms vaatii MVC projektin (ei WebForms)
› Peri luokasta ElementBlockBase
› Tee MVC näkymä kansioon Views/Shared/ElementBlocks
› Custom Elementtien validointiin toteuta seuraavat interfacet
• IElementValidatable
• IExcludeValidatorTypes

14. EVENTS
› FormsEvents.Instance.FormsSubmitting += FormsSubmitting;
› FormsEvents.Instance.FormsStepSubmitted += FormsStepSubmitted;
› FormsEvents.Instance.FormsSubmissionFinalized += FormsSubmissionFinalized;
› FormsEvents.Instance.FormsStructureChange += FormsStructureChange;

15. REPOSITORYN / DDS:N KÄSITTELY
› IFormDataRepository
› var repo = ServiceLocator.Current.GetInstance<IFormDataRepository>();
var submissionData = new Dictionary<string, object>() { {"elementId", "esimerkki"} };
var friendlyNames = new FriendlyNameInfo[] {
new FriendlyNameInfo("elementId", "friendlyName", "label", FormatType.String)
};
var removeNonFriendlyFields = false;
repo.TransformSubmissionDataWithFriendlyName(
submissionData, friendlyNames, removeNonFriendlyFields);
› DDS Storageen tiedon vienti
DdsPermanentStorage.SaveToStorage(
EPiServer.Forms.Core.Models.FormIdentity formIden,
EPiServer.Forms.Core.Models.Submission submission
)

16. ACTORS
› PostSubmissionActorBase
› UI interface IUIPropertyCustomCollection
› https://github.com/episerver/EPiServer.Forms.Demo
• A very simple Actor, with no UI, just do some business after Form
finalize it submission
• A configurable Actor, has UI in EditView for Editor, and use that
information to do its business

17. CONTROLLERIT
› On mahdollista ylikirjoittaa Epin omat Controllerit:
• SubmitFormController
• PreviewFormController

18. SERVICE API
› Web API Episerver contentin kyselyyn REST kutsuina.
› Forms käyttää EPiServer.ServiceApi ominaisuutta
› http://world.episerver.com/documentation/Items/Developers-
Guide/Episerver-CMS/9/forms/how-to-use-the-episerver-forms-
service-api/

19. IOC IMPLEMENTAATIOT
› Inversion of Control eli StructureMap ja Epin luokkien korvaavat
implementaatiot
› http://world.episerver.com/Modules/Forum/Pages/Thread.aspx?id
=146780
›

20. IOC IMPLEMENTAATIOT

21. VISU JA
TEMPLATES

22. CUSTOM TEMPLATES

23. ELEMENT TEMPLATES
› Kaikkien elementtien ulkoasut on
muuteltavissa
› MVC mallilla tehty
› Helppo muutella
› Html-rakenne ja class nimet ovat herkkiä
rikkoontumaan

24. FORMS WITH BOOTSTRAP
› Jos käytätte Bootstrappiä tai haluat yhtenäisemmän ulkoasun/html
sisällön lomakkeiden elementeille.
› Responsiivinen ja mobile friendly
› https://github.com/huilaaja/EpiserverFormsWithBootstrap

26. XSS JA TIETOTURVA
› Oletuksena mitään lähetettyjä tietoja ei näytetä julkisella puolella.
› Ylläpito näkymät on suojattu XSS:ltä
• Eli kaikki kentät näkyvät vain tekstinä. Esim.
<SCRIPT>alert(“Cookie”+document.cookie)</SCRIPT>
› XSS ei ole OOTB huomioitu teidän omissa laajennuksissa tai Service
API käytettäessä.

27. KÄYTÄNNÖN
NEUVOJA
Näihin tulet törmäämään

28. PRO TIP
› Required Client
Resources!

29. PRO TIP
› Jos Forms-tab ei
näy, niin Palauta
näkymät .
› "Display options"
and click the "Reset
views" button.

30. PRO TIP
› Rich text editor
näkyy vain kun
lomake on jo
submitoitu eli se on
“lomake kooste
elementti”.

31. Twitter @SolitaOy
www.solita.fi
KIITOS
MIKKO HUILAJA
Software Architect
+358503293279
mikko.huilaja@Solita.fi