Sitecore – Creating an admin menu item

If your building a Sitecore admin application, your going to need to link to them from the Sitecore start screen/launch pad.

To create a menu item on Sitecores start screen:

  1. Log into Sitecore and switch to the core db
  2. Open content editor and navigate to /sitecore/client/Applications/Launch Pad/PageSettings/Buttons
  3. You will see groupings for each of the sections that appears on the start screen/launch pad
    Launchpad buttons
  4. Add a new Launch Pad-Button item to the section you want it to appear in
  5. Give it a name, icon and link
    Button details
  6. Your button now appears on the start screen
    New button

Related Posts

A first look at Sitecore SPEAK 3

Advertisements

Sitecore SPEAK 3 – Creating an application

At the end of last year I wrote a post on A first look at Sitecore SPEAK 3 which gave an overview of what Speak is, and the large architecture change that has happened between Speak 1/2 to 3.

In this post I’m going to share my experience on how to set up a Speak 3 application with Angular.

Step 1 – Creating the Angular project

To start your going to need a few things installed:

  • An IDE – I’m using VS Code
  • NodeJs – This is to get access to node package manager and to run your application in debug mode
  • Angular

If you don’t already have Node and Angular installed, I suggest going through Angular’s quick start guide. If your also new to Angular I suggest going through their Tour of Heroes tutorial first. This will give you a good understanding of how Angular applications are built and some knowledge around a few key files.

One you’ve got everything installed, create a new angular project from the command line.

ng new app-name

1 - Create Angular app

At this point you could try manually installing the various modules Sitecore provide, covering things like common components, logout functionality etc. However I personally found this a bit awkward. Unless you know what your doing your probably going to run into issues such as compatibility between the latest version of Angular and the Sitecore components (at time of writing Angular is on version 5 but Speak 3 only supports Angular 4).

Instead I would recommend downloading the sample application from https://dev.sitecore.net/Downloads/Sitecore_SPEAK/3/Sitecore_SPEAK_3.aspx and then copy over the .npmrc and package.json file to your solution.

By including these files, the .npmrc file will add a reference to Sitecores package repository and the package.json file will make sure the right packages and versions will be installed. Use npm to install the packages.

npm install

1 - Install NPM Packages

Next we need to update a couple of files in the application to reference some Sitecore specific bits. This is explained in Sitecores documentation, in my examples though I’ve also included referencing some modules that you are likely to use.

app.module.ts

