How to bring your widgets from TYPO3 Flow to Neos

How to bring your widgets from TYPO3 Flow to Neos

I have been developing a TYPO3 Flow application for some time now. The app uses widgets for displaying financial data, e.g. stock prices and currency rates.

I was curious about how to move my existing package to Neos and of course I wanted to reuse my widgets. Furthermore I wanted to give the editor the opportunity to specify stock codes or currency pairs which will be used by the widget.

I came up with two approaches:

  • Using a plugin within Neos
  • Creating a new content element type

I will start to describe the latter variant, as it seemed to be easier to implement – and it really was quite simple!

Kickstart your site

The first thing you want to do is to kickstart a new site package within your Neos installation. You can either do this within the CMS or on the command line:

 

Create a new content element

Configuration of a NodeType in yaml

In order to create a new NodeType you need to configure it in your file Configuration/NodeTypes.yaml.

 

Creating the template

The next step will be to create the HTML template for your widget.

/Packages/Sites/MG.FinOS/Resources/Private/Templates/NodeTypes/Stock.html

My widget’s view helper name is mg:widget.stock. Therefore I added the namespace to the top

Include the widget view helper

I just use my existing view helper here:
/Packages/Application/MG.App/Classes/MG/App/ViewHelpers/Widget/StockViewHelper.php

 

The functionality will then be implemented in my StockController. Note the annotation in the widget view helper where it says to which controller the request is being delegated ($controller).

The logic is in the StockController where the stock object is being fetched from the repository and afterwards it will be assigned to the template.

/Packages/Application/MG.App/Classes/MG/App/ViewHelpers/Widget/Controller/StockController.php

Adding another content element

It has been already fun to bring the first widget to life in Neos. I took another one, which is a Twitter widget. The procedure is exactly the same:

  1. The editor can create a new node of the type Twitter Timeline
  2. He is then able to edit a hashtag or a search term
  3. The widget will show the configured timeline from Twitter

node_shot

Just to recap the necessary steps:

1. Define the content element (yaml)

 

2. Create a template for the content element and include the widget:

Note: The property ‘searchTerm’ as edited in Neos will go directly into the template. No further adjustments are necessary!

The Plugin Way

The first attempt to integrate my widgets into TYPO3 Neos was to create a plugin. You can read about the basic steps here: Creating a TYPO3 Neos plugin.

The only thing worth mentioning is where I asked myself ‘how do I get the property values into my template’?

As of now you will be able to access the values, which have been entered in the Neos backend by following these steps:

  1. Specify your plugin through Configuration.yaml:
  2. Add some TypoScript to tell Neos the default controller and action for your plugin. I have put my TypoScript configuration into my package’s Resources/Private/TypoScripts/Library/Plugin.ts2.

    This way I can now refer to it from my site’s Root.ts2:
  3. As we are going to call the ‘show’ action we need a template ‘Show.html’ which holds our widget view helper:
  4. The important part here is to pass the values to the currency widget through the controller. That being said, we need to adjust the showAction() of the CurrencyController where we retrieve the values and pass them on:
  5. We are now done and our widget will hopefully show up!
    currency

 

It pays off when you use widgets within your Flow app or your Neos website. It’s easy to reuse your loosely coupled widgets in whichever context you like.