Documentation

The first step of this process it to define your widget. Create a folder called Widgets and add a new class file. 

All Mr CMS widgets must inherit from the Widget base class. For our random FAQ, our widget only has one property 'title' - we will use this in our view to give our random FAQ widget a title. The data for the random FAQ will be dynamic, so this is all that needs to be set.

Adding the admin files

Next we need to add the view files which Mr CMS will use for the admin (add/edit). These files need to be added in Apps\Faqs\Areas\Admin\Views\Widget\ :

The first file you need to add is RnadomFaqAdd.cshtml - this is the file that Mr CMS will use when an editor is adding an FAQ. Note that Mr CMS works by convention. The view must be called the class name, with the addition of 'Add' for the add page.

The file content for our Add (RnadomFaqAdd.cshtml) and our Edit (RnadomFaq.cshtml) pages are the same, they just contain one property - the Title field.

Getting the model data

In order for us to get the data for the widget we need to let Mr CMS know where to get it from. To do this we create a new Service in Services\Widgets folder:

As you can see we have called our class name GetRandomFaqModel - the name here doesn't matter. Here is the content for that class:

As you can see, this class inherits from GetWidgetModelBase and we pass in our RandomFaq.

This is where Mr CMS does some clever stuff behind the scenes - when the widget is requested, Mr CMS looks for this implementation to get the model data. If this class doesn't exist, Mr CMS will simply return the widget.

As you can see the override of GetModel we pass in the RandomFaq widget and return a new model RandomFaqModel. This is because our data model consists of some other data than the widget itself. Here is the model class which is in Models folder within our app:

This as you can see contains our widget content and our Faq property which gets assigned in the GetModel override.

Adding the UI view to show the widget data

The final step of creating a widget is to add the UI views. To do this, add a View in Views\Widgets :

The content of the view is of course the model data:

Now that is all wired up, you can turn on in line editing on and add the random FAQ widget to a layout area. After adding you'll see your widget shown: