Open Source Plugins in OutSystems

This is part one of a three part blog series on OutSystems development and how to create plugins.  

Over the years there have been a number of rapid application development tools – but none of the ones I’ve used ever really seemed to help deliver a project faster than low-code platform OutSystems.

Some of them built unmaintainable systems, where the first version works great, but then it becomes very difficult to change. Others provide high quality in one part of the system, while not so much in other parts. For example, great workflow but poor user interface.

OutSystems has a community Forge for sharing open source plugins

An essential part of any software platform today is the library of components available to extend the platform. Each application has different needs and these libraries allow developers to quickly provide a unique combination of features.

OutSystems does this in two ways, via the "Forge" and via extensions.  The Forge is a community repository of OutSystems plugins, with packages such as GoogleMaps, barcode reading, file uploaders and more.  Extensions, allow you to break out into .NET code, using NuGet packages if desired. OutSystems can also expose and consume SOAP and REST APIs.

Why build another file upload plugin? (Internet Explorer 11)

Now, OutSystems already has a bunch of file upload extensions in the Forge. The thing is, none of the existing plugins appear to support Internet Explorer 11, and a few of my current projects required support for none other. Thus started my quest.

First, I needed to find a JavaScript file upload control. My extensive Googling found FilePond. FilePond is an awesome open source JavaScript upload control built by Rik Schennink. It provides a drag and drop interface, thumbnails, simultaneous multiple file upload with support for all modern browsers and some not so modern (read Internet Explorer 11). Yay! And also, voila!

Introducing the FilePondUpload plugin

Standing on the shoulders of giants, enter the FilePondUpload OutSystems plugin. Built? Well more like cobbled together.

The plugin lets you easily wire up a top quality file upload control with minimum effort and all the features required for a real live system.  This includes limiting the size and type of files, ensuring only authenticated users can upload files, and handling file upload errors. The look and feel can also be modified with CSS.

How to use it:

• In the FilePondUpload plugin there are two "web blocks" available, the UploadBlock and AutoUploadBlock.
• The UploadBlock will upload the file, and allow you to retrieve it when a submit button is clicked.
• The AutoUploadBlock will trigger an event when a file is uploaded without requiring the user to click another button.

To wire up file upload:

1. Drag one of the web blocks onto your page.2. Create a FilePondConfig local variable3. Set the configuration attributes.  There are a bunch of helper actions that will create standard sets of configuration for you, such as CreateAcceptedFileTypes()4. Apply the configuration to the web block.5. Implement an action to receive the uploaded file.

The UploadBlock also requires these steps:

1. Create a local variable called UploadTokens of type text2. Drag an input text widget into the UploadBlock placeholder. The input control will be hidden on the page.3. Use the UploadTokens variable as the value of the input text widget4. On Submit, use the FilePondUpload_GetUploadedFiles(UploadTokens) action to retrieve uploaded files.

Checkout the demo page to give it a try. I hope this gives at least a general idea of how flexible the OutSystems platform can be, and one specific way it can be extended.

Next blog in this series is a deep dive into how the upload was built.