Getting started with SFRA
Published: 2021-03-22 19:01:33

### 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**	

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwmsxe9h1sl5jq3h1ef9.png)


*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**

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vz48vvwam37n6uadfbi.png)
 
*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**


![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jq9s4paeul164ux1p93t.png)


*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



![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5ukwlwr7iopj0762mke.png)

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’);`

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zdc68cr32tskcunzdfus.png)


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.**