Sitecore Glass Mapper Editable fields.

  Introduction:

In our previous post we had seen how we can make  make Fields Editable in Experience Editor using "@Html.Sitecore().Fields". But usually as the project Grows in Size we tend to use some ORM to help us get mapping task out of the box. Thus, in the section we will be Discussing how we can make the Fields Editable in Experience Editor while using Glass mapper.

Implementation:

We will continue to update our previous Application. The application already contains a Controller Rendering, that will be using Sitecore Helpers to make field Editable. Again as I said in previous blog, the change is right from Architecture point. Depending on how we want to target the View (Sitecore, Glass Mapper, or plain) will decide how to write the Model, Business logic, Data Fetching logic to showing view.

Thus, here we will not manipulate the existing logic. We will create another Controller Rendering that will be using Glass mapper to make fields Editable in Experience Editor.

we will create Model followed by Data Manipulation Logic, Business Logic, Controller and then View.

let us see them one by one.

fig-1

In the above figure we have created "INewsModel" interface that resembles our News item in the Sitecore Tree. It contains Drop link ("Genre") that will be holding Another Item. Since "Genre" is another item, we will have to create an Interface that resembles the Item that are getting selected in this Drop Link.

fig-2

In  the above figure we can see both (ID and Genre name) fields are been created as property.

With this we have completed our "NewsModel". Now as we implement it, the finished version will look as shown below.

fig-3

As we see from our Sitecore tree, the data source for our Rendering will have folder that contains List of News. All we need here is an Interface that can hold List of news articles and the ID of The Folder.

thus we will be creating "IListOfGlassNewsModel" as shown below.

fig-4

As we have our Model ready, we will now create a Data Logic layer class to fetch data from this item.

Therefore we will create "GlassDataManipulation" (please create interface by yourself.)

fig-5

with IMvcContext from glass mapper, we simply call Get Data Source item. It will check current Rendering and then fetch details of that data source (and its Children if mentioned in the Properties as we did.).

We than write Business logic Layer for the same ("GlassNews") as shown below.

fig-6

 

This code snap short is self Explanatory. all we are doing here is calling DLL layer to fetch data.

As our BLL is ready we can now write our Controller as shown below.

fig-7

Controller call BLL to Fetch Data, and pass the same to View. here is the tricky part we mostly forget, since we have added couple of Model Interfaces, Model classes and Controller, we will have to add them into Dependency Injection Mapping. It is not a big deal since we may be able to correct it based on the error output or Logs. But let us try to do it before, thus we go back to "GenericDIService" and add them as shown below.

fig-8

Here we have added "NewsGlassmapperController", "IMvcContext", "INewsModel","IGlassDataManipulation" and "IGlassNews"

Once we are done adding our new DI's it is time to create the View as shown below.

fig-9

Since you want to use Glass mapper to make fields Editable, you will first have to add Using Statement  for "Glass.Mapper.Sc.Web.Mvc". Save after writing the using statement. In case you still can not see the intelisense for Glass() close Visual Studio and start again (it worked for me :-)   ).

there are couple of other pointers here, If your field is of type "Sitecore.Data.Items.Item" than the Lambda expression or Razor is unable to fetch the data using Sitecore API's (like Sitecore.Context.Database.GetItem(Sitecore ID)). Let me show you what I mean.

fig-10

In the above Snap short, the red view is of Glass mapper and Green view is of Sitecore Helper. Check line 19 in Green view. how I was able to fetch the Item selected in drop Link and fetching the field value of Selected Item.

I tried to perform this activity on Glass helper but it throws an error.

Let us publish this and integrate it with Sitecore. Go to Sitecore and create new Controller Rendering As shown below.

fig-11

once we have created controller rendering, go to Home node and add the rendering as shown below.

fig-12

Click on Presentation -> Details -> Edit link (3) -> Add (4). you will see a popup select "GreenNewsList" write placeholder as "smain". select the check box under place holder to add Datasource. add news folder as data source. Home Node should be selected first than under Publish , click Experience Editor check if the data is visible as expected if yes, publish newly created Rendering, and Home item to Web Database. Given below is the screen short of my Experience Editor with all field Editable from Sitecore as well as Glass mapper. In Above figure, Number 5 show our view will be after Sitecore view. We will try to edit the fields below, specially the Droplink (last one in the Display) because it is Item within Item field.

fig-13

click on save you will see the Genre for all the Comedy has changed.

fig-14

Summary: 

We can make the fields Editable via Sitecore Hleper or Glass mapper, but depending on the helper used we need to modify our Architecture.