Getting Data with Models and Sending Data with ViewModels

Introduction

We’ve discussed Controllers, Templates and briefly mentioned ViewModels but without many details, now we will discuss differences between models and view models and why SFRA architecture make use of view models.

It would be nice if you have previous experience in MVC pattern before going deeper, so if it’s not the case, take a look to this link before continue.

MVCVM: It’s mostly the same than MVC pattern but with an an extra layer called ViewModel (VM).

You see, in pure MVC the Models usually are the representation of our database tables. They are defined once and usually they represent a table in the database. But imagine that models can have dozens of fields.

What are the chances you need all of them on a page? And imagine how much-unused data is being sent over to the page. The more data we send, the more the loading time. Instead, we create what we call ViewModels.

To put it in simple terms, ViewModels are objects we create specifically for the pages we want to render, containing only the data that that specific page needs.

MVCVM SFRA Pattern

Our Controller gets data from the API (Models), creates a ViewModel object (basically a hashmap with key-value pairs) and sends it to the storefront (View).

Models: As mentioned before, Models usually represent our database tables. In SFCC you will notice we have 2 levels of Models.
We have the Models that are returned by the SFCC API.

Using these Mgr classes we can get data from our API. But there is another type of model. One that we have access to the source and extend.

These are models that we can customize. For better understanding we will focus on CartModel and Cart Controller

app_storefront_base cartridge models
Cart model Salesforce Commerce Cloud

Did you notice that it receives the actual Basket as a parameter and adds more data when creating the model? To be sure this is really the Basket returned from the API let’s check the Cart Controller that renders the Cart page:

Cart controller Salesforce Commerce Cloud

In this case, it is really the case that our Model and ViewModel are the same as we just confirmed. That being said, the advantage of having these models is that we can extend them according to our own needs. In case we need to retrieve more data, for example, we can just add it do the model and whenever we call it, that data will be where.

Keep in mind that this might not always be the best approach. If you need this extra data only for one specific call, it might be a better idea to use getViewData and setViewData inside your controller instead.

How to access to view model data

Once data is send in our controller via setViewData() or via second parameter in res.render() function. It will be accessible in our templates via pdict variable as we learned in previous chapters. So, in our example, some model properties are used in cart.isml template, take a look!

Retrieving viewmodel data in SFCC

ViewModels

As we already mentioned before, in SFCC ViewModels are just objects that are created specifically for the page we are rendering or to the request, we are responding to.

Whenever you see data being sent through the res.render or res.json functions and the data is inside { and }, that’s your ViewModel.

To access it on your page you just consider them as entries in your pdict object. Take for example the Search Controller, Refinebar endpoint:

Check how the search/searchRefineBar ISML template accesses the productSearch object because of the { } syntax: The objects are put inside pdict.

Retrieving viewmodel data in SFCC

How to be a Certified Salesforce Commerce Cloud Developer for FREE

Unlock a FREE PDF with SFCC B2C Certification questions from our Udemy Course. Join our newsletter!
Check your email, you’ll receive a copy in a few seconds. If you don’t see it, please check your spam folder.

Do you like cookies? 🍪 We use cookies to ensure you get the best experience on our website. Learn more.