Skip to the content

Recently in my job I was asked to estismate for a job to create a noticeboard / forum for a clients intranet. The budget was low and so building a bespoke solution was out of the question, what happened next was something unexpected.

This blog was written while running Umbraco 8.6.1 and Umbraco Forms 8.5.1. It should work on other versions but this is my disclaimer if it doesn't.

TLDR; Use Umbraco Forms to create the frontend form, use Umbraco CMS to create the posts, merge it all together and you have a noticeboard.

 

Something I've been trying to do a bit more of recently is stopping and thinking about the problem before just jumping in to the code. 

This is what brought me round to thinking that I could possibly use Umbraco Forms to do this proof of concept. 

This blog is pretty long so I've chopped it up in to sections. 


Getting started

Setting up the Form.

Saving Umbraco Forms entries as Content Nodes

Mapping Form to your Document Type

Testing the form

Adding an RTE to the front end

 

Getting started



Before I started, I thought about what content I wanted the user to be able to enter in to the form. In my example I have:

  • Subject of the noticeboard post
  • A summary about the post
  • The actual content of the noticeboard post
  • An author of the post
  • A single category for the post
  • An image that can be uploaded with the post.

Setting up the Form

Subject, Summary and Author are all Short Answers, Content is a Long Answer, Category is a Dropdown list and Image is a File upload data / question type.

To render this form out to the front end, I used a Nested Content Element:

This Nested Content Element looked like this:

and outputs to the front end looking like this:

You might notice that the Content RTE looks a bit different. Since this was going to be an intranet noticeboard, the client wanted the option of having an Rich Text Editor enabled on the page, by default, Umbraco Forms doesn't allow for this. I'll go in to details about how I achieved this in a bit. Just now I'll go back to the Umbraco Forms setup.

Saving Umbraco Forms entries as Content Nodes

So the form is rendering on the page and just now the default behaviour is for Forms to take the input and save it in to the database and maybe redirect the user to a thank you page. This is fine however, I needed a way to output the entries back to the frontend for other users to view. Now my initial thought was, well, the data is in the database, I could query the Database and make a custom view. It would be a bit of work but it could be done.

Before I started working on this solution, I posted my thoughts on the Umbraco Community Slack channel and Jesper Mayntzhusen from Umbraco HQ came to my rescue, he said Umbraco Forms can output the response as a content node via the workflow config.

I loaded my project back up, logged in to the backoffice and looked at the Umbraco Forms workflows.

 

There is was, Save as Umbraco Content Node. #H5YR Jesper!

Within this section you select the Document Type you want to output the response was so I had to stop what I was doing and go and create a new Document Type, I named it Noticeboard Post.

Now this is when you need to think about how Umbraco Forms saves data. The reason for this is you need to match the type of data with that is going to be in the Forums database table the the Content types of the node. I'll try and explain this a bit further.

Umbraco Forms Umbraco CMS
Short answer Textstring
Long answer Textarea
Dropdown Tags
File upload Textstring

 

So when I submit something in the Form, I need to map this to the Document Type equivalent so that when I view the submission within the content node, I can actually see it. The reason I went for the Tags type within the CMS rather than Textstring was originally I was going to have multiple categories allowed and instead of a dropdown, I was going to use a Multiple choice datatype which I could read back as a Comma Separated Value.

Anyway, hopefully that makes a bit more sense.

The Noticeboard Post Document Type looks like this:

You'll notice there are a couple of Data Types in there that I didn't include in the form, that's absolutely fine.

I also created a Section Document Type that will be the parent for all my noticeboard posts. An interesting thing I found out was you don't need to allow the Noticeboard Post Document Type as a Child of the Parent document type.

 

This is good because it means someone can't create a Noticeboard post in the back office. You can only create a post via the form on the front end.

Now that you have the Document Type setup, you can go back to Umbraco Forms but make sure you get the Node Id of the Parent folder as you'll need it for the next step and we will now map all the data to the Content Node. You can find the Id by clicking on the Parent Folder, then clicking Info.

 

Mapping Form to your Document Type

