The User Interface Diagram

The User Interface (UI) diagram is where you build out the visual structure of your application. It does not let you choose your colours, fonts, or anything too specific - instead it lets you set the high level order and structure of the content on the page. You can create pages in your application, and add functionality by dragging and dropping items onto a page. The items are like building blocks of content with different pieces of functionality. Once they are on a page, you can reorder them as you like. It is important to note the diagram is merely a representation of how the page will appear in the target application.

This is an example of how this would appear in the target application which you could then style using custom code:

Pages

Pages define the routes 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 unique name.

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

You can view your list of pages in the page sidebar on the left side of the diagram. You must have one home page. The home page is indicated by the green house icon next to your page name and also in the properties panel when that page is selected.

Also in the page properties panel, the ‘View this code’ button will take you to your client applications pages folder. Please note you will need to build your app in order to see the pages in your git repository. If the page does not appear in your git repository, you will need to return to the Platform and rebuild.

UI Items

UI Items are the building blocks which you use to construct a page. Each item is a distinct or separate piece of functionality in your page. When you open up the ‘Items’ menu, you will see a wide range of available items. You can add items to your page by clicking and dragging them onto the page as needed.

Layouts

Layout items determine the layout of your page and come in two types; Horizontal and Vertical. These layouts enable you to group content. You can also add elements inside of them such as text, headings, lists, etc. and even other layouts. This means you can build complex layouts such as a 3 column layout as demonstrated below:

Elements

These are basic HTML elements and include:

• Text (p tags)
• Heading (h1-h6 tags)
• List (Unordered)
• Link (a tags)
• Button (button tags)

The button element is unique because it will create a placeholder call-back function for developers to implement their custom logic. Out of the box, it will not perform any action.

Inputs

• Input
• Text area
• Checkbox
• Radio Button Group
• Dropdown

These inputs use the components which you would expect to find in a Codebots application. They come by default with model bindings on input, so you can perform any operations in response to the users actions.

Extensions

Extension tiles include ‘Forms’, ‘Data Table’ and ‘Timelines’ (C#Bot only) which add a particular extension to your page. Whether these tiles are useful for you depends on the nature of your application, we therefore recommend you read our Extensions available on Codebots to find out whether the features they offer are beneficial to you.

Some extensions, like User, are not shown here because you cannot use any of their visual elements in the UI diagram (you can in the custom code).

Since every extension is different, you will need to configure them in different ways. For example, you can add a Timelines tile to your page to display a Timeline view; however, each extension needs to be linked to an entity which has that extension. Tiles can be linked in the properties panel to an entity with that extension or to one without, which will then add the extension to that entity.

Any time you do want to use an extension or learn more about it, pay attention to any hints or fields which you need to fill out. If it is a complex extension, or you are not sure how it works, take a look at the articles and qualifications we have written about in the Library and Academy.

Custom

While there are many useful items which you can use to structure your page, sometimes you might need space to add your own custom functionality which is not available through the Platform interface. Custom tiles provide a placeholder protected region for you and your team to add your own custom functionality. This may be something as simple as adding in a company logo, or as complex as a custom component created specifically for the application to display user information.