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.
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
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:
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!
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.
When loading the Cart page, we no longer have access to the notes (which the basket instance inherits from LineItemCtnr). But for the current project, when the user goes to the Cart page, we want to have access to those and if there are none, display the following message "You have no notes on your cart"
The basket notes are inside the basket object retrieved by BasketMgr.getCurrentBasket(). If you open the official documentation for the Basket class, you will find that it has an attribute notes containing what we want.
Inside CartModel, we have the basket instance, which contains the notes array. So let's just add it to the model.
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.
SFRA Course on Udemy
- Getting Started with SFCC
- SFCC Business Manager
- Commerce Cloud Catalog
- VSCode setup, sfra github download
- Cartridge path, upload cartridges
- Adding Logic with Controllers
- ISML templates Demandware
- Data models and view models
- Salesforce Script API
- How to use and organize scripts
- Content assets and content slots
- Salesforce Commerce Cloud Forms
- System and Custom Objects
Salesforce Certifications
- B2C Commerce Architect
- Marketing Cloud
- JavaScript Developer I
- B2C Solution Architect
- B2B Solution Architect
- Application Architect
- Technical Architect
- Salesforce Service Cloud