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.

You can switch between managing pages and tiles by moving between the two tabs in the top-left corner of the UI diagram, then selecting the tile you want to add to the page.

Timesheet Walkthrough (cont.)

  1. In the palette sidebar, make sure the Pages tab is selected, and click "New Page"

  2. Give it a name (Home Page) in the properties panel, and set it as the home page

  3. The page, which will be selected automatically, will be shown in the middle of the diagram

  4. In the palette, switch to the Tiles tab so you can add tiles to the page

  5. Click on a CRUD tile in the palette and it will appear on the page

  6. Click on the tile again to select it, and give it a unique name (Timesheet) in the properties panel

  7. Choose an entity which you want to connect it to (from the entity diagram) (Timesheet)

  8. Optional: If you add another tile to the page, you can try rearranging them by clicking on a tile and dragging it about