Experience Editor in Sitecore MVC Project

Hello Guys…

Its my fourth blog in Sitecore Blog series. In this blog, we will learn about how to make different type of fields editable in Sitecore MVC project.

If we want to edit any field, then we can go to that item in content tree and can make the changes. But to edit the fields directly from Page Editor (Experience Editor in Sitecore 8 and above), we have to render each filed using some syntax which enable those fields to become editable from Page Editor/Experience Editor.

In this blog, we will learn how to make different types of fields editable in MVC Project.

  • Editing Image Field

Let’s say, we have an item whose name is Logo. This item has a filed named Logo Image, which is of image type. To render this image field in such a way so that It will remain editable from experience editor, use following syntax

@Html.Sitecore().Field(“Logo Image”, Logo)

here, Logo Image is the name of filed which consists of image and Logo is the name of item.

Now, if we will try to make some changes to this image item from experience editor, we get following options

editing image from experience editor sitecorehelper

Option 1 is used to change Image

Option 2 is used to edit image property like Height, Width etc

Option 3 is used to remove image

  • Edit Image or Text which is enclosed between link

Some times, we see that some image or some text are clickable on the website. In such type of cases, we can easily make text or image editable. But how to make links editable as well? Let’s say we have an item Highlights. This item is having an image filed say HighlightImage, a rich text filed say HighlightText and a link filed say HighlightURL.  We want to render Image and RichText in such a way, that user can click on these and user will be redirected to the URL specified in HighlightURL field.

Use following syntax to achieve this

@Html.Sitecore().BeginField(“HighlightURL, Highlights, new { haschildren = true })

@Html.Sitecore().Field(“HighlightImage, Highlights)

@Html.Sitecore().Field(HighlightText, Highlights)

@Html.Sitecore().EndField()

here, HighlightURLHighlightImage and HighlightText is the name of fileds for Link, Image and Text respectively, and Highlights is the name of item.

haschildren=true, is specifying that there is something inside this HTML. Line 1 will generate html anchor tag, and it will be closed at Line 4.

If we click on image filed, we will get following options

editing image and text enclosed between link sitecorehelper

As you can see here, we are getting options to edit image along with link.

  • Editing Button Text and its CSS Class

Experience editor also provide flexibility to change the text of a button, and to change the applied css of that button. All you need is to render the button using following syntax

@Html.Sitecore().Field(“LinkFieldName,ItemName, new { @class = “btn ” + className })

At the time of editing, we get following options

editing button in experience editor sitecorehelper

As you can see, here we are getting option to edit Button Text, its URL, Style Class and various other options.

  • Edit a Text

To make any text editable from Experience Editor in Sitecore, render the text using following syntax

@Html.Sitecore().Field(FieldName, Item)

Leave a Reply

Your email address will not be published. Required fields are marked *