Sitecore Glass mapper ReferenceField (DropLink)

  Introduction:

In this post we will see how we can leverage ORM concept in Sitecore as well. We will start with simple project and introduce Glass mapper. Reference Field will be our main focus in the post. 

Background:

We have updated sitecore Home Page with our Layout and Controller Rendering. Given below is the pictorial view.

Layout:

Under Layout Section in Content Editor

fig-1

Create a mvc Layout. My layout just contain a Place holder as shown below

fig-2

for this post we will just be using Static place holder i.e "smain"

Rendering:

We will be creating a rendering and data source for the same. Under Feature folder create new rendering folder -> than create Controller Rendering. The Controller field will contain , Name Space + Controller Class and with comma separated, we mention which dll contain this class. Action contains Method to hit in the Controller.

fig-3

Add the layout and rendering to Home Item as shown below. By This time I hope we all know how to add Rendering and Layout to Item. Thus, shing the final version of addition.

fig-4

Please Ignore one of the NewsList Rendering here in the above Image as one is for Static Placeholder and another is for Dynamic placeholder. Double click on "Default" or click on Edit.

fig-5

In the above figure your Data source field will be empty. we will first create it and then add the same.

Data Source:

1- We will create Genre Template so that we can add the Genre to news Type Droplink, followed by News Template.

fig-6

As we see this is the final Template. Let us also see how Genre template looks like.

fig-7

Now lets create Genre Item which will server as Data source for Droplink in News Item. 

fig-8

The news Items created are as shown below.

fig-9

Adding Rendering:

In the below Figure you will see that the NewsList Rendering is already added. I think we all know how to add the rendering and thus, skipping this part. (simply click edit button , click control, click add and then add the Rendering). 

fig-10

Once Rendering is added click on Rendering (NeswList in above screen short.). Add the Datasource path to "News" folder visible under Home Node in the tree.

fig-11

One we are done with Sitecore Side we will then move to our Business Logic (MVC) part.

Considering we have already integrated MVC Application to our Sitecore Application, We can now proceed to render our news List item.

Note: 

In this Post we have not considered helix Pattern for simplicity (Will have another blog in future), also Dependency Injection is not done (Only Glass mapper is our focus). If we consider all the above scenario, this post will become too long. Thus, avoiding above concepts.

fig-12

Since we all know MVC pattern , we will follow the same. In the above figure, We have given below architecture components.

1- Controller

2- Model

3- View

4- BLL (Business Logic layer)

5- DLL (Data Logic Layer)

•  Controller will only pass data to BLL and View.
• BLL this is where all the Business logic will be written. BLL will never hit Database directly, thus all data CRUD (Create, Read, Update and Delete)  operations will be performed by DLL
• DLL will be responsible to get the data from Database and pass it back to BLL. DLL will never have any business logic. (This will help us to keep loose coupling and in future we can segregate the components further)

Given Below are the code Snap shorts of  each component.

The below screen short is of Controller (Without DI). 

Note: In your case it will be inheriting from Controller Class and not GlassController. Let it be as is do not try to add GlassController.

fig-13

In the above Controller we have reference to INews, INewsModel  and News.

We will see the snap short for the above references one by one. In INewsModel, you will see attributes of Glass mapper, please ignore them. just create the Properties as contract. 

Note:  Reference Field (In our case it is Drop Link) are been observed as Item in Glass mapper, therefore, I have taken Item as type for the field.

fig-14

Given below is the implementation of INewsModel.

fig-15

In Controller we have given a call to GetNewsList method. Given below is Interface and implementation screen shorts.

fig-16

fig-17

Now since BLL do not hit database directly, the code is referencing DLL layer for data.

Given below is the screen short for DLL interface and Implementation.

fig-18

fig-19

The View is as shown Below.

fig-20

Layout that will be used for Home is as shown below.

fig-21

Check the Namespace and DLL name mentioned in the Sitecore Controller Rendering in fig-3. Please update the same in case your is different.

Note: Before Publishing, please ensure you have taken back up as explained in the blog for Integration MVC with Sitecore.

You will see the out put as shown below.

fig-22

You can cross verify the above data with the one mentioned in fig-9.

As we use Auto mapper as ORM in MVC C# application, Similarly, we have GlassMapper for Sitecore.

Go to "http://www.glass.lu/" (or simply type glassmapper in google search the first link will be for direct glass mapper site.

fig-23

Scroll down till footer ad then click GLASS.MAPPER.SC.

fig-24

Click On compatibiliy chart , you will find the updated Glassmapper with respect to your Version. In my case it is not mentioned here I am on sitecore 10.1.1. Thus I go to visual studio manage nuget package manager.

fig-25

When I typed in Browse -> Search -> Glass.mapper.sc.10, i got the options as shown in above screen short. Notice the mapper is available for 10.2 as well. since 101 is available i will take the Package "Glass.Mapper.Sc.101".

once we have installed Glassmapper via Nuget, we then start to add attribute (see  fig-14 and we will also have to change our way of capturing data)  over our Model for Auto mapping, also we would need a code change in DLL.

Now since we are using Glassmapper for auto mapping we will have to introduce virtual key word for all the Properties of Implemented class if used directly. Also we will have to introduce the Model in the way our Item tree is structured in Sitecore.

In order to fulfil above criteria, we create new Model as shown below.

fig-26

In the above Interface we have Attribute SitecoreType which indicated map to the Template ID mentioned here.

the properties are ID of the Item it self and all the Children Item.

fig-27

Simply put, News Items Folder is the datasource given to Rendering attached to Home Item. Thus, this is the main Item. other 2 Items (Hamirpur News and Mumbai News) are children. 

The implementation of above Interface is as shown below.

fig-28

We will now be updating the Code from Data Logic layer. as show below

fig-29

In the above code we have called IMvcContext and asked to Get Data Source Item, but we have strongly typed it to IListOfNewsModel that we created above in fig-28.

so we finished in 3 lines :-). I have deliberately left the Previous code (in comment). so that comparison is possible.

the out put still remains the same. as shown in fig-22.

Summary:

We have note done any good coding practices here but the main thing to focus was how reference field is been mapped in Glass mapper.