The app module file defines the modules that are going to be used in the application. Here we need to add the references to the Sitecore modules.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { ScAccountInformationModule } from '@speak/ng-bcl/account-information';
import { ScActionBarModule } from '@speak/ng-bcl/action-bar';
import { ScApplicationHeaderModule } from '@speak/ng-bcl/application-header';
import { ScButtonModule } from '@speak/ng-bcl/button';
import { ScGlobalHeaderModule } from '@speak/ng-bcl/global-header';
import { ScGlobalLogoModule } from '@speak/ng-bcl/global-logo';
import { ScIconModule } from '@speak/ng-bcl/icon';
import { ScMenuCategory, ScMenuItem, ScMenuItemLink, ScMenuModule } from '@speak/ng-bcl/menu';
import { ScTableModule } from '@speak/ng-bcl/table';
import { ScPageModule } from '@speak/ng-bcl/page';
import { CONTEXT, DICTIONARY } from '@speak/ng-bcl';
import { NgScModule } from '@speak/ng-sc';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ScAccountInformationModule,
    ScActionBarModule,
    ScApplicationHeaderModule,
    ScButtonModule,
    ScGlobalHeaderModule,
    ScGlobalLogoModule,
    ScIconModule,
    ScPageModule,
    ScMenuModule,
    ScTableModule,
    NgScModule.forRoot({
      contextToken: CONTEXT, // Provide Sitecore context for SPEAK 3 Components (optional)
      dictionaryToken: DICTIONARY, // Provide translations for SPEAK 3 Components (optional)
      translateItemId: '0C979B7C-077E-4E99-9B15-B49592405891', // ItemId where your application stores translation items (optional)
      authItemId: '1BC79B7C-012E-4E9C-9B15-B4959B123653' // ItemId where your application stores user access authorization (optional)
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

The component file needs updating to call init on the ngScService.

import { Component, OnInit  } from '@angular/core';
import { NgScService } from '@speak/ng-sc';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(
    private ngScService: NgScService
  ) {}

  ngOnInit() {
    this.ngScService.init();
  }
}

.angular-cli.json

In the angular-cli.json file you will see a styles section which references the main css file in the solution. Here you will need to add an additional reference to Sitecores css file.

../node_modules/@speak/styling/dist/styles/sitecore.css

Launch

You can now launch your application from the command line and see the default start screen.

ng serve --open

Step 2 – Building your application

It’s not time to start building your application. If you don’t know Angular I suggest going through a couple of tutorials, and go from there. I’m not going to go into any details about how Angular apps are and should be written, but I am going to go through a few of the Sitecore controls needed to make an application that fit’s the Sitecore admin.

Example Page


To make this page first I cleared out everything from app.component.html and started adding some Sitecore components. Normally you would start generating your own components to represent things like pages, but for the purposes of the example I placing everything in the one file.

To start I have a sc-page containing a header. This comes out of Sitecores demo application and will give you the standard bar that sites at the top of the Sitecore admin, informing users where they are.


<div>
    
      <a href="#"></a>
      <!-- AccountInformation gets accountName and accountImageUrl automatically from Sitecore context which is configured in AppModule -->
      
    </div>

To create the menu I’m using an sc-menu. Notice how some items are marked as active.


<aside>
    
      
        
          <a>Menu item 1</a>
        
        
          <a>Menu item 2</a>
        
      
      
        
          <a>Menu item 3</a>
        
        
          <a>Menu item 4</a>
        
      
    
  </aside>

Lastly to create the main content of the page I’m using a scPageAppHeader, scPageContent and an scTable for the table.

<div>
    </div>
<article>
<table>
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Created by</th>
<th>Created data</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem</td>
<td>Active</td>
<td>sitecore\admin</td>
<td>Jan 20, 2018</td>
</tr>
<tr>
<td>Ipsum</td>
<td>Active</td>
<td>sitecore\admin</td>
<td>Jan 20, 2018</td>
</tr>
<tr>
<td>Foop</td>
<td>Inactive</td>
<td>sitecore\admin</td>
<td>Jan 22, 2018</td>
</tr>
</tbody>
</table>
</article>


The complete code looks like this:


<div>
    
      <a href="#"></a>
      <!-- AccountInformation gets accountName and accountImageUrl automatically from Sitecore context which is configured in AppModule -->
      
    </div>
<aside>
    
      
        
          <a>Menu item 1</a>
        
        
          <a>Menu item 2</a>
        
      
      
        
          <a>Menu item 3</a>
        
        
          <a>Menu item 4</a>
        
      
    
  </aside>
<div>
    </div>
<article>
<table>
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Created by</th>
<th>Created data</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem</td>
<td>Active</td>
<td>sitecore\admin</td>
<td>Jan 20, 2018</td>
</tr>
<tr>
<td>Ipsum</td>
<td>Active</td>
<td>sitecore\admin</td>
<td>Jan 20, 2018</td>
</tr>
<tr>
<td>Foop</td>
<td>Inactive</td>
<td>sitecore\admin</td>
<td>Jan 22, 2018</td>
</tr>
</tbody>
</table>
</article>


To avoid some build errors later on we also need to update the app.components.ts file (think of this as a code behind file), to have an additional property and service.

import { Component, OnInit  } from '@angular/core';
import { NgScService } from '@speak/ng-sc';
import { SciLogoutService } from '@speak/ng-sc/logout';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  isNavigationShown = false;

  constructor(
    private ngScService: NgScService,
    public logoutService: SciLogoutService
  ) {}

  ngOnInit() {
    this.ngScService.init();
  }
}

