Episerver Forms (fi)

EPISERVER
FORMS
Episerver Developer Meetup
21.4.2016 Mikko Huilaja

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

AGENDA
1. 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 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.

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

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 vienti
DdsPermanentStorage.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
›

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
NEUVOJA
Nä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”.

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

Episerver Forms (fi)

More Related Content

Episerver Forms (fi)

Editor's Notes