Using inbuilt and custom components with C#Bot

A C#Bot application has many inbuilt UI components which you can use when designing your interface. These components are used to implement the default bot-written user interface, and can be added into any custom UI elements which you write. It is also possible to create additional components which can be included in the library.

Bot-written components

A C#Bot project contains many UI Components which can be utilised when customising bot-written code. There are too many components to go into depth in one article, so this article will focus on some of the most useful base components. All of an application’s bot-written components can be found at clientside/src/Views/Components.

Using components

Using UI components in your application involves importing the relevant component class, and then adding it a page in the same way you would add any other React component. For examples of how many of the UI Components can be used in the application, you can review the style guide. The style guide can be found in the admin section of the site under the Utility tab in the sidebar, and will show you what many of the bot written components look like and how they work. The code for the style guide can be found at clientside/src/Views/Pages/Admin/StyleguidePage.tsx.

Useful components

Some of the most common and useful components are:

If

The If component is not directly rendered in the application. It is used to render other code and components based on a condition which is passed into the component as a property. As a result, any contained code will only be rendered when the condition is true.

Button

The Button component works similarly to the base HTML button component which can be added to the DOM, but also has props which can be used to apply predefined styles to button elements. Enums can be passed to the Button component which will add classes to the contained HTML button element, which in turn will apply styles to the Button element. The styling options can be seen below:

export enum Display {
    Solid = 'btn--solid',
    Outline = 'btn--outline',
    Text = 'btn--text',
    None = '',
}

export enum Colors {
    Primary = 'btn--primary',
    Secondary = 'btn--secondary',
    Warning = 'btn--warning',
    Error = 'btn--error',
    Success = 'btn--success',
    None = '',
}

export enum Sizes {
    ExtraSmall = 'btn--xsm',
    Small = 'btn--sm',
    Medium = 'btn--md',
    Large = 'btn--lg',
    ExtraLarge = 'btn--xlg',
    None = '',
}

export enum Widths {
    auto = 'btn--auto-width',
    fullWidth = 'btn--full-width',
}

To see what the buttons look like with these styling options applied, you can visit the style guide in the admin section. Buttons can also be grouped together vertically or horizontally by adding them to a ButtonGroup.

Context menu

The Context Menu component is used to create a menu which is hidden until it is triggered by the user. Triggering the menu would primarily be done using a button. Each context menu option provided in the props can contain a label which will be displayed on the option, and an onClick method for when the button is clicked.

Modal

The Modal component will be displayed on top of the rest of the page when it is triggered by the user, and can contain any information or functionality that you require. The content inside the Modal functions in the same way as the content in the rest of the DOM, so any HTML can be added into the modal.

Inputs

C#Bot applications are written with components which can be used for capturing text-based inputs from a user. There are multiple components which are used for this purpose, including TextBox and TextArea. These two components function the same but differ in size, with TextArea being significantly larger. TextBox is intended for small inputs, and TextArea is intended for larger inputs such as paragraphs. There is also the NumberTextBox component, which functions similarly to TextBox, but only accepts numbers for the input.

Date/Time pickers

Similar to the input components, there are multiple components available in a C#Bot application which can be used for capturing Date, Time, and DateTime inputs from the user. These include DatePicker, TimePicker, and DateTimePicker. Each of these can be added to your UI to capture an input of the relevant type from the user.

Adding custom components

Adding custom components to the component library involves adding a new class file to the components directory. You could add any custom components into a Manual or Custom directory to differentiate them from the bot-written components, but this is not required. If required, you will need to define props for your components. Component classes will also need to have the @observer annotation, as this will allow updates to observable properties to trigger the component to be re-rendered.