How to find more components

Unfortunately the Sitecore documentation doesn’t currently contain a list of what’s available. However if you look in your node_modules folder there is a change log containing information on each component here \node_modules\@speak\ng-bcl\CHANGELOG.md.

Step 3 – Publishing the application

Once you’ve built the application you need to publish it and copy it into Sitecore.

There are some differences in the way a Speak 3 Angular application needs to work which differ from the normal way an Angular application runs. Among others these include having an index.apsx page rather than an index.html and the application not being located in the root of a site. You can read more about this in Sitecores documentation. The good news though is Sitecore have provided a post build step to sort this out for you.

If you copied the package.json file at the beginning this will already be set up, one thing you do need to do though is update the base location to be where your application is going to live.

Once this is done you can run a build.

npm run-script build

Note this is using npm to run the build script from the packages.json file rather than doing a regular ng build from Angulars CLI.

If all succeeds your dist folder will now contain a compiled version of the application.

Copy these files into the destination folder in your Sitecore site. For me this is \sitecore\shell\client\Applications\Speak-Example. You should now be able to log in and view your application.

Notice the logout button now functions and the current user is displayed in the top right. The menu sections are also collapsible, but other than that our application doesn’t actually do anything.

Moving on from this there’s lot’s more to cover on building out the functionality in the application and you may have also noticed in the app.module.ts file a reference for translations which I never created, but this should be enough to get anyone started with building an Angular Speak 3 project and then publishing it into Sitecore.

Related Links

Speak 3 Official documentation
Speak 3 Downloads

A first look at Sitecore SPEAK 3

SPEAK (Sitecore Process Enablement and Accelerator Kit) is the framework for constructing admin interfaces in Sitecore. It was introduced to the platform prior to Sitecore 8, but really became the way to do things after Sitecore 8’s UI refresh which introduced the start page and made accessing full page SPEAK applications logical.

Sitecore9StartScreen

SPEAK 1 and 2

The goals of SPEAK were to:

  • Provide a streamlined approach to application development.
  • Enable reuse of UI elements.
  • Enforce a consistent look and feel.

In order to achieve this SPEAK 1 and 2 provides a component library of controls that can be used to construct pages. This ensures that the UI retains a consistent look and feel, and also minimizes the amount of work on a Sitecore developer. Logic is then added to an application using JavaScript for the front end and C# for server side code.

While this all sounds great many developers find SPEAK hard to use. In order to construct a UI out of the re-usable components, Sitecore lent on it’s existing functionality to be able to construct pages out of presentation items, however there is no WYSIWYG editor and the only real way to construct the layout is through Sitecore Rocks. This in itself isn’t awful, but when combined with the fact the average Sitecore developer doesn’t need to build an admin application that often, it presents a steep learning curve using a tool they may not use to put together components they’re not familiar with.

SPEAK 3

SPEAK 3 aims to address complaints in previous versions by introducing a completely new framework based on Angular.

Since SPEAKs initial incarnation, client side application development has moved on a long way, so rather than continuing to construct their own framework, Sitecore has chosen Angular as the the platform to use going forward.

Begin Angular, SPEAK 3 applications can run independently of Sitecore, however the purpose of SPEAK 3 is still to make it simple to integrate Sitecore-branded applications into the content manager.

My First Look

Before being a Sitecore back-end developer I worked on bespoke web based applications using client side frameworks such as Knockout, so the news that Sitecore was going to adopt Angular was great. Digging into Angular again however has given me a first hand experience of how fast the JavaScript world is changing. Gone is the promotion of MVC on the client being replaced with service/controller patterns. Whereas with Knockout and AngularJS (what Angular 1.x is now known as) we could add data binding to just an aspect of a page, Angular is really for running an entire application, routing and all.

