Agile Platform CMS Prototype

Agile Platform CMS Prototype

Just thought I'd share something we've done with you all :-)
A few weeks ago we received a request to build some kind of CMS using the Agile Platform, for demo purposes. It would have to be done in a week.
After checking out some existing products and trying to grasp what was good in all of them, we finally got to work.
We got a team of 5 together (3DEV+1DM+1EM) and tried to build a CMS that not only provides all the flexibility a CMS is supposed to, but also takes advantage of all the Agile Platform's strengths (After all that's what we love about it, right?)

A week later, and after a lot of eyelash burning, this was the result.

It's only a prototype, it can be improved a lot, but I believe it shows how much can be done within a week, with enough resources.
There are two main parts to this CMS: The CMS Core (that handles layout editing and rendering) and the Widgets.

The core part is meant to be changed as little as possible, as it has "some" sensible Javascript. So that part is always assigned to the most JS fluent members of the team. (But it should always evolve to be as stable as possible so the "JS Ninja" becomes less and less important, until he can just take a vacation)

As for the widgets, they can be developed by anyone with only Outsystems as long as the created WebBlocks follow some specific rules, in order to be detected correctly by the core. Making the integration with the Core simple and not dependent on any external component is the key to lowering the entry level a developer should need to be able to expand the CMS effectively. 

All this equates into a possible CMS that can be expanded at the speed the platform allows us to, and that provides maximum flexibility like any CMS should.

Here's an example on how we build a widget in 6 steps.
  1. Create a table where each instance configuration will be stored.
    Requirement: Foreign key to the LAYOUT_WIDGET table. Think of this foreign key as the new acting Primary Key of your table. :)
  2. Create the WebBlock for the Widget.
    Requirement: Two input parameters - LayoutWidgetId (Same foreign key we used on the setup table) and ConfigMode (Boolean)
    The Foreign Key will identify the setup registry, and the boolean will guarantee the fucntionality is switched between Setup and Render (Live).
  3. Create a configuration screen (popup) that allows you to setup each instance of the new widget. (In the new table you created)
    Requirement: Must be a popup and must have our regular LayoutWidgetId parameter as input.
  4. In the main WebBlock, previously created in step 2, add an IF with only the ConfigMode variable as condition. For the "true" part of the IF simply add a link to the new popup screen (including the PopupWidget from RichWidgets). In the "false" part is were you can be as creative as you want with Service Studio, so just include whatever code needed for the widget to render correctly. (In this case, youtube video, it's simply an unescaped expression with data from our configuration table).
  5. Register the new widget in the widgets static entity, and add a path to an Icon.
  6. There are two existing WebBlocks that need to be edited to include the new widget. These contain each a ListRecords and all we need to do is, in each of them add an extra IF inside of the ListRecords for the newly registered Widget (Condition: LRComponents.List.Current.LAYOUT_WIDGET.WidgetDataId = Entities.WIDGET_DATA.Youtube), containing an Instance of our new WebBlock. In the edit list force ConfigMode to True, in the Render list force ConfigMode to False.
And we're done. After publishing the new widget will appear as a draggable item in the UI Edition Screen, where it can be dropped to one of the areas and Setup by clicking on it (Yes, the popup link is automatically hidden). It will also be rendered correctly. All without having to peer into the depths of some obscure Javascript or CSS, keeping implementation speed at maximum, and entry level at a minimum. :)

Just thought I'd share this idea with everyone, as I believe the concept can be used to demonstrate how to expand functionality without making a code mess, scattering pieces of code all around, by simply encapsulating core components and making them do everything without the need to be messed with. (The main core WebBlocks are named CMSEditor and CMSRender)

Thanks to Gonçalo Martins, Hugo Saraiva, Mauro Hazakis and Vera Pereira for all your hard work and dedication on this one, it turned out really cool. Hehe.
In one word: Wow!

When can we download this CMS and start expanding with new widgets?
Very Impressive. And all done in a week. Very impressive.

A second vote to download the CMS. PLEASE.....
Editted original post to embed the video - the forum does support it. :)

BTW, nice project Chinita - and great how-to explanation!

Damn this looks promising!

For what I have seen now, I like it!

Kind regards,

It was hard, tough and with a small timeline..but it was fantastic and worth it - Made in Portugal ;-)

Best Regards,

Gonçalo Martins
Gonçalo Martins wrote:
It was hard, tough and with a small timeline..but it was fantastic and worth it - Made in Portugal ;-)

For the benefit of non-Portuguese speakers, that badge reads "Buy What Is Ours!" and features the traditional Portuguese symbol Rooster of Barcelos (read more about it here).

It is part of our current Made In Portugal regional (PT) campaign, as is the badge below (that reads "A History of Innovations!").


That is exactly the idea and the key message :)
With Oustsystems to fight against the financial crisis that is hitting Portugal in our current situation.

Best Regard,

Gonçalo M.
when this amazing CMS is available?
Hi Pedro,

This is an internal and closed project, so I think that it'll be very hard to see our  CMS available here.
And this were a big and complex journey in less than two weeks..It was very cool and challenging..
However, you're always ready to negotiate :)

Gonçalo Martins
Hello Goncalo,

Thought it would be made as a component? Where the community could help to 'improve' it?

Would it be possible to get the oml/solution for this part?

Kind regards,
Hello Evert,

Unfortunately, because of internal rules within the company concerning intellectual property we can't make a component of least for now..
This was a challenge lauched by our unit manager and the scope is closed and internal in our company..Sorry (hope the for now = few

Kind regards,
Gonçalo Martins
Hello Goncalo,

To bad, but I can understand it. Nice to see what can be done, hope OS does something with it. Would sell the platform so much better if there is some CMS part available for it.

Kind regards,
Hello Evert,

Good to know that you understand our reason..sometimes the companies have lots of influence in this decisions and as a worker we have to respect and follow the internal rules.
Lets see if in a near future we can do something like this as a reusable component/application.
Have a nice weekend and Christmas..

Kind regards,
Gonçalo Martins