Sitecore Forms with JSS

Sitecore Forms with Sitecore JSS by Peter Prochazka (tothecore.sk / @chorpo) Log out | Peter Prochazka
Peter Prochazka
tothecore.sk / @chorpo
Sitecore Forms
with JSS

https://tothecore.sk/
https://twitter.com/chorpo
http://goodreads.com/chorpo
https://linkedin.com/in/chorpo
Peter Procházka
Quick Intro

Agenda
• Sitecore Forms
• Sitecore JSS
• Working with Sitecore Forms and JSS

Sitecore Forms

Forms in Sitecore
• WFFM
• Web Forms for Marketers
• Available since Sitecore 6
• Separate module
• Deprecated from Sitecore 9.1
• Last version made for 9.0 Update 2
• Sitecore Forms
• Since Sitecore 9.0
• Part of Sitecore platform
• Completely rewritten module

Forms in Sitecore
• WFFM vs Sitecore Forms
Source: https://www.codehousegroup.com/insights/web-forms-for-marketers-vs-sitecore-forms

Forms in Sitecore
• WFFM
• Supported ASP.NET MVC as well as ASP.NET Web Forms

Forms in Sitecore
• Sitecore Forms
• WFFM Conversion Tool
• Alessandro Faniuolo
• https://github.com/afaniuolo/WFFM-Conversion-Tool
• Sitecore Forms Extensions
• Bart Verdonck
• https://github.com/bartverdonck/Sitecore-Forms-Extensions
• Added missing functionality:
• Send Email
• File Upload
• Recaptcha
• Hidden Field
• …

Sitecore JSS

Sitecore JSS
• Sitecore JavaScript SDK (JSS) is a set of npm packages that
enable implementing Sitecore apps using modern JavaScript
frameworks:
• Core packages that abstract away the "Sitecore stuff" like talking to
different Sitecore APIs,
• Framework-specific packages with components that render data
managed by the core packages, and
• Simple starter apps for every supported framework.

JSS - Programming Styles
Code-First Sitecore-First

JSS - Modes
Integrated Connected
Disconnected

Sitecore JSS – BE vs. FE - Tooling
• Visual Studio vs. Visual Studio Code
• VS Code is not mandatory ☺
• You can use anything – Notepad, Notepad++, Atom, … ;-)
• ESLint
• Prettier

Sitecore JSS – Creating project
• Four commands you need to use when creating new project:
• npm install -g @sitecore-jss/sitecore-jss-cli
• jss create my-first-jss-app react
• cd my-first-jss-app
• jss start
• When working with not the latest Sitecore/JSS, you need to use
this command instead:
• jss create my-first-jss-app react -b release/13.0.0
• More details on my blog:
• https://tothecore.sk/2021/03/24/creating-version-specific-sitecore-jss-
projects/

Sitecore JSS – Development
• Two commands you need to use during development:
• jss deploy app --includeContent --includeDictionary
• jss deploy items --language=de-DE --includeContent --
includeDictionary

Sitecore JSS – No environment specific configuration
• No OOTB support
• Sitecore Rule Based Configuration
• https://doc.sitecore.com/developers/93/platform-administration-and-
architecture/en/rule-based-configuration.html
• API – GetSettings
• More details:
• https://tothecore.sk/2021/04/26/how-to-have-environment-specific-configuration-
with-sitecore-jss/
• Extend Layout Service Context object
• Expose config elements there as json

• RTFM
• https://tothecore.sk/2020/08/28/sitecore-jss-learning-resources-
getting-started-with-jss
• https://tothecore.sk/tag/jss/
• Practice, Practice, Practice,
• Webinars:
• https://tothecore.sk/2022/05/03/are-frameworks-evil-should-you-care-
about-sitecore-sxa-and-jss-presentation-webinar-for-sug-chennai-26th-
april-2022/
• https://tothecore.sk/2021/04/26/from-hero-to-zero-and-back-to-hero-
presentation-webinar-for-sug-chennai-29th-april-2021/
Sitecore JSS – Learning resources

Working with Sitecore
Forms and JSS

Working with Sitecore Forms and JSS
• Field elements
• Defined under /sitecore/system/Settings/Forms/Field Types in master db

• Field elements

• Field elements
• View Path is only used for Form Builder
• Completely ignored by Sitecore JSS
• Why?

• Field elements
• As everything with JSS, you get the data from Layout Service
https://doc.sitecore.com/xp/en/developers/hd/211/sitecore-headless-development/jss-forms-api.html

• Field elements
• Therefore you need to install JSS Forms npm package to your jss project
• npm i @sitecore-jss/sitecore-jss-forms
https://doc.sitecore.com/xp/en/developers/hd/211/sitecore-headless-development/implement-a-sitecore-form-in-a-jss-react-app.html

• JSS Forms solution

• Index.tsx

• field.types.ts

• fieldFactory.tsx

• Field elements
• JSS Forms package leverages Forms Service REST Api:
https://doc.sitecore.com/xp/en/developers/hd/211/sitecore-headless-development/forms-service.html

• Field elements
• JSS Forms package leverages Forms Service REST Api:
• /api/jss/formbuilder

• Field elements
• Model Type:

• OOTB Field definitions:
• Sitecore.ExperienceForms.Mvc assembly
• Sitecore.ExperienceForms.Mvc.Models.Fields namespace

• Creating custom sections to Form Builder:
• https://tothecore.sk/2018/11/12/sitecore-forms-adding-custom-category-for-
form-elements/
• Creating custom fields:
• Demo

• Base64String is your friend
• We are sending some complex values as Base64Strings and even decoded as on
higher environments we use strict rules on infra level -> App Service would
otherwise think we are intruders that are trying to do SQL injection ☺

• Base64String is your fiend
• From JSS:

• Base64String is your fiend
• To Custom Service Method on BE:

• Serialize attribute on your custom ViewModels
• Serialize attribute is not inherited so make sure you add it explicitly
• Why?

SITECORE JSS LEARNING RESOURCES / GETTING STARTED WITH
JSS
https://tothecore.sk/2020/08/28/sitecore-jss-learning-resources-
getting-started-with-jss
https://doc.sitecore.net/
https://sitecorechat.slack.com/
https://sitecore.stackexchange.com/

Questions?
https://tothecore.sk/
https://twitter.com/chorpo
http://goodreads.com/chorpo
https://linkedin.com/in/chorpo
Peter Procházka

Thank you
and
may the force
be with you

Sitecore Forms with JSS

Recommended

Recommended

More Related Content

Similar to Sitecore Forms with JSS

Similar to Sitecore Forms with JSS (20)

More from Peter Procházka

More from Peter Procházka (9)

Recently uploaded

Recently uploaded (20)

Sitecore Forms with JSS