Building an SPEAK 3 application really means building an Angular application with some modules provided by Sitecore. These modules will provide integration features such as:

  • Sitecore context
  • Translations for applications
  • Translations for the SPEAK 3 component library
  • Component user access authorization
  • Preventing cross-site request forgery (Anti-CSRF)

In addition to this the SPEAK 3 components will also sort out compatibility issues such as modifying the routing so that the application no longer needs to be in the route of the site and can be in a sub-folder of sitecore.

Angular for a Sitecore dev

To start it’s good to know an outline of what developing Angular involves.

Angular 2+ is built using TypeScript. You don’t need to use TypeScript, but as most of the examples are you probably will want to too. TypeScript is a superset of of JavaScript which adds strong typing support as well as other features of ECMAScript 2015 to backport it to older versions of JavaScript.

TypeScript needs to be compiled into JavaScript before it can run in the browser.

The easiest way to get started with Angular and TypeScript is using Node.js to install tools via NPM. Node is not a requirement for Angular and you won’t need it in production, but for local dev using Node to host your application can make life a lot easier.

Angular has a CLI which makes things easy to create and run an Angular application.

Visual Studio can be used as an IDE for TypeScript and Angular, but you might find life easier using Visual Studio Code.

It’s better than it sounds 🙂

All this might sound a bit daunting to the average C# developer. Technologies like Node and NPM traditionally are more at home in the open source community.

There is however a lot to be positive about. If your the type of dev that prefers writing c# to JavaScript, then the inclusion of TypeScript is going to please you, as it brings the type checking structure and class organisation that we’re used too.

The angular cli (command line interface) is also a reason to be pleased. One large difference between the .net and open source world has been the ability to click a button and get going. Open source typically comes with the setup of many components to get a solution working. At times when you try to learn something it can feel like your spending more effort doing setup that actual dev on the platform. Angular still needs to have all these components put together, but the cli takes care of all this for you, effectively recreating a file new project experience, just through a command line.

Custom Experience Buttons vs Edit Frames in Sitecore

So your going that extra mile and fully supporting the experience editor in your Sitecore solution, but how do you support a WYSIWYG editor when a field isn’t actually visible, or you need to provide the ability to edit a complex field type such as a drop-down or a multi-list?

The solution is to use either Edit Frames or Custom Experience Buttons, both of which will display a dialog containing the fields to edit. The difference between them comes down to where the toolbar containing a button will appear.

Edit Frames require extra code to be added to your view and are designed to surround a section(s) of your view. Custom Experience buttons however appear on the existing tool bar that’s shown when you select a component in the experience editor.

Edit Frame

With an edit frame you can surround a section of html within your view with a clickable target, that will display a toolbar with a button to launch the dialogue.

To set up an edit frame:

  1. In the core database navigate to /sitecore/content/Applications/WebEdit/Edit Frame Buttons and create a new item based on Edit Frame Button Folder. This folder will be referenced in your view for the collection of buttons to be displayed.
  2. Under the new folder create a new item based on Field Editor Button and give it the name of your button.
  3. On your button item make sure you set an icon and the list of fields the button should allow the content editor to edit. These should be pipe separated.

    Edit Frame Button Config

  4. In Visual Studio open the view for your rendering
  5. Add a reference to Sitecore.Mvc.Extensions
  6. Surround the section to show the button with a using block as follows:
    @using (Html.BeginEditFrame(RenderingContext.Current.ContextItem.Paths.FullPath, "Button Folder Name", "Toolbar Title"))
    {
          // HTML here
    }
    
  7. You will now see a toolbar appear in the experience editorEdit Frame Toolbar
  8. Clicking the icon will load a dialogue to edit the listed fields

Custom Experience Buttons

Custom experience buttons differ to edit frames in that you do not need to add any code to your views. Rather than having 1 or more clickable areas in your view the button will appear on the toolbar for the entire component. This makes them beneficial when the field doesn’t directly relate to a section in the view. e.g. for editing a background video that may span the entire components background.

