The Brill CMS is used for creating web applications. Each application is created as a series pages. Pages are encoded as JSON and specify the components and attributes required to render the page. Just like other CMS, the Brill CMS has a collection of static components for rendering text and images. As well as static components, there are dynamic components that interact with the server and with other components. Actually most of the components are dynamic and interact with the server. Even a simple text component can get the text dynamically from the server.
The table below is an example of a Data Table component that gets its data from the server and a MySQL database. It’s a fully working table, not a screenshot! You can sort by clicking on column headers, search, filter, hide columns, resize columns, download the data as a CSV file etc. The delete option only deletes rows from the local table. Deletion from the MySQL database has not been implemented as otherwise we’d end up with no data left in the table!
The Data Table component uses server side searching, sorting and filtering and can therefore be used with tables that have millions of rows. Only the data for the currently displayed page is transferred to the client. The component is based on the mui-datatables component.
To insert a Data Table component within a page, the CMS would insert JSON similar to the following:
When inserting the Data Table, the CMS prompts the user for the various attributes. The
the React component name. The
subscribeToTopic attribute specifies how the component gets its data.
query and returns the results to the component. The Data Table component also supports client side searching,
filtering and sorting. In which case a simple query that retrieves the whole table is all that is required. The
downside of using the client side is that performance will be impacted if the table contains tens of thousands
or more rows.
The Data Table component has support for adding an additional “Actions” column that has edited, duplicated or deleted buttons. A “New” button can be added to top bar to allow a new row to be added. The buttons can display a form either as a modal window or a pull out side bar or on a new page.
Many e-learning applications require custom DND components. For example, a student might drag and drop labels onto a diagram. A number of DND components are supplied that can be customised.
The Brill CMS uses DND to allow a user to drag components from the component bar onto a page. The user can also move components around on a page using DND.
At the bottom of this page is a link to a demo of the DND component used by the Brill CMS page editor.
Instead of developing pages using code, the pages are created as JSON and maintained using a CMS. This allows more rapid development and easier maintenance. Changes to text, layout and images can be made by business users, without the need for developer input and no need to wait for the next code release. Developers can still write their own custom components and include them into the CMS and are not in any way limited as to what’s possible. Components can be developed quicker because the middleware and server infrastructure are already in place and there are lots of examples to copy.
It’s perfectly possible to migrate existing React applications a step at a time. An existing React application can embed a page that was created using the Brill CMS using a component called EmbedPage. Existing React applications can also make use of the Brill Message Broker, Brill Middleware and Brill Server.
The end result is a better looking web site that’s easier to maintain and didn’t require lots of code to be developed. Overall a flexible “low code” solution.
Brill Developers Guide