Web Developement
Now Reading
Add a Custom Text Repeater Data Type in Umbraco 7
0

Add a Custom Text Repeater Data Type in Umbraco 7

by Adrian RandallFebruary 6, 2016

We do a lot of work with companies that need repeatable fields in their website for things like ingredients, instructions and just lists. Umbraco doesn’t have a nice way to do this out of the box but it can be done easily with a custom text repeater data type. We leverage the TableEditor from Imulus here https://github.com/imulus/TableEditor and the restrict things to be a one line repeater.

Firstly clone the TableEditor repo and add it to your Solution. Be sure to set the output of the TableEditor project so the dll ends up in your bin directory of your website. To do this right click on your new TableEditor Project and then click Properties. Then set the output path to the location of your projects bin directory:

bin

Now let’s get into it.

  1. Create a Folder in App_Plugins directory of your Umbraco project and add the following files:
  • package.manifest
  • string-repeater.css
  • stringRepeater.controller.js
  • stringRepeater.html

After you add them, your structure should look like:

umbraco-folder

2. package.manifest is used to define your new custom data type and allows Umbraco to pick it so it can be added to a Document Type. Add the following lines in your package.manifest file:

  1. Next lets add some code to handle the create, read, update and delete of the string fields in the back office and also allow the content editor to edit the fields in a table so it’s a little neater. Add this code in stringRepeater.controller.js

  1. Now we need to add some simple HTML for out Angular controller to interact with. Add this into stringRepeater.html

  1. Finally let’s add a little CSS so it styles better and doesn’t just have a 50px wide input field. In string-repeater.css add the following styling:

  1. Now that’s our part done and we just need to extend the TableEdior project to parse the String Repeater values for us. InTableEditor->TableEditor-> Models create a file called StringRepeaterModel.cs and add this code:

  1. Next in the TableEditorValueConverter.cs add your new Model by changing IsConverter from:

To:

Thats everything you need to now to get it stored in the back end. Now to make it render on the front end…

  1. Create a file in Views/Partials called _stringRepeater.cshtml and add the following code (you can personalize it later)

This is good for code reuse.

  1. Now after you add it to a Document Type in the back office, let’s say you call the new property ‘Tips’, you can render all those tips by using this code snippet:

That’s all.

 

 

 

About The Author
Adrian Randall
I'm a digital marketing specialist, love working on digital business and coding on just about anything. I'm the founder of Arcadian Digital and this site shares some of our knowledge and practices.

Leave a Response