To set up a custom experience button:

  1. In the core database navigate to /sitecore/content/Applications/WebEdit/Custom Experience Buttons and create a new item based on Field Editor Button.
  2. On your button item make sure you set an icon and the list of fields the button should allow the content editor to edit. These should be pipe separated.
  3. Switch to the master DB and navigate to the rendering item for your component
  4. In the field for Experience Editor Buttons select the new button

    Experience Editor Buttons

  5. Selection the component will now show the additional button on the toolbar
    Experience Editor Button
  6. Clicking the icon will load a dialogue to edit the listed fields
    Edit Frame Dialog

Optimize the Rich Text Editor in Sitecore

When it comes to building a Sitecore site your first thought probably isn’t that you are going to need to make any setting updates or customization’s to the rich text editor. After all when you learn about building a site its mostly focused around creating components to add and remove from pages, but there are a couple of things that will greatly enhance your content editors experience.

Configure the toolbars

Out the box Sitecore ships with 4 toolbar configurations. These are defined in the core db here:

  • /sitecore/system/Settings/Html Editor Profiles/Rich Text Default
  • /sitecore/system/Settings/Html Editor Profiles/Rich Text Full
  • /sitecore/system/Settings/Html Editor Profiles/Rich Text IDE
  • /sitecore/system/Settings/Html Editor Profiles/Rich Text Medium

The “Rich Text Default” toolbar

Default Toolbar

The “Rich Text Full” toolbar

Full Toolbar

The “Rich Text IDE” toolbar

IDE Toolbar

The “Rich Text Medium” toolbar

Medium Toolbar

As the name suggests, by default your content editors will see the default toolbar that contains a very limited number of options. This may in-fact be to limited and you need to offer the content editors one of the toolbar’s with more options. Equally, the full toolbar may give to many options such as font’s and you would want to offer a more restricted set of options.

Setting a toolbar on a field

You can set a toolbar on each individual field by specifying the path in the template fields source field. This is particularly useful when a field needs specific options, such as a text area that should allow a user to configure bold, italics and links but shouldn’t ever contain an image.

Setting toolbar in on an individual field

Updating the default toolbar for a rich text field

When you want to change the toolbar for all rich text fields, a better option is to update which toolbar is used by default. You can do this with a patch config file.


<?xml version="1.0" encoding="utf-8" ?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <settings>
      <setting name="HtmlEditor.DefaultProfile" value="/sitecore/system/Settings/Html Editor Profiles/Rich Text Full" />
    </settings>
  </sitecore>
</configuration>

Updating the rich text editor css

A second way of customizing the rich text editor that you should consider is to make changes to the css file that the editor uses. By default this will use a css file called default.css that you will find in the root of the site. You can see this being referenced form a config setting if you look at the showconfig.aspx page.

<!--  WEB SITE STYLESHEET
    CSS file for HTML content of Sitecore database.
    The file pointed to by WebStylesheet setting is automatically included in Html and Rich Text fields.
    By using it, you can make the content of HTML fields look the same as the actual Web Site
-->
<setting name="WebStylesheet" value="/default.css" />

You can change this to use a different css file using a patch config file as follows:


<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <settings>
      <setting name="WebStylesheet">
        <patch:attribute name="value">/rich-text-editor.css</patch:attribute>
      </setting>
    </settings>
  </sitecore>
</configuration>

Now you may be wondering why you would want to do this, after all Sitecore offers an experience editor mode that will show the entire webpage as it will appear to visitors and also offers inline editing. However some aspects of a page can be better achieved using css styles rather than new components or new fields and content editor will need both an easy was to apply these style and a visual way to see that they have been applied, irrespective of if they are using the experience editor or the content editor.

For example, in this section of a blog post from Scott Hanselman he has highlighted some text as an aside which can easily be achieved in a rich text editor by applying a css class.

