Working with Sitecore, Part Eleven: Working with Components

Wednesday, March 27, 2013 @ 03:58

By: Josh Jenkins, Lead Consultant

Part Two: Component Based Architecture goes over the all details of how I think of components and how I structure it both logically and physically in Sitecore and Visual Studio.

-I go over setting up a new Visual Studio Template Project. This template project will be what we will base all of our component projects off of.

-I go over setting up components in Visual Studio, where I place them both physically and logically in the solution. Each component will be its own project and will house multiple user controls.

-I cover getting the user controls into Sitecore via Sitecore Rocks and what kind of modifications we will need to make to the sublayout to get it all wired up correctly.

-I cover setting up the component structure inside Sitecore itself, including where I place my templates, layouts, and sublayouts.

-I cover using TDS to generate my model for the templates by creating a custom class using Glass Sitecore Mapper, and using TDS to deploy my code to my IIS instance.


The process itself is simple really, just a bit involved. Once you run through it a few times it gets quicker:

-Add a new folder to the \templates\user defined\components node named for the component itself.

-Add a new template to our new folder, again named after the component. If it is a data template I prefix the name with "I".

-Add your section and fields. I like to prefix my field names with the component name.

-In your solution, sync with TDS to get the new template.

-Modify the auto generate code file to pull out your new Classes and Interfaces and place them where you'd like them to reside, i.e. Core.Model and Core.Interfaces in my case.

-Create any custom concrete classes. By default the auto generate won't create a concrete class if there are no items based on a template. This is true for all of our data type templates so you will need to create your own.

-We add a new Sitecore.Webforms.Component project to the solution.

-Add the references to your Model project(s) and Glass Sitecore Mapper.

-Add a new User Web Control and change it to inherit the GlassUserControl and pass in the Class you want to bind the Model to.

-Modify your controls output.

-Connect the project to your Sitecore instance using Sitecore Rocks.

-Add the sublayout using Sitecore Rocks "Create Items from Files".

-Make sure to sync TDS and get the new Sublayout into your project.

-It will regenerate the code, delete the auto generated file this time.

-Rebuild your solution.

-Rebuild TDS.

-In Sitecore you will need to go the new Sublayout and open the Content tab.

-Navigate to the Ascx File field and modify it to what was placed in the Website/Components directory. By default it is the name of the project, so: /Components/MyProject.UI.Web.Components.Mycomponent/subalyout.ascx

-Save and publish.

-Reload the site and go do some push-ups or something.