Back to book

The User Interface Diagram

An introduction to the UI Diagram and how it works.

When you build an app on Codebots, you use the User Interface Diagram (UI Diagram) to control what the forward-facing parts of your app looks like. The UI Diagram works by allowing you to dictate the structure of the app using our three-tiered system of pages, tiles and views (views are configurable only in the code base itself and not in the UI Diagram).

The diagram does not let you configure things like colours, text, etc., but rather the structure and order of the page's contents. Colours and fonts are configured within the application itself.


The concept is fairly self-explanatory, but pages are the main way in which your users interact with the front end of the application. When you are building your app, you can add as many or as few as you require. Each page requires a name (it must be unique), a title (the display name of the page) and a description.

Security is handled at a page level in the Security Diagram. When you add a new page, make sure you also update it's permissions so that people can access it.

You add content to a page by adding in tiles.


Tiles are the building blocks which you use to add content to a page. Each tile is a distinct or separate piece of functionality in your page. When you are adding a tile to your page, you will see a range of options available for you. Different behaviours will have front-facing tiles which you can use (i.e. CRUD), and there is also the option for a custom tile.

Custom tiles are there so that developers can add in functionality which isn't offered by the behaviour tiles. This may be something as simple as adding in a heading tag using basic HTML, or as complex as adding in a dashboard with multiple graphs.

With your page selected (highlighted in green), you can select any of the available tiles to add a new piece of functionality to your page.