Hanselman Blog Aside

The first step to enabling this in Sitecore is to make sure you’re using a toolbar that allows the user to select css classes (that’s any but the default).

Next by creating a stylesheet that just contains the relevant style to be applied, the content editor can now select this in the css drop down;

.aside {
    border-left: 2px solid #e2842c;
    background-color: #f7f7f7;
    padding: 5px;
    margin: 5px;
    display: block;
}

CSS drop down

The preview will now also give visual feedback indicating what this is going to look like. It doesn’t have to look exactly like the webpage will, just enough for the content editor to understand.

Rich Text Editor

 

Sitecore Rendering Datasource Restrictions

Datasources on Sitecore Renderings are the basis for content authors to combine a variety of components to form a page, without the need for all the fields to exist in the context item. They also form the underpinnings of switching out content based on personalization rules.

To make life easier for content authors there are two properties which should always be set; Datasource Template and Datasource Location.

Datasource Template

The datasource template field is fairly straightforward to understand. It specifies what type of template is compatible with a rendering.

If the content editor try’s to select an incorrect template they will see an error message like this and the ok button will be disabled:

Incorrect template type

The template reference can point to either the final template that an instance of which will be created, or a template that had been inherited. So if you structure your templates using base template like I describe in my article on How I structure Sitecore Templates then you can reference the base template and anything including it will become available.

However there is a fundamental flaw in linking to a base template. As well as restricting the template that can be selected, specifying the template type also enables the ability to create new content, which will create it as the form of the template specified. So only link to the templates you want your editors to create.

Datasource Location

The datasource location property (as the name suggest) enables you to restrict where in the content tree items can be selected from (or new content created).

Simply specify the folder the content should be placed in and the rest of the content tree will now be hidden from content authors.

Datasource Location Fixed Path

Multi-site solutions

If your solution contains more than one website this may cause a problem as you likely want to be able to restrict certain content to certain sites and may additionally have a global content folder.

Datasource Location Multiple Folders

The first solution to this is to add multiple path’s separated by a pipe.

Datasource Location Multiple Folders Config

This will enable multiple folders to be shown to the user, but it wont enable any sort of restriction.

The second option is to add an xpath query find the relevant folder. This can also be used in conjunction with the static path by being pipe separated as in the last example.

A query like this:

Datasource Location XPath


