Menu
the REFERENCE

Custom data in the Umbraco backend

Umbraco is a great Content Management System to create pages and data items. But sometimes you want to go a step further with your data. You might want to be able to display, modify or remove rows from it and putting the data as nodes inside the Umbraco content tree is not always an option. This is where the free Umbraco package Fluidity comes in the picture. It allows developers to rapidly create a simple custom user interface for a database table. Why? Because the displaying and editing preferably all happens inside the trusted Umbraco backend environment with easy field editors like date pickers and dropdown lists. Let's take a look at the possibilities and how to use them.

Section, Tree & Dashboard

First thing we need is a section. This is an icon in the left hand toolbar of the Umbraco backend. Any of the available Umbraco icons can be picked, just as colors. The section (1), which I called "Admin" in the example screenshot, is a collection of trees (e.g. Audit Logs, Users & Notifications). A tree (2) can be seen as a data collection that needs to be displayed or managed. Just as the section, every tree has an icon. It also has a name and can have different icons for single or multiple items of the tree. Next up is the dashboard (3), where the data items can listed as a table or in a grid. Both the table and grid view have a search field and paging at the bottom and the table view also enables sorting by clicking on the column header. Both rely on the same configuration, where fields to be display can simply be added.

Custom actions

By default, the action button for every tree has the option to create a new item if the tree is not set to read only. But as expected, there can be other custom actions added to the list. For example an export to Excel or CSV, a push to an API, or whatever business requirement you can think of.

The Editor View

When clicking through on a specific item or clicking the create button above the table or grid view, the content editor ends up in the "Editor View". This view shows the details of the corresponding row of the SQL table. In contrast to its name, the editor view is not always for editing since the configuration allows to set a tree to be read only. Same as for the table or grid view, there needs to be a list of fields that are shown here. And since this is the editor view, it is possible to specify extra properties for the added fields. A field can be made read only, required or have a pattern it needs to match to be valid. It can have a default value and it is possible to choose which editor to show when editing the field. When stuff gets really advanced, a value mapper can be added to convert the database value into something which is more user friendly to show in the editor.

Custom sources

Showing data from a SQL table is fun, but what if your data is stored elsewhere. In CSV files on disk or only accessible via an API for example. Well, Fluidity has the option to use a custom repository instead of a default one for database table. With the custom repository it is possible to implement calls to an API, reading file from disk or anything else.

Lists

After installing the Fluidity package, a new property editor "Fluidity Entity Picker" is added to the already extended list. This editor can use content items and allows content editors to select an item from a Fluidity tree. The configuration is very simple: select the Section and the Tree and define the minimum and maximum number of items that can be selected. The selected items can then be shown on the page.

Conclusion

Fluidity is a very flexible and powerful tool to allow easy displaying and editing of data from virtually any source. It is a must to consider when building a website or application that reaches further then only Umbraco.
 

Don't miss out

top
It's more than digital, it's your business
The Reference is nothing without its customers. Melexis is the stock market-listed global player in the semi-conductor and sensors industry for whom we facilitated future company growth by updating the brand, building the completely new corporate website and giving shape to the use of online channels. Read more about this client.