Go back to the workflows and choose to save as content node, then in the Document Type dropdown menu, select the new Document Type you've just created. You'll then see a list of the properties that are in your Form and you need to map them to the Document Type fields.

Note: The UI is slightly different to what you might see in Umbraco forms. I made some changes to the UI to make it look a bit better and there is an open issue on Umbraco Forms to hopefully have it updated in future releases, if it's accepted.

On the left hand side of the screen is the Property label is from the Document Type, the Field Value is from the Form. Each Field on the Form needs to be mapped to at least 1 element of the Document Type. Not every Property label needs to be mapped to a Field Value for example, Published date is left as Select Form Field because I update this field on Save/Publish.

You can also set the option to Publish or leave as draft when a form submission is made. For this example, I go straight to publish.

The final part of setting up the Form workflow is telling Umbraco Forms where to create the new form submission, this is where you need the Document Type Node Id that I mentioned earlier. In my example, the node Id is 2243. Enter your Id in to the Where to save box and then click submit.

This should be your workflow setup.

Testing the form

You can now go and test the form and see if it creates a new node under the Noticeboard parent that you setup. If it doesn't, it's probably due to a mapping issue. Double check you have mapped all the Form fields to a Document Type field.

Hopefully it all works and you now have a way for your users to post a notice on your website.

Adding an Rich Text Editor to the front end

As I mentioned earlier, you may notice that on the form, I have added a Rich Text Editor for the front end. By default, Umbraco Forms has a textarea available to the user but this is just a large area for typing plain text. What I really wanted was this text area with some basic RTE formatting allowed.

Umbraco in the backoffice uses TinyMCE so I decided to use this on the front too. To do this I first made a new Field Type within Umbraco Forms. You can extend Umbraco Forms with new Field Types and I followed a tutorial on Our. In brief, I created a new controller called TextareaRTE.cs, I created a new Partial View within the Umbraco Forms partials folder, called FieldType.TextareaRTE.cshtml which was a copy of the FieldType.Textarea.cshtml file, and that was pretty much it for the setup.

Now that you have a custom view for your RTE, you can make changes to it and attach the TinyMCE Rich Text Editor to the field. In my FieldType.TextareaRTE.cshtml I have the following code:

 

 

The thing to notice here is the new class name that I've added to the textarea: class="textareaRTE". That is needed so that you can target this specific textarea and add the Rich Text menu bar.

Within my Partial that loads the form from Nest Content, the Form.cshtml Umbraco Element, I had added all the RTE code so my full partial view now looks like :

Full code can be found on: https://gist.github.com/OwainWilliams/69bbbac5d647c0859bd8301d4e661748

I would probably take the configuration information out and put it in it's own javascript file but this was a proof of concept and the concept worked. I've also reused the umbraco tinymce.js file so that if that is upgraded, this would also get the change. Originally I installed TinyMCE via Nuget and used a different version for the frontend but the styling and a couple of other things have changed in the newer version so to keep things looking the same, I just staying with the .js file that is shipped with Umbraco.

Now that this is all setup, when the user visits the form, they now get a textarea with some basic RTE functionality and because the Document Type for this input is mapped to a RichText Editor the formatting etc from the frontend displays correctly in the backoffice.

And that ladies and gents, is that. This is how I created a noticeboard using Umbraco Forms.

With the content now in the backoffice as a regular node, you can request a list of all nodes under the parent and display it on the frontend as you normally would. 

I have another blog to write about how I added the published date to each noticeboard but I think this is long enough as it is.

Any questions or if you spot any mistakes, please leave a comment or give me a shout on Twitter.

Noticeboard photo by Jo Szczepanska on Unsplash

Thinking outside the box photo by Nikita Kachanovsky on Unsplash

About the author

Owain

Owain

Owain is an Umbraco MVP, an Umbraco certified master and works on Umbraco projects on a daily basis. When not coding, he enjoys running, spending time with his wife and building lego! 

He is also a GitKraken ambassador and helps look after the H5YR.com website.

comments powered by Disqus

Where to find Owain

Twitter: @ScottishCoder
Linkedin: Owain Williams
Our: Our Umbaco