/sitecore/content/Shared Components/Shared Hero Banners|query:./ancestor-or-self::*[@@templatename='Site']/Components/*[@@templatename='Hero Banners']

Will produce the desired output like this:

Datasource Location XPath Result

Here you can see the shared hero banners folder is available as is the specific hero banner folder for the current site, but not the hero banner folder from the other site.

Using template source restrictions in Sitecore

The source field on a template definition is a great and easy way to enhance your content editors experience.

With fields types such as a tree list, this can be used to restrict the content tree to the section that is relevant. e.g.

Adding a source property like this:

Source Restriction

Will change how a tree list displays from this:

Unrestricted Tree List

To this:

Restricted Tree List

Multi-Site Solutions

The source field however is far more powerful than just pasting in a fixed path to an item. Rather than a static path you can use xpath to make the results based on a query, such as restricting options on a droplink by template type.

In a multi-site solution this is particularly useful, by restricting the options to the site that your content item is on.

With a fixed path the best we could do in the above example would be to set the restriction to the nearest folder that could access both, resulting in a restriction like this:

Fixed restriction showing both sites

While this makes some improvement for the user, but not hugely and they can still select content from the wrong site.

By using an xpath query that utilizes the ancestor-or-self function with a template name, the restriction will dynamically be based on navigating up the content tree from the current item until the template is found and then showing items from it or in this example going back down to the home item.


query:ancestor-or-self::*[@@templatename='Site']/Home

Resulting in an output like the original example, but dynamically changing to be the correct items for where the current content item is located:

Treelist with dynamic restriction

Data Source vs Rendering Parameters

Control Properties

On the face of it being able to specify Rendering Parameters, or a Data Source on a control achieves a very similar goal. You want to componentise your page and not fill up your page type item with fields for specific renderings. Everything should be isolated in it’s own little compartment.

Linking a rendering control to a Data Source does this by moving all your data to a completely separate item, that can be re-used over multiple pages and even swapped out to do personalization or A/B testing.

Equally, using Rendering Parameters does this just as well. Just like a Data Source, you can create a template for the fields that need to be entered, and the data is kept in the same place that a link to a Data Source would be specified.

But what should I use?

The easiest way I can describe it is by asking, are you storing content or something else?

If the answer is content then you most likely want a data source. Alternatively, if it’s something else like some config for a filter, or a background colour you will most likely want a rendering parameter (but there could be exceptions).

Data Sources

Data Sources have some distinct advantages over a Rendering Parameter including:

  • Data can be edited in the Experience Editor inline in your page
  • Language versions are very easy to understand by content editors
  • Easily used for personalization and testing
  • Can be reused on as many controls as you like

These things all make a Data Source a perfect option for anything content related. Without them you loose some big features related to content and ease of use. There are times non-content is also a good option. e.g. A hero banner on a page could be used across multiple pages and as well a reusing the text, if a background colour is also customizable you would want to be re-using that too.

Rendering Parameters

Likewise Rendering Parameters also have there benefits:

  • Doesn’t create an extra item to publish. You just have to publish the page your editing, not the related data source
  • Easy to access in the control properties of the item your looking at, without having to find the related data source

These features make Rendering Parameters ideal for the non-content config of a control and removes non-content fields from your item templates. The thing to be aware of though is you can’t easily do A/B testing or personalization with a rendering parameter, so while it’s nice for your items to only contain content, that might not be the only thing that’s being tested.

How about both?

There is also nothing to stop you using a Rendering Parameter and a Data Source at the same time.

You could have a situation when a Data Source is being used to populated the content on multiple different controls. Each control may have some additional config needed, such as text colour or text size. Keeping this data in the data source might become problematic as on one rendering your text may need to be black, whereas on another it may need to be white. By moving these fields to Rendering Parameters, you keep the benefit of a shared Data Source for content, while the Rendering Parameter takes care of the presentation config.

Sitecore MVC Page Editor: Combining a General Link with an Image

Sitecore Page Editor

Sitecore’s Page Editor provides content authors a simple way to edit content, visually seeing the changes as they make them. To make fields on a page editable though the Page Editor simply use the field renderer function to put a field’s content on the page. When the page is viewed in page editor mode the function will output all the necessary html and javascript to make the page editor functionality work.

@Html.Sitecore().Field("Title", Model.Item)

But what if your page needs to render the contents of one field inside another? e.g. You could have a link on an image or a link surrounding a combination of other fields.

In an xslt rendering you could simply nest one tag within another:

<sc:link field="Image Link">
   <sc:image field="Image" />
</sc:link>

When you click the item in the Page Editor the toolbar would then combine the icons for the General Link field and the Image field so that you can edit the image and update the link. But with a ViewRendering in MVC, the Razer syntax used for views doesn’t support nesting items in this way.

Thankfully Sitecore have considered this and rather than using the Field function they have included a BeginField and EndField function. Between the two you can place your nested fields:

@Html.Sitecore().BeginField("Image Link", Model.Item)
    @Html.Sitecore().Field("Image", Model.Item)
@Html.Sitecore().EndField()

Unfortunately it doesn’t quite work right. The page will render correctly and the toolbar will show both options, however editing anything results in the content disappearing until you refresh the page. Thankfully there is a work around to get it to work:

@Html.Sitecore().BeginField("Image Link", Model.Item, new { haschildren = true })
    @Html.Sitecore().Field("Image", Model.Item)
@Html.Sitecore().EndField()