episerver forms (fi)
TRANSCRIPT
EPISERVER FORMSEpiserver Developer Meetup21.4.2016 Mikko Huilaja
MIKKO HUILAJA› Software Architect @Solita› twitter.com/huilaaja
blog.huilaaja.netgithub.com/huilaaja
AGENDA1. Ominaisuudet
• DEMO
2. Laajennettavuus• DEMO
3. Visuaalisuus• DEMO
4. Käytännön neuvoja
New beginning of Forms and R.I.P. Episerver XForms
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
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”
OMINAISUUDET• Multi-step forms• S-posti templatet• Käyttäjän profilointi• Laajennettavuus “Dev<3”• Käännetty vain Englanniksi
(tulossa suomeksi)
SPAMMIN ESTO1. Käyttöoikeuksilla sallit vain kirjautuneiden käyttäjien
päästä lomakkeelle2. CAPTCHA-elementti3. Tai voit tehdä oman esim. Honeypot -elementin.
LAAJENNUKSET JA INTEGRAATIOT
EXTENSIONS› Custom Elements› Events› Repositoryn käsittely› Actors› Controllerit› Service API› Web Hooks› IoC implementaatiot
› Alf Nilssonilla on hyviä esimerkkejä:https://github.com/alfnilsson/EpiserverForms
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
EVENTS
› FormsEvents.Instance.FormsSubmitting += FormsSubmitting;
› FormsEvents.Instance.FormsStepSubmitted += FormsStepSubmitted;
› FormsEvents.Instance.FormsSubmissionFinalized += FormsSubmissionFinalized;
› FormsEvents.Instance.FormsStructureChange += FormsStructureChange;
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 vientiDdsPermanentStorage.SaveToStorage(
EPiServer.Forms.Core.Models.FormIdentity formIden, EPiServer.Forms.Core.Models.Submission submission
)
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
CONTROLLERIT› On mahdollista ylikirjoittaa Epin omat Controllerit:
• SubmitFormController• PreviewFormController
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/
IOC IMPLEMENTAATIOT› Inversion of Control eli StructureMap ja Epin luokkien
korvaavat implementaatiot › http://
world.episerver.com/Modules/Forum/Pages/Thread.aspx?id=146780
›
IOC IMPLEMENTAATIOT
VISU JA TEMPLATES
CUSTOM TEMPLATES
ELEMENT TEMPLATES› Kaikkien elementtien ulkoasut on
muuteltavissa› MVC mallilla tehty› Helppo muutella› Html-rakenne ja class nimet ovat
herkkiä rikkoontumaan
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
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ä.
KÄYTÄNNÖN NEUVOJANäihin tulet törmäämään
PRO TIP› Required Client
Resources!
PRO TIP› Jos Forms-tab ei
näy, niin Palauta näkymät .
› "Display options" and click the "Reset views" button.
PRO TIP› Rich text editor
näkyy vain kun lomake on jo submitoitu eli se on “lomake kooste elementti”.
