0

I'm looking for a way to create a reusable HTML widget for a website run on Sitecore 8. My original idea was to create a data template that basically consisted of a single Rich Textbox. The idea is that you could drop any number of instances of these widgets on a placeholder and it would render out the HTML from each instance of the widget on the page and in the correct placeholder.

Example: A content item called /products/my-product is based off of "Product" data template It consists of some fields on the Product template (maybe product name, price)

I'd like the ability for the content editor to quickly drop one or more instances of the HTML widget on the page (say, in the right rail or in a different placeholder on the sublayout. I know I could just throw a "notes" field on the product template, but I'd like to make it more dynamic so that they can add several instances of this HTML widget and place them anywhere they desire.

I quickly realized that because we need the ability for multiple instances of this widget, a data template was not enough because each instance of the widget would needs its own data to populate on the front. Thus, my idea was to allow the content editor to add HTML widgets as a child of the current item (so each item would have its own instance data). I don't think this will work because I don't know of a way to have these children tell the parent page which placeholder to put them in, so laying them out is a problem.

I also thought about somehow setting the placeholder name as a parameter or field on the data template for the HTML widget, but I couldn't figure out how to get Sitecore to dynamically add them to a placeholder when it glues everything together.

Is there a way to achieve what I'm trying to do? Seems like a reusable HTML (or other kind of widget, for that matter) would be a fairly common need. I feel like there's an easy Sitecore way to handle this that I'm missing and overcomplicating the solution.

1 Answer 1

2

From what I understand, you're looking for Datasource field of a component.

Basically you:

  1. Create a data template which contains fields necessary for your component
  2. Create a set of items using that templates
  3. Allow authors to select one of them as the Datasource for your component.

It's built in Sitecore functionality.

Check blog post http://firebreaksice.com/using-the-datasource-field-with-sitecore-sublayouts/ or google for Sitecore datasource.

Other links:

http://www.nonlinearcreations.com/Digital/how-we-think/articles/2014/03/4-patterns-Sitecore-component-development.aspx

http://www.nonlinearcreations.com/Digital/how-we-think/articles/2015/04/Sitecore-templates.aspx


EDIT:

Read about Datasource Location field (defining the repository of datasources location) here: http://www.sitecore.net/learn/blogs/technical-blogs/getting-to-know-sitecore/posts/2011/01/handling-presentation-component-settings.aspx

Read about Datasources and MVC here: http://jockstothecore.com/sitecore-mvc-item-maze/

6
  • I figured I was missing something built in that covered this. I've used datasources but not for this. I'll read the articles and report back. Thanks for your speedy reply.
    – tjans
    Jan 4, 2016 at 22:21
  • I read the first article and I think this might work, though I need to figure out how to do this with MVC and if I can set the starting path when you go to pick the datasource (either relative to the current item or in a central folder that stores the data items to be used as the data source)
    – tjans
    Jan 5, 2016 at 2:18
  • See edited answer - links to datasource location explanation and MVC with datasources added. Jan 5, 2016 at 7:12
  • This got me about 90% there. I'm using a controller rendering and glass mapper so i was able to do string datasourceId = RenderingContext.Current.Rendering.DataSource; var context = new SitecoreContext(); var model = context.GetItem<HtmlBlock>(datasourceId); and pass that model into the view
    – tjans
    Jan 5, 2016 at 17:49
  • I've got this all working great! However, I'm wondering if ther'e's a way to add new folders when creating new content. I have a shared location for reusable news stories throughout the site. Thus, the datasource location is set to /content/mysite/stories. When I "add here" to add a new component, the dialog pops up and I can create new content, but only in existing locations (/content/mysite/stories). It won't let me create new folders on the fly to further allow my content editors to organize their components. Seems like I have to create folders via the content editor first.
    – tjans
    Jan 14, 2016 at 19:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.