Getting started with SFRA

Intro

My first time with SFRA was a disaster, internet is pooring in information regarding this topic, the only chance is documentation or trailhead's videos (long and boring). So I decided to learn at work and write a series of practical articles on this topic.
First topic is about Controller and GET, render a template with a form and POST(this topic require you know how work libraries as express).

Let's Create Template

Let's create our template under the path cartridge/templates/default/directoryName/nameTemplate.isml

URLUtils.url(‘fileName-RouteName’) generate urls used in commerce cloud and it accept controller’s file name and route specified in controller file.

Create Form File

Now we can create our form under the path cartridge/forms/default/fileForm.xml

Every field must have formid and type. You can also specified some custom validation like max-length.

If everything is clear so far, let's move on to the next steps.

Create Controller File

Controller is where we can get or post a route so let’s create a controller where you can GET, render and POST:

Create a controller file under the path cartridge/controllers/ControllerFileName.js

Don’t worry, I know… Now you are confused but it's simpler than you think.

Now we concentrate on GET, Let’s me explain:

• var server = require(‘server’); is a must in your controller file.

• In Server.get(‘RouteName’, function(req,res,next) { }); instead of RouteName you can write anything, it is route’s name.

• var formDef = server.forms.getForm(‘fileForm’); with forms.getForm('') you can convert form file .xml in an object to send to storefront. So in getForm(‘FileName’) you must specified file’s name .xml you before created under cartridge/forms/default/formFile.xml.

• With res.render(‘templateDirectory/templateFileName’) now you can render your template .isml created before under the path cartridge/templates/default/directoryName/nameTemplate.isml, plus to res.render() you can add an object to send form definition to frontend, so pass object as a parameter to res.render(‘templateDirectory/templateFileName’, { nameProperty: formDef });.

Go render form fields in Template file

After sent formDef to FE we can access this object through pdict variable. Imagine pdcit variable as a big pot where everything that is passed as a parameter during rendering ends up in there and you can fish it in the template whenever you need it. For example with pdict.newForm.input1.attributes I’m entering to newForm object, it is nothing more than nameProperty which has been passed as an object in res.render(‘templateDirectory/templateFileName’, { nameProperty: formDef }); input1 and input2 refers to formid specified in .xml file.

Last Step

We are at the end and it is time to receive our input in POST simply by calling the form again with:

var formDef = server.forms.getForm(‘fileForm’);

Now we can access the value we entered in the form object before submitting simply by accessing the formDef object and then then accessing to properties formDef.input1.htmlValue and formDef.input2.htmlValue

Don’t forget, you can access to your controller and test it simply adding /default/nameControllerFile-RouteName at the end of your sandbox url in your browser.

Comments

[jastuccio]

SFRA = Storefront Reference Architecture

We use so much technobabble in this industry. This is NOT a knock on you Danielle. A good practice might be including the full name in the description instead of the acronym and a brief description of what it does in the first paragraph. I am looking at Salesforce development to see if it is something I would like to learn. Salesforce has a lot of unique terms to describe its tech.

I had no idea what SFRA was. After searching I decided to share a quick definition I found ⬇️

Storefront Reference Architecture combines industry best practices and expected out-of-the-box commerce functionality in a web storefront... melonusa.com/inside-the-melon/what...